/* ============================================================================
   SITE — Trattoria Nonna Tetti
   ----------------------------------------------------------------------------
   Impianto `manifesto`: Bodoni con molta aria attorno a ogni titolo, e tre
   pannelli a superficie piena (giallo, nero, giallo) che spezzano il ritmo
   delle sezioni dense. Respiro `alternato`: bianco → grigio → bianco →
   pannello. Forma `morbida`: raggi generosi, nessun bordo, la separazione la
   fa il colore. Movimento `riservato`: reveal all'ingresso e stati hover.
   ========================================================================= */

/* ——— Elementi ricorrenti ————————————————————————————————————————————————— */

.occhiello {
  font-size: var(--t-piccolo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 1.25rem;
}

.occhiello--scuro { color: var(--testo); }
.occhiello--chiaro { color: var(--su-accento); }

/* Il numero di sezione è la nota da manifesto: una pastiglia gialla piena,
   non un pallino sospeso. Decorativo, quindi aria-hidden in HTML. */
.numero {
  display: inline-block;
  font-family: var(--font-titoli);
  font-size: var(--t-numero);
  line-height: 1;
  padding: 0.12em 0.32em 0.2em;
  border-radius: var(--raggio-piccolo);
  background: var(--fondo-alt);
  color: var(--testo);
  margin-bottom: var(--spazio-blocco);
}

.testo-guida { max-width: var(--larghezza-lettura); }

.fascia-chiara { background: var(--superficie); }

/* Bodoni Moda è una Didone: le aste sottili sono la sua firma, ma l'asse
   ottico (opsz 6..96) le assottiglia man mano che il corpo cresce, ed è
   esattamente il contrario di quello che serve qui. A 88px del claim manifesto
   i filetti scendevano sotto il pixel e il titolo si leggeva scolorito.
   `font-optical-sizing: none` blocca l'asse sul taglio da testo, che ha meno
   contrasto di tratto: stesso carattere, aste che reggono. Vale per tutti i
   titoli, quindi sta qui e non ripetuto voce per voce. */
h1, h2, h3, h4,
.manifesto__claim,
.marchio__nome,
.numero { font-optical-sizing: none; }

h2 { font-weight: 500; }
h3 { font-weight: 600; font-size: var(--t-h4); }
h4 { font-family: var(--font-testo); font-weight: 500; letter-spacing: 0; }

p + p { margin-top: 0.9em; }

main p { color: var(--testo-tenue); }
main strong { color: var(--testo); font-weight: 500; }

main a:not(.bottone) {
  text-decoration-color: var(--fondo-alt);
  text-decoration-thickness: 2px;
  transition: text-decoration-color var(--durata-breve) var(--curva);
}

main a:not(.bottone):hover { text-decoration-color: currentColor; }

/* ——— Pulsanti — larghi quanto il testo, mai quanto la colonna ——————————— */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.875rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--raggio-interattivo);
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--curva),
              transform var(--durata-breve) var(--curva);
}

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

.bottone--pieno:hover,
.bottone--scuro:hover {
  background: #333333;
  transform: translateY(-2px);
}

/* Su qualunque fondo: eredita il colore già corretto della sezione, così non
   c'è un colore fisso che finisce fuori contrasto sul pannello nero. */
.bottone--vuoto {
  background: color-mix(in srgb, currentColor 11%, transparent);
  color: inherit;
}

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

.bottone--grande {
  min-height: 3.5rem;
  padding: 1rem 2.25rem;
  font-size: var(--t-h4);
}

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--spazio-blocco);
}

/* ——— Intestazione ———————————————————————————————————————————————————————— */

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--fondo);
  box-shadow: 0 1px 0 var(--bordo);
}

.intestazione {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.marchio {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  margin-right: auto;
}

.marchio__nome {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marchio__coda {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-top: 0.4rem;
}

.menu-desktop {
  display: flex;
  gap: 1.75rem;
  margin: 0;
}

.menu-desktop a {
  font-size: var(--t-piccolo);
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 0.35rem;
  box-shadow: inset 0 0 0 0 var(--fondo-alt);
  transition: box-shadow var(--durata-breve) var(--curva);
}

.menu-desktop a:hover { box-shadow: inset 0 -2.5rem 0 0 var(--fondo-alt); }

.apri-menu {
  display: none;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: var(--raggio-interattivo);
  background: var(--fondo-alt);
  place-items: center;
}

.apri-menu__barre,
.apri-menu__barre::before,
.apri-menu__barre::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: var(--testo);
  border-radius: 2px;
}

.apri-menu__barre::before,
.apri-menu__barre::after { content: ''; position: relative; }
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 4px; }

/* ——— Menu mobile — pannello pieno, fuori dall'header ————————————————————— */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--fondo-alt);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva), visibility var(--durata);
}

html.menu-aperto { overflow: hidden; }
html.menu-aperto #menu-mobile { opacity: 1; visibility: visible; }

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

#menu-mobile a {
  display: block;
  padding: 0.35rem 1rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  text-decoration: none;
}

/* ——— 1. Apertura — split asimmetrico 60/40 ——————————————————————————— */

.apertura { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--spazio-sezione); }

.apertura__griglia {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}

.apertura h1 { font-weight: 500; margin-bottom: var(--spazio-blocco); }
.apertura__sottotitolo { max-width: 34rem; }

.cartellino {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.cartellino > div {
  flex: 1 1 8rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
}

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

.cartellino dd { margin: 0.35rem 0 0; font-weight: 500; }

.apertura__immagine { margin: 0; position: relative; isolation: isolate; }

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

/* La lastra gialla dietro la foto: il giallo come superficie, non come
   filetto decorativo. */
.apertura__immagine::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2rem -2rem -2rem 2rem;
  border-radius: var(--raggio);
  background: var(--fondo-alt);
}

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

/* ——— Impianti di sezione ———————————————————————————————————————————————— */

.testa-sezione { margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.testa-sezione h2 { max-width: 18ch; }

.due-colonne {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.due-colonne__testa h2 { margin-bottom: 0; }
.due-colonne__corpo h3 { margin-top: 2.5rem; }

.pastiglie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0 0;
}

.pastiglie li {
  padding: 0.45rem 1rem;
  border-radius: var(--raggio-interattivo);
  background: var(--fondo-alt);
  color: var(--testo);
  font-size: var(--t-piccolo);
  font-weight: 500;
}

/* ——— 3. Il menù ————————————————————————————————————————————————————————— */

.portate {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.portata {
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--raggio);
  background: var(--superficie);
}

.portata h3 {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  font-weight: 500;
  margin-bottom: 1.75rem;
}

.lista-piatti { display: grid; gap: 1.5rem; margin: 0; }
.lista-piatti h4 { margin-bottom: 0.3rem; }
.lista-piatti p { font-size: var(--t-piccolo); margin: 0; }

#menu .u-nota { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }

/* ——— Pannelli manifesto — superficie piena, tipografia da affissione ——— */

.manifesto {
  background: var(--fondo-alt);
  padding-block: var(--spazio-sezione);
}

.manifesto,
.manifesto p { color: var(--testo); }

/* Sul nero il giallo resta al titolo e all'occhiello — grandi, è lì che fa
   l'accento. Il testo che si legge riga per riga passa al bianco caldo: il
   giallo saturo a corpo piccolo su nero è il punto in cui questa pagina si
   leggeva peggio. Nota di lato: `currentColor` del pannello ora è chiaro e
   neutro, quindi anche i fondi in color-mix qui sotto smettono di virare
   all'oliva. */
.manifesto--scuro { background: var(--accento); color: var(--su-scuro); }
.manifesto--scuro p { color: var(--su-scuro); }
.manifesto--scuro .manifesto__claim,
.manifesto--scuro h2,
.manifesto--scuro h3 { color: var(--su-accento); }

.manifesto__griglia {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  align-items: center;
}

.manifesto__claim {
  font-size: var(--t-manifesto);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: var(--spazio-blocco);
}

.manifesto__testo { max-width: 32rem; margin-bottom: var(--spazio-blocco); }

.listino { display: grid; gap: 0.75rem; }

.listino__voce {
  padding: 1.25rem 1.5rem;
  border-radius: var(--raggio-piccolo);
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.listino__voce h3 { margin-bottom: 0.3rem; }
.listino__voce p { margin: 0; font-size: var(--t-piccolo); }

/* ——— Fotografie ————————————————————————————————————————————————————————— */

.scatto { margin: 0; }

.scatto > img,
.finestra {
  width: 100%;
  border-radius: var(--raggio);
}

.scatto > img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Provini 2×2: le foto pubbliche del locale arrivano in griglie da quattro.
   La finestra ne mostra uno solo — l'immagine viene portata al 206% e ancorata
   all'angolo giusto. Il taglio di `object-fit: cover` è simmetrico rispetto al
   centro, quindi la divisione in quattro resta al suo posto; il 6% in più
   mangia la riga bianca che separa i provini.

   `--alto` serve quando il provino è verticale: se la finestra ha un rapporto
   molto diverso da quello della fonte, il ritaglio simmetrico si mangia metà
   del riquadro e inquadra il piatto sbagliato — successo, e si vede.

   ponytail: ritaglio in CSS invece di quattro file tagliati a mano. Quando
   arrivano gli originali del titolare si tolgono le classi e basta. */
.finestra {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--superficie);
}

.finestra--alto { aspect-ratio: 3 / 4; }

.finestra > img {
  position: absolute;
  width: 214%;
  height: 214%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

.ritaglio--tl .finestra > img { left: 0; top: 0; }
.ritaglio--tr .finestra > img { right: 0; top: 0; }
.ritaglio--bl .finestra > img { left: 0; bottom: 0; }
.ritaglio--br .finestra > img { right: 0; bottom: 0; }

.scatto--largo {
  max-width: 46rem;
  margin-inline: auto;
}

.scatto--largo > img { aspect-ratio: 3 / 2; }

.galleria-tre {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.galleria-due {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* ——— Incastro testo/immagine ————————————————————————————————————————————— */

.incastro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.incastro--rovescio .incastro__scatto { order: 2; }
.incastro__testo p { max-width: var(--larghezza-lettura); }
.incastro__testo .bottone { margin-top: var(--spazio-blocco); }

/* ——— Card di nota e domande ————————————————————————————————————————————— */

.tre-note,
.domande {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}

.tre-note { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

.nota-card,
.domanda {
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--raggio);
  background: var(--superficie);
}

.fascia-chiara .nota-card,
.fascia-chiara .domanda { background: var(--fondo); }

.nota-card h3,
.domanda h3 { margin-bottom: 0.6rem; }

.nota-card p,
.domanda p { margin: 0; font-size: var(--t-piccolo); }

/* ——— Orari ————————————————————————————————————————————————————————————— */

.tabella-orari {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 0.3rem;
  margin-top: var(--spazio-blocco);
  font-size: var(--t-piccolo);
  text-align: left;
}

.tabella-orari th[scope='col'] {
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  padding: 0 0.8rem 0.4rem;
}

.tabella-orari tbody th,
.tabella-orari tbody td {
  padding: 0.7rem 0.8rem;
  background: var(--superficie);
  color: var(--testo-tenue);
}

.tabella-orari tbody th {
  font-weight: 500;
  color: var(--testo);
  border-radius: var(--raggio-piccolo) 0 0 var(--raggio-piccolo);
}

.tabella-orari tbody td:last-child {
  border-radius: 0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
}

/* ——— Scheda NAP ————————————————————————————————————————————————————————— */

.scheda-nap {
  display: block;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--raggio);
  background: var(--fondo-alt);
  color: var(--testo);
  font-style: normal;
  line-height: 1.9;
}

/* Sul giallo l'underline giallo di `main a` sparirebbe: qui il link deve
   restare riconoscibile come link. */
.scheda-nap a {
  color: var(--testo);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.scheda-nap a:hover { text-decoration-color: currentColor; }

.scheda-nap__nome {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  margin-bottom: 0.4rem;
}

/* ——— Chiusura ————————————————————————————————————————————————————————— */

.manifesto--chiusura { text-align: center; }
.chiusura .manifesto__testo,
.chiusura .bottone { margin-inline: auto; }
.chiusura__coda { margin-top: var(--spazio-blocco); font-size: var(--t-piccolo); }

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

footer {
  background: var(--accento);
  color: var(--su-scuro);
  padding-block: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Stessa regola del pannello vini: giallo al nome, bianco caldo all'indirizzo
   e ai link, che sono le righe che qualcuno legge davvero per telefonare. */
.marchio__nome--piede { color: var(--su-accento); }

.piede {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: start;
}

.piede address { font-style: normal; line-height: 1.9; margin-top: 0.6rem; }
.marchio__nome--piede { font-size: var(--t-h3); }

.piede__menu {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  font-size: var(--t-piccolo);
}

.piede > p { grid-column: 1 / -1; }
footer :focus-visible { outline-color: var(--su-accento); }

/* ——— Barra di chiamata: appare solo su mobile ————————————————————————— */

.barra-chiamata { display: none; }

/* ——— Movimento — `riservato` ————————————————————————————————————————————
   Stessa guardia di base.css: i figli di un gruppo partono nascosti solo se
   il JS è vivo, e nel ramo reduced-motion restano visibili. */

.js-movimento [data-reveal-gruppo] > *:not(.e-rivelato) {
  opacity: 0;
  transform: translateY(1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-gruppo] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ——— Responsive ————————————————————————————————————————————————————————— */

@media (max-width: 62rem) {
  .apertura__griglia,
  .due-colonne,
  .incastro,
  .manifesto__griglia { grid-template-columns: 1fr; }

  .incastro--rovescio .incastro__scatto { order: 0; }
  .apertura__immagine::before { inset: 1.5rem -1.25rem -1.5rem 1.5rem; }
  .apertura__immagine img { aspect-ratio: 3 / 2; }

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

  .intestazione__cta,
  .menu-desktop { display: none; }

  .apri-menu { display: grid; }
  .piede { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .portate,
  .tre-note,
  .domande,
  .galleria-tre { grid-template-columns: 1fr; }

  .apertura__immagine::before { display: none; }
  .cartellino > div { flex: 1 1 100%; }

  /* Il numero resta sotto il pollice ovunque nella pagina: la barra copre la
     piega bassa e il corpo si allunga per non finirci sotto. */
  body { padding-bottom: 5rem; }

  .barra-chiamata {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.35rem;
    border-radius: var(--raggio-interattivo);
    background: var(--accento);
    color: var(--su-scuro);
    text-decoration: none;
    font-size: var(--t-piccolo);
  }

  /* Stessa regola dei due fondi scuri: il giallo al numero, che è il dato che
     si cerca; l'etichetta in bianco caldo. */
  .barra-chiamata strong { font-size: var(--t-h4); color: var(--su-accento); }
}