/* ============================================================================
   hero.css — HERO BESPOKE "Chill Out" (override dello scaffold)
   ----------------------------------------------------------------------------
   Layout split su crema: titolo Anton a sinistra, slideshow piatti a destra.
   Header ritematizzato (logo centrato + MENU) per leggere scuro sul crema.
   Caricato DOPO components.css/motion.css → vince sulle regole generiche.
   Coreografia d'ingresso e rotazione slide: assets/js/hero.js.
   ============================================================================ */

/* ============================================================ HEADER ===== */
/* Header FULL-WIDTH: annulla il cap di .container e allinea i contenuti agli
   stessi margini laterali della hero (clamp 1.5rem→8rem). Così il burger a
   destra cade esattamente sul bordo destro del contenuto hero. */
.site-header--chillout .site-header__inner {
  max-width: none;
  padding-inline: clamp(1.5rem, 6vw, 8rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.site-header--chillout .nav__map  { grid-column: 1; justify-self: start; }
.site-header--chillout .site-header__logo { grid-column: 2; justify-self: center; }
.site-header--chillout .nav        { grid-column: 3; justify-self: end; }

/* Logo immagine (quadrato nero del brand) */
.site-header__logo-img {
  display: block;
  height: clamp(48px, 6vw, 66px);
  width: auto;
  background: transparent;   /* niente riquadro bg-alt dietro il PNG scontornato */
}

/* Icona mappa scura sul crema */
.site-header--chillout .nav__map { color: var(--color-heading); }

/* Da scrollato: barra BIANCA piena → si stacca dagli sfondi crema delle section.
   Ombra/hairline leggera per separare ulteriormente; niente blur (bianco opaco). */
.site-header--chillout.scrolled {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(38, 38, 36, 0.06), 0 10px 28px rgba(38, 38, 36, 0.06);
}
/* Menu aperto: il pannello fullscreen (z-overlay) è antracite e copre l'header
   (z-header) col suo wipe dall'alto. L'header DEVE restare antracite anch'esso,
   non chiaro: altrimenti, nei primi frame del wipe (ease lento in partenza), la
   striscia chiara dell'header lampeggia bianca prima di essere coperta. Dark-on-
   dark = nessun flash, sia in cima (hero scura) sia da scrollato (header #fff). */
/* Menu aperto: l'header (logo/pin/burger) NON deve restare percepibile mentre
   il pannello entra. Lo nascondiamo di colpo: il pannello prende tutto lo
   schermo e si chiude con la X del pannello stesso. Niente striscia, niente
   logo che "galleggia" sopra il pannello durante l'apertura. In chiusura la
   classe sparisce → l'header riappare (resta coperto finché il pannello svanisce). */
.site-header--chillout.menu-open {
  opacity: 0;
  visibility: hidden;
  box-shadow: none;
  transition: none;
}

/* Niente nav inline / CTA desktop: menu sempre a pannello fullscreen */
.site-header--chillout .nav__list,
.site-header--chillout .nav__cta { display: none !important; }

/* ---- Burger: due linee SVG spesse e lunghe, ben visibili ---- */
.site-header--chillout .nav { gap: 0; }
.site-header--chillout .nav__hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 48px;   /* touch target ≥44px */
  padding: 0; cursor: pointer;
}
.nav__hamburger-icon {
  width: 44px; height: auto;
  stroke: var(--color-heading);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.nav__hamburger:hover .nav__hamburger-icon { stroke: var(--color-primary); }
.nav__hamburger:hover .nav__hamburger-icon line:first-child { transform: translateX(2px); transform-origin: left; }

/* ===================================================== MENU PANEL ======== */
/* Pannello fullscreen antracite (--color-secondary = #262624). */
.nav__panel {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-secondary);
  visibility: hidden; opacity: 0;
  /* fallback senza GSAP / reduced-motion: GSAP, se presente, sovrascrive inline */
  transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.nav--open .nav__panel {
  visibility: visible; opacity: 1;
  transition: opacity 0.4s var(--ease-out), visibility 0s;
}

/* Filo rosso che cavalca il bordo inferiore (= bordo d'attacco) del pannello
   mentre cala dall'alto: rende VISIBILE il reveal anche scuro-su-scuro.
   Invisibile a riposo: lo accende/spegne GSAP solo durante l'apertura. */
.nav__panel-edge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: var(--color-primary);
  box-shadow: 0 0 22px 3px rgba(237, 46, 53, 0.6);
  opacity: 0; pointer-events: none;
}

/* X di chiusura, allineata al margine destro come il burger */
.nav__close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.9rem);
  right: clamp(1.5rem, 6vw, 8rem);
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; border-radius: 50%; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.nav__close svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.nav__close:hover,
.nav__close:focus-visible { color: var(--color-primary); transform: rotate(90deg); }

/* Lista label centrate, grandi, Anton uppercase bianco */
.nav__panel-list {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.4rem, 1.6vh, 1rem);
  margin: 0; padding: 0; list-style: none;
  text-align: center;
}
.nav__panel-link {
  position: relative;
  display: inline-flex; align-items: center;
  padding-block: clamp(0.1rem, 0.6vh, 0.4rem);
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.04;
  font-size: clamp(2.4rem, 8vw, 5rem);
  color: #fff;
}
.nav__panel-text {
  display: inline-block;
  transition: transform var(--dur-mid) var(--ease-out);
}
/* Freccetta rossa: a sinistra del testo, compare al rollover */
.nav__panel-arrow {
  position: absolute; right: 100%;
  width: 0.62em; height: auto; margin-right: 0.32em;
  fill: none; stroke: var(--color-primary); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-0.35em);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.nav__panel-link:hover .nav__panel-arrow,
.nav__panel-link:focus-visible .nav__panel-arrow { opacity: 1; transform: translateX(0); }
.nav__panel-link:hover .nav__panel-text,
.nav__panel-link:focus-visible .nav__panel-text { transform: translateX(0.4em); }
/* La label resta BIANCA al rollover (annulla a:hover globale): cambia solo la freccia */
.nav__panel-link:hover,
.nav__panel-link:focus-visible { color: #fff; }
/* CTA "Prenota": label rossa per distinguerla, freccia resta rossa */
.nav__panel-link--cta { color: var(--color-primary); }
.nav__panel-link--cta:hover .nav__panel-text,
.nav__panel-link--cta:focus-visible .nav__panel-text { color: #fff; }

/* ============================================================== HERO ===== */
.hero--chillout {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  color: var(--color-heading);
  /* Sfondo full-viewport: foto reale del muro di mattoni del locale MOLTO
     sfumata sotto un velo crema, così resta solo una texture calda e il titolo
     scuro mantiene ottima leggibilità. Per regolare l'intensità della texture
     cambia l'alpha dei due rgba (più alto = più crema/meno foto). */
  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(250, 245, 241, 0.89), rgba(250, 245, 241, 0.89)),
    url("../../images/hero/bg-brick.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: clamp(92px, 12vh, 144px);
  padding-bottom: clamp(44px, 6vh, 84px);
}

/* Full-width: la hero NON è boxata a 1200px (annulla il cap di .container),
   spazia per tutta la viewport con margini laterali ampi e scalabili. */
.hero--chillout .hero__inner {
  max-width: none;
  padding-inline: clamp(1.5rem, 6vw, 8rem);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

/* ---- Colonna testo ---- */
.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.7rem, 6.4vw, 6rem);
  line-height: 0.93;
  letter-spacing: 0.004em;
  color: var(--color-heading);
  text-shadow: none;   /* annulla l'ombra dell'hero scuro dello scaffold */
}
.hero__line { display: block; overflow: hidden; }      /* maschera per il reveal di riga */
.hero__line-inner { display: block; will-change: transform; }
.hero__line--accent .hero__line-inner { color: var(--color-primary); }

.hero__text {
  margin-top: clamp(1.1rem, 2vw, 1.7rem);
  max-width: 46ch;
  font-size: var(--fs-400);
  line-height: 1.7;
  color: var(--color-text);
}

.hero__actions {
  margin-top: clamp(1.4rem, 3vw, 2.1rem);
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
}
/* Label CTA in maiuscolo come da mockup */
.hero--chillout .btn { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
/* "Scopri il menù": bordo rosso a riposo, riempimento rosso al hover */
.hero--chillout .btn--ghost { --_fg: var(--color-heading); border-color: var(--color-primary); }
.hero--chillout .btn--ghost:hover { --_bg: var(--color-primary); --_fg: #fff; border-color: var(--color-primary); }
/* CTA "Prenota" in rosso brand: riallinea l'alone/ombra (default ember) al rosso */
.hero--chillout .btn--cta { box-shadow: 0 8px 22px rgba(237, 46, 53, 0.30); }
.hero--chillout .btn--cta:hover { box-shadow: 0 14px 34px rgba(237, 46, 53, 0.42); }

/* ---- Colonna media: stage + slideshow ---- */
.hero__col--media { position: relative; }
.hero__stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.hero__slides { position: absolute; inset: 0; z-index: 1; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;     /* slide centrate nello stage */
  opacity: 0;
  transform-origin: 50% 55%;
  will-change: transform, opacity;
  /* immagini scontornate: galleggiano pulite, NESSUN riquadro/ombra.
     Annulla il fondo crema placeholder di base.css `img{background:...}`,
     che altrimenti traspare negli angoli trasparenti → quadrato visibile. */
  background: transparent;
}
.hero__slide.is-active { opacity: 1; }   /* stato base senza JS */

/* ---- Indicatore scroll ---- */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(16px, 3vh, 32px); transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--fs-300); letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__scroll-arrow {
  width: 18px; height: 18px;
  border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg);
}

/* ===================================================== STATI BASE (JS) === */
/* Pre-hide attivo SOLO se il JS parte (html.reveal-init). Se GSAP non c'è o
   reduced-motion → motion.js rimuove .reveal-init → tutto resta visibile. */
/* Il titolo lo nasconde GSAP via transform (le righe traslate restano dentro la
   maschera overflow:hidden). NON pre-nascondere con un transform CSS: GSAP lo
   rileggerebbe come base e lo sommerebbe allo yPercent (conflitto %/px). */
html.reveal-init .hero__title { visibility: hidden; }
html.reveal-init .hero__text,
html.reveal-init .hero__actions,
html.reveal-init .hero__scroll { opacity: 0; }
html.reveal-init .hero__slide.is-active { opacity: 0; }  /* lo slideshow parte dopo la cascata */

/* ===================================================== RESPONSIVE ======== */
@media (max-width: 768px) {
  /* Mobile (come da mockup): immagine in alto, testo sotto */
  .hero__inner { grid-template-columns: 1fr; gap: clamp(1.25rem, 5vw, 2rem); }
  .hero__col--media { order: -1; }
  .hero__stage { max-width: min(78vw, 380px); }
  .hero__title { font-size: clamp(2.3rem, 11vw, 3.6rem); }
  .hero__text { max-width: none; }
  .hero__actions { gap: 12px; }
  .hero__scroll { display: none; }   /* niente spazio sotto su mobile */
}

@media (min-width: 769px) {
  /* Desktop: pin mappa nascosto (come da mockup) */
  .site-header--chillout .nav__map { display: none; }

  /* Immagini grandi che RIEMPIONO la colonna destra: lo stage prende tutta
     la larghezza della colonna media (niente cap a 620px); l'altezza è
     limitata dal viewport (max-height in vh) così la hero non sfora mai.
     Box volutamente largo → le slide landscape arrivano al bordo colonna,
     quella quadrata riempie l'altezza. */
  .hero--chillout .hero__inner { grid-template-columns: 1fr 1.12fr; }
  .hero__stage {
    width: 100%;
    max-width: none;
    aspect-ratio: 1 / 1;
    max-height: min(64vh, 620px);
  }
}

/* ---- TABLET (769–1024px): hero IMPILATA, tutto in viewport -------------- */
/* Una sola colonna, ordine: header → gallery → testi → "Scorri" → barra
   Chiama/WhatsApp. Lo scorri sta SOPRA la barra (non più coperto). Sovrascrive
   il blocco desktop qui sopra perché viene dopo nel file. */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero--chillout {
    min-height: 100svh;
    padding-top: clamp(84px, 11vh, 116px);
    padding-bottom: clamp(118px, 16vh, 168px);   /* spazio per scorri + barra CTA */
  }
  .hero--chillout .hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(1.1rem, 3vh, 2rem);
    justify-items: center;
    text-align: center;
  }
  .hero__col--media { order: -1; }               /* gallery in cima */
  .hero__stage {
    width: min(58vw, 400px);
    max-width: none;
    max-height: 40vh;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }
  .hero__title { font-size: clamp(2.8rem, 6.4vw, 4.6rem); }
  .hero__text { max-width: 58ch; margin-inline: auto; }
  .hero__actions { justify-content: center; }

  /* Indicatore "Scorri" visibile e ancorato SOPRA la barra Chiama/WhatsApp */
  .hero__scroll { display: flex; bottom: clamp(72px, 9vh, 98px); }

  /* Barra Chiama/WhatsApp affiancati: forzata visibile anche ≥900px */
  .cta-mobile { display: flex; }
}

/* ---- DESKTOP BASSO (portatili landscape, poca altezza) ----------------- */
/* Sui portatili l'area utile del browser (schede + barra indirizzi + preferiti)
   lascia ~560–640px d'altezza, ma il titolo scala sulla LARGHEZZA (6.4vw) e
   resta enorme → le CTA finivano sotto il viewport. Qui, SOLO su desktop a due
   colonne (≥1025px) con altezza limitata, il titolo scala sull'ALTEZZA e i
   margini verticali si comprimono, così tutto rientra in 100svh. I monitor alti
   non sono toccati (mantengono il titolo grande d'impatto). */
@media (min-width: 1025px) and (max-height: 800px) {
  .hero--chillout {
    padding-top: clamp(70px, 11vh, 110px);
    padding-bottom: clamp(28px, 5vh, 56px);
  }
  .hero__title {
    /* legato all'altezza: su schermi bassi rimpicciolisce, senza scendere sotto una soglia leggibile */
    font-size: clamp(2.4rem, min(6.4vw, 8.4vh), 5.4rem);
  }
  .hero__text {
    margin-top: clamp(0.7rem, 1.6vh, 1.3rem);
    font-size: var(--fs-300);
    line-height: 1.55;
  }
  .hero__actions { margin-top: clamp(0.9rem, 2vh, 1.6rem); }
}

/* ============================================================================
   PELLE SCURA — "dark skin" della hero (mattoni scuri come il coming-soon).
   ----------------------------------------------------------------------------
   Blocco isolato in coda al file: RIMUOVERLO riporta la hero alla versione
   crema (vedi backup _backup-pre-hero-dark-2026-06-27). Sovrascrive le regole
   chiare qui sopra perché viene dopo nel file.
   ============================================================================ */

/* Sfondo: velo ANTRACITE sopra la foto reale dei mattoni (texture ~10%),
   stessa ricetta del coming-soon. Per più/meno mattoni cambia gli alpha. */
.hero--chillout {
  background-color: var(--color-secondary);          /* #262624 */
  background-image:
    linear-gradient(160deg, rgba(38, 38, 36, 0.82), rgba(38, 38, 36, 0.93)),
    url("../../images/hero/bg-brick.webp");
  color: var(--color-bg);                            /* crema */
}

/* Titolo chiaro (l'accento "Chill Out" resta rosso) */
.hero--chillout .hero__title { color: var(--color-bg); }

/* Paragrafo chiaro; le keyword in <strong> bianco pieno, il link indirizzo rosso */
.hero--chillout .hero__text        { color: rgba(250, 245, 241, 0.84); }
.hero--chillout .hero__text strong { color: var(--color-bg); }
.hero--chillout .hero__text a      { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* CTA "Scopri il menù" ghost: testo chiaro, bordo rosso; hover invariato (pieno rosso) */
.hero--chillout .btn--ghost { --_fg: var(--color-bg); border-color: var(--color-primary); }

/* Indicatore "Scorri" chiaro */
.hero--chillout .hero__scroll { color: rgba(250, 245, 241, 0.62); }

/* ---- HEADER a riposo SOPRA la hero scura: logo BIANCO + burger/pin chiari.
   Appena scrollato torna la barra bianca con logo scuro (regole originali). ---- */
.site-header__logo { position: relative; display: inline-block; }
.site-header__logo-img { transition: opacity var(--dur-fast) var(--ease-out); }
.site-header__logo-img--light {
  position: absolute; inset: 0;
  height: 100%; width: auto;
  opacity: 0;                                        /* default: nascosto */
}
/* A riposo (non scrollato): mostra il bianco, nascondi lo scuro */
.site-header--chillout:not(.scrolled) .site-header__logo-img--dark  { opacity: 0; }
.site-header--chillout:not(.scrolled) .site-header__logo-img--light { opacity: 1; }
/* Burger e pin mappa chiari a riposo (scrollato → tornano scuri dalle regole sopra) */
.site-header--chillout:not(.scrolled) .nav__hamburger-icon { stroke: var(--color-bg); }
.site-header--chillout:not(.scrolled) .nav__map            { color: var(--color-bg); }