/* ============================================================================
   TORO NERO — il design di questa pagina
   ----------------------------------------------------------------------------
   Impianto editoriale: colonna di lettura stretta, immagini a bandiera che
   escono dalla griglia del testo, occhielli sopra ogni titolo.
   Respiro alternato: sezioni piene e sezioni fitte si alternano, e due
   sezioni quasi vuote (.s-respiro) fanno da pausa.
   Forma morbida: raggi generosi, superfici piene, nessun bordo — la
   separazione la fa il colore.
   ========================================================================= */

/* ——— Testata ———————————————————————————————————————————————————————————— */

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--fondo);
  transition: box-shadow var(--durata-breve) var(--curva);
}

/* Stato "scorso": lo mette site.js. Non è movimento, è uno stato. */
header[data-sito-header].e-scorsa {
  box-shadow: 0 1px 0 var(--bordo);
}

.intestazione__interno {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

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

.marchio__nome {
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  font-weight: 600;
}

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

.menu-desktop {
  display: none;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 0;
  font-size: var(--t-piccolo);
}

.menu-desktop a {
  position: relative;
  padding-block: 0.35rem;
  text-decoration: none;
  color: var(--testo-tenue);
  transition: color var(--durata-breve) var(--curva);
}

/* Il filetto cresce da sinistra: è tutto il movimento che serve a un link. */
.menu-desktop a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--accento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--durata-breve) var(--curva);
}

.menu-desktop a:hover,
.menu-desktop a:focus-visible {
  color: var(--testo);
}

.menu-desktop a:hover::after,
.menu-desktop a:focus-visible::after {
  transform: scaleX(1);
}

/* Doppia classe di proposito: .bottone porta il suo `display: inline-flex` ed
   è dichiarato più in basso — a pari specificità vincerebbe lui, e il CTA
   resterebbe nell'intestazione mobile a schiacciare il marchio su due righe.
   Visto a schermo, non un'ipotesi. */
.intestazione__interno .intestazione__chiamata {
  display: none;
}

/* ——— Bottone hamburger ——————————————————————————————————————————————————— */

.apri-menu {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-interattivo);
  background: var(--fondo-alt);
  transition: background var(--durata-breve) var(--curva);
}

.apri-menu:hover {
  background: var(--bordo);
}

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

.apri-menu__barre::before,
.apri-menu__barre::after {
  content: '';
  position: absolute;
}

.apri-menu__barre::before { transform: translateY(-0.375rem); }
.apri-menu__barre::after  { transform: translateY(0.375rem); }

.apri-menu[aria-expanded='true'] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded='true'] .apri-menu__barre::before { transform: rotate(45deg); }
.apri-menu[aria-expanded='true'] .apri-menu__barre::after  { transform: rotate(-45deg); }

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

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  padding: var(--gronda);
  background: var(--fondo);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata-breve) var(--curva),
              visibility var(--durata-breve) var(--curva);
}

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

.menu-aperto,
.menu-aperto body {
  overflow: hidden;
}

#menu-mobile ul {
  display: grid;
  gap: 0.15rem;
  margin: 0 0 2rem;
}

#menu-mobile a {
  display: block;
  padding-block: 0.4rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  text-decoration: none;
  transition: color var(--durata-breve) var(--curva);
}

#menu-mobile a:hover {
  color: var(--accento);
}

/* ——— Superfici e respiro ————————————————————————————————————————————————— */

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

.s-alt.u-sezione--fitta {
  padding-block: calc(var(--spazio-sezione) * 0.55);
}

.s-scura {
  background: var(--fondo-scuro);
  color: var(--fondo);
  padding-block: var(--spazio-sezione);
}

.s-scura .occhiello,
.s-scura dt,
.s-scura figcaption {
  color: color-mix(in srgb, var(--fondo) 78%, transparent);
}

.s-scura a:not(.bottone) {
  color: var(--accento-su-scuro);
}

/* Le pause. Volutamente più aria di qualunque altra sezione: è il vuoto che
   dà peso a quello che viene dopo. */
.s-respiro {
  padding-block: calc(var(--spazio-sezione) * 1.3);
}

/* ——— Tipografia di pagina ——————————————————————————————————————————————— */

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

h2 {
  font-weight: 400;
}

h3 {
  font-weight: 600;
}

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

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

.intestazione-sezione {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.intestazione-sezione h2 {
  margin-bottom: var(--spazio-blocco);
}

/* ——— Bottoni ———————————————————————————————————————————————————————————— */
/* Larghi quanto il loro 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.6rem;
  border-radius: var(--raggio-interattivo);
  font-size: var(--t-piccolo);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--durata-breve) var(--curva),
              color var(--durata-breve) var(--curva),
              transform 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: color-mix(in srgb, var(--accento) 84%, #000);
}

.bottone--vuoto {
  background: var(--fondo-alt);
  color: var(--testo);
}

.bottone--vuoto:hover {
  background: var(--bordo);
}

.bottone--chiaro {
  background: var(--fondo);
  color: var(--testo);
}

.bottone--chiaro:hover {
  background: var(--su-accento);
}

.bottone--vuoto-chiaro {
  background: color-mix(in srgb, var(--fondo) 16%, transparent);
  color: var(--fondo);
}

.bottone--vuoto-chiaro:hover {
  background: color-mix(in srgb, var(--fondo) 26%, transparent);
}

/* ——— 1. Apertura: un solo soggetto, fondo tenuto pulito ——————————————————— */

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

.apertura__interno {
  display: grid;
  justify-items: start;
}

.apertura h1 {
  max-width: 21ch;
  margin-bottom: var(--spazio-blocco);
  font-weight: 400;
}

.apertura__claim {
  max-width: var(--larghezza-lettura);
  color: var(--testo-tenue);
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.apertura__oggetto {
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

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

.apertura__nota {
  margin-top: 1.75rem;
}

/* ——— Impianto editoriale: testo + immagine a bandiera ————————————————————— */

.editoriale {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

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

.editoriale__testo h2 {
  margin-bottom: var(--spazio-blocco);
}

.editoriale__testo .u-nota {
  margin-top: 1.75rem;
}

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

/* ——— Elenco dei tagli ——————————————————————————————————————————————————— */

.elenco-tagli {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 0;
}

.elenco-tagli li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--t-piccolo);
  line-height: 1.6;
  color: var(--testo-tenue);
}

.elenco-tagli li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accento);
}

.elenco-tagli strong {
  display: block;
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: 1.4;
  color: var(--testo);
}

/* ——— 3. La grigliata: sezione quasi vuota ———————————————————————————————— */

.grigliata__interno {
  display: grid;
  justify-items: center;
  text-align: center;
}

.grigliata__interno h2 {
  max-width: 14ch;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.grigliata__peso {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--font-titoli);
  line-height: 1;
  font-size: var(--t-piccolo);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accento-su-scuro);
}

.grigliata__peso span {
  display: block;
  margin-bottom: 0.15em;
  font-size: clamp(4rem, 2rem + 11vw, 8.5rem);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.grigliata__testo {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: color-mix(in srgb, var(--fondo) 84%, transparent);
}

/* ——— 5. Il menu: la sezione densa ——————————————————————————————————————— */

.menu__intro {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  color: var(--testo-tenue);
}

.menu-griglia {
  display: grid;
  gap: 1rem;
}

.scheda {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--raggio);
  background: var(--fondo);
  transition: transform var(--durata-breve) var(--curva);
}

.scheda:hover {
  transform: translateY(-3px);
}

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

.scheda ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  font-size: var(--t-piccolo);
  line-height: 1.55;
  color: var(--testo-tenue);
}

.scheda--foto {
  padding: 0;
  overflow: hidden;
}

.scheda--foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.scheda__corpo {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

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

.menu__coda {
  margin-top: clamp(2rem, 3vw, 3rem);
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

/* ——— Gallerie ——————————————————————————————————————————————————————————— */

.galleria-due {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}

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

/* ——— 7. In strada ——————————————————————————————————————————————————————— */

.strada__interno {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

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

/* ——— 10. Come si mangia ————————————————————————————————————————————————— */

.passi {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.passi li {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--raggio);
  background: var(--fondo);
}

.passi__numero {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.1rem;
  border-radius: var(--raggio-interattivo);
  background: var(--accento);
  color: var(--su-accento);
  font-family: var(--font-titoli);
  font-size: 1rem;
  line-height: 1;
}

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

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

/* ——— 11. Domande ———————————————————————————————————————————————————————— */

.domande {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

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

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

/* ——— 12. Contatti ——————————————————————————————————————————————————————— */

.contatti {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 clamp(2rem, 3vw, 2.5rem);
}

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

.contatti dd {
  margin: 0.35rem 0 0;
}

.contatti a {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--durata-breve) var(--curva);
}

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

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

footer {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--fondo-alt);
  font-size: var(--t-piccolo);
}

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

.piede address {
  font-style: normal;
}

.piede__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
}

.piede small {
  color: var(--testo-tenue);
}

/* ============================================================================
   DA 640px
   ========================================================================= */

@media (min-width: 40em) {
  .menu-griglia,
  .galleria-due,
  .passi,
  .domande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .domande {
    column-gap: clamp(2rem, 4vw, 4rem);
  }

  .apertura__oggetto img {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================================
   DA 62rem — qui l'impianto editoriale diventa davvero editoriale
   ========================================================================= */

@media (min-width: 62em) {
  .menu-desktop { display: flex; }
  .intestazione__interno .intestazione__chiamata { display: inline-flex; }
  .apri-menu { display: none; }

  .apertura__interno {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .apertura .occhiello,
  .apertura h1,
  .apertura__claim,
  .apertura__azioni,
  .apertura__nota {
    grid-column: 1;
  }

  /* L'oggetto occupa la colonna destra per intero e sconfina oltre la gronda:
     resta un solo soggetto, ma prende tutto lo spazio che merita. */
  .apertura__oggetto {
    grid-column: 2;
    grid-row: 1 / span 5;
    margin-top: 0.5rem;
    margin-right: calc(var(--gronda) * -1);
  }

  .apertura__oggetto img {
    aspect-ratio: 4 / 5;
    object-position: center 55%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .apertura__nota { align-self: end; }

  .editoriale {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  /* L'immagine a bandiera esce dalla griglia del testo. */
  .editoriale__figura--bandiera {
    margin-right: calc(var(--gronda) * -1);
  }

  .editoriale__figura--bandiera img {
    aspect-ratio: 5 / 4;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .editoriale--rovescio .editoriale__testo { order: 2; }
  .editoriale--rovescio .editoriale__figura { order: 1; }

  .editoriale--rovescio .editoriale__figura--bandiera {
    margin-right: 0;
    margin-left: calc(var(--gronda) * -1);
  }

  .editoriale--rovescio .editoriale__figura--bandiera img {
    border-radius: var(--raggio);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .menu-griglia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .passi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .strada__interno {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .strada__figura {
    margin-right: calc(var(--gronda) * -1);
  }

  .strada__figura img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .contatti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
  }

  .piede {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
  }

  .piede__menu { justify-content: center; }
}

/* ============================================================================
   MOVIMENTO RIDOTTO
   Il ramo obbligatorio: niente trasformazioni, contenuto sempre visibile.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .bottone:hover,
  .scheda:hover {
    transform: none;
  }

  /* Il filetto del menu resta, ma appare senza scorrere. */
  .menu-desktop a::after {
    transform: scaleX(1);
    opacity: 0;
  }

  .menu-desktop a:hover::after,
  .menu-desktop a:focus-visible::after {
    opacity: 1;
  }

  #menu-mobile {
    transition: none;
  }
}