/* ============================================================
   xd-sezioni.css — l'anatomia comune alle tre pagine dell'XD
   «BOTTEGA - SHOPPING IN BOTTEGA - SCUOLA»

   Le tre pagine sono disegnate con la STESSA impalcatura: apertura con
   titolone, riga di ancore, sezioni a due colonne (intestazione a sinistra,
   testo nella colonna di mezzo), immagini al vivo fra una sezione e l'altra.
   Scriverla tre volte avrebbe voluto dire correggerla tre volte: sta qui una
   volta sola, e ogni pagina aggiunge nel suo foglio solo cio' che ha di
   proprio (i ritratti della Bottega, le recensioni dello Shopping, il video
   e il form della Scuola).

   ⚠ Misure in PROPORZIONE, non in pixel. L'artboard desktop e' largo 5120 e
   il body qui e' 1425 a 1440 di finestra (`scrollbar-gutter: stable` riserva
   15px alla barra), 375 a 390. Un «x=1510» dell'artboard vale 29,5% del
   foglio, ed e' come 29,5% che e' scritto qui.

   Scala dei corpi, presa dai rapporti dell'artboard (82 : 50 : 35 fra
   titolone, intestazione e testo) e agganciata al corpo del tema: 14px di
   testo danno ~20px di intestazione e ~32px di titolo, cioe' esattamente il
   token `--bb-h1-hero` gia' usato dagli altri hero (NEW-333).
   ============================================================ */

.bb-xd {
  --bb-xd-col-tit: 29.5%;    /* 1510 / 5120 */
  --bb-xd-col-testo: 41%;    /* 2101 / 5120 */
  --bb-xd-titolino: clamp(14px, 1.4vw, 20px);
  color: var(--bb-fg, #111);
  font-size: var(--bb-body, 14px);
}

/* ============================================================
   APERTURA
   ============================================================ */
.bb-xd-apertura {
  text-align: center;
  padding-block: clamp(48px, 8vw, 150px) clamp(28px, 4vw, 70px);
}

/* ============================================================
   LE ANCORE
   ============================================================
   Sul desktop in riga centrata; sul telefono l'artboard le disegna TAGLIATE a
   destra, non mandate a capo: scorrono di lato invece di impilarsi. */
.bb-xd-ancore {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 64px);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: var(--bb-gutter, 16px);
}
.bb-xd-ancore::-webkit-scrollbar { display: none; }

.bb-xd-ancore__voce {
  flex: 0 0 auto;

  /* ⚠ [NEW-368] Stessa misura del sotto-menu delle altre pagine interne.
     Era `clamp(11px, 1.1vw, 16px)`, che a 1440 dava 15,8px mentre Repair e
     Club stanno a 12 (`var(--bb-small)` in pagine-interne.css): tre pagine
     con lo stesso elemento e due misure diverse. Si usa il TOKEN del
     modello, non il numero, cosi' restano legate.

     ⚠ Nota per il verbale: il task diceva «piu' piccole di quelle di
     bottega-bruzziches», ma misurando bottega NON HA un sotto-menu — ce
     l'hanno solo Repair (12), Club (12) e Scuola (15,8). La pagina fuori
     riga era la Scuola. */
  font-size: var(--bb-small, 12px);
  letter-spacing: var(--bb-ls-title, .12em);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;

  /* [NEW-396] Era un bordo sotto, largo quanto la voce, che compariva al
     passaggio: la riga ESTESA che Fabio non vuole piu'. Ora al passaggio
     cresce il trattino da 22px centrato (sistema NEW-47, in
     99-overrides.css). L'aria sotto resta: e' dove si appoggia. */
  padding-bottom: 4px;
}

/* ============================================================
   IMMAGINI AL VIVO
   ============================================================
   ⚠ `width: auto` e' indispensabile: con `width: 100%` i margini negativi
   sposterebbero il riquadro invece di allargarlo. Il margine vale esattamente
   il token del gutter, quindi segue da solo il clamp quando cambia la
   larghezza — nessun numero scritto a mano. (Stessa cura di NEW-331.) */
.bb-xd-vivo {
  width: auto;
  margin: clamp(28px, 4vw, 72px) calc(-1 * var(--bb-gutter, 16px));
}
.bb-xd-vivo img {
  display: block;
  width: 100%;
  /* ⚠ L'ALTEZZA la detta il disegno, non il file.
     Sull'artboard queste immagini sono tutte 5088x2586, cioe' un rapporto di
     1,967 — quasi 2:1, una fascia larga e bassa. I file invece hanno rapporti
     loro (simone-bossi-102 e' 2500x2138, cioe' 1,17): lasciandoli liberi
     uscivano alte quasi il doppio del previsto e la pagina diventava una
     colonna di fotografie.

     Il rapporto si scrive come la frazione dell'artboard invece che come
     numero: cosi' chi legge sa DA DOVE viene, e se un domani il disegno
     cambia si sostituiscono le due misure.

     `object-fit: cover` ritaglia invece di deformare: una foto schiacciata si
     vede subito, una ritagliata no. Chi inquadra decide cosa tenere, e per
     questo il punto di ritaglio e' al centro — se per una foto specifica
     servisse un altro baricentro, si aggiunge una classe a quella e basta. */
  aspect-ratio: 5088 / 2586;
  height: auto;
  object-fit: cover;
}

/* [NEW-420] Quando una foto ha il ritaglio per il telefono, l'<img> sta in un
   <picture>: display:contents lo toglie dal layout, cosi' l'<img> resta figlia
   della figure e la regola .bb-xd-vivo img qui sopra la prende per discendenza. */
.bb-xd-vivo picture {
  display: contents;
}

/* [NEW-420] Sul telefono le figure MARCATE passano dalla fascia orizzontale
   (5088/2586) al 4:5 in piedi, come negli artboard del telefono. Il
   `<source media="(max-width:767px)">` serve il ritaglio verticale; qui il box
   lo accoglie. Solo le figure col ritaglio: le altre .bb-xd-vivo (foto che
   l'XD mobile lascia come sono) non si toccano. Desktop invariato. */
@media (max-width: 767px) {
  .bb-xd-vivo--mobile45 img {
    aspect-ratio: 1170 / 1456;
  }
}

/* ============================================================
   SEZIONI A DUE COLONNE
   ============================================================
   L'artboard mette l'intestazione nella fascia 0→29,5% e il testo da 29,5% a
   70,5%, lasciando vuoto il terzo di destra. */
.bb-xd-sezione {
  display: grid;
  grid-template-columns: var(--bb-xd-col-tit) var(--bb-xd-col-testo);
  gap: 0 clamp(16px, 2vw, 48px);
  padding-block: clamp(36px, 5vw, 110px);
  /* le ancore portano qui: il titolo non deve finire sotto l'intestazione */
  scroll-margin-top: 90px;
}

/* ⚠ DUE classi anche qui, e non per simmetria: MISURATO in pagina.
   - sotto i 768px vince `.site h2` di Shoptimizer (0,1,1) con un clamp che a
     390 da' 22px, esattamente come faceva `.site h1` col titolo (NEW-198 e
     NEW-333). Avevo protetto l'H1 e non le intestazioni: stessa trappola,
     stessa famiglia, e si e' ripresentata.
   - sulla Bottega vince anche `.elementor-kit-6 h2` (0,1,1) con 28px, a
     TUTTE le larghezze: il kit di Elementor si carica anche dove Elementor
     non si usa (famiglia NEW-117/194, e il punto di NEW-342).
   `.bb-xd .bb-xd-sezione__titolo` vale 0,2,0 e le batte entrambe senza
   ricorrere a !important. */
.bb-xd .bb-xd-sezione__titolo {
  grid-column: 1;
  margin: 0;
  text-align: right;
  font-size: var(--bb-xd-titolino);
  font-weight: 400;
  letter-spacing: var(--bb-ls-title, .12em);
  text-transform: uppercase;
  line-height: 1.3;
}

.bb-xd-sezione__testo {
  grid-column: 2;
}

/* ⚠ [NEW-368] I PARAGRAFI in Playfair, come su Repair e Club. Il riferimento
   e' la PAGINA VIVA e non l'XD (gli artboard non sono aggiornati): misurando,
   le pagine su `page-interna.php` avevano gia' il testo in Playfair 14 e
   queste tre in Jost 14.

   ⚠ La regola sta sugli ELEMENTI DI TESTO e NON sul contenitore, e non e' un
   dettaglio: messa su `.bb-xd-sezione__testo` l'avevano ereditata anche i
   figli che non c'entrano — gli inviti, il bottone del modulo Scuola, la
   griglia degli insegnanti — e le CTA, che erano gia' giuste in Jost, erano
   diventate Playfair su tutte e tre le pagine. Visto misurando DOPO la
   modifica. Si usa il token del modello, non il nome del font: il giorno che
   il carattere editoriale cambia, cambia in un posto solo. */
.bb-xd-sezione__testo p,
.bb-xd-sezione__testo ul,
.bb-xd-sezione__testo ol {
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
}
.bb-xd-sezione__testo p {
  margin: 0 0 1.4em;
  font-size: var(--bb-body, 14px);
  line-height: 1.75;
  letter-spacing: var(--bb-ls-tight, .02em);
}
.bb-xd-sezione__testo ul {
  margin: 0 0 1.4em;
  padding-left: 1.1em;
  font-size: var(--bb-body, 14px);
  line-height: 1.75;
}
.bb-xd-sezione__testo li { margin-bottom: .35em; }

/* I paragrafi in NERO anche qui (Fabio, 14/10): Bottega, Shopping in Bottega
   e Scuola hanno la stessa prosa in Playfair delle pagine interne, e lo
   stesso grigio da `:where(p)`. Peso (0,0,1) di proposito, per non travolgere
   i colori dichiarati a una classe (`.bb-scuola-insegnanti__bio` #333,
   `.bb-scuola-form-section__oppure` #888): vedi la nota piu' lunga in
   pagine-interne.css. */
:where(.bb-xd-sezione__testo) p,
:where(.bb-xd-sezione__testo) li {
  color: var(--bb-fg);
}

/* L'invito in fondo a ogni sezione: «Richiedi informazioni», «Scopri i
   corsi», «Riserva il tuo appuntamento». */
.bb-xd-invito {
  display: inline-block;

  /* ⚠ [NEW-368] Il carattere di una CTA si DICHIARA. Oggi la regola sui
     paragrafi e' mirata e non lo toccherebbe comunque, ma questa riga e' la
     rete: se domani qualcuno rimette il Playfair sul contenitore, l'invito
     non se lo prende per eredita'. Le CTA vanno in Jost (NEW-368). */
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-body, 14px);
  letter-spacing: var(--bb-ls-tight, .02em);
  color: inherit;
  text-decoration: none;

  /* ⚠ [NEW-402] Le CTA vanno in minuscolo. Due dei quattro inviti di
     Shopping sono <button> (aprono un pannello, non portano a una pagina) e
     una regola di sito — `body button, body .button, body input` — li
     rendeva MAIUSCOLI: sulla stessa pagina «RISERVA IL TUO APPUNTAMENTO»
     urlava accanto a «Leggi tutte le recensioni», che e' un <a>. Visto
     misurando il text-transform calcolato, non leggendo il PHP (che scrive
     gia' in minuscolo). Dichiarato qui sulla CLASSE: come si vede una CTA
     non puo' dipendere dal tag con cui e' fatta. */
  text-transform: none;

  /* [NEW-396] L'invito aveva una riga sotto SEMPRE, lunga quanto il testo.
     Ora niente a riposo e trattino da 22px centrato al passaggio, come tutte
     le CTA del sito (sistema NEW-47). `border: 0` vale anche per i <button>,
     che questa classe veste su Shopping e Scuola: senza, il bordo di
     sistema del bottone tornerebbe fuori. */
  border: 0;

  /* ⚠ [NEW-407] Il padding ORIZZONTALE va azzerato esplicitamente. I due
     inviti di Shopping sono <button> e il browser gli mette 6px per lato di
     suo: il riquadro partiva allineato al paragrafo (x=461 tutti e due) ma il
     TESTO dentro cominciava a 467, sei pixel piu' a destra. A occhio la CTA
     sembrava rientrata; a misura il rettangolo diceva che era allineata.
     Si misura dove comincia il TESTO (un Range sul nodo), non il riquadro.

     Stessa radice delle maiuscole di NEW-402: un <button> porta addosso
     valori di sistema che un <a> non ha. Su Bottega non si vedeva perche'
     li' le CTA sono tutte <a>. */
  padding: 0 0 3px;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   DOVE SIAMO — uguale su tutte e tre
   ============================================================ */
/* ⚠ [grafica 14/10] L'indirizzo era l'unico in Jost mentre i suoi vicini
   — le strade e il parcheggio — erano gia' in Playfair. Non per una scelta:
   la regola che porta il carattere editoriale e' mirata sui <p>, e questo e'
   un <address>. Dichiarato qui. */
.bb-xd-dove__indirizzo {
  font-style: normal;
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
}
.bb-xd-dove__indirizzo,
.bb-xd-dove__strade,
.bb-xd-dove__parcheggio {
  margin: 0 0 1.4em;
  font-size: var(--bb-body, 14px);
  line-height: 1.75;
}

/* [NEW-404/411] Qui c'erano le regole del riquadro della mappa, tolte con
   l'iframe: adesso l'indirizzo e' un collegamento e si veste da solo. */
.bb-xd-dove__indirizzo a {
  color: inherit;
}

/* ============================================================
   TELEFONO
   ============================================================
   ⚠ Il mobile NON e' il desktop rimpicciolito: gli artboard `ABOUT_MOBILE*`
   impilano l'intestazione SOPRA il testo e portano tutto a piena larghezza. */
@media (max-width: 767px) {

  .bb-xd-sezione {
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 20px) 0;
  }
  .bb-xd .bb-xd-sezione__titolo {
    grid-column: 1;
    text-align: left;
  }
  .bb-xd-sezione__testo {
    grid-column: 1;
  }

  .bb-xd-ancore {
    justify-content: flex-start;
  }
}

/* ============================================================
   HERO CON IMMAGINE — titolo BIANCO sopra la foto
   ============================================================
   ⚠ Scoperto misurando l'XD: i titoli hero delle TRE pagine sono dichiarati
   `#ffffff`. Il disegno presuppone quindi qualcosa dietro a tutte e tre, non
   solo alla Scuola (che il video ce l'ha gia'). Sul render del desktop la
   hero di Shopping sembra vuota proprio per questo: e' testo bianco su
   bianco. L'immagine sta sull'artboard MOBILE, dove occupa tutta la larghezza
   e il titolo ci cade dentro.

   Stesso vestito dell'hero della Scuola e della home: token `--bb-h1-hero`,
   peso 300, spaziatura 0.18em, maiuscolo. Non si inventa una misura nuova per
   una pagina sola.
   ============================================================ */
.bb-xd-hero {
  position: relative;
  width: auto;
  margin-inline: calc(-1 * var(--bb-gutter, 16px));
  overflow: hidden;
}

.bb-xd-hero__img {
  display: block;
  width: 100%;
  /* La hero e' piu' alta delle fasce fra una sezione e l'altra: sull'artboard
     mobile copre 1718 di 1170 di larghezza. Qui resta una fascia ampia ma
     abitabile, e su telefono si alza perche' il titolo ci sta in tre righe. */
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.bb-xd-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--bb-gutter, 16px);
  /* ⚠ IL VELO E' STATO MISURATO, e la prima versione era sbagliata.
     Con `rgba(0,0,0,.18)` il contrasto MEDIO del titolo bianco era 8,89:1 —
     sembrava ottimo. Sul punto PEGGIORE era **1,02:1**: sotto il titolo passa
     una zona quasi bianca della foto, rgb(255,255,224), e li' la scritta
     spariva. E' esattamente la trappola di NEW-334: la media dice «a posto» e
     nasconde l'area che non va. Il contrasto si misura sul pixel peggiore
     dentro il riquadro del testo, non sulla media della foto.

     Invece di scurire tutta la fotografia, il velo e' una fascia: trasparente
     ai bordi e densa in mezzo, dove sta il titolo. Cosi' la foto resta
     leggibile sopra e sotto e il testo e' al sicuro dove serve. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .10) 0%,
    rgba(0, 0, 0, .58) 38%,
    rgba(0, 0, 0, .58) 62%,
    rgba(0, 0, 0, .10) 100%
  );
}

/* ⚠ Due classi, come per tutti i titoli: sotto i 768px `.site h1` di
   Shoptimizer (0,1,1) batte una classe sola e rimanderebbe il titolo alla
   misura del tema (NEW-198, NEW-333). */
.bb-xd .bb-xd-hero__titolo {
  margin: 0;
  font-size: var(--bb-h1-hero, clamp(22px, 2.2vw, 32px));
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .bb-xd-hero__img {
    aspect-ratio: 3 / 4;
  }
}