/* components.css — le sezioni di language_school. Fondo chiaro con episodi di banda scura piena,
   display condensato maiuscolo, fotografia a piena pagina.
   I colori vivono in tokens.css: qui si consumano, mai si ridichiarano. */

/* =========================================================================
   1. Contenitori e bande
   ========================================================================= */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - var(--gutter) * 2, 72ch); }

.section { padding-block: var(--section-y); background: var(--paper); position: relative; }
.section--alt  { background: var(--surface); }
.section--tint { background: var(--sage-tint); }

/* Banda NOTTE: l'episodio scuro che spezza il fondo chiaro. ⚠ Dentro il buio il blu di marca è
   invisibile (2,02): i ruoli che parlano diventano --on-dark, --on-dark-muted e --sage-light. */
.section--dark { background: var(--grad-notte); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }
/* ⚠ Il focus BLU su fondo notte fa 1,89: sarebbe un focus che non si vede, cioè un focus assente.
   Sulle superfici scure l'anello passa all'arancio chiaro (7,61). */
.section--dark :focus-visible, .contact-band :focus-visible, .site-footer :focus-visible,
.hero :focus-visible, .site-header :focus-visible { outline-color: var(--sage-light); }

/* Fondo a CARTA MILLIMETRATA: due gradienti ripetuti, nessuna immagine e nessuna richiesta di rete.
   Sta DIETRO il contenuto (z-index negativo su uno pseudo-elemento) per non alterare il contrasto. */
.section--griglia { background: var(--paper); }
.section--griglia::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--griglia);
  background-size: var(--griglia-size) var(--griglia-size);
  display: var(--griglia-display);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.section--griglia > * { position: relative; z-index: 1; }

/* Intestazione di sezione. L'asimmetria (titolo a sinistra, testo che rientra) è il segno editoriale:
   la variante centrata esiste per le sezioni a griglia, dove il baricentro è al centro. */
.section-intro { margin-bottom: var(--space-7); max-width: 62rem; }
/* ⚠ Il reset azzera OGNI margine: senza questa riga il lead tocca il titolo. Il difetto si vede solo
   dove il titolo sta su UNA riga — su due righe l'interlinea lo maschera, e sembra che il problema non
   ci sia. Vale per ogni intestazione di sezione, non solo per `.section-intro`. */
.section-intro > h2 + p,
.section-intro > .eyebrow + h2,
.contact-band__text > h2 + p,
.cta-band__row > h2 + p,
.page-head > h1 + .lead,
.lingue__head h2 + p,
.contact-cols h2 + .prose,
.scuola__head-l h2 + p,
.avviso h2 + p { margin-top: var(--space-4); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center p { margin-inline: auto; }

.eyebrow--on-dark { color: var(--sage-light); }
.lead--on-dark { color: var(--on-dark-muted); }

/* =========================================================================
   2. Comandi
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: .85rem 1.5rem; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-dark);
  border: 2px solid transparent; line-height: 1.1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: var(--on-dark); }
.btn--accent:hover { background: var(--accent-dark); }
.btn--brand { background: var(--brand); color: var(--on-dark); }
.btn--brand:hover { background: var(--brand-mid); }
/* Ghost su fondo CHIARO: il bordo e il testo sono inchiostro, non arancio (che a 3,26 non regge il
   testo piccolo del bottone). */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Outline su fondo SCURO o sopra la fotografia. */
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: rgba(247,244,239,.55); }
.btn--outline-light:hover { background: var(--on-dark); color: var(--brand-dark); border-color: var(--on-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* =========================================================================
   3. Testata: fascia di servizio + PILLOLA GALLEGGIANTE che si contrae
   ========================================================================= */
.topbar { display: var(--topbar-display); background: var(--brand-dark); color: var(--on-dark-muted); font-size: .82rem; }
.topbar__row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; justify-content: flex-end; min-height: var(--chrome-topbar); }
.topbar__item, .topbar a { color: var(--on-dark-muted); }
.topbar a:hover { color: var(--on-dark); }

/* ⚠ La pillola è `sticky`, non `fixed`: il fixed dentro un antenato con filtro creerebbe un
   containing-block e romperebbe l'overlay del menu mobile (regola 15). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-block: var(--chrome-gap);
  background: transparent;
  transition: padding var(--dur) var(--ease);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--chrome-pill);
  padding-inline: clamp(1rem, .5rem + 1.4vw, 1.6rem);
  border-radius: var(--radius-pill);
  background: var(--brand-dark);
  box-shadow: var(--shadow-pill);
  color: var(--on-dark);
  transition: min-height var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Header CENTRATO verticalmente (regola 16): senza, logo, nav e CTA si allineano su basi diverse. */
.site-header__row > * { align-self: center; margin-block: 0; }
/* Stato CONTRATTO: lo aggiunge shrinkHeader() di reveal.js sulla classe .fp-shrink. È l'«header
   dinamico» del verticale — e resta un cambio di ALTEZZA, non di posizione: la pillola non salta. */
.site-header.is-shrunk { padding-block: calc(var(--chrome-gap) / 2); }
.site-header.is-shrunk .site-header__row { min-height: var(--chrome-pill-shrunk); }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
/* ⚠ TARGA BIANCA sotto il marchio, non un ritocco al marchio. Il logo del cliente porta il nome in NERO:
   sul fondo notte della pillola sparirebbe, e ricolorarlo sarebbe modificare la sua identità. La targa
   è tonda perché il marchio è tondo — su un quadrato resterebbero quattro angoli bianchi visibili. */
.wordmark__mark {
  flex: 0 0 auto; width: 48px; height: 48px; object-fit: contain;
  background: var(--paper); border-radius: var(--radius-pill); padding: 3px;
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease);
}
.site-header.is-shrunk .wordmark__mark { width: 38px; height: 38px; }
.wordmark__name { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; display: flex; flex-direction: column; }
.wordmark__tag { font-size: .62rem; font-weight: 500; letter-spacing: var(--tracking-label); color: var(--on-dark-muted); text-transform: uppercase; }

.site-nav { margin-left: auto; font-family: var(--font-display); font-weight: 500; font-size: .95rem; letter-spacing: .01em; }
.site-nav a { color: var(--on-dark); padding-block: .3rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--sage-light); }
/* CTA di testata con aria attorno (regola 4): mai attaccata al bordo della pillola. */
.site-header__cta { margin-left: var(--space-2); padding: .7rem 1.15rem; font-size: .7rem; }

/* --- MENU MOBILE ------------------------------------------------------------------------------
   ⚠⚠ WP core emette `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container
   .is-menu-open { background-color:#fff }` e la gemella per il `color`: specificità 0-4-0. Una regola
   scritta su `.wp-block-navigation__responsive-container.is-menu-open` (0-2-0) NON vince, e il pannello
   resta bianco — con la conseguenza peggiore che il testo chiaro dichiarato per il buio diventa
   invisibile SU BIANCO. Il difetto non si vede nel foglio: si vede solo nel DOM calcolato, aprendo il
   menu. Qui si usa `!important` sulle poche dichiarazioni contese, che è l'idioma che WP stesso adotta
   in quest'area, e si tiene tutto il resto a specificità normale.
   ⚠ Il contenitore va forzato all'altezza del viewport (regola 15) e i suoi figli allineati a SINISTRA:
   il default di WP è `align-items: flex-end`, ed è ciò che schiaccia le voci contro il bordo destro. --- */
.wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--grad-notte) !important;
  color: var(--on-dark) !important;
  padding: calc(var(--chrome-gap) + 8px) var(--gutter) var(--space-8) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100%;
  gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: var(--space-7) !important;
  padding-bottom: 96px;   /* l'ultima voce non deve finire sotto la barra CTA fissa */
}
/* La voce occupa la RIGA: l'`<a>` è `display:block` e in un flex-column si stringe al proprio testo,
   finendo allineato dove il contenitore decide. Con larghezza piena e testo a sinistra, sta al suo posto. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(247,244,239,.16);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%; text-align: left;
  padding-block: var(--space-4) !important;   /* area di tocco: ≥ 44px reali, non 33 */
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .01em; font-size: 1.3rem; color: var(--on-dark);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--sage-light); }
/* L'ultima voce è la CHIAMATA ALL'AZIONE: si stacca dalle altre e si veste da bottone. */
.wp-block-navigation__responsive-container.is-menu-open .nav-cta { border-bottom: 0; margin-top: var(--space-6); }
.wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content {
  background: var(--accent); color: var(--on-dark); border-radius: var(--radius-pill);
  text-align: center; font-size: var(--text-sm); letter-spacing: var(--tracking-label);
  padding: 1rem 1.5rem !important;
}
/* Sotto-menu INLINE: il default di WP li rende come schede a tendina, illeggibili su telefono. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: none !important; box-shadow: none !important; background: none !important;
  padding-left: var(--space-5);
}
/* ⚠ La X: WP le dà `color: currentcolor`, che sul pannello bianco di default era quasi-bianco su bianco
   (contrasto 1,10 — invisibile, ed è il difetto che si vede nello screenshot). Sul pannello notte il
   colore chiaro è quello giusto, ma va DICHIARATO qui perché `currentcolor` eredita dal contenitore. */
.wp-block-navigation__responsive-container-close {
  width: 48px; height: 48px; padding: 12px;
  color: var(--on-dark) !important;
  border-radius: var(--radius-pill);
}
.wp-block-navigation__responsive-container-close:hover { background: rgba(247,244,239,.12); }
/* L'hamburger vive sulla pillola scura: eredita il chiaro, non il nero di WP. */
.wp-block-navigation__responsive-container-open { color: var(--on-dark) !important; width: 44px; height: 44px; }

/* =========================================================================
   4. Testata fotografica a piena pagina
   ========================================================================= */
.hero { position: relative; min-height: var(--hero-min-h); display: flex; align-items: flex-end; isolation: isolate; margin-top: calc((var(--chrome-pill) + var(--chrome-gap) * 2) * -1); }
.hero__body { position: relative; z-index: 2; width: min(100% - var(--gutter) * 2, var(--container)); padding-block: var(--space-8) var(--space-7); }

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
.hero__slide { position: absolute; inset: 0; opacity: 0; animation: fp-hero-fade 40s infinite; }
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s; }
.hero__slide:nth-child(4) { animation-delay: 24s; }
.hero__slide:nth-child(5) { animation-delay: 32s; }
@keyframes fp-hero-fade {
  0%   { opacity: 0; transform: scale(1.06); }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.11); }
}
/* ⚠ Con reduced-motion lo slideshow si FERMA sulla prima foto: le altre restano nascoste, non
   sovrapposte (sovrapposte darebbero un collage illeggibile). */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; opacity: 0; transform: none; }
  .hero__slide:nth-child(1) { opacity: 1; }
}
/* Il VELO non è decorativo: è ciò che regge il contrasto del titolo quando lo slideshow arriva al
   fotogramma più chiaro. Va tarato sulla foto PIÙ CHIARA, non sulla media. */
.hero__veil { position: absolute; inset: 0; background: var(--grad-velo); }
.hero__veil::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }

.hero--design { background: var(--grad-notte); }
.hero--design::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--griglia); background-size: var(--griglia-size) var(--griglia-size);
  opacity: .5;
}

.hero__plate { max-width: 62rem; color: var(--on-dark); }
.hero__eyebrow {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--sage-light); margin-bottom: var(--space-4);
}
.hero h1 { color: var(--on-dark); }
.hero__lead { font-size: var(--text-md); color: var(--on-dark); max-width: 52ch; margin-top: var(--space-4); }
@media (max-width: 599.98px) { .hero__lead { max-width: 40ch; } }

.hero__scroll { position: absolute; right: 0; bottom: var(--space-7); display: inline-flex; align-items: center; gap: var(--space-2); color: var(--on-dark); font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.hero__scroll::after { content: ""; width: 1px; height: 34px; background: var(--sage-light); }
@media (max-width: 899.98px) { .hero__scroll { display: none; } }

/* =========================================================================
   5. La scuola (featured) — editoriale asimmetrico
   ========================================================================= */
.scuola__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6) var(--space-8); align-items: end; margin-bottom: var(--space-8); }
.scuola__head-r { color: var(--ink-muted); font-size: var(--text-md); text-align: right; max-width: 46ch; justify-self: end; }
.scuola__grid { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; gap: var(--space-6) var(--space-8); align-items: stretch; }
.scuola__prose { grid-column: 1; grid-row: 1; }
/* Attacco editoriale: il primo capoverso è più grande e porta un filetto di marca. Nessun campo nuovo
   nell'IR — è il `body` che c'è già, reso come surrogato onesto della pull-quote. */
.scuola__prose p:first-child { font-size: var(--text-md); color: var(--ink); border-left: 3px solid var(--accent); padding-left: var(--space-5); }
.scuola__fig { overflow: hidden; border-radius: var(--radius); }
.scuola__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.scuola__fig:hover img { transform: scale(1.04); }
/* La figura riempie l'ALTEZZA della riga, ma la riga la detta il CONTENUTO: con un minimo alto una
   sezione dal testo corto apriva 282px di vuoto accanto alla prosa. Il minimo scende e i due blocchi si
   centrano fra loro, così ciò che resta è respiro simmetrico e non un buco in basso. */
.scuola__fig--a { grid-column: 2; grid-row: 1; height: 100%; min-height: clamp(200px, 20vw, 280px); }
.scuola__prose { align-self: center; }
/* La seconda figura e' una BANDA a tutta larghezza sotto il testo: chiude la sezione invece di lasciare
   un vuoto accanto a se'. ⚠ Spostare il vuoto non e' risolverlo — qui viene occupato. */
.scuola__fig--b { grid-column: 1 / -1; grid-row: 2; aspect-ratio: var(--fig-ratio-wide); }

/* =========================================================================
   6. Perché sceglierci (trust) — tessere con icona
   ========================================================================= */
.motivi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
.motivo { background: var(--paper); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.motivo h3 { margin-bottom: var(--space-3); }
.motivo p { color: var(--ink-muted); }
/* Tessera-icona: quadrato pieno con la maschera del segno. ⚠ La `mask-image` si risolve rispetto al
   FOGLIO, non al post_content: per questo il file sta QUI e il pattern porta solo `data-icon`. Nel DB
   il PHP non gira e un `url('../assets/…')` inline non verrebbe riscritto. */
.motivo__icon {
  display: block; width: 56px; height: 56px; border-radius: var(--radius);
  background: var(--brand); margin-bottom: var(--space-5);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 56px 56px; mask-size: 56px 56px;
}
.motivo__icon[data-icon="lezioni"] { -webkit-mask-image: url("../assets/img/icons/lezioni.svg"); mask-image: url("../assets/img/icons/lezioni.svg"); }
.motivo__icon[data-icon="flessibilita"] { -webkit-mask-image: url("../assets/img/icons/flessibilita.svg"); mask-image: url("../assets/img/icons/flessibilita.svg"); }
.motivo__icon[data-icon="cultura"] { -webkit-mask-image: url("../assets/img/icons/cultura.svg"); mask-image: url("../assets/img/icons/cultura.svg"); }
.motivo__icon[data-icon="certificazioni"] { -webkit-mask-image: url("../assets/img/icons/certificazioni.svg"); mask-image: url("../assets/img/icons/certificazioni.svg"); }
.motivo__icon[data-icon="docenti"] { -webkit-mask-image: url("../assets/img/icons/docenti.svg"); mask-image: url("../assets/img/icons/docenti.svg"); }
.motivo__icon[data-icon="gruppi"] { -webkit-mask-image: url("../assets/img/icons/gruppi.svg"); mask-image: url("../assets/img/icons/gruppi.svg"); }

/* =========================================================================
   7. Corsi e servizi (services) — schede con foto in alto
   ========================================================================= */
/* ⚠ Con CINQUE voci l'ultima riga resterebbe di due tessere allineate a sinistra e una cella vuota a
   destra. La griglia passa a sei tracce e le ultime due scavalcano di mezza colonna, centrandosi. La
   regola è condizionata al NUMERO REALE di voci: una scuola con sei servizi torna alla griglia piena
   senza che nessuno tocchi il foglio. */
.servizi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
@supports selector(:has(*)) {
  .servizi__grid:has(> :last-child:nth-child(5)) { grid-template-columns: repeat(6, 1fr); }
  .servizi__grid:has(> :last-child:nth-child(5)) > * { grid-column: span 2; }
  .servizi__grid:has(> :last-child:nth-child(5)) > :nth-child(4) { grid-column: 2 / span 2; }
  .servizi__grid:has(> :last-child:nth-child(5)) > :nth-child(5) { grid-column: 4 / span 2; }
}
.servizio { background: var(--paper); border: var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.servizio:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.servizio > a { display: flex; flex-direction: column; height: 100%; }
.servizio__fig { aspect-ratio: var(--fig-ratio); overflow: hidden; background: var(--surface-2); }
.servizio__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.servizio:hover .servizio__fig img { transform: scale(1.05); }
.servizio__body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.servizio__body h3 { color: var(--brand); }
.servizio__body p { color: var(--ink-muted); font-size: .97rem; flex: 1; }
/* La freccia è un segno, non un testo: il link è già l'intera scheda e ha il proprio nome accessibile
   dal titolo. */
.servizio__go { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--line); position: relative; }
.servizio__go::before, .servizio__go::after { content: ""; position: absolute; background: var(--accent-ink); }
.servizio__go::before { left: 11px; top: 16px; width: 12px; height: 1.5px; }
.servizio__go::after { right: 11px; top: 12px; width: 8px; height: 8px; border-top: 1.5px solid var(--accent-ink); border-right: 1.5px solid var(--accent-ink); transform: rotate(45deg); background: none; }
.servizio:hover .servizio__go { border-color: var(--accent); background: var(--sage-tint); }

/* =========================================================================
   8. Le lingue (method) — elenco a filetti su banda notte
   ========================================================================= */
.lingue__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-8); align-items: end; margin-bottom: var(--space-7); }
.lingue__intro { display: flex; flex-direction: column; gap: var(--space-4); }
.lingue__body { color: var(--on-dark-muted); }
/* Due colonne a scorrimento per RIGHE: con un numero pari di voci il rettangolo si chiude sempre, senza
   celle vuote in fondo. ⚠ Il flusso per COLONNE con righe fisse sembra più ordinato ma si sfalda appena
   il numero di voci cambia — e le voci cambiano da scuola a scuola. */
.lingue__list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); border-top: 1px solid rgba(247,244,239,.22); }
.lingue__list li {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  letter-spacing: .01em; font-size: var(--text-lg); color: var(--on-dark);
  padding-block: var(--space-4); border-bottom: 1px solid rgba(247,244,239,.22);
  display: flex; align-items: baseline; gap: var(--space-3);
}
.lingue__list li::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; background: var(--sage); border-radius: var(--radius-pill); }
/* ⚠ Variante per un elenco fatto di FRASI e non di parole: alla scala del display ogni voce andrebbe a
   tre o quattro righe e le celle si sfalserebbero. La size scende di due gradini e il maiuscolo cade —
   una frase in maiuscoletto tracciato si legge male, e l'elenco esiste per essere letto. */
.lingue__list--frasi li { font-size: var(--text-base); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* =========================================================================
   9. Certificazioni (gallery)
   ========================================================================= */
.cert__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6) var(--space-8); align-items: end; margin-bottom: var(--space-7); }
.cert__head-r { color: var(--ink-muted); font-size: var(--text-md); text-align: right; max-width: 46ch; justify-self: end; }
.cert__cols { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--space-8); align-items: stretch; }
.cert__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-6); border-top: 1px solid var(--line); }
.cert { padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.cert h3 { color: var(--brand); font-size: var(--text-base); text-transform: uppercase; letter-spacing: .04em; }
.cert p { color: var(--ink-muted); font-size: .94rem; }
/* Dove il materiale non dà una descrizione la riga resta VUOTA invece di essere inventata: il paragrafo
   vuoto sparisce, sennò lascerebbe un gradino nella griglia. */
.cert p:empty { display: none; }
/* Le due figure si dividono l'ALTEZZA della griglia di schede accanto: con un rapporto fisso una delle
   due colonne finisce prima e lascia un quadrante vuoto in fondo alla sezione. */
.cert__figs { display: grid; grid-template-rows: 1fr 1fr; gap: var(--tile-gap); height: 100%; align-self: stretch; }
.cert__fig { overflow: hidden; border-radius: var(--radius); min-height: clamp(180px, 20vw, 260px); }
.cert__fig img { width: 100%; height: 100%; object-fit: cover; }

/* --- ATTACCO EDITORIALE: la prima frase del cliente diventa il display -----------------------------
   ⚠ Una colonna di prosa sola al centro di una banda larga è il difetto che si legge come «spoglio»:
   la misura di lettura è giusta, ma metà della riga resta bianca. Qui la PRIMA FRASE sale alla scala
   del display nella colonna di sinistra e il resto del testo occupa quella di destra: la larghezza si
   riempie, la pagina prende un attacco, e non si aggiunge una sola parola che il cliente non abbia
   scritto — il taglio cade su un confine di frase. --- */
/* La colonna del display è leggermente più STRETTA di quella del corpo: il condensato maiuscolo occupa
   meno riga a parità di caratteri, e a colonne uguali il testo di destra finisce prima lasciando un
   quadrante vuoto. */
.apertura { display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--space-6) var(--space-8); align-items: start; }
.apertura__display p {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-display);
  color: var(--ink); max-width: 21ch;
}
.apertura__display::after { content: ""; display: block; width: 64px; height: 3px; background: var(--accent); margin-top: var(--space-5); }
.apertura__corpo p { max-width: 60ch; }
.apertura__corpo p + p { margin-top: var(--space-4); }
.section--dark .apertura__display p { color: var(--on-dark); }
@media (max-width: 899.98px) {
  .apertura { grid-template-columns: 1fr; }
  .apertura__display p { max-width: none; }
}

/* --- DOCUMENTO: più gruppi titolo+testo dentro UNA banda ------------------------------------------
   ⚠ Ogni gruppo in una banda propria significa moltiplicare il padding di sezione per il numero dei
   gruppi: una pagina di otto blocchi diventa metà aria, e il rapporto contenuto/vuoto crolla. Una
   pagina di testo è UN documento: i gruppi si separano fra loro con un ritmo interno, non con una
   banda ciascuno. --- */
.documento { display: grid; gap: var(--space-8); }
.documento > * + * { padding-top: var(--space-7); border-top: 1px solid var(--line); }
.section--dark .documento > * + * { border-top-color: rgba(247,244,239,.18); }

/* --- DICHIARAZIONE: una frase sola non è un paragrafo, è un'affermazione ------------------------
   ⚠ Una sezione il cui unico contenuto è una riga di testo annega nel proprio padding: il rapporto fra
   contenuto e vuoto scende sotto un quinto e la pagina legge come «spoglia». La stessa frase, portata
   alla scala del display con un filetto di marca, occupa lo spazio che le spetta e diventa il respiro
   fra due sezioni dense invece che un buco. --- */
.statement { max-width: 26ch; }
.statement p {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-display);
  color: var(--ink); max-width: none;
  border-left: 3px solid var(--accent); padding-left: var(--space-5);
}
.section--dark .statement p, .banda-foto .statement p { color: var(--on-dark); border-left-color: var(--sage-light); }
/* Sezione a respiro CORTO: per ciò che sta fra due blocchi densi e non deve pesare come loro. */
.section--tight { padding-block: calc(var(--section-y) * 0.5); }

/* --- NASTRO: le sigle degli esami che scorrono. Movimento vero su contenuto vero, nessuno script
   nella pagina (lo muove marquee() di reveal.js) e nessun contenuto inventato. --- */
.ribbon { background: var(--brand-dark); color: var(--on-dark); overflow: hidden; }
.ribbon__viewport { overflow: hidden; padding-block: var(--space-4); }
.ribbon__track {
  display: flex; gap: var(--space-6); align-items: center; white-space: nowrap; width: max-content;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--on-dark);
}
.ribbon__track li { flex: 0 0 auto; }
.ribbon__track li[aria-hidden="true"] { color: var(--sage-light); }
@media (prefers-reduced-motion: reduce) { .ribbon__viewport { overflow-x: auto; } }

/* =========================================================================
   9-bis. BANDA FOTOGRAFICA A PIENA PAGINA
   Il segno del registro editoriale: la fotografia occupa tutta la larghezza, l'occhiello e il titolo
   stanno in basso a sinistra, il contatore in alto a destra. Risolve per costruzione il vuoto delle
   pagine interne — una banda che è tutta immagine non può essere «spoglia» — e dà alle pagine una
   spina dorsale che una sequenza di paragrafi non ha.
   ========================================================================= */
.banda-foto {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(360px, 50vh, 600px);
  display: flex; align-items: flex-end;
  color: var(--on-dark);
}
.banda-foto__media { position: absolute; inset: 0; z-index: -2; }
.banda-foto__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fig-object-pos); }
/* ⚠ Il testo sta SOPRA la fotografia: il contrasto non lo garantiscono i token ma il velo, che va
   tarato sull'immagine più CHIARA che questa banda può ospitare. */
.banda-foto__velo { position: absolute; inset: 0; z-index: -1; background: var(--grad-velo); }
.banda-foto__velo::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.banda-foto__body { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; padding-block: var(--space-7); position: relative; }
.banda-foto__occhiello {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--sage-light);
  margin-bottom: var(--space-3);
}
.banda-foto h2 { color: var(--on-dark); font-size: var(--text-2xl); max-width: 22ch; }
.banda-foto__num {
  position: absolute; right: 0; top: calc(var(--space-7) * -1 + var(--space-4));
  font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-label);
  color: var(--on-dark-muted);
}
@media (max-width: 599.98px) { .banda-foto__num { display: none; } .banda-foto h2 { max-width: none; } }

/* =========================================================================
   10. Fascia di contatto
   ========================================================================= */
.contact-band { background: var(--grad-banda); color: var(--on-dark); padding-block: var(--section-y); }
.contact-band__row { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6) var(--space-8); align-items: center; }
.contact-band h2 { color: var(--on-dark); }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }

.cta-band { background: var(--grad-banda); color: var(--on-dark); padding-block: var(--section-y); }
.cta-band h2 { color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); }
.cta-band__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* =========================================================================
   11. Testata di pagina
   ========================================================================= */
/* ⚠ La page-head NON riusa la size dell'hero (regola 6): occuperebbe mezza schermata.
   ⚠⚠ Ed è a DUE COLONNE, non impilata: con occhiello, titolo e lead in colonna la testata cresce a
   400px per 150 di contenuto — il resto è padding, e la pagina si apre con un vuoto. Portando il lead
   nella colonna opposta la stessa materia occupa metà altezza e tutta la larghezza, e l'asimmetria è
   il segno editoriale del verticale invece che un ripiego. */
.page-head {
  background: var(--sage-tint);
  /* ⚠⚠ Padding SIMMETRICO, e nessuna compensazione della pillola: l'intestazione è `sticky`, quindi
     occupa già il proprio spazio nel flusso e la banda comincia esattamente dove l'header finisce
     (misurato: bordo inferiore dell'header 126, inizio della banda 126, nessuna sovrapposizione).
     Il compenso che c'era serviva a una pillola `fixed` che qui non esiste: produceva 108px sopra
     contro 42 sotto, cioè il titolo schiacciato in fondo al proprio riquadro. */
  padding-block: calc(var(--section-y) * .58);
}
.page-head .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-4) var(--space-8); align-items: end; }
.page-head .eyebrow { grid-column: 1; margin-bottom: var(--space-2); }
/* Briciole: il sito del cliente non le aveva e a un sito con dodici pagine di secondo livello servono.
   Sono navigazione vera, non decorazione — e occupano la riga che la testata lasciava vuota. */
.briciole { grid-column: 1 / -1; grid-row: 1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; font-size: .82rem; color: var(--ink-muted); margin-bottom: var(--space-2); }
.briciole a { border-bottom: 1px solid transparent; }
.briciole a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
.briciole span[aria-hidden] { color: var(--sage); }
.briciole [aria-current] { color: var(--ink); font-weight: 600; }
.page-head .eyebrow { grid-row: 2; }
.page-head h1 { grid-row: 3; }
.page-head .lead { grid-row: 3; }
.page-head h1 { grid-column: 1; font-size: var(--text-2xl); color: var(--ink); }
.page-head .lead { grid-column: 2; text-align: right; justify-self: end; max-width: 44ch; margin-top: 0; }
@media (max-width: 899.98px) {
  .page-head .container { grid-template-columns: 1fr; }
  .page-head .briciole, .page-head .eyebrow, .page-head h1, .page-head .lead { grid-column: 1; grid-row: auto; }
  .page-head .lead { text-align: left; justify-self: start; margin-top: var(--space-4); }
}
/* Sulle pagine interne la pillola galleggia su fondo chiaro: senza fondo proprio, il testo bianco
   sparirebbe. Il fondo notte della pillola c'è sempre, quindi qui basta lo stacco. */

/* =========================================================================
   12. Pagina Contatti — due colonne (regola 19)
   ========================================================================= */
.contact-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: start; margin-top: var(--space-7); }
.contact-info { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-info dl { display: grid; gap: var(--space-4); }
.contact-info dt { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { margin: 0; }
.contact-info .btn { margin-top: var(--space-5); }
.form-note { margin-top: var(--space-5); font-size: .9rem; color: var(--ink-muted); }

.hours { display: grid; gap: .35rem; }
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); }

.checks { display: grid; gap: var(--space-2); margin: var(--space-5) 0; }
.checks li { display: flex; gap: var(--space-3); align-items: baseline; }
.checks li::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; background: var(--accent); border-radius: var(--radius-pill); }

.contact-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-form .field { display: grid; gap: var(--space-2); }
.contact-form label { font-size: .9rem; font-weight: 600; }
.contact-form input, .contact-form textarea {
  font: inherit; padding: .8rem 1rem; border: var(--border); border-radius: var(--field-radius);
  background: var(--paper); color: var(--ink); width: 100%;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--brand); }
/* ⚠ La regola `width: 100%` dei campi colpisce ANCHE la casella di consenso, che si stira per tutta la
   riga e si stacca dalla propria etichetta. La casella non è un campo di testo: ha misura propria. */
.contact-form input[type="checkbox"] { width: auto; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--accent); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .9rem; color: var(--ink-muted); }
.consent a { color: var(--accent-ink); text-decoration: underline; }

/* Avvisi in coda alla pagina Contatti: due riquadri a filetto, senza fondo — sono note di servizio,
   non sezioni di vendita, e il registro le tiene in secondo piano. */
.avvisi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tile-gap); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.avviso h2 { font-size: var(--text-lg); color: var(--brand); margin-bottom: var(--space-3); }
.avviso p { color: var(--ink-muted); font-size: .97rem; }
@media (max-width: 899.98px) { .avvisi { grid-template-columns: 1fr; } }

/* Mosaico foto delle pagine interne.
   ⚠⚠ L'altezza la decide la TRACCIA, non la singola tessera: dando a ognuna il proprio `aspect-ratio`
   le tessere della stessa riga escono di altezze diverse e NON POSSONO allinearsi per costruzione —
   è il difetto che si vede come «foto non allineate». Con `grid-auto-rows` tutte le righe hanno la
   stessa altezza e il ritaglio lo fa `object-fit: cover`. */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 19vw, 260px); gap: var(--tile-gap); margin-bottom: var(--space-7); }
.tile { overflow: hidden; border-radius: var(--radius); }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--band { grid-column: 1 / -1; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tile:hover img { transform: scale(1.04); }

/* =========================================================================
   12-bis. Blocchi delle pagine di progetto
   ========================================================================= */
/* Figura SCONTORNATA su fondo bianco (globo, mappa): `contain` su superficie di marca, MAI `cover` —
   il cover taglierebbe il soggetto ritagliato e resterebbe un dettaglio senza senso.
   ⚠ E non sta MAI da sola al centro di una banda: un quadrato di 380px in una sezione di 600 è il
   difetto che si legge come «vuoto». La didascalia le sta ACCANTO alla scala del display, e la coppia
   occupa la riga. */
.grafica { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-6) var(--space-8); align-items: center; }
.grafica img { max-height: clamp(200px, 22vw, 300px); width: auto; object-fit: contain; justify-self: center; }
.grafica figcaption {
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-display);
  color: var(--ink); max-width: 20ch;
}
.grafica figcaption::after { content: ""; display: block; width: 64px; height: 3px; background: var(--accent); margin-top: var(--space-5); }
@media (max-width: 899.98px) { .grafica { grid-template-columns: 1fr; justify-items: center; text-align: center; } .grafica figcaption { max-width: none; } .grafica figcaption::after { margin-inline: auto; } }

/* Badge Cambridge: è un marchio di terzi, si mostra intero e non si deforma. */
.badge-cambridge { display: grid; justify-items: center; gap: var(--space-4); }
.badge-cambridge img { max-width: 420px; width: 100%; height: auto; }
.badge-cambridge figcaption { color: var(--ink-muted); font-size: .95rem; text-align: center; }

/* Tabella dei cookie dell'informativa: deve poter scorrere per conto suo su schermo stretto, sennò è
   lei a far scorrere la pagina in orizzontale. */
.tabella-cookie { overflow-x: auto; margin-top: var(--space-5); }
.tabella-cookie h3 { margin-bottom: var(--space-4); }
.tabella-cookie table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .9rem; }
.tabella-cookie th, .tabella-cookie td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.tabella-cookie th { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-sm); color: var(--ink-muted); }

/* Mappa del sito: è il percorso di link interni verso le pagine fuori dal menu. */
.sitemap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-6); }
.sitemap__col h2 { font-size: var(--text-base); color: var(--brand); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.sitemap__col ul { display: grid; gap: var(--space-3); }
.sitemap__col a { color: var(--ink-muted); border-bottom: 1px solid transparent; }
.sitemap__col a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); }
@media (max-width: 1023.98px) { .sitemap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .sitemap { grid-template-columns: 1fr; } }

/* ⚠ La voce di CHIAMATA ALL'AZIONE del menu esiste SOLO nel pannello mobile: sul desktop il bottone
   della testata dice già la stessa cosa, e ripeterla farebbe leggere il menu come sbagliato. */
.site-nav .nav-cta { display: none; }
@media (max-width: 767.98px) { .site-nav .nav-cta { display: block; } }

/* =========================================================================
   13. Piè di pagina
   ========================================================================= */
.site-footer { background: var(--grad-foot); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-6); }
/* ⚠ `auto-fit` invece di un numero fisso di colonne: la colonna social e quella degli orari possono
   sparire (dati assenti), e una griglia a tre colonne fisse lascerebbe un buco al posto loro. */
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-6) var(--space-8); }
.site-footer__col h3 { color: var(--on-dark); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer__col ul { display: grid; gap: var(--space-2); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer address { font-style: normal; margin-bottom: var(--space-3); }
/* La frase di chiusura in condensato grande: il congedo del registro editoriale. */
.site-footer__closing { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-display); font-size: var(--text-xl); color: var(--on-dark); margin-top: var(--space-8); }
/* ⚠ `justify-content: space-between` con TRE elementi NON centra il mediano: lo mette dove capita, in
   funzione della larghezza dei laterali. Il centraggio vero vuole `1fr auto 1fr`. */
.site-footer__legal { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3) var(--space-6); align-items: center; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(247,244,239,.16); font-size: .85rem; }
.site-footer__legal > :last-child { justify-self: end; }
@media (max-width: 699.98px) {
  .site-footer__legal { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__legal > :last-child { justify-self: center; }
}
.powered { display: inline-flex; align-items: center; gap: .45rem; }
.powered img { width: 20px; height: 20px; }

/* =========================================================================
   14. Barra CTA mobile
   ========================================================================= */
.cta-bar { display: none; }
@media (max-width: 767.98px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(247,244,239,.2);
  }
  .cta-bar a { background: var(--brand-dark); color: var(--on-dark); text-align: center; padding: .95rem 1rem; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .cta-bar a:last-child { background: var(--accent); }
  .site-footer { padding-bottom: calc(var(--space-6) + 58px); }
}

/* =========================================================================
   15. 404
   ========================================================================= */
.notfound { background: var(--grad-notte); color: var(--on-dark); padding-block: var(--space-9); text-align: center; }
.notfound h1 { color: var(--on-dark); }
.notfound p { color: var(--on-dark-muted); margin-top: var(--space-4); }
.notfound .btn-row { justify-content: center; }

/* =========================================================================
   16. Adattamento
   ========================================================================= */
@media (max-width: 1023.98px) {
  .servizi__grid, .motivi__grid { grid-template-columns: repeat(2, 1fr); }
  .cert__cols { grid-template-columns: 1fr; }
  .cert__figs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899.98px) {
  .scuola__head, .scuola__grid, .lingue__head, .cert__head, .contact-band__row, .contact-cols { grid-template-columns: 1fr; }
  .scuola__head-r, .cert__head-r { text-align: left; justify-self: start; }
  .scuola__prose { grid-column: 1; grid-row: auto; }
  .scuola__fig--a, .scuola__fig--b { grid-column: 1; grid-row: auto; }
  /* ⚠ In colonna singola lo sfalsamento non è più asimmetria: legge come un errore di allineamento. */
  .scuola__fig--b { margin-left: 0; }
  .contact-band__actions { justify-content: flex-start; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 26vw, 220px); }
  .tile--wide, .tile--band { grid-column: span 2; }
}
@media (max-width: 599.98px) {
  .servizi__grid, .motivi__grid, .cert__grid, .cert__figs, .site-footer__grid { grid-template-columns: 1fr; }
  .lingue__list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .contact-form .row { grid-template-columns: 1fr; }
  .site-header__cta { display: none; }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: clamp(180px, 52vw, 240px); }
  .tile--wide, .tile--band { grid-column: span 1; }
  .tile--tall { grid-row: span 1; }
}