/* ============================================================
   Landing a blocchi — caricato solo dal layout category/landing.php
   via WebAssetManager. Non incluso in meltar.css: resta isolato.

   I token qui sotto rispecchiano css/variables.scss. Dove il design
   Figma coincide col template si riusa il valore esistente; le due
   differenze reali sono marcate DELTA.
   ============================================================ */

/* ============================================================
   Cormorant come font VARIABILE.

   I file in fonts/ hanno un asse wght 300-700, ma meltar.css li
   dichiara con pesi singoli (400 e 600) puntando allo stesso file:
   cosi' il browser usa l'istanza di default, che e' 300 (Light), e
   sintetizza tutto il resto — falso grassetto invece dei tagli veri.

   Qui la stessa risorsa viene ridichiarata con l'INTERVALLO, sotto un
   nome di famiglia dedicato per non toccare le altre pagine. Copre
   esattamente i pesi usati dal Figma: 400 body, 500 h1, 600 h2/h3,
   700 cta.
   ============================================================ */

@font-face {
    font-family: 'Cormorant Landing';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-latin-ext.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Landing';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/cormorant-latin.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* I token stanno su :root e non su .landing perche' servono anche FUORI
   dal <main>: hero (#foto-after), chip dell'header (#header) e footer
   (#footer) sono nel guscio di index.php. Definendoli su .landing, in quei
   tre punti le var() non si risolvevano e le dichiarazioni cadevano —
   il titolo sulla foto ereditava #foto { font-size: 0 } e spariva.
   Questo foglio e' caricato solo dalle landing, quindi :root e' sicuro. */
:root {
    /* --- Colori (da variables.scss) --- */
    --l-white: #fff;
    --l-brown: #7c6954;            /* $colorBrown */
    --l-brown-light: #87745F;      /* $colorLightBrown, versione WCAG-conforme */
    --l-brown-very-light: #ccb495; /* $colorVeryLightBrown == Figma "brown-light" */
    --l-brown-dark: #5F4C37;       /* $colorDarkBrown */

    /* Presenti nel Figma, assenti in variables.scss.
       --l-brown-figma e' CONFERMATO: e' il colore del testo e dei filetti,
       campionato dal render del blocco intro (105,90,74). Non coincide con
       $colorBrown (#7c6954) del template: e' piu' scuro e piu' neutro.
       --l-green resta da confermare, non ancora incontrato nei blocchi. */
    --l-brown-figma: #695A4A;      /* Figma "brown-default" */
    --l-green: #645F46;            /* Figma "verde" — CONFERMATO: fondo del blocco request */

    /* Fondi campionati dai render dei singoli blocchi. Non sono ne' in
       variables.scss ne' fra le variabili Figma: sono riempimenti scritti
       a mano nel design. */
    --l-bg-sand: #EDE4D9;          /* answers */
    --l-bg-clay: #AFA090;          /* the weekend, valore medio di ripiego */
    --l-bg-olive: #827E6A;         /* reach */
    --l-track: #968B80;            /* binario spento della timeline, dal Figma */
    --l-card: #FCF7EF;             /* scheda sovrapposta delle righe */

    /* "the weekend" non ha un fondo piatto: e' un gradiente verticale unico
       che parte dall'intestazione e finisce in fondo all'ultima riga.
       Verificato lineare campionando il render (scarto max 5 su 255). */
    --l-weekend-from: #B5A696;
    --l-weekend-to: #695A4A;

    /* Anche "four elements, four practices" e' un gradiente, con la stessa
       escursione ma partenza leggermente diversa. Verificato lineare su 11
       campioni (scarto max 1 su 255). Arriva esattamente al colore pieno del
       blocco schedule che lo segue, quindi i due si saldano senza stacco. */
    --l-practices-from: #B2A393;
    --l-practices-to: #695A4A;

    /* "How to reach us" e il footer condividono un gradiente DIAGONALE, non
       un verde piatto: chiaro in alto a sinistra, scuro in basso a destra.
       E' prevalentemente orizzontale (-0,0183/px contro -0,0051/px in
       verticale), da cui i 106deg. Il basso-sinistra di reach e l'alto-
       sinistra del footer coincidono, quindi i due si saldano. */
    --l-reach-angle: 106deg;
    --l-reach-from: #827E6A;
    --l-reach-to: #666148;
    --l-footer-from: #7E7A65;
    --l-footer-to: #645F46;

    /* Stacco fra le righe: 72px nel design. Fluido, cosi' si riduce da solo
       sugli schermi stretti senza bisogno di media query. */
    --l-gap-row: clamp(1.25rem, 2.5vw, 2.25rem);   /* meta' di 72px al massimo */

    --l-text: var(--l-brown);

    /* --- Tipografia (da variables.scss) --- */
    --l-font: 'Cormorant Landing', 'Cormorant', serif;  /* variabile, vedi @font-face sopra */
    --l-font-script: 'Italianno', cursive; /* $fontSecondary */

    --l-size-h1: 100px;            /* $textH1Size — Figma h1 100/90 */
    --l-size-h2: 60px;             /* $textTitleSize — Figma h2 60/80 */
    --l-size-h3: 45px;             /* Figma h3 45 */
    --l-size-h4: 30px;             /* $textSubTitleSize — Figma h4 30 */
    --l-size-body: 19px;           /* $textSize — Figma body 20, delta 1px */
    --l-size-small: 18px;          /* Figma body small */

    --l-tracking: 0.1863em;        /* $textLetterSpacing */
    --l-tracking-wide: 10px;       /* Figma h4/cta letterSpacing */

    /* --- Layout --- */
    --l-max: 1280px;               /* larghezza container del design */
    --l-bleed: 1440px;             /* larghezza artboard */
}

/* Queste invece valgono solo per il corpo della landing: su :root
   cambierebbero il font anche di header e footer. */
.landing {
    font-family: var(--l-font);
    font-size: var(--l-size-body);
    color: var(--l-text);
}

/* ============================================================
   Animazioni
   ============================================================ */

/* Ancora del form: il bersaglio va staccato dall'header fisso (128px)
   piu' un margine d'aria, altrimenti il titolo finisce sotto la barra.
   Vale quando a scorrere e' il browser, cioe' se il JS non c'e'.

   NB: niente scroll-behavior: smooth qui. Lo scorrimento morbido lo fa
   ScrollToPlugin in landing.js, e le due cose in contemporanea si
   contendono la posizione producendo scatti — e' un conflitto noto,
   documentato da GSAP stesso. */
#request {
    scroll-margin-top: 9.5rem;
}

/* Zoom lento sulla foto dell'hero. L'immagine sta in #foto .list,
   reso dal chrome imgSlide: si anima quella, non il contenitore,
   cosi' il testo sovrapposto in #foto-after resta fermo. */
@keyframes landing-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

#foto .list img {
    transform-origin: center;
    animation: landing-hero-zoom 24s ease-out forwards;
}

/* Stato di partenza della comparsa dei testi. Lo imposta landing.js
   solo se GSAP c'e' e il visitatore non ha chiesto meno animazioni:
   se lo scrivessimo qui, senza JS il testo resterebbe invisibile. */
.landing-reveal {
    will-change: transform, opacity;
}

/* Chi ha chiesto meno movimento non deve subire nulla di tutto questo. */
@media (prefers-reduced-motion: reduce) {
    #foto .list img {
        animation: none;
    }
}

/* ============================================================
   CTA — una sola definizione per tutte, cosi' restano identiche.
   Figma: testo maiuscolo largo 228px + freccia 28px, 13px di
   distanza, 268px in tutto.
   NB: il token Figma "cta" dichiara letterSpacing 10, ma con 10px
   il testo misurerebbe ~330px invece dei 228 reali. La spaziatura
   effettiva e' ~3,6px = 0,18em, cioe' $textLetterSpacing del
   template: e' quella corretta, il token e' fuorviante.
   ============================================================ */

.landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8125rem;                 /* 13px */
    /* Esplicita, non ereditata: i <button> non ereditano il font, glielo
       impone lo stylesheet del browser. Sull'<a> dello schedule non si
       notava, sul pulsante di invio del form usciva in Arial. */
    font-family: var(--l-font);
    font-size: var(--l-size-body);
    font-weight: 700;
    letter-spacing: var(--l-tracking);
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
}

.landing-cta img {
    flex: none;
    width: 1.75rem;                 /* 28px */
    height: auto;
}

/* Ogni articolo della categoria e' un blocco: nessun margine di blog. */
.landing__block {
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------
   Titolo di sezione condiviso (landing.section-title)
   ------------------------------------------------------------ */

.landing__heading-title {
    margin: 0;
    font-size: var(--l-size-h2);
    font-weight: 600;
    line-height: 80px;
}

.landing__heading-subtitle {
    margin: 0;
    font-size: var(--l-size-small);
    letter-spacing: var(--l-tracking);
    text-transform: uppercase;
}

/* NB sull'ordine di caricamento: questo foglio viene servito PRIMA di
   meltar.css, perche' in index.php <jdoc:include type="styles" /> sta a
   riga 30 mentre meltar.css e' un <link> scritto a mano a riga 46. Le
   classi .landing-* sono nuove e non collidono, ma un eventuale override
   di elementi condivisi (#header, #container, ...) a parita' di
   specificita' perderebbe: in quel caso serve un selettore piu' pesante.

   Header e spaziature del guscio: lasciati al default del sito. */

/* ============================================================
   HERO — non e' un blocco della categoria, sono due moduli:
     posizione "foto"      -> Landing - Foto [EN]        (id 186)
     posizione "fotoAfter" -> Landing - Hero testo [EN]  (id 187)
   E' lo stesso schema delle altre pagine interne. Effetto
   collaterale voluto: con un modulo in "foto" il body perde
   noPhoto, quindi header trasparente e #container senza
   padding-top arrivano dal template, senza override.

   #foto e' gia' alto 100vh e #foto-after e' gia' assoluto sopra
   con un velo rgba(0,0,0,.2): qui serve solo posizionare il testo.
   Misure Figma: titolo 100px (ink 631-693 su 835), sottotitolo
   con tracking ~10px, ~70px dal fondo.
   ============================================================ */

#foto-after .landing-hero-text {
    /* Fuori da <main>: senza questa eredita il Cormorant dichiarato male
       da body e renderizza a 300. Vale per tutti i pezzi del guscio. */
    font-family: var(--l-font);
    position: absolute;
    right: 5%;
    bottom: 4.375rem;              /* ~70px */
    left: 5%;
    text-align: center;
    color: var(--l-white);
}

#foto-after .landing-hero-text h1 {
    margin: 0;
    font-family: var(--l-font);
    font-size: clamp(2.75rem, 6.94vw, var(--l-size-h1));
    font-weight: 500;
    line-height: 0.9;              /* 90/100 */
    color: inherit;
}

#foto-after .landing-hero-text p {
    margin: 3.5rem 0 0;
    /* 30px a 1440 (token h4), come le altre righe maiuscole della landing.
       Il tracking segue: nel Figma e' 10px, che a 30px sono 0.33em — con lo
       0.5em di prima, tarato sui 19px, verrebbero 15px. */
    font-size: clamp(1rem, 2.08vw, var(--l-size-h4));
    letter-spacing: 0.33em;
    text-transform: uppercase;
    color: inherit;
}

/* ============================================================
   HEADER — modulo "Landing - Header CTA [EN]" (id 188) nella
   posizione service. Due targhe a tutta altezza, come nel Figma:
   #CCB495 larga 189px e #695A4A larga 133px su 1280.
   ============================================================ */

#header .landing-header-cta {
    font-family: var(--l-font);
    display: flex;
    align-self: stretch;
    height: 100%;
}

#header .landing-header-cta p {
    display: flex;
    height: 100%;
    margin: 0;
}

#header .landing-header-cta .chip {
    display: flex;
    /* Necessario: .chip--cta e' un <a> e prende border-box da
       #header #service a (meltar.css), mentre .chip--date e' uno <span> e
       restava content-box. I 189px dichiarati diventavano cosi' 189+64 di
       padding = 253px reali, e sul mobile le due targhe sbordavano sopra
       il logo. Con border-box le due min-width sono davvero larghezze. */
    box-sizing: border-box;
    /* Nel Figma il testo della targa e' centrato in orizzontale (ink a +20px
       e -19px sui 188px) ma appoggiato in basso (28px dal fondo su 145).
       Su un contenitore in riga il verticale lo governa align-items, non
       justify-content: quest'ultimo resta center o il testo va a destra. */
    align-items: flex-end;
    justify-content: center;
    /* Il padding inferiore e' in px, non in rem, di proposito: l'altezza di
       #header e' fissa a 128px in meltar.css, quindi la spaziatura che ci si
       allinea deve restare ancorata alla stessa unita'.
       Ai lati 20px, non 32: nel Figma l'ink del testo sta a +20/-19 sui 188px
       della targa, e con 32 per lato la targa uscirebbe dai 189px voluti. */
    padding: 0 1.25rem 34px;
    font-size: clamp(0.75rem, 1.04vw, 0.9375rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--l-white);
    white-space: nowrap;
}

#header .landing-header-cta .chip--date {
    min-width: 11.8125rem;         /* 189px */
    background-color: var(--l-brown-very-light);
}

#header .landing-header-cta .chip--cta {
    min-width: 8.3125rem;          /* 133px */
    background-color: var(--l-brown-figma);
}

/* Sugli schermi stretti la targa della data sparisce: #logo e' a left 5% con
   l'immagine mobile larga 100px, #service e' ancorato a right 5%, e le due
   targhe (189 + 20 + 133 = 342px) finirebbero sopra il logo. Sotto i 600px
   resta la sola CTA. La data non si perde: e' la riga dell'hero subito sotto
   ("9-11 October 2026"), modulo 187.
   Soglia a 600px e non 992: fra 600 e 991 il logo e' gia' quello mobile da
   100px, quindi 0,9 x 600 - 100 = 440px liberi contro i 342 necessari. */
@media (max-width: 599px) {
    #header .landing-header-cta .chip--date {
        display: none;
    }
}

/* Il pulsante "Menu" e l'overlay di navigazione non vengono piu' stampati
   affatto: se ne occupa index.php con $isLanding. Qui non serve nulla. */

/* ============================================================
   FOOTER — modulo "Landing - Footer [EN]" (id 189).
   I moduli standard EN sono in "tutte le pagine tranne la landing"
   e index.php da' al <footer> la classe footer-landing invece di
   "panel dark background-green-gradient-vertical": qui il fondo se
   lo mette questo foglio. Nel Figma la fascia footer (#7E7964) e il
   blocco reach sopra formano un campo unico, quindi usiamo lo
   stesso oliva per non far comparire una linea di stacco.
   ============================================================ */

#footer.footer-landing {
    background-color: var(--l-footer-to);  /* ripiego */
    background-image: linear-gradient(
        var(--l-reach-angle),
        var(--l-footer-from),
        var(--l-footer-to)
    );
    color: var(--l-white);
}

/* Stesse spaziature dei blocchi della landing: 4rem verticali, 5% ai lati,
   contenuto incolonnato a 80rem. Cosi' "Contact" si allinea con "How to
   reach us" che gli sta sopra, invece di seguire il padding del footer
   standard (2.8vh / 10vh). Vale solo per questo footer: il selettore ha
   la classe footer-landing e il foglio e' caricato dalle sole landing. */
#footer.footer-landing > .inner {
    padding: 4rem 5%;
}

#footer.footer-landing .landing-footer {
    font-family: var(--l-font);
    max-width: 80rem;
    margin-inline: auto;
}

#footer .landing-footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 7.75rem;
    align-items: start;
    padding-bottom: 4.5rem;
    color: var(--l-white);
}

#footer .landing-footer__top h2 {
    margin: 0;
    font-family: var(--l-font);
    font-size: clamp(2.5rem, 6.94vw, var(--l-size-h1));
    font-weight: 400;
    line-height: 0.9;
    color: inherit;
}

#footer .landing-footer__details p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
    color: inherit;
}

#footer .landing-footer__details p + p {
    margin-top: 2rem;
}

#footer .landing-footer__details a {
    color: inherit;
    text-decoration: none;
}

#footer .landing-footer__ig {
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

#footer .landing-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--l-size-small);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--l-white);
}

#footer .landing-footer__legal a {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 900px) {
    #footer .landing-footer__top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: 2.5rem;
    }

    #footer .landing-footer__legal {
        justify-content: flex-start;
        gap: 0.75rem 1.5rem;
    }
}

/* ------------------------------------------------------------
   Blocco: intro
   Figma 3629:10 — 1440x448, fondo bianco, tutto centrato.
   Rilevato dal file e dal render:
     filetto  x=720 (centro), y=64, 1x60px, colore #695A4A
     testo    x=289 y=144, 862x240 = 3 righe da 80px
              60px SemiBold (asta 4.6px su 60 -> 0.078)
              colore #695A4A (token Figma "brown-default")
     sotto il testo restano 64px, simmetrici al filetto
   ------------------------------------------------------------ */

.landing-intro {
    padding: 4rem 5%;            /* 64px sopra e sotto, come nel design */
    background-color: var(--l-white);
    color: var(--l-brown-figma);
    text-align: center;
}

.landing-intro__inner {
    max-width: 53.875rem;        /* 862px */
    margin-inline: auto;
}

/* Filetto verticale sopra il testo. */
.landing-intro__rule {
    display: block;
    width: 1px;
    height: 3.75rem;             /* 60px */
    margin: 0 auto 1.25rem;      /* 144 - (64+60) = 20px fino al testo */
    background-color: currentColor;
}

.landing-intro p {
    margin: 0;
    font-family: var(--l-font);
    font-size: clamp(1.75rem, 4.17vw, var(--l-size-h2));   /* 60px a 1440 */
    font-weight: 600;
    line-height: 1.3333;         /* 80/60 */
    color: inherit;
}

@media (max-width: 767px) {
    .landing-intro {
        padding-block: 2.5rem;
    }

    .landing-intro__rule {
        height: 2.5rem;
        margin-bottom: 1rem;
    }
}
/* ============================================================
   Intestazioni di sezione — ricorrono in 6 blocchi
   Layer Figma: titolo 90px di riga (= token h1 100/90),
   sottotitolo maiuscolo a 40px dal titolo (= token h4 30, ls 10).
   L'allineamento cambia: "the weekend", practices, schedule e
   included sono a sinistra; answers e request sono centrati.
   ============================================================ */

/* ------------------------------------------------------------
   Blocco: heading — Figma 3668:44
   E' l'intestazione di "the weekend", quindi NON e' su fondo bianco:
   sta in cima al gradiente della sezione e ha il testo bianco.
   Layer: intestazione a y=64, testo da x=80, poi 72px fino alla
   prima riga (metà dei quali sono il padding della riga stessa).
   ------------------------------------------------------------ */

.landing-heading {
    padding: 4rem 5% var(--l-gap-row);      /* 64px sopra */
    background-color: var(--l-bg-clay);
    background-image: linear-gradient(
        to bottom,
        var(--l-weekend-from),
        color-mix(in srgb, var(--l-weekend-to) 7.2%, var(--l-weekend-from))
    );
    color: var(--l-white);
}

.landing-heading__inner {
    max-width: 80rem;
    margin-inline: auto;
}

.landing-heading__inner > h2,
.landing__block [class$="__intro"] > h2 {
    margin: 0;
    font-size: clamp(2.5rem, 6.94vw, var(--l-size-h1));
    font-weight: 400;
    line-height: 0.9;                  /* 90/100 */
}

.landing-heading__inner > p,
.landing__block [class$="__intro"] > p {
    margin: 2.5rem 0 0;                /* 130 - 90 = 40px */
    font-size: clamp(1rem, 2.08vw, var(--l-size-h4));
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.33em;            /* 10px su 30px */
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Blocco: teacher — Figma 3629:13, 1440x772, fondo bianco
   immagine x=80 y=48 550x660 | testo x=729 (colonna 583)
   nome+ruolo 89px (45+30) · bio 112 (4x28) · citazione 56 · handle 28
   ------------------------------------------------------------ */

.landing-teacher {
    padding: 3rem 5%;
    background-color: var(--l-white);
    color: var(--l-brown-figma);
}

.landing-teacher__inner {
    display: grid;
    grid-template-columns: 550fr 583fr;
    gap: 6.1875rem;                     /* 729 - 630 = 99px */
    align-items: center;
    max-width: 80rem;
    margin-inline: auto;
}

.landing-teacher__portrait {
    margin: 0;
}

.landing-teacher__portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 550 / 660;
    object-fit: cover;
}

.landing-teacher__body h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.1;
}

.landing-teacher__body .landing-eyebrow {
    margin: 0.5rem 0 0;
    font-size: clamp(0.875rem, 1.39vw, 1.25rem);
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

.landing-teacher__bio {
    margin-top: 2.25rem;                /* 125 - 89 = 36px */
}

.landing-teacher__bio p,
.landing-teacher__quote p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.4;                   /* 28/20 */
}

.landing-teacher__quote {
    margin: 3rem 0 0;                   /* 285 - 237 = 48px */
    padding: 0;
    border: 0;
    font-style: italic;
}

.landing-teacher__handle {
    margin: 1.5rem 0 0;
    font-size: var(--l-size-small);
}

.landing-teacher__handle a {
    color: inherit;
}

/* ------------------------------------------------------------
   Blocco: row — Figma 3668:47/55, 1440x660
   Immagine 770x660 su un lato, scheda 660x324 centrata in
   verticale che la scavalca di 182px. Le colonne della griglia
   riproducono esattamente 192 | 478 | 182 | 588 del design.
   ------------------------------------------------------------ */

/* Fetta di gradiente della singola riga. --l-row-index arriva dal layout
   PHP; --l-gap-row e' meta' dello stacco fra righe, cosi' due padding
   adiacenti fanno i 72px del design e il fondo resta continuo (con un
   margine si vedrebbe il bianco nel mezzo).
   Il fondo piatto sotto e' il ripiego per i browser senza color-mix(). */
.landing-row {
    --l-row-f0: calc(0.072 + var(--l-row-index, 0) * 0.1856);
    --l-row-f1: calc(0.072 + (var(--l-row-index, 0) + 1) * 0.1856);

    padding-block: var(--l-gap-row);
    background-color: var(--l-bg-clay);
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--l-weekend-to) calc(var(--l-row-f0) * 100%), var(--l-weekend-from)),
        color-mix(in srgb, var(--l-weekend-to) calc(var(--l-row-f1) * 100%), var(--l-weekend-from))
    );
}

.landing-row__inner {
    display: grid;
    grid-template-columns: 13.333% 33.194% 12.639% 40.833%;
    align-items: center;
    min-height: 41.25rem;               /* 660px */
}

.landing-row__image {
    grid-area: 1 / 3 / 2 / 5;
    margin: 0;
    align-self: stretch;
}

.landing-row__card {
    grid-area: 1 / 2 / 2 / 4;
    z-index: 1;                         /* la scheda sta sopra la foto */
    padding: 3.8125rem 5rem;            /* 61px verticale, 80px orizzontale */
    background-color: var(--l-card);
    color: var(--l-brown-figma);
}

.landing-row--image-first .landing-row__inner {
    grid-template-columns: 40.833% 12.639% 33.194% 13.333%;
}

.landing-row--image-first .landing-row__image {
    grid-area: 1 / 1 / 2 / 3;
}

.landing-row--image-first .landing-row__card {
    grid-area: 1 / 2 / 2 / 4;
}

.landing-row__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-row__card h3 {
    margin: 0 0 1.25rem;
    padding-bottom: 1.25rem;            /* filetto a 20px dal titolo */
    border-bottom: 1px solid currentColor;
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.1;
}

.landing-row__card p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
}

.landing-row__card .landing-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Blocco: answers — Figma 3629:59, 1440x725, fondo sabbia
   Intestazione centrata. Voci larghe 382px: due per riga con
   68px di distanza, la terza va a capo e resta centrata.
   ------------------------------------------------------------ */

.landing-answers {
    padding: 4rem 5%;
    background-color: var(--l-bg-sand);
    color: var(--l-brown-figma);
    text-align: center;
}

.landing-answers__inner {
    max-width: 80rem;
    margin-inline: auto;
}

.landing-answers__intro {
    margin-bottom: 4.5rem;              /* 285 - 213 = 72px */
}

.landing-answers__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem 4.25rem;                  /* 48px verticale, 68px orizzontale */
    max-width: 52rem;                   /* 832px: forza due voci per riga */
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.landing-answers__item {
    flex: 0 1 23.875rem;                /* 382px */
}

.landing-answers__item h3 {
    margin: 0 0 1.75rem;                /* 108 - 80 = 28px */
    font-size: clamp(1.75rem, 4.17vw, var(--l-size-h2));
    font-weight: 400;
    line-height: 1.3333;                /* 80/60 */
}

.landing-answers__item p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
}

/* ------------------------------------------------------------
   Blocco: practices — Figma 3629:378, fondo marrone, testo bianco
   Voce: titolo 45px, keywords 20px, corpo 20px su 1014px,
   momento in maiuscolo, filetto a tutta larghezza sotto.
   ------------------------------------------------------------ */

.landing-practices {
    padding: 4rem 5%;
    background-color: var(--l-practices-to);   /* ripiego, e colore di arrivo */
    background-image: linear-gradient(
        to bottom,
        var(--l-practices-from),
        var(--l-practices-to)
    );
    color: var(--l-white);
}

.landing-practices__inner {
    max-width: 80rem;
    margin-inline: auto;
}

.landing-practices__intro {
    margin-bottom: 4.5rem;
}

.landing-practices__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-practices__item {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.landing-practices__item + .landing-practices__item {
    padding-top: 2rem;
}

.landing-practices__item h3 {
    margin: 0;
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.1;
}

/* Icona dell'elemento: 48x48, poi 8px fino al titolo (Figma: icona a y=0,
   titolo a y=56). Sono PNG bianchi con trasparenza estratti dal design. */
.landing-practices__icon {
    margin: 0 0 0.5rem;
}

.landing-practices__icon img {
    display: block;
    width: 3rem;
    height: 3rem;
}

.landing-practices__keywords {
    margin: 0.5rem 0 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
    opacity: 0.85;
}

.landing-practices__item > p:not([class]) {
    max-width: 63.375rem;               /* 1014px */
    margin: 2.5rem 0 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
}

.landing-practices__when {
    margin: 1.5rem 0 0;
    font-size: var(--l-size-small);
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Blocco: schedule — Figma 3629:379, fondo marrone
   Timeline: filetto verticale con un pallino per giornata,
   righe orario/attivita' separate da filetti orizzontali.
   ------------------------------------------------------------ */

.landing-schedule {
    padding: 4rem 5%;
    background-color: var(--l-brown-figma);
    color: var(--l-white);
}

.landing-schedule__inner {
    max-width: 80rem;
    margin-inline: auto;
}

.landing-schedule__intro {
    margin-bottom: 4.5rem;
}

/* Timeline con avanzamento. Nel Figma sono due linee sovrapposte: il
   binario spento (#968B80) e la porzione percorsa (#CCB495, il token
   brown-light). Qui sono i due pseudo-elementi della lista; l'altezza
   della seconda la guida --l-progress, che landing.js aggiorna con lo
   scroll. Senza JS resta a 0: si vede il solo binario, tutto leggibile. */
.landing-schedule__days {
    --l-progress: 0;

    position: relative;
    margin: 0;
    padding: 0 0 0 3.125rem;            /* spazio per il filetto verticale */
    list-style: none;
}

.landing-schedule__days::before,
.landing-schedule__days::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
}

.landing-schedule__days::before {
    bottom: 0;
    background-color: var(--l-track);
}

.landing-schedule__days::after {
    height: calc(var(--l-progress) * 100%);
    background-color: var(--l-brown-very-light);
}

.landing-schedule__day {
    position: relative;
}

.landing-schedule__day + .landing-schedule__day {
    margin-top: 3rem;
}

/* Pallino della timeline, uno per giornata. */
.landing-schedule__day::before {
    content: '';
    position: absolute;
    top: 0.9375rem;
    left: -3.7rem;
    width: 0.9375rem;
    height: 0.9375rem;
    border: 1px solid var(--l-track);
    border-radius: 50%;
    background-color: var(--l-brown-figma);
    transition: border-color 0.45s ease, background-color 0.45s ease;
}

/* landing.js aggiunge is-past quando lo scroll ha passato la giornata. */
.landing-schedule__day.is-past::before {
    border-color: var(--l-brown-very-light);
    background-color: var(--l-brown-very-light);
}

.landing-schedule__day h3 {
    margin: 0 0 1.25rem;                /* 70 - 50 = 20px */
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.1;
}

.landing-schedule__day ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-schedule__day li {
    display: flex;
    gap: 2rem;
    margin: 2rem 0 0 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: var(--l-size-body);
    line-height: 1.4;
}

.landing-schedule__time {
    flex: 0 0 8.3125rem;                /* 213 - 80 = 133px */
}

.landing-schedule__cta-wrap {
    margin-top: 4rem;
    text-align: center;
}

.landing-schedule__cta {
    margin: 0;
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    line-height: 1.1;
}

.landing-schedule__cta a {
    margin-top: 2.5rem;
}

/* ------------------------------------------------------------
   Blocco: included — Figma 3629:157, fondo bianco
   Sei voci da 28px con passo 44px, filetto sotto ciascuna,
   poi la nota a pie'.
   ------------------------------------------------------------ */

.landing-included {
    padding: 4rem 5%;
    background-color: var(--l-white);
    color: var(--l-brown-figma);
}

.landing-included__inner {
    max-width: 80rem;
    margin-inline: auto;
}

.landing-included__intro {
    margin-bottom: 4.5rem;
}

.landing-included__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-included__list li {
    padding: 0 0 0.5rem;
    border-bottom: 1px solid currentColor;
    font-size: var(--l-size-body);
    line-height: 1.4;
}

/* Trattino davanti a ogni voce: nel Figma e' una linea di 12px a x=0,
   con il testo che parte da x=24. */
.landing-included__list li::before {
    content: '';
    display: inline-block;
    width: 0.75rem;                 /* 12px */
    height: 1px;
    margin-right: 0.75rem;          /* testo a 24px dal bordo */
    vertical-align: middle;
    background-color: currentColor;
}

.landing-included__list li + li {
    margin-top: 0.5rem;
}

.landing-included__note {
    margin: 2rem 0 0;
    font-size: var(--l-size-small);
    line-height: 1.4;
}

.landing-included__note a {
    color: inherit;
}

/* ------------------------------------------------------------
   Blocco: statement — Figma 3629:189, 1440x663
   Immagine a tutta pagina con la frase sovrapposta, centrata.
   ------------------------------------------------------------ */

.landing-statement {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(20rem, 46vw, 41.4375rem);   /* 663px */
    padding: 4rem 5%;
    background-image: var(--l-statement-image);
    background-position: center;
    background-size: cover;
    color: var(--l-white);
    text-align: center;
}

.landing-statement::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.landing-statement__inner {
    position: relative;
    z-index: 1;
    max-width: 60rem;
}

.landing-statement p {
    margin: 0;
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.3;
}

/* ------------------------------------------------------------
   Blocco: request — Figma 3629:191, fondo verde
   Due colonne: testo 632px a sinistra, form 522px a destra,
   129px di distanza. Il form e' un widget esterno: qui c'e'
   solo il contenitore, dimensionato come nel design.
   ------------------------------------------------------------ */

.landing-request {
    padding: 4rem 5%;
    background-color: var(--l-green);
    color: var(--l-white);
}

.landing-request__inner {
    display: grid;
    grid-template-columns: 632fr 522fr;
    gap: 8.0625rem;                     /* 129px */
    align-items: start;
    max-width: 80rem;
    margin-inline: auto;
}

.landing-request__body h2 {
    margin: 0;
    font-size: clamp(2.5rem, 6.94vw, var(--l-size-h1));
    font-weight: 400;
    line-height: 0.9;
}

.landing-request__body > p {
    margin: 2.5rem 0 0;
    font-size: clamp(1rem, 2.08vw, var(--l-size-h4));
    line-height: 1.3;
    letter-spacing: 0.33em;
    text-transform: uppercase;
}

.landing-request__contacts {
    margin-top: 5.5rem;
}

.landing-request__contacts p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.4;
}

.landing-request__contacts a {
    color: inherit;
    text-decoration: none;
}

/* ------------------------------------------------------------
   Form della richiesta — static/landing-retreat/en.php
   Ricostruito con markup nostro al posto del widget embeddabile,
   che montava tutto in Shadow DOM e non era stilizzabile da qui.
   Stesso uid, stesso endpoint, stessi nomi di campo.
   ------------------------------------------------------------ */

.landing-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
}

@media (min-width: 40rem) {
    .landing-form {
        grid-template-columns: 1fr 1fr;
    }

    .landing-form__field--half {
        grid-column: span 1;
    }
}

.landing-form__field--full,
.landing-form__consent,
.landing-form__submit {
    grid-column: 1 / -1;
}

/* Trappola antispam: fuori dallo schermo, mai raggiungibile da tastiera. */
.landing-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.landing-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.landing-form__field label {
    font-size: var(--l-size-small);
    letter-spacing: 0.06em;
}

.landing-form__req {
    margin-left: 0.2em;
}

/* Nel Figma i campi non hanno riquadro: solo il filetto inferiore. */
.landing-form__field input,
.landing-form__field select,
.landing-form__field textarea {
    padding: 0.35rem 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--l-size-body);
    line-height: 1.5;
    color: inherit;
    appearance: none;
}

.landing-form__field textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.landing-form__field input:focus,
.landing-form__field select:focus,
.landing-form__field textarea:focus {
    outline: 0;
    border-bottom-color: var(--l-white);
}

.landing-form__field select option {
    color: var(--l-brown-figma);
}

/* Nel Figma il consenso ha 48px sopra: 24 di gap + 24 qui. */
.landing-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.landing-form__consent input {
    flex: none;
    margin-top: 0.25rem;
    accent-color: var(--l-white);
}

.landing-form__consent label,
.landing-form__consent p {
    margin: 0;
    font-size: var(--l-size-small);
    line-height: 1.4;
}

.landing-form__consent a {
    color: inherit;
}

.landing-form__submit {
    justify-self: start;
    margin-top: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Blocco: reach — Figma 3629:227, fondo oliva
   Sinistra: intestazione + mappa. Destra: i tre mezzi.
   Colonne da 578px con 124px di distanza. Interlinea 35px.
   ------------------------------------------------------------ */

.landing-reach {
    padding: 4rem 5%;
    background-color: var(--l-bg-olive);   /* ripiego */
    background-image: linear-gradient(
        var(--l-reach-angle),
        var(--l-reach-from),
        var(--l-reach-to)
    );
    color: var(--l-white);
}

.landing-reach__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 7.75rem;                     /* 124px */
    max-width: 80rem;
    margin-inline: auto;
}

.landing-reach__intro {
    grid-column: 1;
}

.landing-reach__intro h2 {
    margin: 0;
    font-size: clamp(2.5rem, 6.94vw, var(--l-size-h1));
    font-weight: 400;
    line-height: 0.9;
}

/* L'indirizzo NON e' un occhiello maiuscolo: va disattivata la regola
   condivisa delle intestazioni, che a parita' di peso vincerebbe.
   Da qui il selettore doppio. */
.landing-reach .landing-reach__intro > p {
    margin: 1.75rem 0 0;
    font-size: var(--l-size-body);
    line-height: 1.75;                  /* 35/20, piu' larga che altrove */
    text-transform: none;
    letter-spacing: 0;
}

.landing-reach__map {
    grid-column: 1;
    align-self: end;
    margin: 3rem 0 0;
}

.landing-reach__map img {
    display: block;
    width: 100%;
    height: auto;
}

.landing-reach__list {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-reach__item + .landing-reach__item {
    margin-top: 2.5rem;                 /* 215 - 175 = 40px */
}

.landing-reach__item h3 {
    margin: 0 0 1.25rem;                /* 70 - 50 = 20px */
    font-size: clamp(1.5rem, 3.13vw, var(--l-size-h3));
    font-weight: 400;
    line-height: 1.1;
}

.landing-reach__item p {
    margin: 0;
    font-size: var(--l-size-body);
    line-height: 1.75;
}

/* ------------------------------------------------------------
   Riduzione a colonna singola. Il Figma copre il solo desktop:
   sotto i 900px si impila tutto, mantenendo i colori del design.
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .landing-teacher__inner,
    .landing-request__inner,
    .landing-reach__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .landing-reach__intro,
    .landing-reach__map,
    .landing-reach__list {
        grid-column: 1;
        grid-row: auto;
    }

    .landing-row__inner,
    .landing-row--image-first .landing-row__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .landing-row__image,
    .landing-row--image-first .landing-row__image {
        grid-area: 1 / 1 / 2 / 2;
    }

    .landing-row__card,
    .landing-row--image-first .landing-row__card {
        grid-area: 2 / 1 / 3 / 2;
        margin: -3rem 5% 0;
        padding: 2rem;
    }

    .landing-schedule__day li {
        flex-direction: column;
        gap: 0.25rem;
    }

    .landing__block {
        padding-block: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing *,
    .landing *::before,
    .landing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}