/* ==========================================================================
   HERO CARTOLINA
   Video hero in cornice bianca ("cartolina"); al primo scroll si espande
   a fullscreen (body.hero-expanded). Opt-in: classe .hero-cartolina sulla
   section .cover-pagina (solo home). Su mobile la fascia alta resta bianca
   e l'espansione chiude solo i bordi laterali/basso.
   I controlli fixed sono una navbar: logo piccolo al centro (solo in stato
   cartolina, mai sopra il video), tasti quadrati a distanze uniformi.
   Stile e posizioni dei tasti restano identici anche in sovraimpressione.
   ========================================================================== */

:root {
    --hc-top:    clamp(56px, 8vh, 110px);  /* fascia bianca alta = altezza navbar */
    --hc-side:   clamp(56px, 6vw, 100px);
    --hc-bottom: calc(46px + 2 * var(--hc-nav-x));  /* contiene la chat con inset uniforme */
    --hc-nav-x:   28px;    /* distanza uniforme dei tasti dai bordi */
    --hc-nav-gap: 12px;    /* distanza uniforme tra i tasti */
    --hc-ctrl:    42px;    /* lato dei tasti quadrati */
    --hc-book-w: 132px;    /* larghezza fissa tasto Book Now (per allineare le lang) */
}

.cover-pagina.hero-cartolina {
    background-color: #fff;
}

.cover-pagina.hero-cartolina .mask-obj {
    clip-path: inset(var(--hc-top) var(--hc-side) var(--hc-bottom) var(--hc-side));
    transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
    will-change: clip-path;
}

body.hero-expanded .cover-pagina.hero-cartolina .mask-obj {
    clip-path: inset(0 0 0 0);
}

/* stato applicato via JS al primo paint (reload a metà pagina / bfcache) */
body.hero-anim-off .cover-pagina.hero-cartolina .mask-obj {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cover-pagina.hero-cartolina .mask-obj { transition: none; }
}

/* ==========================================================================
   NAVBAR CARTOLINA — stile e posizioni valgono SEMPRE (anche scrollati);
   gli id (#menu-overlay-btn-open, #prenotaBoxBtn) servono a vincere sulle
   regole body.page-scrolled di menu-overlay.css e prenota.css, caricati dopo.
   ========================================================================== */

/* logo: piccolo, centrato nella fascia alta; visibile SOLO in stato cartolina */
body.has-hero-cartolina .main-control-buttons.mcb-logo {
    top: 0;
    height: var(--hc-top);
    filter: none;
    transition: opacity .3s ease;
}
body.has-hero-cartolina .main-control-buttons.mcb-logo .l-image img {
    max-height: 54px;
    width: auto !important;
}
/* mai in overlay sul video: sparisce appena il video si espande (desktop)... */
@media all and (min-width: 813px) {
    body.hero-expanded .main-control-buttons.mcb-logo {
        opacity: 0;
        pointer-events: none;
    }
}
/* ...e in ogni caso quando la pagina è scrollata (senza scivolare: top fisso) */
body.has-hero-cartolina.page-scrolled .main-control-buttons.mcb-logo {
    opacity: 0;
    pointer-events: none;
    top: 0;
}

/* hamburger: sempre a sinistra nella posizione navbar, quadrato, barre blu
   (niente cerchio blu in sovraimpressione) */
body.has-hero-cartolina #menu-overlay-btn-open {
    top: calc((var(--hc-top) - 40px) / 2);
    left: var(--hc-nav-x);
    border-radius: 0;
    background-color: transparent;
}
body.has-hero-cartolina #menu-overlay-btn-open span,
body.has-hero-cartolina #menu-overlay-btn-open span:before,
body.has-hero-cartolina #menu-overlay-btn-open span:after {
    background: #1f5fbf;
}

/* lang: sempre in alto a destra, centrate nella fascia */
body.has-hero-cartolina .main-control-buttons.mcb-lang {
    top: calc((var(--hc-top) - var(--hc-ctrl)) / 2);
    right: var(--hc-nav-x);
    gap: var(--hc-nav-gap);
}

/* tasti quadrati, sempre */
body.has-hero-cartolina .main-control-buttons.mcb-lang .lang-pill,
body.has-hero-cartolina .main-control-buttons.mcb-servizio .mcb-contact-link,
body.has-hero-cartolina .main-control-buttons.mcb-chat .mcb-chat-toggle,
body.has-hero-cartolina #prenotaBoxBtn {
    border-radius: 0;
}

/* il tasto chiaro si definisce con un bordo, non con l'ombra */
body.has-hero-cartolina .main-control-buttons.mcb-lang .lang-pill {
    box-shadow: none;
    border: 1px solid rgba(31, 95, 191, .35);
}
body.has-hero-cartolina .main-control-buttons.mcb-lang .lang-pill.is-active {
    border-color: #1f5fbf;
}

/* --------------------------------------------------------------------------
   DESKTOP: Book Now sempre nella fascia alta a destra, lang subito accanto;
   chat/contatti allineati alla stessa distanza nel bordo basso
   -------------------------------------------------------------------------- */
@media all and (min-width: 813px) {

    body.has-hero-cartolina #prenotaBoxBtn {
        top: calc((var(--hc-top) - var(--hc-ctrl)) / 2);
        bottom: auto;
        right: var(--hc-nav-x);
        width: var(--hc-book-w);
        height: var(--hc-ctrl);
    }
    body.has-hero-cartolina #prenotaBoxBtn a {
        font-size: 14px;
        padding: 0;
    }

    body.has-hero-cartolina .main-control-buttons.mcb-lang {
        right: calc(var(--hc-nav-x) + var(--hc-book-w) + var(--hc-nav-gap));
    }

    body.has-hero-cartolina .main-control-buttons.mcb-chat {
        left: var(--hc-nav-x);
        bottom: var(--hc-nav-x);
    }
    body.has-hero-cartolina .main-control-buttons.mcb-servizio {
        left: var(--hc-nav-x);
        bottom: calc(var(--hc-nav-x) + 46px + var(--hc-nav-gap));
    }
}

/* --------------------------------------------------------------------------
   MOBILE (stesso breakpoint dell'hero in style.css)
   -------------------------------------------------------------------------- */
@media all and (max-width: 812px) {

    :root {
        --hc-top:    90px;  /* fascia bianca alta sempre visibile (logo + hamburger) */
        --hc-side:   14px;
        --hc-bottom: 14px;
        --hc-nav-x:  14px;
        --hc-ctrl:   40px;
    }

    /* come miramalfi: hero a tutto schermo anche su mobile, il video (16:9)
       viene ritagliato in verticale da object-fit: cover */
    .cover-pagina.hero-cartolina.wh-100 {
        height: 100vh !important;
        height: 100svh !important;  /* tiene conto della barra indirizzi iOS/Android */
    }

    /* espanso: si chiudono solo lati e basso, la fascia alta resta */
    body.hero-expanded .cover-pagina.hero-cartolina .mask-obj {
        clip-path: inset(var(--hc-top) 0 0 0);
    }

    /* il bottone audio (fixed, bottom:165px) deve cadere nell'area video */
    body.has-hero-cartolina .wrapper-content-button {
        bottom: 40px;
    }
}