/* =============================================================================
   Sappada Experience — Main Stylesheet
   Mobile-first · CSS custom properties · BEM + Bootstrap 5.3.8
   ============================================================================= */


/* ── @font-face — Google Sans Flex (variabile, self-hosted) ─────────────────── */
/*
 * Font variabile con asse wght 1–1000.
 * Scaricato da jsDelivr/Fontsource (fontsource/font-files) — niente CDN in produzione.
 * Il file slnt copre l'obliquo/slant, usato come italic sintetico.
 */

/* File variabile UFFICIALE (Google Fonts v21) — asse SOLO wght (1–1000), nessun
   master italic → il corsivo è simulato (skew) dove serve. Self-hosted, no CDN. */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GSF-latin.woff2') format('woff2');
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
    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;
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GSF-latinext.woff2') format('woff2');
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
    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;
}


/* ── Custom Properties ───────────────────────────────────────────────────────── */

:root {
    /* ── Palette brand ── */
    --color-black:         #000000;
    --color-white:         #ffffff;
    --color-white-rgb:     255, 255, 255;
    --color-off-black:     #111212;
    --color-off-black-rgb: 17, 18, 18;

    /* Colori primari delle due landing */
    --color-snow:          #07407B;     /* Motoslitte Tour — blu */
    --color-snow-rgb:      7, 64, 123;
    --color-quad:          #E26C18;     /* Quad Tour — arancio */
    --color-quad-rgb:      226, 108, 24;

    /* Alias semantici */
    --color-text:          #111212;
    --color-bg:            #ffffff;
    --color-secondary:     #444444;
    --color-text-muted:    #6c757d;
    --color-border:        #e0e0e0;
    --color-grey:          #efeeec;
    --color-grey-rgb:      239, 238, 236;
    --color-footer-bg:     #181818;     /* footer: sfondo nero */

    /* Accent di default = landing neve (blu); override per-landing via body class */
    --color-accent:        var(--color-snow);
    --color-accent-rgb:    var(--color-snow-rgb);

    /* Bootstrap primary sincronizzato con l'accent corrente */
    --bs-primary:          var(--color-accent);
    --bs-primary-rgb:      var(--color-accent-rgb);

    /* Focus ring — usa l'accent della landing corrente */
    --focus-rgba:          rgba(7, 64, 123, 0.35);   /* default blu; override in .landing--quad */
    --focus-ring:          0 0 0 3px var(--focus-rgba);

    /* ── Tipografia ── */
    --font-family-base:    'Google Sans Flex', system-ui, -apple-system, sans-serif;
    --font-family-heading: var(--font-family-base);
    --line-height-base:    1.6;

    /* Type scale — il nome riflette il valore px a 1920px (viewport di riferimento grafica) */
    --fs-14:   0.875rem;
    --fs-16:   1rem;
    --fs-17:   1.0625rem;
    --fs-19:   clamp(1rem,     0.57vw + 0.5rem,  1.1875rem);
    --fs-21:   clamp(1rem,     0.68vw + 0.5rem,  1.3125rem);
    --fs-25:   clamp(1rem,     1vw    + 0.625rem, 1.5625rem);
    --fs-29:   clamp(1.125rem, 0.89vw + 0.75rem,  1.8125rem);
    --fs-40:   clamp(1.5rem,   1.25vw + 1rem,     2.5rem);
    --fs-44:   clamp(1.5rem,   1.46vw + 1rem,     2.75rem);
    --fs-55:   clamp(1.75rem,  2.03vw + 1rem,     3.4375rem);
    --fs-64:   clamp(2rem,     2.5vw  + 1rem,     4rem);
    --fs-80:   clamp(2.5rem,   3.33vw + 1rem,     5rem);
    --fs-85:   clamp(2.25rem,  3.59vw + 1rem,     5.3125rem);
    --fs-110:  clamp(3rem,     4.58vw + 1rem,     6.875rem);

    /* Spacing — il nome riflette il valore px a 1920px */
    --p-60:   clamp(20px, 3.125vw, 60px);
    --p-90:   clamp(30px, 4.69vw,  90px);
    --p-120:  clamp(60px, 6.25vw,  120px);
    --p-160:  clamp(90px, 8.33vw,  160px);

    /* Gutter container — usati con container-fluid */
    --gutter-off:   max(1.25rem, 8.3333vw);    /* padding laterale esterno (~160px @ 1920px) */
    --gutter-half:  calc(var(--gutter-off) / 2);
    --gutter-in:    max(0.9375rem, 0.8125vw);  /* gap interno colonne row */

    /* Transizioni */
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   0.25s var(--transition-timing);

    /* Header — SOLO per scroll-padding e spacer, mai su .header stesso */
    --header-height: 72px;
}


/* ── Accent switch — per-landing ─────────────────────────────────────────────── */
/*
 * Tutti i moduli useranno --color-accent e --color-accent-rgb.
 * La body class della pagina imposta quale brand è attivo.
 */

.landing--snow {
    --color-accent:     var(--color-snow);
    --color-accent-rgb: var(--color-snow-rgb);
    --focus-rgba:       rgba(7, 64, 123, 0.35);
}

.landing--quad {
    --color-accent:     var(--color-quad);
    --color-accent-rgb: var(--color-quad-rgb);
    --focus-rgba:       rgba(226, 108, 24, 0.35);
}


/* ── Reset minimale ──────────────────────────────────────────────────────────── */
/* Bootstrap reboot copre il grosso; qui solo ciò che non gestisce o che occorre sovrascrivere. */

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-family:             var(--font-family-base);
    font-size:               var(--fs-16);
    line-height:             var(--line-height-base);
    color:                   var(--color-text);
    background:              var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}

/* Bootstrap reboot imposta margin-bottom: 1rem su p — azzeriamo */
p {
    margin-block: 0;
}

/* Link neutri di default — colore e stile aggiunti nel contesto */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* Rimuove outline al click/tap, preserva navigazione tastiera — EAA */
a:focus:not(:focus-visible) {
    outline: none;
}

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

img:not([src]),
img[src=""] {
    visibility: hidden;
}


/* ── Selezione testo ─────────────────────────────────────────────────────────── */

::selection {
    background: var(--color-off-black);
    color: var(--color-white);
}


/* ── Accessibilità — Focus ring ──────────────────────────────────────────────── */
/* EAA / WCAG 2.4.7 — focus ring via box-shadow per preservare l'outline offset */

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-off-black);
    color: var(--color-white);
    font-weight: 600;
    border-radius: 4px;
}


/* ── Layout — Bootstrap overrides ───────────────────────────────────────────── */
/* Override via variabile Bootstrap — non padding-inline diretto */

.container-fluid {
    --bs-gutter-x: var(--gutter-off);
}

.row {
    --bs-gutter-x: var(--gutter-in);
}


/* ── Bootstrap .btn — override globali ──────────────────────────────────────── */
/*
 * Mai ricreare bottoni da zero — sempre variabili Bootstrap native.
 * Le varianti usano --bs-btn-* sulla classe specifica.
 */

.btn {
    --bs-btn-font-family:      var(--font-family-base);
    --bs-btn-font-size:        var(--fs-17);
    --bs-btn-font-weight:      600;
    --bs-btn-padding-x:        1.875rem;
    --bs-btn-padding-y:        0.765rem;
    --bs-btn-border-radius:    100px;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    letter-spacing: -0.01em;
}

/* Primary: usa l'accent della landing corrente */
.btn-primary {
    --bs-btn-bg:           var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-color:        #fff;
    --bs-btn-hover-bg:     color-mix(in srgb, var(--color-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-accent) 85%, #000);
    --bs-btn-hover-color:  #fff;
    --bs-btn-active-bg:    color-mix(in srgb, var(--color-accent) 75%, #000);
}

/* Light: bianco con testo scuro — usato su sfondi colorati/dark */
.btn-light {
    --bs-btn-bg:           #ffffff;
    --bs-btn-border-color: #ffffff;
    --bs-btn-color:        var(--color-off-black);
    --bs-btn-hover-bg:     rgba(255, 255, 255, 0.88);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.88);
    --bs-btn-hover-color:  var(--color-off-black);
}


/* ── Media utilities ─────────────────────────────────────────────────────────── */
/*
 * .media       — wrapper posizionato (position: relative)
 * .media-bg    — sfondo decorativo assoluto, pointer-events: none
 * .img-cover   — riempie il wrapper, object-fit: cover
 * .img-contain — riempie il wrapper, object-fit: contain
 * .img-scale   — riempie il wrapper, object-fit: scale-down
 *
 * Non usare Bootstrap .object-fit-* — non gestiscono position: absolute; inset: 0.
 */

.media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.media-bg::after {
    user-select: none;
    pointer-events: none;
}

.img-cover,
.img-contain,
.img-scale,
.media-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.img-contain { object-fit: contain; }
.img-scale   { object-fit: scale-down; }


/* ── Classi utility tipografiche ─────────────────────────────────────────────── */

.eyebrow {
    display: block;
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.title {
    font-size: var(--fs-40);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

/* Prosa editoriale: heading relativi, link underline */
.text {
    font-weight: 400;
    font-size: var(--fs-16);
    line-height: 1.6;
}

.text :is(h1, h2)     { font-size: 1.5em; }
.text :is(h3, h4)     { font-size: 1.25em; }
.text :is(h5, h6)     { font-size: 1.1em; }

.text :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
}

.text :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    padding-top: 2em;
}

.text :is(p, ul, ol):not(:first-child) {
    padding-top: 1.2em;
}

.text :is(ul, ol) {
    padding-left: 1em;
}

.text strong { font-weight: 600; }

.text a:not(.btn) {
    color: var(--color-accent);
    text-decoration: underline;
}

.text a:not(.btn):hover {
    text-decoration: none;
}


/* ── Page wrap & Page title ──────────────────────────────────────────────────── */

.page-wrap {
    padding-block: var(--p-90);
}

.page-title {
    font-size: var(--fs-55);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.page-content__body {
    font-size: var(--fs-16);
    line-height: 1.8;
}


/* ── Sections ────────────────────────────────────────────────────────────────── */

.section,
[class^="section-"] {
    padding-block: var(--p-90);
}


/* ── Header (smart header) ───────────────────────────────────────────────────── */
/*
 * Stato gestito da initSmartHeader() in main.js.
 * --header-height mai usato come min-height su .header → loop ResizeObserver.
 */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.45s var(--transition-timing),
                background-color 0.3s ease,
                padding-block 0.3s ease;
}

.header.is-unpinned {
    transform: translateY(-100%);
}

.header.is-pinned {
    padding-block: 0.625rem;
    background: rgba(var(--color-white-rgb), 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header.is-pinned .header__logo svg { filter: none; }
.header.is-pinned .header__menu-btn { color: var(--color-off-black); }

/* Header su sfondo bianco (page.php, legal, 404) — imposto via PHP */
.header--light .header__logo svg { filter: none; }
.header--light .header__menu-btn { color: var(--color-off-black); }

/* Logo brand (SVG inline da template-parts/brand.php) */
.brand { display: block; width: auto; height: 100%; }
.header__logo { display: inline-flex; height: 2.75rem; }
/* Bianco di default (header trasparente su hero scuro); torna scuro quando pinned/light */
.header__logo svg { filter: brightness(0) invert(1); }


/* ── Footer (pagine interne) ─────────────────────────────────────────────────── */

.footer {
    background: var(--color-footer-bg);
    color: var(--color-white);
}

/* Logo footer: bianco su fondo nero */
.footer__logo { display: inline-flex; height: 3rem; }
.footer__logo svg { filter: brightness(0) invert(1); }

.footer__main {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__col-title {
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1rem;
}

.footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__nav li a {
    font-size: var(--fs-19);
    color: rgba(255, 255, 255, 0.7);
}

.footer__nav li a:hover,
.footer__nav li a:focus-visible {
    color: var(--color-white);
}

.footer__legal {
    padding-block: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.8125rem;
}

.footer__copy {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

.footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

@media (min-width: 768px) {
    .footer__legal-links { justify-content: flex-end; }
}

.footer__legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.footer__legal-menu li a { color: rgba(255, 255, 255, 0.5); }
.footer__legal-menu li a:hover,
.footer__legal-menu li a:focus-visible { color: var(--color-white); }

.footer__credits { color: rgba(255, 255, 255, 0.4); }
.footer__credits a { color: rgba(255, 255, 255, 0.6); }
.footer__credits a:hover,
.footer__credits a:focus-visible { color: var(--color-white); }


/* ── Splash ──────────────────────────────────────────────────────────────────── */

/* Body della home: niente scroll, occupa tutto il viewport */
body.is-home-splash {
    overflow: hidden;
}

.splash {
    /* dvh come unità preferita (supporto moderno), vh come fallback per browser vecchi */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: row;
    position: relative;
}

/* Ogni metà è un link cliccabile che occupa il 50% della viewport */
.splash__half {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: flex 0.55s var(--transition-timing);
    text-decoration: none;
    color: var(--color-white);
}

/* Sfondo: .splash__media usa .media-bg (position:absolute; inset:0).
   L'overlay colore è già "cotto" nell'immagine JPG caricata dall'utente →
   nessun overlay CSS, nessun selettore per-brand qui.
   z-index -1: sta dietro al contenuto (statico) così lo ::after di
   .stretched-link copre l'INTERA metà, non solo il box del contenuto. */
.splash__media { z-index: -1; }

/* Contenuto (titolo, testo, bottone) sopra overlay e immagine */
.splash__content {
    /* statico (no position): così l'antenato posizionato più vicino del link
       è .splash__half e lo ::after di .stretched-link copre l'intera metà */
    padding: var(--p-60) var(--gutter-off);
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Titolo grande bold — prima riga normale, seconda (.splash__title-out) outline corsivo */
.splash__title {
    font-size: var(--fs-110);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

/* Link sul titolo + Bootstrap .stretched-link: l'intera metà diventa cliccabile
   ma il link accessibile ha testo significativo (il nome del tour), non un blocco enorme */
.splash__title-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    color: inherit;
    text-decoration: none;
}

/* Parola outline corsiva — differenziazione visiva brand Sappada */
.splash__title-out {
    /* Niente text-stroke (artefatti di contorno sul variable font): solo fill
       bianco semi-trasparente + corsivo simulato (skew, il font non ha asse italic) */
    display: inline-block;
    font-style: normal;
    transform: skewX(-9deg);
    color: rgba(255, 255, 255, 0.69);
}

.splash__text {
    max-width: min(416px, 90%);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.75;          /* 28/16 dalla grafica */
    color: var(--color-white);
    text-align: center;
    margin: 0;
}

.splash__cta {
    margin-top: 0.5rem;
}

/* ── Hover desktop: espansione della metà attiva ── */
/*
 * La metà su cui si passa si allarga (flex 1.15), l'altra si restringe (0.85).
 * La transizione su .splash__half è già definita sopra.
 */
@media (hover: hover) and (pointer: fine) {
    .splash:has(.splash__half--snow:hover) .splash__half--snow,
    .splash:has(.splash__half--quad:hover) .splash__half--quad {
        flex: 1.15;
    }

    .splash:has(.splash__half--snow:hover) .splash__half--quad,
    .splash:has(.splash__half--quad:hover) .splash__half--snow {
        flex: 0.85;
    }
}

/* Nessuna espansione per chi preferisce ridurre il movimento — EAA */
@media (prefers-reduced-motion: reduce) {
    .splash__half {
        transition: none;
    }
}

/* Slot logo: centrato in alto, sovrapposto alla divisione tra le due metà */
.splash__logo {
    position: absolute;
    top: clamp(1rem, 3vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;  /* il logo è decorativo; i click passano alle metà */
}

/* ── Mobile: stack verticale, niente hover expand ── */
@media (max-width: 767px) {
    body.is-home-splash {
        overflow: auto;   /* permette scroll se il contenuto è più alto dello schermo */
    }

    .splash {
        flex-direction: column;
        min-height: 100svh;
        min-height: 100dvh;
    }

    .splash__half {
        /* Ogni metà occupa metà viewport esatta — svh fallback per browser vecchi */
        flex: none;
        height: 50vh;
        height: 50svh;
    }

    /* Nessuna espansione hover su touch */
    .splash:has(.splash__half--snow:hover) .splash__half--snow,
    .splash:has(.splash__half--quad:hover) .splash__half--quad,
    .splash:has(.splash__half--snow:hover) .splash__half--quad,
    .splash:has(.splash__half--quad:hover) .splash__half--snow {
        flex: none;
    }

    .splash__logo {
        /* Su mobile il logo va sopra entrambe le metà (visibile su quella superiore) */
        top: 1rem;
    }
}


/* ── Footer home ─────────────────────────────────────────────────────────────── */
/*
 * Barra nera fissa in basso nello splash.
 * Info contatti a sinistra, language switcher a destra.
 */

.splash-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-black);   /* nero pieno */
    color: var(--color-white);
    padding-block: 0.625rem;
    font-size: 0.8125rem;             /* 13px */
}

/* Layout interno sul container-fluid: info a sinistra, lang a destra */
.splash-footer .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.splash-footer__info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.splash-footer__info a {
    color: rgba(255, 255, 255, 0.7);
}

.splash-footer__info a:hover,
.splash-footer__info a:focus-visible {
    color: var(--color-white);
}

.splash-footer__lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.splash-footer__lang a {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.splash-footer__lang a:hover,
.splash-footer__lang a:focus-visible,
.splash-footer__lang a[aria-current="true"] {
    color: var(--color-white);
}

/* Su mobile: footer in basso al flusso (non fixed) per evitare sovrapposizioni */
@media (max-width: 767px) {
    .splash-footer {
        position: relative;
        padding-block: 0.875rem;
    }
}


/* ── Edit Post Link ──────────────────────────────────────────────────────────── */
/* Fisso in basso a destra — visibile solo a utenti loggati */

.post-edit-link {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 0;
    padding: 10px 18px;
    background-color: #3c3c3c;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-top-left-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.post-edit-link:hover,
.post-edit-link:focus-visible {
    color: var(--color-white);
    background-color: #222;
}


/* =============================================================================
   Landing — Sezioni specifiche
   Mobile-first · var(--color-accent) per il colore brand (mai hardcoded)
   ============================================================================= */


/* ── Landing: Hero ───────────────────────────────────────────────────────────── */
/*
 * Occupa la viewport intera. L'immagine è LCP: fetchpriority="high" nel PHP.
 * L'overlay accent semitrasparente garantisce leggibilità del testo bianco.
 */

.lhero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-end;
    color: var(--color-white);
    overflow: hidden;
}

/* Immagine di sfondo — posizionata assoluta, copre l'intera sezione */
.lhero__media {
    position: absolute;
    inset: 0;
}

.lhero__media .img-cover {
    /* img-cover è già definita nel CSS base — si appoggia a quella */
    pointer-events: none;
}

/* Overlay accent semitrasparente sopra l'immagine */
.lhero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-accent-rgb), 0.55);
    pointer-events: none;
    z-index: 1;
}

/* Container del contenuto — sopra overlay e immagine */
.lhero .container-fluid {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
    padding-top: calc(var(--header-height) + var(--p-90));
}

.lhero__content {
    max-width: 44rem;
}

/* Titolo grande: peso estremo, tracking stretto */
.lhero__title {
    font-size: var(--fs-80);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.05em;
}

/* Parola outline — stessa tecnica del titolo splash */
.lhero__title-out {
    /* vedi nota .splash__title-out: niente stroke, solo fill bianco semi-trasparente */
    display: inline-block;
    font-style: normal;
    transform: skewX(-9deg);
    color: rgba(255, 255, 255, 0.69);
}

.lhero__subtitle {
    font-size: var(--fs-21);
    color: rgba(255, 255, 255, 0.88);
    max-width: 36ch;
    margin: 0 0 2rem;
    line-height: 1.5;
}

/* Wrapper bottoni — gap responsive */
.lhero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Accesso riduzione movimento — nessuna transizione sull'overlay */
@media (prefers-reduced-motion: reduce) {
    .lhero__overlay {
        transition: none;
    }
}


/* ── Landing: Intro ──────────────────────────────────────────────────────────── */
/*
 * 2 colonne: immagini a sinistra, testo a destra.
 * Su mobile: testo sopra, immagini sotto (order).
 */

.lintro {
    padding-block: var(--p-120);
}

/* Colonna immagini: due media sovrapposti / affiancati */
.lintro__images {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    order: 2;   /* su mobile le immagini vanno dopo il testo */
}

@media (min-width: 992px) {
    .lintro__images {
        order: 0;   /* desktop: ordine naturale */
    }
}

/* Ogni immagine occupa metà del wrapper con aspect-ratio fisso */
.lintro__images .media {
    flex: 1;
    aspect-ratio: 3 / 4;
}

/* Seconda immagine spostata verso il basso per effetto composizione */
.lintro__images .media:last-child {
    margin-top: clamp(2rem, 6vw, 5rem);
}

/* Colonna testo */
.lintro__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--p-60);
    order: 1;
}

@media (min-width: 992px) {
    .lintro__text {
        order: 0;
        padding-block: 0;
        padding-left: clamp(1.5rem, 3vw, 3rem);
    }
}


/* ── Landing: Lista tour ─────────────────────────────────────────────────────── */
/*
 * Intestazione eyebrow + titolo, poi lista di tour.
 * Ogni tour-item: immagine a sinistra (1/3), corpo a destra (2/3).
 */

.tour-list {
    padding-block: var(--p-120);
}

.tour-list__head {
    margin-bottom: var(--p-60);
}

.tour-list__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 4rem);
}

/* Singolo tour: riga immagine + corpo */
.tour-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tour-item {
        grid-template-columns: 1fr 2fr;
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: start;
    }
}

/* Media del tour — aspect-ratio verticale */
.tour-item__media {
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .tour-item__media {
        aspect-ratio: 3 / 4;
    }
}

.tour-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

.tour-item__title {
    font-size: var(--fs-29);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Meta riga: durata + prezzo */
.tour-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    font-size: var(--fs-16);
}

.tour-item__durata {
    color: var(--color-text-muted);
    font-weight: 500;
}

/* Prezzo in accent — visibilità rapida */
.tour-item__prezzo {
    font-size: var(--fs-19);
    font-weight: 700;
    color: var(--color-accent);
}

.tour-item__desc {
    color: var(--color-secondary);
    font-size: var(--fs-16);
    line-height: 1.65;
    margin: 0;
}

/* CTA testuale underline — link-like, non bottone pieno */
.tour-item__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--transition-base), text-decoration-color var(--transition-base);
    align-self: flex-start;
    margin-top: 0.25rem;
}

.tour-item__cta:hover,
.tour-item__cta:focus-visible {
    text-decoration: none;
    color: color-mix(in srgb, var(--color-accent) 80%, #000);
}

.tour-item__cta:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 2px;
}


/* ── Landing: Banner ─────────────────────────────────────────────────────────── */
/*
 * Banda full-width solo immagine. Altezza ~50-60vh.
 * Nessun contenuto testuale — puro impatto visivo.
 */

.banner {
    position: relative;
    height: clamp(240px, 50vh, 640px);
    overflow: hidden;
}

.banner__media {
    position: absolute;
    inset: 0;
}

/* .media-bg è già definita nel CSS base — img-cover gestisce il fill */


/* ── Landing: Carousel feature ───────────────────────────────────────────────── */
/*
 * Swiper con card feature: immagine + titolo con sfondo accent + testo.
 * initSwipers() in main.js gestisce l'istanza.
 */

.feature-carousel {
    padding-block: var(--p-120);
    overflow: hidden;   /* evita overflow orizzontale delle slide */
}

.feature-carousel__head {
    margin-bottom: var(--p-60);
}

/* Wrapper Swiper: overflow visibile per il peek della slide successiva */
.feature-carousel__swiper {
    overflow: visible;
}

/* Singola card */
.feature-card {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Immagine card — aspect ratio fisso */
.feature-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
}

/* Titolo su fascia sfondo accent — variante "quad" del progetto */
.feature-card__title {
    background: var(--color-accent);
    color: var(--color-white);
    font-size: var(--fs-21);
    font-weight: 700;
    line-height: 1.25;
    padding: 0.875rem 1.25rem;
    margin: 0;
}

/* Testo descrittivo sotto il titolo */
.feature-card__text {
    font-size: var(--fs-16);
    color: var(--color-secondary);
    line-height: 1.6;
    padding: 1rem 1.25rem;
    margin: 0;
    background: var(--color-grey);
    border-radius: 0 0 4px 4px;
    flex: 1;
}

/* Accesso riduzione movimento — disabilita transizioni Swiper */
@media (prefers-reduced-motion: reduce) {
    .feature-carousel__swiper {
        --swiper-transition-timing-function: step-start;
    }
}


/* ── Landing: Contatti ───────────────────────────────────────────────────────── */
/*
 * 2 colonne: info azienda (5/12) + mappa Google embed (7/12).
 * Su mobile: info sopra, mappa sotto.
 */

.lcontact {
    padding-block: var(--p-120);
}

.lcontact__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
    padding-block: var(--p-60);
}

@media (min-width: 992px) {
    .lcontact__info {
        padding-block: 0;
        padding-right: clamp(1.5rem, 3vw, 3rem);
    }
}

/* Dettagli contatto: indirizzo, email, telefono */
.lcontact__info address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--fs-16);
    color: var(--color-secondary);
    line-height: 1.6;
}

.lcontact__info a {
    color: var(--color-accent);
}

.lcontact__info a:hover,
.lcontact__info a:focus-visible {
    text-decoration: underline;
}

/* Colonna mappa — iframe responsivo */
.lcontact__map {
    padding-block: var(--p-60);
}

@media (min-width: 992px) {
    .lcontact__map {
        padding-block: 0;
    }
}

/* Wrapper iframe con aspect-ratio per mantenere proporzioni Google Maps */
.lcontact__map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}

/* iframe incolonnato dentro il wrapper — occupa tutto */
.lcontact__map-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ── Landing: Cross-link ─────────────────────────────────────────────────────── */
/*
 * Banda accent piena — rimanda all'altra landing (snow → quad o viceversa).
 * Testo bianco centrato, link sottolineato.
 */

.cross-link {
    background: var(--color-accent);
    padding-block: var(--p-60);
    text-align: center;
}

.cross-link .container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cross-link__text {
    font-size: var(--fs-21);
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    line-height: 1.5;
}

/* Link nella banda — underline visibile su sfondo colorato */
.cross-link__link {
    font-weight: 700;
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cross-link__link:hover,
.cross-link__link:focus-visible {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
}

.cross-link__link:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}


/* ── Quote modal ─────────────────────────────────────────────────────────────── */

/* Struttura base: overlay full-screen + panel centrato */
.quote-modal {
    position:        fixed;
    inset:           0;
    z-index:         1100;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.quote-modal[hidden] {
    display: none;
}

/* Overlay semi-trasparente: fade in all'apertura */
.quote-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    opacity:    0;
    transition: opacity var(--transition-base);
}
.quote-modal.is-open .quote-modal__overlay {
    opacity: 1;
}

/* Panel: slide-up + fade dal basso */
.quote-modal__panel {
    position:      relative;
    width:         min(720px, calc(100vw - 2rem));
    max-height:    90vh;
    overflow-y:    auto;
    background:    var(--color-white);
    border-radius: 16px;
    padding:       3rem 2.5rem 2.5rem;
    transform:     translateY(16px);
    opacity:       0;
    transition:    transform var(--transition-base), opacity var(--transition-base);
}
.quote-modal.is-open .quote-modal__panel {
    transform: translateY(0);
    opacity:   1;
}

/* Bottone chiudi: X sottile, niente cerchio */
.quote-modal__close {
    position:        absolute;
    top:             0.5rem;
    right:           0.5rem;
    width:           32px;
    height:          32px;
    border:          0;
    background:      transparent;
    color:           var(--color-text);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.quote-modal__close svg {
    width:  18px;
    height: 18px;
}

/* Nasconde titolo e descrizione GF (passati come false nello shortcode) */
#quote-modal .gform_title,
#quote-modal .gform_description {
    display: none !important;
}

/* Rimappa le variabili GF sull'accent del tema */
#quote-modal .gform-theme {
    --gf-color-primary:           var(--color-accent) !important;
    --gf-color-primary-rgb:       var(--color-accent-rgb) !important;
    --gf-color-primary-contrast:  #ffffff !important;
    --gf-ctrl-border-color-focus: var(--color-accent) !important;
    --gf-ctrl-shadow:             none !important;
    --gf-ctrl-choice-check-color: var(--color-accent) !important;
}

/* Barra di avanzamento percentuale */
#quote-modal .gf_progressbar_wrapper {
    margin-bottom: 2rem;
}
#quote-modal .gf_progressbar {
    height:        6px;
    border-radius: 100px;
    background:    var(--color-grey);
}
#quote-modal .gf_progressbar_percentage {
    height:        6px;
    border-radius: 100px;
    background:    var(--color-accent);
}
#quote-modal .gf_progressbar_percentage span {
    display: none;
}

/* Label campi: uppercase compatto, colore muted */
#quote-modal .gfield_label {
    text-transform: uppercase;
    font-size:      var(--fs-14);
    font-weight:    600;
    letter-spacing: 0.02em;
    color:          var(--color-text-muted);
}

/* Nasconde indicatore "(Obbligatorio)" — a11y gestita via aria-required */
#quote-modal .gfield_required {
    display: none;
}

/* Radio/checkbox nativi: pallino accent invece del blu browser */
#quote-modal .gform_wrapper input[type="radio"],
#quote-modal .gform_wrapper input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* Campi testo, email, tel, numero, select, textarea */
#quote-modal .gform_wrapper input[type="text"],
#quote-modal .gform_wrapper input[type="email"],
#quote-modal .gform_wrapper input[type="tel"],
#quote-modal .gform_wrapper input[type="number"],
#quote-modal .gform_wrapper select,
#quote-modal .gform_wrapper textarea {
    border:        2px solid var(--color-border);
    border-radius: 10px;
    height:        auto;
    line-height:   1.4;
    padding:       0.85rem 1rem;
}
#quote-modal .gform_wrapper textarea {
    min-height: 96px;
    height:     120px;
    resize:     vertical;
}

/* Focus ring sui campi: colore accent, niente outline browser */
#quote-modal .gform_wrapper input[type="text"]:focus,
#quote-modal .gform_wrapper input[type="email"]:focus,
#quote-modal .gform_wrapper input[type="tel"]:focus,
#quote-modal .gform_wrapper input[type="number"]:focus,
#quote-modal .gform_wrapper select:focus,
#quote-modal .gform_wrapper textarea:focus {
    border-color: var(--color-accent);
    outline:      none;
    box-shadow:   var(--focus-ring);
}

/* Footer e footer di pagina: bottoni in fila */
#quote-modal .gform_footer,
#quote-modal .gform_page_footer {
    display:    flex;
    gap:        1rem;
    margin-top: 3.25rem;
}

/* Bottoni Avanti e Invia: accent brand */
#quote-modal .gform_button,
#quote-modal .gform_next_button {
    background:     var(--color-accent);
    color:          var(--color-white);
    border:         0;
    border-radius:  10px;
    padding:        1rem 2rem;
    font-weight:    700;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    cursor:         pointer;
    box-shadow:     none;
}
#quote-modal .gform_button:hover,
#quote-modal .gform_next_button:hover {
    background: color-mix(in srgb, var(--color-accent) 85%, #000);
}
#quote-modal .gform_button:focus-visible,
#quote-modal .gform_next_button:focus-visible {
    outline:    none;
    box-shadow: var(--focus-ring);
}

/* Bottone Precedente: grigio neutro */
#quote-modal .gform_previous_button {
    background:     var(--color-grey);
    color:          var(--color-text);
    border:         0;
    border-radius:  10px;
    padding:        1rem 2rem;
    font-weight:    700;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    cursor:         pointer;
    box-shadow:     none;
}
#quote-modal .gform_previous_button:hover {
    background: var(--color-border);
}
#quote-modal .gform_previous_button:focus-visible {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(var(--color-off-black-rgb), 0.25);
}

/* Tema flatpickr — classe .sapex-fp aggiunta via onReady nel JS */
.sapex-fp.flatpickr-calendar {
    box-shadow:    none;
    border:        1px solid var(--color-border);
    border-radius: 14px;
    padding:       0.5rem;
}

/* Griglia giorni 7 colonne: fullwidth, no gap orizzontale */
.sapex-fp .dayContainer {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap:               1px;
    width:                 100%;
    min-width:             0;
    max-width:             none;
}
.sapex-fp.flatpickr-calendar .flatpickr-rContainer,
.sapex-fp.flatpickr-calendar .flatpickr-days {
    width:     100%;
    max-width: none;
}

/* Selettore anno nascosto (data singola: solo mese) */
.sapex-fp .flatpickr-current-month .numInputWrapper {
    display: none;
}
.sapex-fp .flatpickr-current-month {
    position:        static;
    width:           100%;
    left:            0;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.sapex-fp .flatpickr-current-month .flatpickr-monthDropdown-months {
    margin:           0;
    padding:          0;
    background-image: none;
    border:           0 !important;
}

/* Giorno singolo: cerchio quadrato-ratio, niente margine */
.sapex-fp .flatpickr-day {
    position:        relative;
    margin:          0;
    padding:         0;
    border:          0;
    width:           auto;
    max-width:       none;
    height:          auto;
    max-height:      none;
    aspect-ratio:    1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    border-radius:   50px;
}
.sapex-fp .flatpickr-day.today {
    border: 1px solid var(--color-border);
}

/* Giorno selezionato: cerchio accent */
.sapex-fp .flatpickr-day.selected,
.sapex-fp .flatpickr-day.selected:focus,
.sapex-fp .flatpickr-day.selected:hover {
    background:    var(--color-accent) !important;
    border:        0;
    color:         #fff;
    box-shadow:    none;
    border-radius: 50px !important;
}

/* MOBILE — bottom-sheet stile app */
@media (max-width: 991.98px) {
    .quote-modal {
        align-items: flex-end;
    }
    .quote-modal__panel {
        width:         100%;
        max-height:    92vh;
        border-radius: 20px 20px 0 0;
        padding:       1.5rem 1.25rem 2rem;
        transform:     translateY(100%);
    }
    .quote-modal.is-open .quote-modal__panel {
        transform: translateY(0);
    }
}

/* Riduzione movimento: disabilita transizioni per chi le ha disattivate nel SO */
@media (prefers-reduced-motion: reduce) {
    .quote-modal__overlay,
    .quote-modal__panel {
        transition: none;
    }
}