/* ═══════════════════════════════════════════════════════════════
   Caffè Gabrè — caffegabre.it
   Direzione "Dalle 6 alle 23": la pagina attraversa la giornata,
   dall'alba rosa alla notte prugna, sulla sola tinta brand (H≈334).
   ═══════════════════════════════════════════════════════════════ */

/* ── Font (self-hosted, Fontshare FFL) ─────────────────────────── */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── Token ──────────────────────────────────────────────────────── */
:root {
  /* rampa brand: unica tinta, dal mattino alla notte */
  --alba:         oklch(0.975 0.012 333);
  --mattino:      oklch(0.955 0.030 333);
  --giorno:       oklch(0.930 0.052 333);
  --pomeriggio:   oklch(0.885 0.095 333);
  --rosa-2:       oklch(0.837 0.138 333);
  --magenta:      oklch(0.733 0.244 335);
  --magenta-deep: oklch(0.540 0.190 335);
  --prugna:       oklch(0.347 0.100 334);
  --notte:        oklch(0.230 0.055 333);
  --notte-fonda:  oklch(0.169 0.035 332);

  --ink:          oklch(0.235 0.040 333);
  --ink-soft:     oklch(0.370 0.045 333);
  --ink-inv:      oklch(0.965 0.015 333);
  --ink-inv-soft: oklch(0.840 0.045 333);

  /* spaziatura (base 4pt, fluida ai livelli alti) */
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --s-7: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --s-8: clamp(5rem, 3.5rem + 8vw, 11rem);

  /* tipografia */
  --font: "Cabinet Grotesk", system-ui, -apple-system, sans-serif;
  --testo-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --testo-h2:   clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --testo-h1:   clamp(2.1rem, 1.2rem + 4.5vw, 4.4rem);
  --testo-ora:  clamp(3.2rem, 2rem + 6vw, 5.8rem);

  /* movimento */
  --fuori-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --fuori-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* profondità */
  --z-barra: 10;
  --z-skip: 20;
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--testo-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--alba);
  font-kerning: normal;
}

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

h1, h2, h3 {
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-5);
}
p { text-wrap: pretty; margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--magenta-deep); text-underline-offset: 0.15em; }

::selection { background: var(--rosa-2); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: var(--s-3); left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--notte-fonda); color: var(--ink-inv);
  border-radius: 999px;
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ── CTA ────────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  background: var(--magenta-deep);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 180ms var(--fuori-quint), box-shadow 180ms var(--fuori-quint), background-color 180ms;
}
.cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 30px oklch(0.54 0.19 335 / 0.35); }
.cta:active { transform: scale(0.97); }

.cta--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px currentColor;
}
.cta--ghost:hover { box-shadow: inset 0 0 0 2px currentColor, 0 10px 30px oklch(0.54 0.19 335 / 0.15); }

/* varianti su fondo scuro */
.cta--su-scuro,
[data-zona="imbrunire"] .cta,
[data-zona="notte"] .cta,
[data-zona="notte-fonda"] .cta {
  background: var(--magenta);
  color: var(--notte-fonda);
}
[data-zona="imbrunire"] .cta--ghost,
[data-zona="notte"] .cta--ghost,
[data-zona="notte-fonda"] .cta--ghost,
.cta--ghost.cta--su-scuro {
  background: transparent;
  color: var(--ink-inv);
}

/* ═══ HERO · 06:00 ══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  isolation: isolate;
}

.hero-foto,
.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* video ambient: solo desktop e solo se il movimento è gradito;
   sotto c'è sempre la foto, che resta il fallback a costo zero */
.hero-video { display: none; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }
}

.hero-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      oklch(0.25 0.06 333 / 0.30),
      oklch(0.25 0.06 333 / 0.42) 55%,
      oklch(0.975 0.012 333 / 0) 88%,
      var(--alba) 100%),
    linear-gradient(to bottom,
      transparent 60%,
      oklch(0.25 0.06 333 / 0.25) 78%,
      transparent 92%);
}

.hero-contenuto {
  text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-8);
  max-width: 54rem;
}

.hero-logo {
  width: clamp(150px, 24vw, 230px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 4px 24px oklch(0.17 0.035 332 / 0.5));
}

.hero h1 {
  color: white;
  font-size: var(--testo-h1);
  font-weight: 800;
  margin: var(--s-5) 0 var(--s-4);
  text-shadow: 0 2px 26px oklch(0.17 0.035 332 / 0.65);
}

.hero-sotto {
  color: oklch(0.94 0.02 333);
  font-weight: 500;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  text-shadow: 0 1px 14px oklch(0.17 0.035 332 / 0.7);
  margin-bottom: var(--s-6);
}

.hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-bottom: var(--s-5);
}
.hero-azioni .cta--ghost { color: white; }

.hero-stato {
  color: oklch(0.9 0.04 333);
  font-weight: 500;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px oklch(0.17 0.035 332 / 0.8);
}
.hero-stato strong { color: white; }

.hero-scorri {
  position: absolute;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  left: 50%;
  translate: -50% 0;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
}
.hero-scorri .freccia { display: inline-block; }

/* coreografia d'ingresso della hero */
@media (prefers-reduced-motion: no-preference) {
  .hero-logo, .hero h1, .hero-sotto, .hero-azioni, .hero-stato {
    animation: sorgere 700ms var(--fuori-expo) backwards;
  }
  .hero h1      { animation-delay: 120ms; }
  .hero-sotto   { animation-delay: 240ms; }
  .hero-azioni  { animation-delay: 360ms; }
  .hero-stato   { animation-delay: 480ms; }
  .hero-foto img { animation: respiro 1400ms var(--fuori-expo) backwards; }
  .hero-scorri .freccia { animation: invito 2.4s ease-in-out 2s infinite; }
}
@keyframes sorgere {
  from { opacity: 0; transform: translateY(1.4rem); }
}
@keyframes respiro {
  from { transform: scale(1.045); }
}
@keyframes invito {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.35em); }
}

/* parallasse leggera della foto hero durante lo scroll */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-foto img {
      animation: sfila linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes sfila {
      to { transform: translateY(12vh) scale(1.06); }
    }
  }
}

/* ═══ BARRA AZIONI ══════════════════════════════════════════════ */
.barra-azioni {
  position: fixed;
  z-index: var(--z-barra);
  display: flex;
}
.barra-azioni a {
  color: var(--ink-inv);
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.barra-azioni a:hover { color: var(--magenta); }
.barra-azioni .icona {
  width: 1.05em;
  height: 1.05em;
  color: var(--magenta);
  flex: none;
}

/* mobile: barra fissa in basso, a tutta larghezza */
@media (max-width: 899px) {
  .barra-azioni {
    inset: auto 0 0 0;
    background: oklch(0.169 0.035 332 / 0.90);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid oklch(0.35 0.08 334 / 0.5);
  }
  .barra-azioni a {
    flex: 1;
    min-height: 56px;
    font-size: 0.95rem;
  }
  body { padding-bottom: 56px; }
}

/* desktop: pillola in alto a destra, appare dopo la hero */
@media (min-width: 900px) {
  .barra-azioni {
    top: var(--s-4);
    right: var(--s-4);
    gap: var(--s-2);
    background: oklch(0.169 0.035 332 / 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: var(--s-2) var(--s-3);
    box-shadow: 0 8px 32px oklch(0.17 0.035 332 / 0.35);
  }
  .barra-azioni a {
    padding: 0.4em 0.9em;
    border-radius: 999px;
    font-size: 0.92rem;
  }
  @supports (animation-timeline: scroll()) {
    .barra-azioni {
      animation: comparsa linear both;
      animation-timeline: scroll(root);
      animation-range: 60vh 100vh;
    }
    @keyframes comparsa {
      from { opacity: 0; transform: translateY(-0.75rem); pointer-events: none; }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ═══ SEZIONI-ORA: la giornata ══════════════════════════════════ */
/* Ogni sezione sfuma nel colore della successiva: il tramonto
   continuo è fatto di gradienti concatenati, senza JS. */
.ora { padding: var(--s-7) var(--s-5); }

[data-zona="alba"]       { background: linear-gradient(to bottom, var(--alba), var(--mattino)); color: var(--ink); }
[data-zona="mattino"]    { background: linear-gradient(to bottom, var(--mattino), var(--giorno)); color: var(--ink); }
[data-zona="giorno"]     { background: linear-gradient(to bottom, var(--giorno), var(--pomeriggio)); color: var(--ink); }
[data-zona="pomeriggio"] { background: linear-gradient(to bottom, var(--pomeriggio), var(--rosa-2)); color: var(--ink); }
/* il tramonto: dal rosa pieno alla prugna, dentro l'aperitivo */
[data-zona="imbrunire"] {
  background: linear-gradient(to bottom, var(--rosa-2) 0%, var(--magenta-deep) 26%, var(--prugna) 55%, var(--prugna));
  color: var(--ink-inv);
  padding-top: var(--s-8);
}
[data-zona="notte"]       { background: linear-gradient(to bottom, var(--prugna), var(--notte)); color: var(--ink-inv); }
[data-zona="notte-fonda"] { background: linear-gradient(to bottom, var(--notte), var(--notte-fonda)); color: var(--ink-inv); }

[data-zona="imbrunire"] a:not(.cta),
[data-zona="notte"] a:not(.cta),
[data-zona="notte-fonda"] a:not(.cta) { color: var(--rosa-2); }

/* ── Marcatore d'ora: la firma della pagina ─────────────────────── */
.ora-marcatore {
  max-width: 68rem;
  margin: 0 auto var(--s-6);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}
.ora-numero {
  font-size: var(--testo-ora);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--magenta-deep);
}
[data-zona="imbrunire"] .ora-numero,
[data-zona="notte"] .ora-numero,
[data-zona="notte-fonda"] .ora-numero {
  color: var(--magenta);
  text-shadow: 0 0 40px oklch(0.733 0.244 335 / 0.45);
}
.ora-nome {
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem);
  color: currentColor;
}

/* ── Griglie delle sezioni ──────────────────────────────────────── */
.ora-griglia {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.ora-testo { max-width: 34rem; }
.ora-testo h2 { font-size: var(--testo-h2); font-weight: 800; }
.ora-testo--centrato {
  max-width: 42rem;
  margin: 0 auto var(--s-6);
  text-align: center;
}

.ora-foto img {
  border-radius: 18px;
  box-shadow: 0 18px 50px oklch(0.17 0.035 332 / 0.18);
}
.ora-foto--glow img {
  box-shadow:
    0 18px 60px oklch(0.733 0.244 335 / 0.28),
    0 4px 24px oklch(0.17 0.035 332 / 0.5);
}
.ora-foto, .ora-testo { margin: 0; min-width: 0; }
.ora-testo--centrato { margin-inline: auto; margin-bottom: var(--s-6); }

@media (min-width: 900px) {
  .ora-griglia--foto-destra {
    grid-template-columns: 1fr 1.1fr;
    grid-template-areas: "testo foto" "piccola foto";
  }
  .ora-griglia--foto-destra .ora-testo { grid-area: testo; }
  .ora-griglia--foto-destra .ora-foto:not(.ora-foto--piccola) { grid-area: foto; }
  .ora-griglia--foto-destra .ora-foto--piccola {
    grid-area: piccola;
    width: min(78%, 22rem);
    justify-self: start;
    transform: translateY(calc(var(--s-6) * -0.4)) rotate(-1.2deg);
  }

  .ora-griglia--foto-sinistra {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "foto testo" "foto piccola";
  }
  .ora-griglia--foto-sinistra .ora-testo { grid-area: testo; }
  .ora-griglia--foto-sinistra .ora-foto:not(.ora-foto--piccola) { grid-area: foto; }
  .ora-griglia--foto-sinistra .ora-foto--piccola {
    grid-area: piccola;
    width: min(78%, 22rem);
    justify-self: end;
    transform: translateY(calc(var(--s-6) * -0.4)) rotate(1.4deg);
  }

  .ora-griglia--testo-largo { grid-template-columns: 1.15fr 1fr; }
}

/* su mobile la foto piccola si stringe e ruota appena */
@media (max-width: 899px) {
  .ora-foto--piccola {
    width: 74%;
    margin-left: auto;
    transform: translateY(calc(var(--s-5) * -1)) rotate(-1.5deg);
  }
}

.nota-gruppi {
  font-weight: 500;
  background: oklch(0.955 0.03 333 / 0.75);
  border-radius: 14px;
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}

/* ── Striscia foto del pranzo ───────────────────────────────────── */
.striscia-foto {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 26rem);
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s-2) var(--s-5) var(--s-5);
  margin-inline: calc(var(--s-5) * -1);
  scrollbar-width: none;
}
.striscia-foto::-webkit-scrollbar { display: none; }
.striscia-foto figure {
  scroll-snap-align: center;
  margin: 0;
}
.striscia-foto img {
  border-radius: 18px;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 18px 50px oklch(0.17 0.035 332 / 0.18);
}
.striscia-foto figcaption {
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: var(--s-3);
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .striscia-foto {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: unset;
    overflow: visible;
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: 0;
  }
  /* ritmo: la foto centrale scende appena */
  .striscia-foto figure:nth-child(2) { transform: translateY(var(--s-5)); }
}

/* ── Serate (cartellini rosa) ───────────────────────────────────── */
.serate {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
  display: grid;
  gap: var(--s-4);
}
.serate li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}
.cartellino {
  display: inline-block;
  background: var(--rosa-2);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.35em 0.9em;
  border-radius: 8px 14px 10px 12px / 12px 9px 14px 8px; /* tagliato a mano */
  rotate: -1.5deg;
  box-shadow: 0 3px 12px oklch(0.17 0.035 332 / 0.35);
}
.serate li:nth-child(2n) .cartellino { rotate: 1.2deg; }
.serate-social { font-size: 0.98rem; color: var(--ink-inv-soft); }

/* ── Galleria bento ─────────────────────────────────────────────── */
.galleria-bento {
  max-width: 68rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(110px, 22vw, 150px);
  grid-auto-flow: dense;
  gap: var(--s-3);
}
@media (min-width: 900px) {
  .galleria-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 150px;
    gap: var(--s-4);
  }
}
.g-cella {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  grid-row: span 2;
  cursor: zoom-in;
}
.g-larga { grid-column: span 2; }
.g-alta  { grid-row: span 4; }
.g-cella picture, .g-cella img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform 400ms var(--fuori-quint);
}
.g-cella:hover img { transform: scale(1.045); }
.g-cella figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-5) var(--s-4) var(--s-3);
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  background: linear-gradient(to top, oklch(0.17 0.035 332 / 0.75), transparent);
  opacity: 0;
  translate: 0 0.4rem;
  transition: opacity 250ms var(--fuori-quint), translate 250ms var(--fuori-quint);
}
.g-cella:hover figcaption, .g-cella:focus-visible figcaption { opacity: 1; translate: 0 0; }

/* ── Lightbox (dialog nativo) ───────────────────────────────────── */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 64rem);
  max-height: 92dvh;
  margin: auto;
}
.lightbox::backdrop {
  background: oklch(0.13 0.03 332 / 0.88);
  backdrop-filter: blur(10px);
}
.lightbox-figura { margin: 0; }
.lightbox-figura img {
  max-width: 100%;
  max-height: calc(92dvh - 9rem);
  width: auto;
  margin-inline: auto;
  border-radius: 16px;
  box-shadow: 0 30px 90px oklch(0 0 0 / 0.5);
}
.lightbox-figura figcaption {
  text-align: center;
  color: var(--ink-inv);
  padding: var(--s-4);
  display: grid;
  gap: 0.15rem;
}
.lightbox-figura figcaption span { color: var(--ink-inv-soft); font-size: 0.95rem; }
.lightbox-dock {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
}
.lightbox-dock button {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  outline-offset: 2px;
  transition: opacity 180ms, transform 180ms var(--fuori-quint);
  background: none;
}
.lightbox-dock button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-dock button:hover { opacity: 1; transform: translateY(-3px); }
.lightbox-dock button[aria-selected="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--magenta);
  transform: translateY(-3px) scale(1.06);
}
.lightbox-chiudi {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: oklch(0.28 0.07 334 / 0.85);
  color: var(--ink-inv);
  cursor: pointer;
  transition: background-color 180ms, transform 180ms var(--fuori-quint);
}
.lightbox-chiudi:hover { background: var(--magenta-deep); transform: scale(1.08); }
.lightbox-chiudi .icona { width: 20px; height: 20px; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-apri 260ms var(--fuori-expo); }
  @keyframes lightbox-apri {
    from { opacity: 0; transform: scale(0.965) translateY(0.6rem); }
  }
}

/* ── Recensioni ─────────────────────────────────────────────────── */
.ora--recensioni { padding-top: var(--s-6); }
.recensioni-voto {
  font-variant-numeric: tabular-nums;
  color: var(--ink-inv-soft);
}
.recensioni-voto strong { color: var(--ink-inv); font-size: 1.35em; }

.recensioni-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 30rem);
  gap: var(--s-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--s-4) var(--s-5) var(--s-5);
  margin-inline: calc(var(--s-5) * -1);
  scrollbar-width: none;
}
.recensioni-slider::-webkit-scrollbar { display: none; }
.recensioni-slider blockquote {
  scroll-snap-align: center;
  margin: 0;
  padding: var(--s-5) var(--s-6);
  background: oklch(0.28 0.07 334 / 0.6);
  border-radius: 18px;
}
.recensioni-slider p {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-inv);
}
.recensioni-slider footer {
  margin-top: var(--s-3);
  font-size: 0.92rem;
  color: var(--ink-inv-soft);
}
@media (min-width: 1100px) {
  .recensioni-slider {
    max-width: 68rem;
    margin-inline: auto;
    padding-inline: 0;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    overflow: visible;
  }
}

/* ── Dove siamo / orari ─────────────────────────────────────────── */
.ora--dove { padding-bottom: var(--s-7); }
.ora-griglia--dove { align-items: start; }
@media (min-width: 900px) {
  .ora-griglia--dove {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "testo orari" "mappa orari";
  }
  .ora-griglia--dove .ora-testo { grid-area: testo; }
  .ora-griglia--dove .mappa { grid-area: mappa; }
  .ora-griglia--dove .orari-tabella { grid-area: orari; }
}

.mappa {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.mappa figure { margin: 0; }
.mappa img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.82);
  transition: filter 250ms, transform 400ms var(--fuori-quint);
}
.mappa:hover img { filter: saturate(1); transform: scale(1.02); }
.mappa figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(to top, oklch(0.17 0.035 332 / 0.8), transparent);
}
.mappa-cta { color: white; font-weight: 700; font-size: 0.95rem; }
.mappa-credits { color: oklch(0.85 0.02 333); font-size: 0.72rem; }
address { font-style: normal; font-size: 1.15em; line-height: 1.5; margin-bottom: var(--s-5); }
.dove-contatti { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.orari-tabella h3 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--ink-inv-soft);
}
.orari-tabella dl { margin: 0; }
.orari-tabella dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid oklch(0.35 0.08 334 / 0.55);
}
.orari-tabella dt { font-weight: 500; }
.orari-tabella dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.orari-tabella .chiuso dt, .orari-tabella .chiuso dd { color: var(--rosa-2); }

/* ── Footer · fine giornata ─────────────────────────────────────── */
.fine {
  background: var(--notte-fonda);
  color: var(--ink-inv-soft);
  text-align: center;
  padding: var(--s-7) var(--s-5) var(--s-6);
}
.fine-logo {
  width: 110px;
  margin-inline: auto;
  opacity: 0.9;
}
.fine-firma {
  color: var(--ink-inv);
  font-weight: 500;
  font-size: 1.1rem;
  margin: var(--s-5) 0 var(--s-4);
}
.fine a { color: var(--rosa-2); }
.fine-social { margin-bottom: var(--s-5); }
.fine-legale { font-size: 0.85rem; max-width: 60ch; margin-inline: auto; }

/* ═══ REVEAL SCROLL-DRIVEN (solo enhancement) ═══════════════════ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* il reveal vive sugli elementi interni: le figure tengono
       i loro transform statici (rotazioni, offset di ritmo) */
    .ora-foto img, .ora-testo, .ora-marcatore, .striscia-foto img, .recensioni-slider blockquote {
      animation: emergere linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .ora-numero {
      animation: contare linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes emergere {
  from { opacity: 0.15; transform: translateY(2rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes contare {
  from { opacity: 0; transform: translateX(-0.6rem); letter-spacing: 0.06em; }
  to   { opacity: 1; transform: none; letter-spacing: -0.03em; }
}

/* ═══ REDUCED MOTION ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}