/* ============================================================================
   components.css — STILE DELLE SEZIONI (strutturale, non cambia per cliente)
   Mobile-first. Colori/font via var() da theme.css.
   ============================================================================ */

/* ============================================================ HEADER ===== */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: var(--space-sm);
  transition: transform var(--dur-mid) var(--ease-out),
              background var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  padding-block: var(--space-xs);
}
.site-header.is-hidden { transform: translateY(-110%); }
/* Menu aperto: la barra diventa solida e chiara così, insieme al pannello a
   tendina bianco che scende sotto, si legge come un unico blocco. Logo e icone
   passano allo scuro. (Niente backdrop-filter: lo sfondo è già opaco.) */
.site-header.menu-open {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.menu-open .nav__map { color: var(--color-heading); }
.site-header.menu-open .nav__hamburger span { background: var(--color-heading); }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }

.site-header__logo { position: relative; z-index: 2; display: inline-flex; align-items: center; } /* resta sopra l'overlay menu */
/* Logo immagine con due varianti sovrapposte: chiara sull'hero (sfondo scuro),
   scura quando l'header diventa bianco (scrolled) o quando il menu è aperto. */
.site-header__logo-img { display: block; height: 34px; width: auto; }
.site-header__logo-img--dark { display: none; }
.site-header.scrolled .site-header__logo-img--light,
.site-header.menu-open .site-header__logo-img--light { display: none; }
.site-header.scrolled .site-header__logo-img--dark,
.site-header.menu-open .site-header__logo-img--dark { display: block; }

/* Nav desktop */
/* Gap stretto su mobile (solo pin mappa + hamburger affiancati); torna largo da 900px. */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__list { display: none; gap: var(--space-md); }
.nav__link {
  position: relative; color: #fff; font-weight: 500; font-size: var(--fs-400);
  padding-block: 4px;
}
.site-header.scrolled .nav__link { color: var(--color-heading); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: #fff; transition: width var(--dur-mid) var(--ease-out);
}
.site-header.scrolled .nav__link::after { background: var(--color-primary); }
/* Sull'hero i link restano bianchi anche al hover (il rosso avrebbe poco
   contrasto sulle foto chiare dello slideshow): cambia solo l'underline.
   Da header scrollato (sfondo bianco) il hover torna ember, ben leggibile. */
.nav__link:hover { color: #fff; }
.site-header.scrolled .nav__link:hover { color: var(--color-primary); }
.nav__link:hover::after { width: 100%; }
.nav__cta { display: none; }

/* Pin mappa (solo mobile, nascosto da 900px come l'hamburger).
   Eredita il colore del testo dell'header: bianco sull'hero, scuro da scrollato. */
.nav__map {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 11px;
  position: relative; z-index: 2; color: #fff;
}
.nav__map svg { width: 100%; height: 100%; }
.site-header.scrolled .nav__map { color: var(--color-heading); }

/* Hamburger — stile "menu list": 3 barre piene a tutta larghezza, spesse e
   spaziate uniformemente. Apertura → X (spessore 3 + gap 4 = 7px di traslazione). */
.nav__hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 48px; height: 48px; padding: 12px;
  position: relative; z-index: 2; /* la X resta cliccabile sopra l'overlay */
}
.nav__hamburger span {
  display: block; height: 3px; width: 100%; background: #fff; border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-header.scrolled .nav__hamburger span { background: var(--color-heading); }
.nav--open .nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav--open .nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pannello a tendina mobile (stile Vallone): scende sotto la barra invece di
   coprire tutto lo schermo. Sfondo chiaro, link allineati a sinistra con riga
   separatrice, CTA a pillola larga in fondo. Apertura via max-height: non gonfia
   l'header fixed né sballa il calcolo delle ancore.
   Containing block = .site-header (fixed), quindi left/right:0 = larghezza piena;
   il padding-inline riallinea i contenuti alla griglia del .container. */
.nav__overlay {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding-inline: var(--container-pad);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 0; opacity: 0; pointer-events: none; visibility: hidden;
  transition: max-height 380ms var(--ease-out),
              opacity var(--dur-mid) var(--ease-out),
              padding var(--dur-mid) var(--ease-out),
              visibility 0s linear 380ms; /* nasconde dal focus solo a chiusura finita */
}
.nav--open .nav__overlay {
  max-height: min(82vh, 560px);
  opacity: 1; pointer-events: auto; visibility: visible;
  padding-block: var(--space-xs) var(--space-md);
  transition: max-height 380ms var(--ease-out),
              opacity var(--dur-mid) var(--ease-out),
              padding var(--dur-mid) var(--ease-out),
              visibility 0s;
}
.nav__overlay-list { display: flex; flex-direction: column; width: 100%; }
.nav__overlay-link {
  display: block; padding-block: var(--space-sm);
  font-family: var(--font-body); font-size: var(--fs-500); font-weight: 500;
  color: var(--color-heading); border-bottom: 1px solid var(--color-border);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), color var(--dur-fast);
}
.nav--open .nav__overlay-link { opacity: 1; transform: translateY(0); }
.nav__overlay-link:hover { color: var(--color-primary); }
.nav__overlay-list li:nth-child(1) .nav__overlay-link { transition-delay: 0.04s; }
.nav__overlay-list li:nth-child(2) .nav__overlay-link { transition-delay: 0.08s; }
.nav__overlay-list li:nth-child(3) .nav__overlay-link { transition-delay: 0.12s; }
.nav__overlay-list li:nth-child(4) .nav__overlay-link { transition-delay: 0.16s; }
.nav__overlay-list li:nth-child(5) .nav__overlay-link { transition-delay: 0.20s; }
.nav__overlay-list li:nth-child(6) .nav__overlay-link { transition-delay: 0.24s; }
/* CTA a pillola larga in fondo (eredita il reveal dai link, sovrascrive il resto) */
.nav__overlay-cta {
  margin-top: var(--space-md); padding: var(--space-sm); text-align: center;
  font-weight: 600; color: var(--color-text-on-dark);
  background: var(--color-bg-dark); border-radius: var(--radius-pill);
  border-bottom: 0;
}
.nav__overlay-cta:hover { color: #fff; background: var(--color-primary); }

/* ============================================================== HERO ===== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* Slide dello slideshow: sovrapposte, in crossfade via .is-active (hero-slideshow.js) */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero__slide.is-active { opacity: 1; }
.hero__slide picture { display: block; width: 100%; height: 100%; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,19,18,0.48) 0%, rgba(20,19,18,0.34) 42%, var(--color-overlay-dark) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  padding-top: 6rem; padding-bottom: 6rem;
  text-align: center;
}
.hero__claim { font-size: var(--fs-500); font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent); }
.hero__title {
  font-size: var(--fs-800); color: #fff; margin-block: 0.1em 0.15em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero__subline { font-size: var(--fs-500); color: rgba(255,255,255,0.92); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }

.hero__scroll {
  position: absolute; left: 50%; bottom: calc(54px + var(--space-md)); transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.85); font-size: var(--fs-300); letter-spacing: 0.12em; text-transform: uppercase;
}
.hero__scroll-arrow { width: 22px; height: 22px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); }
/* Mobile: si stringono le interlinee e si alza l'inizio del contenuto (meno
   padding-top) così, recuperando spazio, l'indicatore "Scorri" rientra sotto
   i CTA senza collidere. */
@media (max-width: 600px) {
  .hero__content { padding-top: 2.5rem; padding-bottom: 5rem; }
  .hero__claim   { line-height: 1.18; }
  .hero__title   { line-height: 1.03; margin-block: 0.35em 0.1em; }
  .hero__subline { line-height: 1.38; }
  .hero__actions { margin-top: var(--space-sm); }
  .hero__scroll  { bottom: calc(54px + var(--space-sm)); }
}

/* ============================================================= ABOUT ===== */
.about__grid { display: grid; gap: var(--space-lg); }
/* Stacco tra un blocco e il successivo. Serve soprattutto su mobile: le due
   colonne si impilano e senza questo il testo del blocco precedente finisce
   incollato all'H3 di quello dopo. Più largo del gap interno (48px) così la
   gerarchia resta leggibile: dentro il blocco stringe, tra i blocchi respira. */
.about__grid + .about__grid { margin-top: var(--space-xl); }
.about__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__body > * + * { margin-top: var(--space-sm); }
.about__cert-logo { width: 120px; height: auto; margin-top: var(--space-xs, 0.5rem); }
.about__points {
  display: grid; gap: var(--space-sm); margin-top: var(--space-md);
  border-top: 1px solid var(--color-border); padding-top: var(--space-md);
}
.about__points li { display: flex; align-items: baseline; gap: 0.6em; color: var(--color-text-muted); }
.about__point-num { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-600); color: var(--color-primary); }

/* ---- Dedica: da dove viene il nome ---------------------------------------
   Nota personale che chiude la sezione, non un terzo blocco di contenuto:
   niente foto, colonna stretta e centrata su fondo sabbia → si legge come una
   targa/dedica appesa in sala. La frase in dialetto è in Kalam (stesso font
   manoscritto di eyebrow e claim hero), il racconto in corpo testo tenue. */
.about__dedica {
  margin: var(--space-xl) auto 0;
  max-width: 62ch;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  text-align: center;
}
.about__dedica-lead {
  max-width: 34ch; margin-inline: auto;
  font-family: "Kalam", var(--font-body); font-weight: 700;
  font-size: var(--fs-600); line-height: var(--lh-snug);
  color: var(--color-heading);
}
.about__dedica-text {
  max-width: 52ch; margin: var(--space-sm) auto 0;
  color: var(--color-text-muted); font-size: var(--fs-400); line-height: var(--lh-body);
}

/* ===================================== MENU (editoriale a scacchiera) ==== */
/* ---- Elementi decorativi a inchiostro che attraversano lo stage in scroll --
   Line-art scuro su carta: mix-blend multiply lo fa leggere come inchiostro
   STAMPATO sul fondo sabbia (le parti chiare restano invariate, solo le linee
   scuriscono), non come un velo grigio. I contenuti stanno sopra (container
   z-index 1), gli elementi restano dietro (z-index 0) e a bassa opacità → i
   testi restano nitidi. Il moto è scroll-driven (GSAP scrub, menu-decor.js). */
.menu { position: relative; isolation: isolate; }
.menu .container { position: relative; z-index: 1; }

/* Layer che ospita gli elementi. overflow:hidden → possono spuntare oltre i
   bordi senza generare scroll orizzontale su mobile (lezione overflow-mobile). */
.menu__decor {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
/* Ogni elemento parte da un'ancora (left/top = angolo alto-sx) e viene animato
   INTERAMENTE da GSAP (menu-decor.js): transform (x/y/rotation/scale) + opacity,
   legati allo scroll. Qui solo lo stato di riposo: invisibile, line-art che si
   fonde come inchiostro sul fondo sabbia. transform-origin al centro → rotazione
   e zoom "sul posto". will-change:transform → hint GPU. */
.menu__deco {
  position: absolute; width: 150px; height: auto;
  opacity: 0;
  mix-blend-mode: multiply;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Ancore di partenza + dimensione. Il VIAGGIO (spostamenti/rotazioni/zoom) è nel
   JS (oggetto JOURNEY): qui si decide solo DA DOVE parte ognuno e quanto è grande.
   Ancore sparse sui 4 quadranti + lungo tutta l'altezza (top 7→76%) → coprono
   l'intera sezione durante lo scroll invece di affollarsi in alto. */
.menu__deco--peperone { left: 3%;   top: 7%;  width: 250px; }
.menu__deco--pizza    { left: 58%;  top: 30%; width: 320px; }
.menu__deco--fungo    { left: 10%;  top: 55%; width: 185px; }
.menu__deco--pomodoro { left: 66%;  top: 76%; width: 220px; }

/* Mobile: elementi più piccoli per non pesare sulla colonna singola. */
@media (max-width: 600px) {
  .menu__deco--peperone { width: 150px; }
  .menu__deco--pizza    { width: 190px; }
  .menu__deco--fungo    { width: 118px; }
  .menu__deco--pomodoro { width: 140px; }
}

/* Fallback (reduced-motion o GSAP assente): niente viaggio, elementi fermi e
   discreti all'ancora, così la sezione resta decorata ma statica. */
.menu__decor.is-static .menu__deco { opacity: 0.10; }

/* ---- Blocco Pizzeria: slider + testo, prima della griglia --------------- */
/* Full-width: esce dal .container e occupa tutta la larghezza del viewport.
   body ha overflow-x:hidden → il 100vw non crea scroll orizzontale.
   padding-inline = stesso gutter del container, così il contenuto non tocca i bordi. */
.pizzeria {
  display: grid; gap: var(--space-md); margin-top: var(--space-xl); align-items: center;
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding-inline: var(--container-pad);
}
.pizzeria__slider {
  position: relative; aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-secondary);
}
.pizzeria__slide {
  position: absolute; inset: 0; display: block; opacity: 0; cursor: zoom-in;
  transition: opacity 900ms var(--ease-out); pointer-events: none; /* solo la attiva è cliccabile */
}
.pizzeria__slide.is-active { opacity: 1; pointer-events: auto; }
.pizzeria__slider.is-gsap .pizzeria__slide { transition: none; } /* GSAP guida l'opacità */
.pizzeria__slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* scrim in basso: fa leggere i pallini bianchi anche su pizze chiare */
.pizzeria__slider::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(to top, rgba(28,27,27,0.5), transparent);
  pointer-events: none; z-index: 1;
}
.pizzeria__dots {
  position: absolute; left: 0; right: 0; bottom: var(--space-sm); z-index: 2;
  display: flex; gap: var(--space-2xs); justify-content: center;
}
.pizzeria__dot {
  width: 8px; height: 8px; padding: 0; border: none; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.55); cursor: pointer;
  transition: width var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.pizzeria__dot:hover { background: rgba(255,255,255,0.85); }
.pizzeria__dot.is-active { width: 26px; background: #fff; }

.pizzeria__body { max-width: 46ch; }
.pizzeria__body h3 {
  margin-top: var(--space-2xs);
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-600); line-height: var(--lh-tight); color: var(--color-heading);
}
.pizzeria__subtitle {
  margin-top: var(--space-xs);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-500); line-height: var(--lh-snug); color: var(--color-primary);
}
.pizzeria__text {
  margin-top: var(--space-sm);
  color: var(--color-text-muted); font-size: var(--fs-400); line-height: var(--lh-body);
}
.pizzeria__actions { margin-top: var(--space-md); }

/* Intestazione "Il ristorante" — pendant di "La pizzeria"; porta il divisorio
   che stacca il blocco pizzeria full-width dalla griglia pesce/cucina pugliese. */
.menu__list-head {
  text-align: center;
  margin-top: var(--space-2xl); padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}
.menu__list-head h3 {
  margin-top: var(--space-2xs);
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-700); line-height: var(--lh-tight); color: var(--color-heading);
}
.menu__list {
  display: grid; gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.menu-row { display: grid; gap: var(--space-md); align-items: center; }
.menu-row__title h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-600); line-height: 1.12; color: var(--color-heading);
}
.menu-row__subtitle {
  margin-top: var(--space-2xs);
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-300); line-height: 1.3; letter-spacing: 0.01em;
  color: var(--color-primary); text-transform: none;
}
.menu-row__media {
  display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 1 / 1; cursor: zoom-in; /* miniatura quadrata; lo zoom apre l'originale 3:4 */
}
.menu-row__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.menu-row__media:hover img { transform: scale(1.05); }
.menu-row__desc { color: var(--color-text-muted); font-size: var(--fs-400); line-height: 1.7; }
.menu__cta { text-align: center; margin-top: var(--space-2xl); }
.menu__cta-text {
  max-width: 52ch; margin-inline: auto;
  font-family: "Kalam", var(--font-body);
  color: var(--color-text-muted); font-size: var(--fs-600); line-height: var(--lh-snug);
}
.menu__cta .btn { margin-top: var(--space-md); }

/* ============================================================ GALLERY ===== */
/* Mobile-first = CAROSELLO a una foto: scroller orizzontale con scroll-snap,
   frecce ai lati e liniette in overlay. Da 600px torna una griglia (vedi sotto). */
.galleria { position: relative; }
.galleria__grid {
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: var(--radius-md); overflow-y: hidden;
}
.galleria__grid::-webkit-scrollbar { display: none; }
.galleria__grid-item {
  display: block; position: relative; overflow: hidden;
  flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; /* miniatura quadrata; lo zoom apre l'originale 3:4 */
}
.galleria__grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.galleria__grid-item:hover img { transform: scale(1.06); }

/* Frecce del carosello (solo mobile) */
.galleria__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 19, 18, 0.5); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.galleria__nav:hover { background: var(--color-primary); }
.galleria__nav svg { width: 22px; height: 22px; }
.galleria__nav--prev { left: 10px; }
.galleria__nav--next { right: 10px; }
.galleria__nav[disabled] { opacity: 0; pointer-events: none; }

/* Liniette del carosello (solo mobile), in overlay in basso */
.galleria__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  padding-inline: 12px;
}

/* Liniette condivise (carosello gallery + lightbox): corte, spesse, l'attiva ember */
.dot-lines { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dot-lines button {
  width: 18px; height: 4px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}
.dot-lines button:hover { background: rgba(255, 255, 255, 0.8); }
.dot-lines button.is-active { background: var(--color-primary); width: 28px; }

/* Liniette dentro il lightbox GLightbox (iniettate da gallery.js su .modal) */
.glightbox-bullets {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 99999;
  padding-inline: 16px; pointer-events: none;
}
.glightbox-bullets .dot-lines { pointer-events: auto; }
/* Frecce GLightbox: garantiamo visibilità e tap-target anche su mobile */
.glightbox-container .gnext,
.glightbox-container .gprev { background: rgba(20, 19, 18, 0.35); border-radius: 50%; }

/* ===================================== BADGE ZOOM (immagini lightbox) ==== */
/* Iniettato via JS (gallery.js) su ogni elemento zoomabile: lente con + e
   scritta "Zoom" in overlay. SEMPRE visibile: serve a far capire che la foto
   è cliccabile/zoomabile. In hover si intensifica leggermente. */
.zoom-badge {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(20, 19, 18, 0.55); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1; pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--dur-fast) var(--ease-out);
}
.zoom-badge svg { width: 14px; height: 14px; display: block; }
.menu-row__media:hover .zoom-badge,
.galleria__grid-item:hover .zoom-badge { background: var(--color-primary); }

/* ============================================================ BOOKING ===== */
/* Sfondo fotografico + overlay scuro per la leggibilità dei testi. */
.booking {
  position: relative;
  background-image:
    linear-gradient(rgba(18, 11, 7, 0.72), rgba(18, 11, 7, 0.72)),
    url('../../images/booking/sfondo-prenota-lu-tata-nzinu-otranto.webp');
  background-size: cover;
  background-position: center;
}
.booking__inner { position: relative; text-align: center; max-width: 60ch; margin-inline: auto; }
.booking__text { margin-top: var(--space-sm); margin-inline: auto; color: var(--color-text-on-dark); opacity: 0.9; }
.booking__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-lg); }

/* CTA WhatsApp: verde brand #25d366 con testo bianco. */
.btn--whatsapp { --_bg: #25d366; --_fg: #fff; border-color: #25d366; }
.btn--whatsapp:hover { --_bg: #1ebe5d; --_fg: #fff; border-color: #1ebe5d; }

/* ============================================================ REVIEWS ===== */
.reviews__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; --review-lines: 6; }
.review-card {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.review-card__stars { color: #f5b301; letter-spacing: 0.1em; font-size: var(--fs-500); }
.review-card__text { margin-top: var(--space-sm); font-size: var(--fs-400); }
/* Le recensioni Google sono lunghezze molto diverse: si troncano a un numero
   fisso di righe così tutte le card partono uguali, e "Leggi tutto" apre il
   testo intero. La classe .review-card--clamped la mette reviews.js SOLO se il
   testo eccede davvero → senza JS resta tutto leggibile. */
.review-card--clamped .review-card__text {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-lines, 8); line-clamp: var(--review-lines, 8);
  overflow: hidden;
}
/* Durante l'animazione l'altezza è forzata da JS: serve tagliare il contenuto
   in eccesso anche quando il clamp non è attivo (fase di apertura). */
.review-card.is-animating .review-card__text { overflow: hidden; }
.review-card__more {
  align-self: flex-start; margin-top: var(--space-sm);
  font-size: var(--fs-300); font-weight: 600; color: var(--color-primary);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.review-card__more:hover { color: var(--color-link-hover); }
.review-card__meta { display: flex; gap: 0.6em; align-items: baseline; margin-top: auto; padding-top: var(--space-md); color: var(--color-text-muted); font-size: var(--fs-300); }
.review-card__meta strong { color: var(--color-heading); }
.reviews__cta { text-align: center; margin-top: var(--space-lg); }
.reviews__cta-text {
  font-family: "Kalam", var(--font-body);
  font-size: var(--fs-500);
  text-align: center;
  margin-inline: auto;
}
.reviews__cta .btn { margin-top: var(--space-sm); }
/* Su desktop la CTA "lascia una recensione" più evidente: testo più grande + respiro. */
@media (min-width: 900px) {
  .reviews__cta { margin-top: var(--space-xl); padding-block: var(--space-lg); }
  .reviews__cta-text { font-size: var(--fs-600); max-width: 34ch; }
  .reviews__cta .btn { margin-top: var(--space-md); }
}

/* ============================================================ CONTACT ===== */
.contatti__grid { display: grid; gap: var(--space-lg); }

/* Colonna destra: mappa con, sotto, il pannello orari (staccato dalla mappa). */
.contatti__side { display: grid; }

/* ---- Righe contatto con icona in badge tondo ---------------------------- */
.contatti__list { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.contatti__row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm); }
.contatti__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.contatti__ico svg { width: 22px; height: 22px; }
.contatti__body { display: grid; gap: 3px; min-width: 0; }
.contatti__label {
  font-size: var(--fs-300); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.contatti__value {
  font-size: var(--fs-500); font-weight: 600; color: var(--color-heading);
  line-height: 1.25; text-decoration: none;
}
a.contatti__value { transition: color var(--dur-fast) var(--ease-out); }
a.contatti__value:hover { color: var(--color-primary); }

/* ---- Azioni rapide ------------------------------------------------------ */
.contatti__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.contatti__actions .btn { flex: 1 1 auto; }

/* ---- Social ------------------------------------------------------------- */
.contatti__social { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.contatti__social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-primary);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring);
}
.contatti__social-link:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }

/* ---- Pannello orari ----------------------------------------------------- */
.contatti__hours {
  margin-top: var(--space-lg); padding: var(--space-md);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.contatti__hours-head {
  display: flex; align-items: center; gap: 0.55em;
  font-weight: 700; color: var(--color-heading);
}
.contatti__hours-head svg { color: var(--color-accent); flex: none; }
.contatti__hours-list { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.contatti__hours-list li {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-2xs);
}
.contatti__hours-list li + li { border-top: 1px solid var(--color-border); }
.contatti__hours-list li span:first-child { color: var(--color-text-muted); }
.contatti__hours-list li span:last-child { font-weight: 600; color: var(--color-heading); font-variant-numeric: tabular-nums; }

.contatti__map { position: relative; min-height: 340px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.contatti__map-overlay { position: absolute; inset: 0; }
.contatti__map-overlay.hidden { display: none; }

/* Sfondo "mappa" disegnato: sabbia calda + reticolo strade + alone dietro al pin */
.contatti__map-grid {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(207,48,50,0.10), transparent 55%),
    repeating-linear-gradient(0deg,   rgba(46,46,47,0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg,  rgba(46,46,47,0.05) 0 1px, transparent 1px 46px),
    linear-gradient(160deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}
/* un paio di "strade" diagonali appena accennate */
.contatti__map-grid::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(52deg, transparent 46%, rgba(166,81,27,0.10) 46% 48%, transparent 48%),
    linear-gradient(-28deg, transparent 63%, rgba(166,81,27,0.08) 63% 65%, transparent 65%);
}

.contatti__map-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-xs); text-align: center;
  padding: var(--space-lg); color: var(--color-heading);
}

/* Pin brand con alone che pulsa */
.contatti__map-pin { position: relative; color: var(--color-primary); margin-bottom: var(--space-2xs); }
.contatti__map-pin svg { position: relative; width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(46,46,47,0.28)); }
.contatti__map-pin::before {
  content: ""; position: absolute; left: 50%; bottom: -4px; translate: -50% 0;
  width: 26px; height: 9px; border-radius: 50%;
  background: rgba(46,46,47,0.22); filter: blur(3px);
}
.contatti__map-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; translate: -50% 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--color-primary);
  animation: mapPulse 2.4s var(--ease-out) infinite;
}
@keyframes mapPulse {
  0%   { opacity: 0.6; transform: scale(0.6); }
  100% { opacity: 0;   transform: scale(3.2); }
}

.contatti__map-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-500); color: var(--color-heading); }
.contatti__map-addr { color: var(--color-text-muted); font-size: var(--fs-400); }
.contatti__map-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.contatti__map-directions {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 600; color: var(--color-link); text-decoration: none;
}
.contatti__map-directions svg { transition: transform var(--dur-fast) var(--ease-spring); }
.contatti__map-directions:hover { color: var(--color-primary); }
.contatti__map-directions:hover svg { transform: translateX(3px); }
.contatti__map-note { max-width: 34ch; margin-top: var(--space-xs); font-size: var(--fs-300); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .contatti__map-pin::after { animation: none; }
}
.map__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--dur-mid) var(--ease-out); }
.map__iframe.is-loaded { opacity: 1; }

/* ================================================================ FAQ ===== */
.faq__inner { max-width: 820px; margin-inline: auto; }
.faq__list { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  width: 100%; padding: var(--space-md); text-align: left;
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-500); color: var(--color-heading);
}
.faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: var(--color-primary); transition: transform var(--dur-mid) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0); }
.faq__answer {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-mid) var(--ease-out);
}
.faq__item.is-open .faq__answer { max-height: 320px; }
.faq__answer p { padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); }

/* ============================================================= FOOTER ===== */
.site-footer { background: var(--color-bg-dark); color: var(--color-text-on-dark); padding-block: var(--space-xl) var(--space-md); }
.site-footer__inner { display: grid; gap: var(--space-lg); }
.site-footer__logo-img { display: block; height: 48px; width: auto; }
.site-footer__seo { margin-top: var(--space-xs); opacity: 0.7; font-size: var(--fs-300); }
.site-footer__contacts, .site-footer__social { display: grid; gap: var(--space-2xs); }
.site-footer a { color: var(--color-text-on-dark); }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-300); opacity: 0.8;
}
.site-footer__copy { display: grid; gap: var(--space-2xs); }
.site-footer__vat { opacity: 0.75; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer__cookie-link { color: var(--color-text-on-dark); text-decoration: underline; }
.site-footer__cookie-link:hover { color: var(--color-primary); }

/* ========================================================= CTA MOBILE ===== */
.cta-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; gap: 1px; padding: 0;
  transform: translateY(110%); transition: transform var(--dur-mid) var(--ease-out);
  box-shadow: 0 -6px 20px var(--color-shadow);
}
.cta-mobile.is-visible { transform: translateY(0); }
.cta-mobile.is-hidden { transform: translateY(110%); }
.cta-mobile__btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 54px; font-weight: 600; color: #fff;
}
.cta-mobile__btn--call { background: var(--color-secondary); }
.cta-mobile__btn--book { background: var(--color-primary); }
.cta-mobile__btn:hover { color: #fff; filter: brightness(1.08); }

/* ======================================================= COOKIE BANNER ===== */
.cookie-banner {
  position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm);
  z-index: var(--z-cookie); max-width: 560px; margin-inline: auto;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-md);
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid);
}
.cookie-banner.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cookie-banner__text { font-size: var(--fs-300); color: var(--color-text); }
.cookie-banner__text a { color: var(--color-primary); text-decoration: underline; }
.cookie-banner__detail { max-height: 0; overflow: hidden; transition: max-height var(--dur-mid) var(--ease-out); }
.cookie-banner__detail.is-open { max-height: 200px; margin-top: var(--space-sm); }
.cookie-banner__toggle { display: flex; align-items: center; gap: 0.6em; font-size: var(--fs-300); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.cookie-banner__btn {
  flex: 1; min-height: 44px; padding: 0.6em 1em; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-300); border: 2px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.cookie-banner__btn--accept { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.cookie-banner__btn--accept:hover { background: var(--color-link-hover); border-color: var(--color-link-hover); }
.cookie-banner__btn--reject:hover, .cookie-banner__btn--customize:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cookie-banner__btn--save { width: 100%; margin-top: var(--space-sm); background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

/* ====================================================== BREAKPOINT >= 600 == */
@media (min-width: 600px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); --review-lines: 9; }
  /* Da tablet in su il carosello torna griglia 3×3 (niente scroll-snap/frecce) */
  .galleria__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs);
    overflow: visible; scroll-snap-type: none; border-radius: 0;
  }
  .galleria__grid-item { flex: none; aspect-ratio: 1; border-radius: var(--radius-md); }
  .galleria__nav, .galleria__dots { display: none; }
  .hero__content { text-align: left; }
  .hero__actions { justify-content: flex-start; }
  .cookie-banner__actions .cookie-banner__btn { flex: none; min-width: 120px; }
}

/* ====================================================== BREAKPOINT >= 900 == */
@media (min-width: 900px) {
  .nav { gap: var(--space-lg); }
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__map { display: none; }
  .nav__hamburger { display: none; }
  .nav__overlay { display: none; }

  .about__grid { grid-template-columns: 1fr 1.1fr; align-items: center; }
  .contatti__grid { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .pizzeria { grid-template-columns: 1.15fr 1fr; column-gap: var(--space-xl); }

  /* Menu: fino al tablet resta a 1 colonna (titolo → foto → descrizione impilati).
     La scacchiera a 3 colonne parte solo da desktop (≥1024px, vedi blocco sotto). */
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
  .cta-mobile { display: none; }

  /* Niente barra mobile: torna il layout editoriale bottom-aligned e lo
     "Scopri" si stacca leggermente dal fondo invece di incollarvisi. */
  .hero { align-items: flex-end; }
  .hero__content { padding-top: 8rem; padding-bottom: clamp(4rem, 12vh, 9rem); }
  .hero__scroll { bottom: var(--space-lg); }
}

/* ===== Menu editoriale a scacchiera — solo desktop (≥1024px) ================
   Su mobile e tablet ogni piatto è impilato (1 colonna). Da qui in su diventa
   una griglia a 2 colonne: [titolo+sottotitolo sopra la descrizione] | foto (zoom).
   Le righe `--alt` invertono testo/foto così le immagini zigzagano. */
@media (min-width: 1024px) {
  .menu__list { gap: var(--space-2xl); }
  .menu-row {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl); row-gap: var(--space-sm);
    align-items: center;
  }
  /* Colonna testo: titolo+sottotitolo (riga 1) e descrizione (riga 2) impilati,
     raccolti verso il centro accanto alla foto. */
  .menu-row__title { grid-column: 1; grid-row: 1; align-self: end; }
  .menu-row__desc  { grid-column: 1; grid-row: 2; align-self: start; }
  /* Foto: seconda colonna, alta quanto il blocco testo (niente miniatura quadrata). */
  .menu-row__media {
    grid-column: 2; grid-row: 1 / span 2;
    aspect-ratio: auto; align-self: stretch; min-height: 300px;
  }
  /* Scacchiera: nelle righe --alt il testo va a destra e la foto a sinistra. */
  .menu-row--alt .menu-row__title { grid-column: 2; }
  .menu-row--alt .menu-row__desc  { grid-column: 2; }
  .menu-row--alt .menu-row__media { grid-column: 1; }
}