/* Stili della sola pagina di presentazione (templates/landing.php), caricati dal layout solo lì.
   Usa i colori e i caratteri di style.css (nero, rosso, Roboto). Regola di Alessio (28/10/2026): niente linea nera sotto i
   titoli, una linea grigio chiaro separa un blocco dall'altro. Prima bozza solo testo (02/11/2026). */

/* Nell'intestazione il pulsante «Registrati» è piccolo, come gli altri pulsanti lì */
body > header .button { padding: .35rem .9rem; font-size: .95rem; }

.landing { max-width: 52rem; margin: 0 auto; }

/* Titoli: nessuna linea sotto (i blocchi sono separati da linee grigie) */
.landing h2 { margin: 0 0 .75rem; padding: 0; font-size: 1.4rem; border-bottom: 0; }
.landing section { padding: 2.25rem 0; border-top: 1px solid var(--line); }
.landing section:first-child { border-top: 0; padding-top: 1rem; }

/* Presentazione in cima */
.landing .hero h1 { margin-bottom: 1rem; font-size: 2.1rem; line-height: 1.15; }
.landing .lead { max-width: 40rem; font-size: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 .75rem; }
.landing .hint { color: #555; font-size: .9rem; }

/* Tre passi: affiancati su schermo largo, uno sotto l'altro su smartphone */
.steps, .features { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.steps { grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(2, 1fr); }
.steps li, .features li { padding: 1rem 1.1rem; border: 1px solid var(--line); }
.steps h3, .features h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.steps p, .features p { margin: 0; }
.step-number {
    display: inline-block; width: 2rem; height: 2rem; margin-bottom: .6rem;
    line-height: 2rem; text-align: center; font-weight: 700;
    color: var(--paper); background: var(--ink);
}

/* Domande frequenti: ogni domanda si apre con un clic (funziona anche senza JavaScript) */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { padding: .85rem 0; font-weight: 500; cursor: pointer; }
.faq summary:hover { text-decoration: underline; }
.faq details p { margin: 0 0 1rem; }

@media (max-width: 40rem) {
    .landing .hero h1 { font-size: 1.7rem; }
    .landing .lead { font-size: 1.1rem; }
    .steps, .features { grid-template-columns: 1fr; }
    /* i due pulsanti uno sotto l'altro, a tutta larghezza */
    .hero-actions .button { flex: 1 1 100%; text-align: center; }
}

/* ---------- Disegni (templates/partials/landing_art.php): statici, solo nero e rosso ---------- */
.landing .hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 2.5rem; align-items: center; }
.hero-art { padding-right: 10px; }   /* spazio per l'ombra nera del riquadro */
.landing-art { display: block; width: 100%; height: auto; }
.la-shadow { fill: var(--ink); }
.la-frame { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.la-title { font: 700 19px Roboto, Arial, sans-serif; fill: var(--ink); }
.la-label { font: 500 16px Roboto, Arial, sans-serif; fill: var(--ink); }
.la-amount { font: 700 17px Roboto, Arial, sans-serif; fill: var(--ink); }
.la-amount.la-red { fill: var(--red); }
.la-amount.la-big { font-size: 26px; }
.la-label.la-strong { font-weight: 700; font-size: 18px; }
.la-rule { stroke: var(--line); stroke-width: 2; }
.la-bar-ink { fill: var(--ink); }
.la-bar-red { fill: var(--red); }

.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.step-top .step-number { margin-bottom: 0; }
.landing-icon { width: 3rem; height: 3rem; flex: none; }
.li-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.li-fill { fill: var(--ink); }
.li-dot { fill: var(--ink); }
.li-red { stroke: var(--red); }

@media (max-width: 48rem) {
    .landing .hero { grid-template-columns: 1fr; }
    /* smartphone: il disegno del titolo non si mostra (Alessio, 02/11/2026: provato dopo i pulsanti, in cima e come sfondo, bocciato in tutti e tre i modi). Resta solo su schermo largo. */
    .hero-art { display: none; }
}