/* ============================================================
   Studio Terapeutico — foglio di stile del SITO PUBBLICO.

   Separato da app.css (che è del pannello) di proposito: chi visita
   il sito non deve scaricare il CSS dell'area riservata, e le due
   grafiche possono cambiare senza pestarsi i piedi.

   Nessun framework e nessun JavaScript necessario: il sito deve essere
   leggibile e usabile anche quando qualcosa non arriva. I due caratteri
   stanno sul nostro server e non da Google — nessuna richiesta a terzi,
   niente da dichiarare — e se non arrivassero il sito ripiega sul
   carattere di sistema senza cambiare impaginazione.

   L'impianto segue il wireframe « direzione D »: fascia d'apertura,
   quattro riquadri di contatto, poi due colonne — il contenuto a
   sinistra (2/3) e la colonna di servizio a destra (1/3) con orari e
   tariffa. Sul telefono le due colonne si incolonnano e la colonna di
   destra finisce PRIMA del contenuto, perché orari e recapiti sono ciò
   che si cerca da telefono.
   ============================================================ */

/* ---------- I caratteri ----------

   Inter per il testo (disegnato per gli schermi, numeri leggibili nei
   prezzi e negli orari) e IBM Plex Serif per i titoli. Entrambi a
   licenza libera, quindi ospitarli qui è regolare.

   `font-display: swap`: il testo si legge subito col carattere di
   sistema e cambia quando il file arriva. Meglio una riga che cambia
   aspetto per un attimo che una pagina bianca.

   I file sono tagliati al solo alfabeto latino: 17-27 KB l'uno invece
   dei 300 dell'originale. `unicode-range` serve a non farli nemmeno
   scaricare se in pagina non c'è nessun carattere che coprono. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400i.woff2") format("woff2");
    font-weight: 400; font-style: italic; font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}
@font-face {
    font-family: "Plex Serif";
    src: url("../fonts/plexserif-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}

:root {
    --testo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --titoli: "Plex Serif", Georgia, "Times New Roman", serif;

    --inchiostro: #1e2733;
    --tenue: #5d6875;
    --accento: #254aa5;          /* il blu del logo, preso dal file originale */
    --accento-scuro: #1b3878;
    --fondo: #fbfaf8;            /* carta calda, non bianco clinico */
    --carta: #ffffff;
    --tinta: #eef2f8;            /* fasce e riquadri */
    --bordo: rgba(30, 39, 51, .12);
    --raggio: 14px;
    --ombra: 0 1px 2px rgba(30, 39, 51, .05), 0 8px 24px rgba(30, 39, 51, .05);

    --colonna: 1120px;           /* larghezza massima del contenuto */
    --lettura: 68ch;             /* lunghezza di riga leggibile */
    --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--testo);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--inchiostro);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }

/* L'attributo `hidden` deve vincere sul `display` dichiarato più sotto:
   i comandi del carosello arrivano nascosti e li scopre lo script, e senza
   questa riga si vedrebbero anche a JavaScript spento, senza fare niente. */
[hidden] { display: none !important; }

a { color: var(--accento); text-underline-offset: 3px; }
a:hover { color: var(--accento-scuro); }

/* I titoli in tondo con grazie. Niente `letter-spacing` negativo: era
   una correzione per il carattere di sistema, che disegna le lettere
   più larghe; sul Plex Serif stringerebbe e basta. */
h1, h2, h3,
.contatto__titolo, .scheda__titolo, .attivita-voce__titolo {
    font-family: var(--titoli);
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Il salto al contenuto serve a chi naviga da tastiera: è il primo
   elemento attivabile della pagina e resta invisibile finché non
   riceve il fuoco. */
.salta {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accento);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 10;
}
.salta:focus { left: .5rem; top: .5rem; }

/* Testo che serve a chi usa un lettore di schermo e non a chi guarda:
   la didascalia di una tabella, l'etichetta di un campo evidente. */
.visivamente-nascosto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid var(--accento);
    outline-offset: 2px;
    border-radius: 4px;
}

.colonna {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* La testata è più larga del contenuto: sei voci di menu accanto al
   logo non stanno in 1120 px, e mandarle a capo è peggio che allargare
   la fascia. */
.colonna--larga { max-width: 1280px; }

/* ---------- Testata ---------- */

.testata {
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 5;
}

.testata__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 6.25rem;
}

.marchio {
    display: inline-flex;
    align-items: center;
    color: var(--accento);
    text-decoration: none;
    flex: 0 0 auto;
}
.marchio img { height: 4.5rem; width: auto; }

/* Menu: su schermo largo una riga di link, su telefono un pannello che
   si apre. L'interruttore è una casella di spunta nascosta: niente
   JavaScript, e le voci restano sempre nel documento (a differenza di
   <details>, che nasconde davvero il contenuto quando è chiuso). */
.navigazione { position: relative; }

/* L'interruttore del menu serve solo dove il menu è a scomparsa. Su
   schermo largo non esiste proprio: lasciarlo nascosto ma raggiungibile
   voleva dire far incontrare a chi naviga da tastiera una casella
   invisibile e senza nome, prima ancora dei collegamenti. */
.menu__interruttore { display: none; }

.menu__pulsante {
    display: none;
    cursor: pointer;
    padding: .55rem .9rem;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    font-size: .95rem;
    background: var(--carta);
    user-select: none;
}
.menu__interruttore:focus-visible + .menu__pulsante {
    outline: 3px solid var(--accento);
    outline-offset: 2px;
}

.menu__voci {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu__voci a {
    display: block;
    padding: .42rem .62rem;
    border-radius: 8px;
    color: var(--inchiostro);
    text-decoration: none;
    font-size: .94rem;
    white-space: nowrap;
}
.menu__voci a:hover { background: var(--tinta); color: var(--accento-scuro); }
.menu__voci a[aria-current="page"] {
    color: var(--accento);
    font-weight: 600;
    background: var(--tinta);
}

/* Il marchio è fine di suo: sotto una certa misura le due righe piccole
   non si leggono più. Cala per gradi invece di sparire d'un colpo. */
@media (max-width: 1100px) {
    .marchio img { height: 3.9rem; }
    .testata__interno { min-height: 5.5rem; }
}

@media (max-width: 860px) {
    .marchio img { height: 3.4rem; }
    .testata__interno { min-height: 5rem; }

    /* Qui invece serve: fuori dalla vista ma azionabile, perché è lui a
       tenere aperto o chiuso il menu senza una riga di JavaScript. */
    .menu__interruttore {
        display: block;
        position: absolute;
        width: 1px; height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .menu__pulsante { display: inline-block; }
    .menu {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + .6rem);
        min-width: 15rem;
        max-width: calc(100vw - 2 * var(--gutter));
        padding: .4rem;
        background: var(--carta);
        border: 1px solid var(--bordo);
        border-radius: var(--raggio);
        box-shadow: var(--ombra);
    }
    .menu__interruttore:checked ~ .menu { display: block; }
    .menu__interruttore:checked ~ .menu__pulsante {
        border-color: var(--accento);
        color: var(--accento);
    }
    .menu__voci { flex-direction: column; gap: 0; }
    .menu__voci a { padding: .65rem .7rem; }
}

/* ---------- Fascia d'apertura ---------- */

/* L'immagine tiene le sue proporzioni (le slide sono panoramiche,
   1717×639): su schermo largo è una fascia ampia, su telefono si
   riduce da sola a una striscia bassa. */
.eroe { position: relative; background: var(--tinta); }
.eroe picture, .eroe img { width: 100%; }
.eroe img {
    aspect-ratio: 1717 / 639;
    object-fit: cover;
    max-height: 62vh;
}

/* ---------- Carosello ---------- */

/* Le foto sono impilate una sull'altra e si scambiano in dissolvenza.
   Finché lo script non è entrato in funzione (`.eroe--attivo`) le foto
   oltre la prima restano fuori dal flusso: senza JavaScript si vede una
   foto sola, ferma, non sei una sotto l'altra. */
.eroe--carosello .eroe__foto { position: relative; }
.eroe--carosello .eroe__slide { display: none; }
.eroe--carosello .eroe__slide.attiva { display: block; }

.eroe--attivo .eroe__slide {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.eroe--attivo .eroe__slide.attiva {
    position: relative;
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .eroe--attivo .eroe__slide { transition: none; }
}

.eroe__freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: var(--inchiostro);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.eroe__freccia:hover { background: #fff; }
.eroe__freccia svg { width: 1.15rem; height: 1.15rem; }
.eroe__freccia--indietro { left: .75rem; }
.eroe__freccia--indietro svg { transform: rotate(180deg); }
.eroe__freccia--avanti { right: .75rem; }

.eroe__punti {
    position: absolute;
    z-index: 2;
    left: 0; right: 0;
    bottom: .8rem;
    display: flex;
    justify-content: center;
    /* Lo spazio non è estetica: serve perché le aree toccabili qui sotto,
       che sono molto più larghe del pallino, non si accavallino — se no
       il dito preme il pallino accanto. */
    gap: .95rem;
}
.eroe__punto {
    position: relative;
    width: .6rem; height: .6rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
    touch-action: manipulation;
}

/* Il pallino resta piccolo perché sta sopra una fotografia e non deve
   coprirla; ma dieci pixel sono meno della metà di quello che un dito
   riesce a colpire. L'area sensibile è quindi 24 px, invisibile e
   centrata sul pallino: si vede lo stesso disegno di prima e si preme
   quello che si voleva premere. */
.eroe__punto::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}
.eroe__punto.attivo { background: #fff; transform: scale(1.25); }

/* Sul telefono la fascia è bassa: le frecce si stringono e i pallini
   scendono sotto la citazione, dove non coprono niente. */
@media (max-width: 860px) {
    .eroe__freccia { width: 2.35rem; height: 2.35rem; top: 33%; }
    .eroe__punti { position: static; padding: .6rem 0; background: var(--tinta); }
    .eroe__punto { background: rgba(30, 39, 51, .25); box-shadow: none; }
    .eroe__punto.attivo { background: var(--accento); }
}

/* Su schermo largo la citazione sta SOPRA la foto, come nel wireframe.
   Il velo scuro non è un vezzo: senza, il testo bianco finisce su una
   parete chiara e non si legge più. */
.eroe__citazione {
    background: var(--accento);
    color: #fff;
}
.eroe__citazione blockquote {
    margin: 0;
    padding-block: 1.1rem 1.2rem;
    max-width: 46ch;
    font-size: 1.05rem;
    line-height: 1.5;
}
.eroe__citazione p { margin: 0; }

@media (min-width: 861px) {
    .eroe__citazione {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        /* Il velo è la metà di quello che era: le foto dello studio sono
           già chiare di loro e con più buio davanti sembravano spente.
           A tenere leggibile la citazione è soprattutto l'ombra qui
           sotto, che scurisce solo il contorno delle lettere invece di
           tutta la fotografia. */
        background: linear-gradient(
            90deg,
            rgba(8, 22, 44, .44) 0%,
            rgba(8, 22, 44, .28) 40%,
            rgba(8, 22, 44, 0) 62%
        );
    }
    .eroe__citazione blockquote {
        font-size: clamp(1.15rem, .8rem + 1vw, 1.6rem);
        font-style: italic;
        padding-block: 0;
        /* Due ombre: una stretta che stacca il bordo delle lettere, una
           larga che spegne quello che c'è dietro. */
        text-shadow:
            0 1px 2px rgba(0, 20, 40, .9),
            0 2px 18px rgba(0, 20, 40, .8);
    }
}

/* ---------- Sezioni ---------- */

.sezione { padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.sezione--stretta { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.sezione--tinta { background: var(--tinta); }
.sezione__titolo { margin-bottom: .35rem; }
.sezione__intro { max-width: var(--lettura); color: var(--tenue); }

/* ---------- I quattro riquadri di contatto ---------- */

.contatti {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.contatto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.05rem 1.2rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    text-decoration: none;
    color: inherit;
}
a.contatto:hover { border-color: var(--accento); }

.contatto__icona { color: var(--accento); margin-bottom: .35rem; }
.contatto__icona svg { width: 1.4rem; height: 1.4rem; display: block; }
.contatto__titolo { font-weight: 600; }
.contatto__valore {
    color: var(--tenue);
    font-size: .98rem;
    /* `break-word` e non `anywhere`: spezza solo quando una parola non
       ci sta davvero, invece di tagliare l'email a metà per guadagnare
       due pixel. */
    overflow-wrap: break-word;
}
a.contatto .contatto__valore { color: var(--accento); }

/* La fascia « su appuntamento » sopra Chiamami e Scrivimi.
   « Vieni a trovarmi » e « Orari » restano alti quanto la riga intera:
   sono le due colonne esterne, e la fascia si incastra fra loro
   prendendo l'altezza che i due riquadri sotto le lasciano. */
@media (min-width: 900px) {
    .contatti--nota {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "dove nota nota orari"
            "dove tel  mail orari";
    }
    .contatti--nota .contatto--dove  { grid-area: dove; }
    .contatti--nota .contatto--nota  { grid-area: nota; }
    .contatti--nota .contatto--tel   { grid-area: tel; }
    .contatti--nota .contatto--mail  { grid-area: mail; }
    .contatti--nota .contatto--orari { grid-area: orari; }
}

/* Fascia intermedia: due colonne, e la nota le prende tutte e due. */
@media (min-width: 621px) and (max-width: 899px) {
    .contatti--nota { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contatti--nota .contatto--nota { grid-column: 1 / -1; }
}

/* La nota non è un recapito: niente valore sotto al titolo, quindi
   icona e testo stanno sulla stessa riga invece che incolonnati. */
.contatto--nota {
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}
.contatto--nota .contatto__icona { margin-bottom: 0; }

@media (max-width: 620px) {
    .contatti { grid-template-columns: 1fr; gap: .75rem; }
    .contatto { padding: .9rem 1.05rem; }
}

/* ---------- Due colonne: contenuto + colonna di servizio ---------- */

.impianto {
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 900px) {
    .impianto { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* Sul telefono la colonna di servizio (orari, tariffa) viene PRIMA:
   chi apre il sito dal telefono cerca l'orario, non la presentazione
   dei trattamenti. Su schermo largo torna a destra. */
@media (max-width: 899px) {
    .impianto__lato { order: -1; }
}

.impianto__lato {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scheda {
    padding: 1.25rem 1.35rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}
.scheda__titolo {
    margin: 0 0 .7rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.scheda__riga { font-size: 1.05rem; font-weight: 600; }
.scheda__nota { margin-top: .35rem; font-size: .92rem; color: var(--tenue); }

/* ---------- Orari ---------- */

.orari {
    width: 100%;
    border-collapse: collapse;
}
.orari th, .orari td {
    padding: .42rem 0;
    text-align: left;
    border-bottom: 1px solid var(--bordo);
    font-weight: 400;
    font-size: .98rem;
}
.orari td { text-align: right; font-variant-numeric: tabular-nums; }
.orari tr:last-child th, .orari tr:last-child td { border-bottom: 0; }
.orari .oggi th, .orari .oggi td { font-weight: 700; color: var(--accento); }
.orari .chiuso td { color: var(--tenue); }

/* Il posto accanto al giorno, per i giorni fuori sede. */
.orari__sede {
    color: var(--tenue);
    font-size: .92em;
}
.orari__sede::before { content: " — "; }
.orari .altrove td { color: var(--tenue); }

.orari__nota {
    margin-top: .75rem;
    font-size: .92rem;
    font-style: italic;
    color: var(--tenue);
}

/* L'indicazione di apertura è sempre lo stesso riquadro, largo quanto la
   scheda: che dica « Aperto ora » su una riga o « Oggi chiuso » con la
   riapertura sotto, la forma non cambia e il bordo destro resta in linea
   con gli orari. Una striscia che cambia lunghezza a seconda del giorno
   fa ballare la scheda. */
.stato-apertura {
    display: block;
    width: 100%;
    margin-bottom: .9rem;
    padding: .5rem 1rem .55rem;
    border-radius: var(--raggio);
    background: var(--accento);
    color: #fff;
    font-weight: 600;
    font-size: .93rem;
    text-align: center;
}
.stato-apertura--chiuso { background: var(--inchiostro); }

/* Le due parti sono blocchi distinti: così la riapertura va a capo dove
   deve, e non dove capita. */
.stato-apertura__voce { display: block; }
.stato-apertura__poi {
    display: block;
    font-weight: 400;
    opacity: .85;
}

/* ---------- Elenco delle attività (home) ---------- */

.elenco-attivita { border-top: 1px solid var(--bordo); }

.attivita-voce {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 1rem;
    align-items: baseline;
    gap: 0 .5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--bordo);
    text-decoration: none;
    color: inherit;
}
.attivita-voce:hover { color: var(--accento-scuro); }
.attivita-voce:hover .attivita-voce__titolo { color: var(--accento); }

.attivita-voce__numero {
    font-size: .82rem;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
}
.attivita-voce__titolo { font-weight: 600; font-size: 1.08rem; }
.attivita-voce__riassunto {
    grid-column: 2;
    color: var(--tenue);
    font-size: .97rem;
    margin-top: .1rem;
}
.attivita-voce__freccia { color: var(--tenue); align-self: center; }

@media (max-width: 620px) {
    .attivita-voce { grid-template-columns: 1.9rem minmax(0, 1fr) .9rem; }
    .attivita-voce__titolo { font-size: 1.02rem; }
}

/* ---------- Trattamenti per esteso (pagina Attività) ---------- */

/* Una banda per trattamento: foto da una parte, testo dall'altra, e il
   lato della foto si scambia a ogni riga. Il documento tiene sempre
   l'ordine foto-testo; a spostare la foto a destra è la griglia, così
   l'alternanza resta una cosa dell'occhio e non della lettura. */
.trattamenti {
    display: grid;
    gap: 2rem;

    /* Il lato del quadrato in cui sta ogni foto. Cambiarlo qui cambia
       tutte le foto della pagina, e restano tutte della stessa misura.
       Sul telefono, dove 20rem non ci starebbero, scende alla larghezza
       disponibile: se scendesse solo la larghezza, le orizzontali si
       rimpicciolirebbero e le verticali no. */
    --foto-lato: min(20rem, 100vw - 6rem);
}

.trattamento {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    padding: 1.4rem 1.5rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.trattamento--foto { grid-template-columns: minmax(0, var(--foto-lato)) minmax(0, 1fr); }

/* Righe pari: la foto passa a destra. Si scambiano anche le colonne, se
   no la foto finirebbe in quella del testo e viceversa. */
.trattamento--foto:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, var(--foto-lato)); }
.trattamento--foto:nth-of-type(even) .trattamento__foto { grid-column: 2; grid-row: 1; }
.trattamento--foto:nth-of-type(even) .trattamento__corpo { grid-column: 1; grid-row: 1; }

/* Le foto arrivano in verticale e in orizzontale. Ognuna sta dentro lo
   stesso quadrato e ci entra INTERA: quelle larghe ne toccano i due
   lati, quelle alte toccano sopra e sotto, e nessuna viene tagliata —
   sono foto di trattamenti, e ritagliarle vorrebbe dire togliere
   proprio quello che mostrano.

   Il lato del quadrato è una misura vera (--foto-lato), non una
   percentuale né una proporzione da dedurre: è l'altezza del riquadro
   ed è il limite dell'immagine. Un limite in percentuale obbliga il
   browser a ricavare prima l'altezza del riquadro, e non tutti la
   ricavano allo stesso modo — dove non ci riescono la foto verticale
   si allunga senza fermarsi. Con una misura vera non c'è niente da
   dedurre e il quadrato è lo stesso ovunque.

   Il quadrato non si vede: è spazio, non un riquadro. La foto ci sta
   dentro centrata e gli angoli arrotondati sono sull'immagine vera.
   Una foto più piccola del quadrato resta della sua misura:
   ingrandirla la sgranerebbe soltanto. */
.trattamento__foto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--foto-lato);
    max-width: var(--foto-lato);
    margin: 0 auto;
}

.trattamento__foto picture {
    display: block;
    max-width: 100%;
    line-height: 0;
}

.trattamento__foto img {
    display: block;
    max-width: 100%;
    max-height: var(--foto-lato);
    width: auto;
    height: auto;
    border-radius: var(--raggio);
}

/* Il titolo del trattamento è un h2 (vedi _trattamenti.php) ma resta
   della misura di prima: il livello dice la struttura, non il corpo. */
.trattamento h2 {
    color: var(--accento-scuro);
    margin-bottom: .4rem;
    font-size: 1.125rem;
}
.trattamento__testo { font-size: .99rem; }
.trattamento__esempio {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bordo);
    font-size: .93rem;
    color: var(--tenue);
}
.trattamento__esempio strong { color: var(--inchiostro); }

/* Su schermo stretto una colonna sola, con la foto sopra al testo. Il
   quadrato resta: è quello che tiene le foto tutte della stessa misura. */
@media (max-width: 780px) {
    .trattamenti { gap: 1.5rem; }
    .trattamento--foto,
    .trattamento--foto:nth-of-type(even) { grid-template-columns: 1fr; }
    .trattamento--foto:nth-of-type(even) .trattamento__foto,
    .trattamento--foto:nth-of-type(even) .trattamento__corpo {
        grid-column: 1;
        grid-row: auto;
    }
}

/* ---------- Testo lungo ---------- */

.prosa { max-width: var(--lettura); }
.prosa h2 { margin-top: 1.8em; }
.prosa h2:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1em; }
.prosa li { margin-bottom: .35em; }
.prosa blockquote {
    margin: 1.4em 0;
    padding-left: 1.1em;
    border-left: 3px solid var(--accento);
    color: var(--tenue);
}

.pagina__titolo {
    margin-bottom: 0;
    padding-bottom: clamp(1rem, 2.5vw, 1.6rem);
    border-bottom: 1px solid var(--bordo);
}

.pagina__figura {
    margin: 0;
    border-radius: var(--raggio);
    overflow: hidden;
    border: 1px solid var(--bordo);
}
.pagina__figura img { width: 100%; }

/* ---------- Mappa ---------- */

.mappa {
    aspect-ratio: 21 / 9;
    max-height: 28rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    background: var(--carta);
}
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa__link { margin-top: .75rem; font-size: .95rem; }

@media (max-width: 620px) {
    .mappa { aspect-ratio: 4 / 3; }
}

/* ---------- Bottoni ---------- */

.bottone {
    display: inline-block;
    padding: .7rem 1.35rem;
    border-radius: 999px;
    background: var(--accento);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.bottone:hover { background: var(--accento-scuro); color: #fff; }
.bottone--chiaro {
    background: transparent;
    color: var(--accento);
    border: 1px solid var(--accento);
}
.bottone--chiaro:hover { background: var(--tinta); color: var(--accento-scuro); }

/* ---------- Piè di pagina ---------- */

.piede {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-block: 2rem;
    background: var(--inchiostro);
    color: #cfd6de;
    font-size: .95rem;
}
.piede a { color: #fff; }
.piede__griglia {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.piede__titolo { color: #fff; font-weight: 600; margin-bottom: .35rem; }
.piede__coda {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .88rem;
    color: #9aa5b1;
}
.piede__coda p { margin: 0; }

/* Privacy e Admin stanno insieme in fondo: sono le due voci di servizio,
   non contenuto del sito. */
.piede__servizio { display: flex; gap: .55rem; }
.piede__servizio span { opacity: .5; }

/* ---------- Stampa ---------- */

@media print {
    .testata, .navigazione, .eroe, .mappa { display: none; }
    body { background: #fff; font-size: 11pt; }
    .impianto { display: block; }
    .piede { background: none; color: #000; margin-top: 1rem; }
    .piede a { color: #000; }
}

/* ---------- Casse malati ---------- */

/* Chi arriva dal vecchio collegamento all'allegato atterra qui. Il
   margine tiene conto di due cose: la testata è appiccicata in cima e
   coprirebbe la prima riga, e soprattutto sopra l'elenco c'è la frase
   che dice che il rimborso passa dalla complementare — atterrare sotto
   quella frase vorrebbe dire far leggere l'elenco senza la premessa che
   lo rende comprensibile. */
#casse { scroll-margin-top: 16rem; }

.casse__cerca { margin-bottom: 1.25rem; max-width: 24rem; }
.casse__cerca label {
    display: block;
    margin-bottom: .35rem;
    font-size: .93rem;
    color: var(--tenue);
}
.casse__cerca input {
    width: 100%;
    padding: .6rem .8rem;
    font: inherit;
    color: inherit;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.casse__cerca input:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 1px;
}

/* Più colonne quante ne stanno: si dice quanto deve essere larga una
   colonna e il browser decide quante farne. Su un telefono ne fa una,
   su un portatile tre o quattro, senza soglie da indovinare. */
.casse__elenco {
    columns: 13rem;
    column-gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.casse__elenco li {
    break-inside: avoid;
    padding: .3rem 0;
    border-bottom: 1px solid var(--bordo);
    font-size: .97rem;
}

.casse__vuoto {
    margin: 0;
    padding: 1rem 1.15rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    max-width: 34rem;
}

.casse__conteggio:empty { display: none; }
.casse__conteggio { margin-top: .9rem; }