/* ============================================================================
   ROAD 66 — Lecce
   Impianto manifesto · apertura a oggetto in evidenza · respiro alternato ·
   forma morbida · palette dal marchio (scuro / crema / rosso Road).

   L'alternanza scuro↔crema è la stessa del loro sito: è l'identità che il
   titolare si è costruito, qui portata a contrasto pieno invece che a
   fasce mezze vuote.
   ========================================================================= */

/* ——— Tema di sezione ————————————————————————————————————————————————————
   Una sezione chiara ridefinisce i token localmente: tutto quello che sta
   dentro (titoli, .u-nota, pulsanti vuoti, didascalie) si adegua da solo. */

main > section {
  background: var(--fondo);
  color: var(--testo);
  position: relative;
}

.sezione--chiara {
  --fondo: #fcf3dc;
  --fondo-alt: #f3e6c9;
  --testo: #16161a;
  --testo-tenue: #5c564a;
  --bordo: #e6d9bb;
}

/* ——— Tipografia di pagina ———————————————————————————————————————————————
   Manifesto: i titoli di sezione hanno la stessa taglia del titolo di
   apertura. Non c'è una scala nuova, è quella assegnata usata al massimo. */

h1,
h2 {
  font-weight: 400;
}

h2 {
  font-size: var(--t-h1);
  max-width: 18ch;
}

h3 {
  font-weight: 400;
}

.occhiello {
  font-size: var(--t-piccolo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 1rem;
}

.testata {
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}

.testata__testo {
  color: var(--testo-tenue);
  margin-top: -0.5rem;
}

.attacco {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1.4;
}

/* ——— Pulsanti — larghi quanto il loro testo ——————————————————————————— */

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.85rem 1.6rem;
  border-radius: var(--raggio-interattivo);
  font-size: var(--t-corpo);
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--durata-breve) var(--curva),
              background-color var(--durata-breve) var(--curva),
              color var(--durata-breve) var(--curva);
}

.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(0); }

.bottone--pieno {
  background: var(--accento);
  color: var(--su-accento);
}

.bottone--pieno:hover { background: #b03318; }

/* Nessun bordo (forma morbida): il pulsante secondario si stacca con una
   superficie piena appena più chiara del fondo della sua sezione. */
.bottone--vuoto {
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
}

.bottone--vuoto:hover {
  background: color-mix(in srgb, currentColor 20%, transparent);
}

.bottone--chiaro {
  background: #ffffff;
  color: var(--accento);
  font-size: var(--t-h4);
  padding: 1.1rem 2.2rem;
}

.bottone--chiaro:hover { background: #f3e6c9; }

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.azioni--minute { margin-top: 1.5rem; }

/* ——— Intestazione ———————————————————————————————————————————————————————
   Fondo pieno (con blur), non trasparente: sotto ci scorrono le foto. */

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, #16161a 92%, transparent);
  backdrop-filter: blur(10px);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: #fcf3dc;
  margin-right: auto;
}

.marchio img { width: 34px; height: 39px; }

.marchio__testo { display: grid; }

.marchio__testo strong {
  font-family: var(--font-titoli);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.1;
}

.marchio__testo small {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a396;
}

[data-menu-desktop] {
  display: flex;
  gap: 1.6rem;
  margin: 0;
}

[data-menu-desktop] a {
  color: #fcf3dc;
  text-decoration: none;
  font-size: var(--t-piccolo);
  padding-block: 0.4rem;
  transition: color var(--durata-breve) var(--curva);
}

[data-menu-desktop] a:hover { color: #ef6a45; }

.intestazione__chiama { padding: 0.6rem 1.1rem; font-size: var(--t-piccolo); }

.apri-menu {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-interattivo);
  background: color-mix(in srgb, #fcf3dc 12%, transparent);
  place-items: center;
}

.apri-menu__tratti,
.apri-menu__tratti::before,
.apri-menu__tratti::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: #fcf3dc;
  border-radius: 2px;
}

.apri-menu__tratti { position: relative; }

.apri-menu__tratti::before,
.apri-menu__tratti::after {
  content: '';
  position: absolute;
  left: 0;
}

.apri-menu__tratti::before { top: -6px; }
.apri-menu__tratti::after { top: 6px; }

/* ——— Menu mobile ————————————————————————————————————————————————————————— */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #16161a;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--durata) var(--curva);
}

html.menu-aperto #menu-mobile {
  opacity: 1;
  pointer-events: auto;
}

html.menu-aperto { overflow: hidden; }

#menu-mobile ul {
  display: grid;
  gap: 0.6rem;
  text-align: center;
  margin: 0;
}

#menu-mobile a {
  color: #fcf3dc;
  text-decoration: none;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
}

/* ——— 1. Apertura ————————————————————————————————————————————————————————— */

.apertura {
  padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(4rem, 3rem + 5vw, 8rem);
  overflow: hidden;
}

.apertura__griglia {
  display: grid;
  gap: clamp(2.5rem, 1rem + 6vw, 5rem);
  align-items: center;
}

.apertura h1 {
  max-width: 15ch;
  margin-bottom: 1.5rem;
}

.apertura__sotto {
  max-width: 42ch;
  color: var(--testo-tenue);
  font-size: var(--t-h4);
  line-height: 1.6;
}

.dati {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 3rem;
}

.dati dt {
  font-size: var(--t-piccolo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.dati dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
}

/* L'oggetto in evidenza: un soggetto solo, su fondo tenuto pulito, dentro una
   forma morbida. La cifra 66 dietro è ciò che si muove sullo scrub (site.js). */
.apertura__oggetto {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.apertura__cifra {
  position: absolute;
  z-index: -1;
  /* Sotto la foto, non dietro: dietro un'immagine opaca non si vedrebbe.
     Sborda in basso a sinistra, dove la colonna è vuota. */
  inset-inline-start: -0.14em;
  bottom: 0;
  translate: 0 30%;
  font-family: var(--font-titoli);
  font-size: clamp(11rem, 8rem + 22vw, 26rem);
  line-height: 0.8;
  color: color-mix(in srgb, var(--accento) 26%, transparent);
  user-select: none;
  pointer-events: none;
}

.apertura__oggetto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
}

/* ——— 2. Il menu ————————————————————————————————————————————————————————— */

.piatti {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin: 0;
}

.piatto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
  margin-bottom: 1.25rem;
}

.piatto h3 {
  font-size: var(--t-h3);
  margin-bottom: 0.4rem;
}

.piatto p {
  color: var(--testo-tenue);
  max-width: 34ch;
}

.menu__coda {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

/* ——— 3. Interludio ——————————————————————————————————————————————————————
   Il vuoto dell'alternanza: una frase sola, e basta. */

.insegna {
  padding-block: clamp(6rem, 4rem + 12vw, 16rem);
  text-align: center;
  background: var(--fondo-alt);
}

.insegna__frase {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: clamp(2.75rem, 1.5rem + 7vw, 7rem);
  line-height: 1.05;
  color: var(--testo);
}

.insegna__nota {
  margin-top: 2rem;
  color: var(--testo-tenue);
  font-size: var(--t-piccolo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ——— Blocchi a due colonne ———————————————————————————————————————————— */

.doppia {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.doppia__testo p + p { margin-top: 1.25rem; }

figure { margin: 0; }

.doppia__foto img,
.coppia-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
}

figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

.coppia-foto {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

/* ——— 5. Le sale — nastro orizzontale ————————————————————————————————————
   Su schermo largo lo scorrimento lo comanda lo scroll (scrub, site.js).
   Su mobile resta uno scorrimento a dito nativo: nessun JS, nessun rischio.
   Niente pin: il nastro traduce e basta, così non c'è spacer da sbagliare
   né titolo che finisce sotto l'header sticky. */

.nastro {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nastro::-webkit-scrollbar { display: none; }

.nastro__pista {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  margin: 0;
  padding-inline: var(--gronda);
  width: max-content;
}

.nastro__pista li { width: min(78vw, 30rem); }

.nastro__pista img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--raggio);
}

.nastro__pista figcaption {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  color: var(--testo);
}

/* ——— 8. Recensioni ——————————————————————————————————————————————————————— */

.voti {
  display: grid;
  gap: 1.5rem;
  margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.voti li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  background: var(--fondo-alt);
  border-radius: var(--raggio);
  padding: 1.5rem 1.75rem;
}

.voti strong {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: var(--t-h2);
  color: #ef6a45;
}

.voti span { color: var(--testo-tenue); font-size: var(--t-piccolo); }

.citazione {
  margin: 0;
  max-width: 46rem;
}

.citazione p {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1.45;
}

.citazione footer {
  margin-top: 1.25rem;
  font-size: var(--t-piccolo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  background: none;
  padding: 0;
}

/* ——— 9. Domande ————————————————————————————————————————————————————————— */

.domande {
  display: grid;
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  align-items: start;
}

.domande article {
  background: var(--fondo-alt);
  border-radius: var(--raggio);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.domande h3 {
  font-size: var(--t-h4);
  margin-bottom: 0.6rem;
}

.domande p { color: var(--testo-tenue); }

.domande a { color: var(--accento); }

/* ——— 10. Dove ——————————————————————————————————————————————————————————— */

.nap {
  font-style: normal;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1.35;
  margin-bottom: 1.5rem;
}

.orari {
  margin-top: 1.75rem;
  color: var(--testo-tenue);
}

.orari strong {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: var(--testo);
  font-size: var(--t-piccolo);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ——— 11. Prenota ———————————————————————————————————————————————————————— */

.prenota {
  background: var(--accento);
  color: var(--su-accento);
  padding-block: clamp(4rem, 3rem + 6vw, 9rem);
  text-align: center;
}

.prenota h2 {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 1rem;
}

.prenota p {
  color: color-mix(in srgb, #ffffff 82%, transparent);
  margin-bottom: 2.5rem;
}

.prenota .bottone { margin-inline: auto; }

/* ——— Piede ——————————————————————————————————————————————————————————————— */

footer {
  background: #0f0f12;
  color: #a8a396;
  padding-block: 3rem 6.5rem;
}

.piede {
  display: grid;
  gap: 1.5rem;
}

.piede address {
  font-style: normal;
  line-height: 1.7;
  color: #fcf3dc;
}

.piede a { color: inherit; }

.piede__social { margin-top: 0.75rem; font-size: var(--t-piccolo); }

/* ——— Barra fissa mobile ————————————————————————————————————————————————
   Sul loro sito il numero sta solo nel footer: qui resta sotto il pollice a
   qualunque altezza. Da 700px in su sparisce (c'è già nell'header). */

.barra-pollice {
  position: fixed;
  z-index: 90;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, #0f0f12 94%, transparent);
  backdrop-filter: blur(10px);
  color: #fcf3dc;
}

.barra-pollice .bottone { font-size: var(--t-piccolo); padding: 0.7rem 1.1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Adattamenti
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 699px) {
  [data-menu-desktop],
  .intestazione__chiama { display: none; }

  .apri-menu { display: grid; }

  .apertura__cifra {
    font-size: clamp(9rem, 40vw, 14rem);
    translate: 0 16%; /* meno respiro sotto la foto: sborda meno */
  }
}

@media (min-width: 700px) {
  .barra-pollice { display: none; }

  footer { padding-block: 4rem; }

  .piede {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .piatti { grid-template-columns: repeat(2, 1fr); }

  .coppia-foto { grid-template-columns: repeat(2, 1fr); }

  .domande { grid-template-columns: repeat(2, 1fr); }

  .voti { grid-template-columns: repeat(3, 1fr); }

  .voti li { flex-direction: column; gap: 0.35rem; }
}

@media (min-width: 1000px) {
  .apertura__griglia { grid-template-columns: 1.05fr 0.95fr; }

  .piatti { grid-template-columns: repeat(3, 1fr); }

  .doppia { grid-template-columns: 1fr 1fr; }

  .doppia--invertita .doppia__foto { order: 2; }
  .doppia--invertita .doppia__testo { order: 1; }
}

/* ——— Movimento ridotto ————————————————————————————————————————————————————
   Il ramo gemello di ogni animazione di site.js: la cifra e il nastro
   restano dove sono, il contenuto resta tutto visibile e il nastro si
   scorre a dito. */

@media (prefers-reduced-motion: reduce) {
  .apertura__cifra { transform: none !important; }

  .nastro__pista { transform: none !important; }

  .bottone:hover { transform: none; }
}