/* ============================================================
   HOME-AREE.CSS — la dashboard «Cosa Offro & Risorse»
   ------------------------------------------------------------
   Solo il blocco delle otto aree della home nuova. Il resto della
   pagina resta quello della home classica.

   Regola d'ingaggio: qui dentro non si scrive un colore. Ogni
   tinta arriva da css/tema.css tramite var(); le trasparenze si
   fanno con rgba(var(--brand-rgb), …) e i colori delle aree
   stanno nel tema come --area-*.

   L'idea: otto card corte, tutte della stessa altezza, tutte
   fatte allo stesso modo — filo colorato, icona, etichetta,
   titolo, UNA riga, due scorciatoie al massimo, un pulsante
   breve. Il colore dell'area colora il filo, il tondo e
   l'etichetta; non riempie la card, perche' otto card piene di
   otto colori diversi sono una cartella di pennarelli.
   ============================================================ */


/* ============================================================
   1. INTESTAZIONE DEL BLOCCO
   ============================================================ */
.aree-intestazione {
    width: 100%;
    margin-bottom: var(--sp-5);
    text-align: center;
}

.aree-intestazione h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.3rem);
    color: var(--brand);
    margin: 0 0 var(--sp-1);
}

.aree-intestazione p {
    color: var(--ink-2);
    font-size: 1.05rem;
    max-width: 56ch;
    margin-inline: auto;
}


/* ============================================================
   2. LA GRIGLIA
   Nove aree: una colonna sul telefono, due sul tablet, tre sullo
   schermo largo — 3x3 pieno, nessun buco.

   Niente auto-fit: con un numero fisso di card e' la larghezza
   dello schermo a decidere quante colonne, e a certe misure ne
   apre una vuota.

   Il caso scomodo e' il tablet: nove card in due colonne fanno
   quattro righe piene e una sola card in fondo. Restare a meta'
   riga, spaiata contro il bordo sinistro, si vede; allargarla per
   tutta la riga sarebbe peggio — diventerebbe una card enorme e
   bassa che non somiglia a nessuna delle altre, ed e' proprio
   quello che non vogliamo. Quindi resta larga come le sorelle e
   si mette in mezzo.
   ============================================================ */
.aree-griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    align-items: stretch;
}

@media (min-width: 600px) and (max-width: 1179px) {
    .aree-griglia {
        grid-template-columns: repeat(2, 1fr);
    }

    /* L'ultima card, se resta sola in fondo: stessa larghezza delle
       altre (meta' riga meno mezzo scarto), centrata. */
    .aree-griglia > .area:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - (var(--sp-4) / 2));
        margin-inline: auto;
    }
}

@media (min-width: 1180px) {
    .aree-griglia {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ============================================================
   3. LA CARD
   --area e' il colore di questa card: ogni area lo reimposta una
   volta sola, in fondo al foglio, e tutto il resto lo eredita.
   --area-testo esiste separato per un caso solo, i bambini: l'oro
   sta bene come fondo ma come scritta non si legge.
   ============================================================ */
.area {
    --area: var(--brand);
    --area-testo: var(--area);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    height: 100%;
    padding: var(--sp-4);
    padding-top: calc(var(--sp-4) + 4px);
    background: var(--card);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Il filo sopra la card: e' l'unico posto dove il colore dell'area
   si vede pieno per tutta la larghezza, ed e' abbastanza. */
.area::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--area);
}

.area:hover,
.area:focus-within {
    transform: translateY(-3px);
    border-color: var(--area);
    box-shadow: var(--shadow-sm);
}

/* --- il tondo dell'icona --- */
.area-icona {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--area);
    color: var(--card);
}

.area-etichetta {
    color: var(--area-testo);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.area h3 {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--ink);
}

/* La descrizione e' l'elemento elastico della card: si prende lei
   tutto lo spazio che avanza (flex: 1), cosi' le righe dei tag e i
   pulsanti finiscono alla stessa quota in tutta la riga anche quando
   una descrizione occupa due righe e un'altra tre. Prima erano i tag
   a ballare: misurati 1933px contro 1911px nella stessa fila. */
.area > p {
    flex: 1 1 auto;
    margin: 0;
    color: var(--ink-2);
    font-size: .92rem;
    line-height: 1.5;
}


/* ============================================================
   4. SCORCIATOIE — due al massimo
   Link e bottoni si assomigliano di proposito: per chi legge sono
   la stessa cosa. Il .chip-fermo e' un'etichetta e basta: non si
   clicca, e infatti non ha il bordo che inviterebbe a farlo.
   ============================================================ */
/* I tag stanno appesi al fondo, subito sopra il pulsante: e' quello
   che li tiene in riga fra card diverse. `nowrap` perche' una
   seconda riga di tag spingerebbe giu' il pulsante di quella sola
   card e romperebbe l'allineamento — dove non entrano, si accorcia
   l'etichetta o se ne tiene una sola. */
.area-chip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: auto;
    padding-top: var(--sp-2);
}

.chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--border-gray);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-2);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.chip:hover,
.chip:focus-visible {
    border-color: var(--area);
    color: var(--area-testo);
}

.chip:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}

.chip-fermo {
    background: var(--gray-light);
    border-color: transparent;
    cursor: default;
}

.chip-fermo:hover {
    border-color: transparent;
    color: var(--ink-2);
}


/* ============================================================
   5. IL PULSANTE — uno solo, e corto
   `margin-top: auto` lo spinge in fondo: le descrizioni hanno
   lunghezze diverse, ma i pulsanti restano sulla stessa riga
   d'occhio in tutta la griglia. E' l'unico motivo per cui una
   fila di card si legge come una fila.

   La parola dentro non va mai tagliata: il testo e' corto per
   scelta («Entra», «Scopri», «Vai ai materiali») e il pulsante e'
   largo quanto la card, quindi a 320px ci sta comodo.
   ============================================================ */
.area-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: var(--sp-2);
    padding: 11px 14px;
    background: var(--area);
    color: var(--card);
    border: 1px solid var(--area);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

.area-cta:hover,
.area-cta:focus-visible {
    filter: brightness(.9);
    color: var(--card);
}

.area-cta:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}


/* ============================================================
   6. I COLORI DELLE OTTO AREE
   Una riga per area: cambia --area e cambiano filo, tondo,
   etichetta, bordo al passaggio del mouse e pulsante.
   ============================================================ */
.area-ripetizioni { --area: var(--area-ripetizioni); }
.area-materiali   { --area: var(--area-materiali); }
.area-corsi       { --area: var(--area-corsi); }
.area-video       { --area: var(--area-video); }
.area-scuola      { --area: var(--area-scuola); }
.area-informatica { --area: var(--area-informatica); }
.area-strumenti   { --area: var(--area-strumenti); }
.area-giochi      { --area: var(--area-giochi); }

/* I bambini hanno l'oro, ed e' una scelta del Prof. Ma l'oro su
   bianco fa 1,94:1: da fondo va benissimo, da scritta non si
   legge. Quindi il tondo e il filo restano oro pieno, mentre
   l'etichetta e il pulsante usano lo stesso oro scurito (6,33:1)
   — stessa famiglia, stessa riconoscibilita', leggibile. */
.area-kids {
    --area: var(--area-kids);
    --area-testo: var(--area-kids-testo);
}

.area-kids .area-icona {
    color: var(--ink);          /* glifo scuro sull'oro: 9,19:1 */
}

.area-kids .area-cta {
    background: var(--area-kids-testo);
    border-color: var(--area-kids-testo);
}


/* ============================================================
   7. TELEFONO
   ============================================================ */
@media (max-width: 599px) {
    .aree-griglia {
        gap: var(--sp-3);
    }

    .area {
        padding: var(--sp-3);
        padding-top: calc(var(--sp-3) + 4px);
    }

    .area-icona {
        width: 48px;
        height: 48px;
    }
}


/* ============================================================
   8. DICONO DI ME — tre card basse
   ------------------------------------------------------------
   Erano 499px di altezza con le virgolette decorative giganti.
   Una citazione di due righe e un nome: chi legge una prova
   sociale la legge in tre secondi o non la legge affatto.
   ============================================================ */
.voci {
    padding-block: var(--sp-4);
}

.voci-titolo {
    margin: 0 0 var(--sp-3);
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--brand);
}

.voci-griglia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    align-items: stretch;
}

@media (min-width: 760px) {
    .voci-griglia {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stessa ricetta dei tag nella griglia, ed e' la regola generale: in
   una fila di card l'ultimo elemento si ancora in basso. Qui la
   citazione e' l'elemento elastico e la firma sta appesa al fondo,
   cosi' i tre «— Marco, Ingegneria» restano sulla stessa riga
   d'occhio anche quando una citazione occupa due righe e un'altra
   tre. */
.voce {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--card);
    border: 1px solid var(--border-gray);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

.voce blockquote {
    flex: 1 1 auto;
    margin: 0 0 var(--sp-1);
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.5;
}

.voce blockquote::before {
    content: "“";
}

.voce blockquote::after {
    content: "”";
}

.voce figcaption {
    margin-top: auto;
    color: var(--ink-2);
    font-size: .84rem;
    font-weight: 700;
}

.voce figcaption::before {
    content: "— ";
}


/* ============================================================
   9. COME INIZIARE — una striscia sola
   ------------------------------------------------------------
   Erano 469px: tre card bianche con le icone da 80px. Sono tre
   passi, non tre servizi: stanno in fila su una striscia, con il
   numero in un cerchietto. Sul telefono si impilano.
   ============================================================ */
.passi {
    padding-block: var(--sp-4);
}

.passi-titolo {
    margin: 0 0 var(--sp-2);
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--brand);
}

.passi-striscia {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    list-style: none;
    background: var(--gray-light);
    border-radius: var(--radius);
}

@media (min-width: 760px) {
    .passi-striscia {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-4);
    }
}

.passo {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.passo-numero {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--card);
    font-size: .85rem;
    font-weight: 800;
}

.passo b {
    display: block;
    color: var(--brand-deep);
    font-size: .98rem;
}

.passo span {
    display: block;
    color: var(--ink-2);
    font-size: .9rem;
    line-height: 1.45;
}


/* ============================================================
   10. DOVE ATTERRANO I SALTI
   ------------------------------------------------------------
   L'intestazione e' appiccicata in alto ed e' alta 77px: senza
   questo margine il titolo di destinazione finisce sotto la barra
   e sembra che il salto non abbia funzionato. Misurato: #offerta
   atterrava a 42px dal bordo, cioe' mezzo coperto.
   ============================================================ */
#offerta,
#contatti,
#sostieni,
#servizi {
    scroll-margin-top: 90px;
}