/* ==========================================================================
   Fontana delle Grotte — Base + componenti
   Dipende da tokens.css. Questo foglio e' quello che userà anche il sito
   finale: la styleguide non aggiunge nulla di estetico, solo la sua cornice.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset essenziale
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Immagini a riempimento dentro i contenitori a tutta area (hero, testate,
   fasce, slider).
   <picture> non ha altezza propria: e' un contenitore trasparente. Se ci si
   limita a mettere height:100% sull'<img>, quella percentuale si risolve
   contro un genitore alto `auto` e viene ignorata — l'immagine torna alla sua
   proporzione naturale e sotto resta scoperto il colore di fondo. Su schermi
   stretti e alti si vede come una fascia vuota sotto la foto.
   La regola va quindi applicata anche al <picture>, non solo all'<img>. */
.kb__slide > picture,
.hero__media > picture,
.page-hero__media > picture,
.band__media > picture,
.kb__slide > img,
.hero__media > img,
.page-hero__media > img,
.band__media > img {
  display: block;
  width: 100%;
  height: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* Focus visibile e coerente: requisito di accessibilita', non un dettaglio. */
:focus-visible {
  outline: 2px solid var(--c-wine);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  color: var(--c-heading);
  text-wrap: balance;          /* evita l'orfano di una parola sull'ultima riga */
}

h1 { font-size: var(--t-h1); letter-spacing: var(--ls-hero); }
h2 { font-size: var(--t-h2); letter-spacing: var(--ls-title); }
h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  color: var(--c-ink-2);
  max-width: 60ch;
}

.muted { color: var(--c-ink-3); }

/* Etichetta maiuscola spaziata: il tono di voce "minore" del template */
.label {
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-dark);
}

a { color: var(--c-wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-wine-dark); }

/* Blocchi di colore per i link che sono componenti, non link di testo.
   Motivo: `a:hover` ha specificita' (0,1,1) e batte una classe (0,1,0).
   Senza queste righe, al passaggio del mouse un bottone rosso prende il
   colore vino dei link generici e il testo sparisce sul proprio fondo.
   Vale per qualunque <a> con una classe che si gestisce il colore da se'. */
.btn,
.btn:hover,
.btn:focus,
.btn:visited      { color: var(--btn-fg); }

.brand,
.brand:hover,
.brand:visited    { color: var(--c-ink); }

.skip-link,
.skip-link:hover  { color: var(--c-white); }

/* Link discreto con sottolineatura che cresce all'hover */
.link-quiet {
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  padding-bottom: var(--s-1);
  border-bottom: var(--bw) solid var(--c-gold);
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}
.link-quiet:hover { color: var(--c-gold-dark); border-color: var(--c-gold-dark); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--w-narrow); }
.container--wide   { max-width: var(--w-wide); }

.section { padding-block: var(--s-section); }

.section--alt {
  background-color: var(--c-sage);
  background-image: url("../assets/topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Griglia: le colonne collassano da sole, senza media query.
   --min e' la larghezza minima accettabile di una colonna. */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr));
}

.grid--tight { gap: var(--s-4); }
.grid--3 { --min: 300px; }
.grid--4 { --min: 240px; }
.grid--5 { --min: 180px; }

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   4. Titolo di sezione — la firma del template
   Prima parola in inchiostro, seconda in oro. Centrato.
   Markup: <h2 class="section-title">I nostri <em>vini</em></h2>
   -------------------------------------------------------------------------- */

.section-head {
  text-align: center;
  max-width: var(--w-narrow);
  margin-inline: auto;
  margin-bottom: var(--s-8);
}

.section-title { text-transform: uppercase; }

.section-title em {
  font-style: normal;
  color: var(--c-gold);
}

.section-head .lead {
  margin-top: var(--s-4);
  margin-inline: auto;
  text-align: center;
}

/* Filetto decorativo opzionale sotto il titolo */
.rule {
  width: 56px;
  height: 1px;
  border: 0;
  background: var(--c-gold);
  margin: var(--s-5) auto 0;
}

/* --------------------------------------------------------------------------
   5. Bottoni
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  min-height: 46px;

  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--btn-bd);
  border-radius: var(--r-xs);
  cursor: pointer;

  transition: background-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}

.btn--primary {
  --btn-bg: var(--c-wine);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-wine);
}
.btn--primary:hover { --btn-bg: var(--c-wine-dark); --btn-bd: var(--c-wine-dark); }

.btn--ghost:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); }

/* Su fondo fotografico scuro */
.btn--onDark {
  --btn-fg: var(--c-white);
  --btn-bd: rgba(255, 255, 255, 0.75);
}
.btn--onDark:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-bd: var(--c-white); }

/* Il fondo e' --c-gold-dark, non --c-gold: bianco sull'oro chiaro fa 3.1:1,
   sotto la soglia per un testo da 12 px. Con l'oro scuro si arriva a 4.85:1. */
.btn--gold {
  --btn-bg: var(--c-gold-dark);
  --btn-fg: var(--c-white);
  --btn-bd: var(--c-gold-dark);
}
.btn--gold:hover { --btn-bg: #7a5630; --btn-bd: #7a5630; }

/* --------------------------------------------------------------------------
   6. Badge — al posto di "Hot" del template: annata, premio, novita'
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  background: var(--c-gold);
  color: var(--c-white);
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.6;
  border-radius: var(--r-xs);
}

.badge--wine { background: var(--c-wine); }
.badge--quiet {
  background: transparent;
  color: var(--c-gold-dark);
  border: var(--bw) solid var(--c-gold-soft);
}

/* --------------------------------------------------------------------------
   7. Scheda etichetta (ex "product card")
   Niente prezzo, niente stelle, niente carrello: e' una vetrina.
   -------------------------------------------------------------------------- */

.wine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: var(--bw) solid var(--c-line);
  text-align: center;
  transition: box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.wine-card:hover {
  box-shadow: var(--sh-hover);
  transform: translateY(-4px);
}

.wine-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-mist);
  display: grid;
  place-items: center;
}

.wine-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-6);
  transition: transform var(--d-slow) var(--e-out);
}

.wine-card:hover .wine-card__media img { transform: scale(1.05); }

.wine-card__badge {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: var(--z-base);
}

.wine-card__body {
  padding: var(--s-5) var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

.wine-card__type {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.wine-card__name {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  color: var(--c-heading);
  line-height: var(--lh-snug);
}

.wine-card__note {
  font-size: var(--t-small);
  color: var(--c-ink-3);
  line-height: 1.6;
}

.wine-card__foot { margin-top: auto; padding-top: var(--s-4); }

/* Rende cliccabile tutta la card mantenendo un solo link nel markup */
.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   8. Tile categoria — immagine con targhetta bianca sovrapposta
   -------------------------------------------------------------------------- */

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  text-decoration: none;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.tile:hover img { transform: scale(1.06); }

.tile__label {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  padding: var(--s-3) var(--s-5);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}

.tile:hover .tile__label { background: var(--c-wine); color: var(--c-white); }

/* --------------------------------------------------------------------------
   9. Fascia fotografica a tutta larghezza (ex banner sconti / newsletter)
   Diventa l'invito alla visita in cantina.
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 42vw, 480px);
  padding-block: var(--s-8);
  overflow: hidden;
  background: var(--c-wine-deep);   /* fallback finche' non c'e' la foto */
  isolation: isolate;
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.band__media img { width: 100%; height: 100%; object-fit: cover; }

/* Velo scuro: senza, il testo bianco su foto non e' mai leggibile davvero */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(20, 12, 12, 0.72),
    rgba(20, 12, 12, 0.45)
  );
}

.band__inner { text-align: center; color: var(--c-white); }

.band__title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  color: var(--c-white);
  text-transform: uppercase;
  letter-spacing: var(--ls-title);
}

.band__title em { font-style: normal; color: var(--c-gold); }

.band__text {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.85);
}

.band__actions { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 72vh, 760px);
  padding-block: var(--s-9);
  overflow: hidden;
  background: var(--c-wine-deep);
  isolation: isolate;
}

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

/* Il velo non e' decorazione: le foto del vigneto hanno cieli chiarissimi e
   il testo bianco, senza, sarebbe illeggibile e bocciato in accessibilita'.
   Due strati: una velatura verticale costante piu' un alone centrale che
   scurisce dietro al blocco di testo, dove serve davvero. Il contrasto resta
   sopra 4.5:1 qualunque fotogramma dello slider sia in quel momento. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(18, 14, 12, 0.42), rgba(18, 14, 12, 0) 72%),
    linear-gradient(to bottom,
      rgba(18, 14, 12, 0.52),
      rgba(18, 14, 12, 0.40) 45%,
      rgba(18, 14, 12, 0.62));
}

.hero__inner { text-align: center; color: var(--c-white); }

.hero__eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-light);   /* fondo fotografico: vedi tokens.css */
  margin-bottom: var(--s-4);
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--c-white);
  text-wrap: balance;
}

.hero__text {
  margin: var(--s-5) auto 0;
  max-width: 48ch;
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.88);
}

.hero__actions {
  margin-top: var(--s-7);
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   11. Form
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
}

.input {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 46px;
  background: var(--c-white);
  color: var(--c-ink);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-xs);
  transition: border-color var(--d-fast) var(--e-out);
}

.input::placeholder { color: var(--c-ink-3); }
.input:hover  { border-color: var(--c-gold-soft); }
.input:focus  { border-color: var(--c-gold); outline: none; }
.input:focus-visible { outline: 2px solid var(--c-wine); outline-offset: 2px; }

textarea.input { min-height: 140px; resize: vertical; }

/* Riga in linea: campo + bottone (usata nella fascia contatti) */
.field-inline {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  max-width: 520px;
  margin-inline: auto;
}
.field-inline .input { flex: 1 1 240px; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--c-mist);
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--t-small);
}

.site-footer h3 {
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}

.footer-grid { --min: 200px; }

.footer-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }

.footer-list a {
  color: var(--c-ink-2);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}
.footer-list a:hover { color: var(--c-wine); }

.footer-bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--bw) solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  color: var(--c-ink-3);
  font-size: var(--t-micro);
}

/* --------------------------------------------------------------------------
   13. Testata
   -------------------------------------------------------------------------- */

/* Salto al contenuto: primo elemento focalizzabile della pagina.
   Invisibile finche' non riceve il focus da tastiera. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-5);
  background: var(--c-ink);
  color: var(--c-white);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Barra sottile con i recapiti, come nel template */
.topbar {
  background: var(--c-mist);
  border-bottom: var(--bw) solid var(--c-line);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-block: var(--s-2);
}

@media (min-width: 720px) {
  .topbar__inner { justify-content: space-between; }
}

.topbar a {
  color: var(--c-ink-2);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}
.topbar a:hover { color: var(--c-wine); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--c-white);
  border-bottom: var(--bw) solid var(--c-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 76px;
  padding-block: var(--s-3);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  color: var(--c-ink);
}

.brand__name {
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: var(--w-regular);
  letter-spacing: 0.01em;
}

.brand__place {
  font-size: 0.625rem;
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-dark);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   14. Navigazione
   -------------------------------------------------------------------------- */

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-5);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;          /* bersaglio tattile */
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: 2px solid transparent;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out);
}

.nav__link:hover { color: var(--c-gold-dark); border-bottom-color: var(--c-gold); }

/* aria-current segnala la pagina attiva sia visivamente sia agli screen reader */
.nav__link[aria-current="page"] {
  color: var(--c-gold-dark);
  border-bottom-color: var(--c-gold);
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-xs);
  cursor: pointer;
}

.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }

  .nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s-2) var(--gutter) var(--s-5);
    background: var(--c-white);
    border-bottom: var(--bw) solid var(--c-line);
    box-shadow: var(--sh-band);
  }

  /* hidden regge la chiusura anche prima che il JS sia stato eseguito */
  .nav__list[hidden] { display: none; }

  .nav__link {
    width: 100%;
    min-height: 52px;
    border-bottom: var(--bw) solid var(--c-line);
  }
  .nav__link:hover,
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-line); }
}

/* --------------------------------------------------------------------------
   15. Blocchi di testo
   -------------------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-5); }
.prose p { font-size: var(--t-lead); }

.prose h3 { margin-top: var(--s-7); }

/* Testo e immagine affiancati. Si impila da solo sotto i 900px. */
.split {
  display: grid;
  gap: var(--s-7) var(--s-8);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Inverte l'ordine visivo senza toccare l'ordine nel DOM (che resta
   quello logico per screen reader e tastiera) */
@media (min-width: 900px) {
  .split--flip .split__media { order: 2; }
}

/* Allineamento in alto invece che al centro.
   Serve quando le due colonne hanno altezze molto diverse — tipicamente una
   scheda prodotto, dove la colonna di destra porta titolo, testo e tabella
   dei dati. Centrando, l'immagine scivola a meta' pagina e in cima resta un
   buco. */
.split--top { align-items: start; }

/* Citazione in evidenza — per la leggenda e per le frasi che valgono */
.pull {
  max-width: 26ch;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-light);
  line-height: 1.35;
  color: var(--c-heading);
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-gold);
}

/* Coppie dato/valore delle schede tecniche */
.specs { display: grid; gap: 0; margin: 0; }

.specs div {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: var(--bw) solid var(--c-line);
}

.specs dt {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.specs dd { margin: 0; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   16. FAQ
   Costruita su <details>: apertura e chiusura native, accessibili da
   tastiera e funzionanti anche senza JavaScript. Zero righe di script.
   -------------------------------------------------------------------------- */

.faq { max-width: var(--w-narrow); margin-inline: auto; }

.faq details { border-bottom: var(--bw) solid var(--c-line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  min-height: 46px;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-regular);
  color: var(--c-heading);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--f-ui);
  font-size: 1.5rem;
  font-weight: var(--w-light);
  color: var(--c-gold);
  flex-shrink: 0;
  transition: transform var(--d-base) var(--e-out);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details > *:not(summary) { padding-bottom: var(--s-5); }
.faq p { max-width: 68ch; }

/* --------------------------------------------------------------------------
   17. Slider Ken Burns
   Dissolvenza incrociata + lentissimo carrello sull'immagine. Tutto in CSS:
   zero JavaScript, quindi zero costo sul Total Blocking Time.
   Anima solo opacity e transform, le due proprieta' che il browser gestisce
   sulla GPU senza rifare il layout: nessun impatto sul punteggio prestazioni.
   -------------------------------------------------------------------------- */

.kb {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.kb__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: kb-fade 27s infinite;
}

.kb__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: kb-zoom 27s infinite;
  will-change: transform;
}

/* Tre inquadrature, 9 secondi ciascuna.
   Il ritardo della prima e' NEGATIVO di proposito: l'animazione parte come se
   fossero gia' trascorsi 1,5 s, cioe' a dissolvenza completata. Senza questo,
   al primo fotogramma tutte e tre le slide avrebbero opacita' 0 e l'immagine
   piu' grande della pagina risulterebbe dipinta un secondo dopo: l'LCP
   peggiorerebbe di quel secondo, proprio sulla metrica che conta di piu'.
   Le altre due hanno ritardo positivo, quindi fino al loro turno restano
   all'opacita' di base (0) senza mai lampeggiare. */
.kb__slide:nth-child(1),
.kb__slide:nth-child(1) img { animation-delay: -1.5s; }
.kb__slide:nth-child(2),
.kb__slide:nth-child(2) img { animation-delay: 7.5s; }
.kb__slide:nth-child(3),
.kb__slide:nth-child(3) img { animation-delay: 16.5s; }

/* La seconda si allontana invece di avvicinarsi: alternare la direzione
   evita l'effetto "respiro" ripetitivo. */
.kb__slide:nth-child(2) img { animation-name: kb-zoom-out; }

@keyframes kb-fade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  37%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes kb-zoom {
  0%     { transform: scale(1) translate3d(0, 0, 0); }
  37%    { transform: scale(1.11) translate3d(-1.5%, 1%, 0); }
  37.01% { transform: scale(1) translate3d(0, 0, 0); }   /* riavvolge da invisibile */
  100%   { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes kb-zoom-out {
  0%     { transform: scale(1.11) translate3d(1.5%, -1%, 0); }
  37%    { transform: scale(1) translate3d(0, 0, 0); }
  37.01% { transform: scale(1.11) translate3d(1.5%, -1%, 0); }
  100%   { transform: scale(1.11) translate3d(1.5%, -1%, 0); }
}

/* Chi ha chiesto meno movimento vede una sola immagine, ferma.
   Non e' una cortesia: l'animazione continua e' un innesco documentato per
   emicrania e disturbi vestibolari. */
@media (prefers-reduced-motion: reduce) {
  .kb__slide,
  .kb__slide img { animation: none; }
  .kb__slide { opacity: 0; }
  .kb__slide:first-child { opacity: 1; }
}

/* --------------------------------------------------------------------------
   18. Trasparenza IA
   Dichiarazione richiesta dall'art. 50 comma 4 del Regolamento (UE) 2024/1689
   per le immagini generate con IA che rappresentano oggetti reali.
   Deve essere "chiara e distinguibile" e presente alla prima esposizione:
   quindi visibile accanto all'immagine, non nascosta in fondo alla pagina.
   -------------------------------------------------------------------------- */

.ai-badge {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--s-2);
  background: rgba(27, 27, 27, 0.72);
  color: var(--c-white);
  font-size: 0.625rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  backdrop-filter: blur(3px);
  text-decoration: none;
}

.ai-badge:hover { background: rgba(27, 27, 27, 0.9); color: var(--c-white); }

.ai-note {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--c-ink-3);
}

.ai-note a { color: var(--c-gold-dark); }

/* --------------------------------------------------------------------------
   19. Scheda tecnica del vino
   -------------------------------------------------------------------------- */

/* Filetto colorato in cima alla scheda: il colore viene dalla fascia
   dell'etichetta reale, impostato in linea con --accento. */
.wine-card { border-top: 3px solid var(--accento, var(--c-line)); }

.wine-card__media { background: var(--c-white); }
.wine-card__media img { padding: 0; object-fit: cover; }

.wine-card__type { color: var(--c-ink-3); }

/* --------------------------------------------------------------------------
   19-bis. Firma dello studio
   Tono su tono: il marchio e' dipinto con `currentColor` a bassa opacita', cioe'
   prende il colore del testo attorno. Cambiando il colore del footer si adatta
   da solo, senza dover produrre una seconda versione del file.
   Tecnicamente e' una maschera, non un'immagine: un <img> non erediterebbe il
   colore, e servirebbe un SVG diverso per ogni fondo.
   -------------------------------------------------------------------------- */

.firma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--bw) solid var(--c-line);
  text-align: center;
  color: var(--c-ink-3);
}

.firma__testo {
  font-size: 0.6875rem;
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.firma__logo {
  display: block;
  width: 180px;
  aspect-ratio: 1240.8 / 259.48;   /* proporzioni del file: niente salti di layout */
  flex: none;
  text-decoration: none;
  color: inherit;
}

/* Il marchio e' una semplice immagine, non una maschera CSS: la maschera
   richiede un controllo di compatibilita' e dove quel controllo fallisce —
   e' successo su Safari — il logo non compare per niente. Il colore tono su
   tono e' scritto dentro l'SVG. */
.firma__logo img { width: 100%; height: auto; display: block; }

.firma__logo { transition: opacity var(--d-base) var(--e-out); }
.firma__logo:hover,
.firma__logo:focus-visible { opacity: 0.6; }

.firma__nome {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   20. Testata delle pagine interne
   Piu' bassa dell'hero della home: qui il compito non e' sedurre, e' dire
   dove sei. L'immagine e' comunque l'LCP della pagina, quindi non e' lazy.
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(260px, 34vw, 420px);
  padding-block: var(--s-8) var(--s-7);
  overflow: hidden;
  background: var(--c-wine-deep);
  isolation: isolate;
}

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

/* Il testo e' ancorato in basso, quindi il velo si concentra li'.
   In alto resta leggero, cosi' la fotografia si vede. L'occhiello in oro e'
   il punto critico: su un cielo chiaro senza questa base non passa il
   controllo di contrasto. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(18, 14, 12, 0.22) 0%,
    rgba(18, 14, 12, 0.46) 40%,
    rgba(18, 14, 12, 0.74) 100%
  );
}

.page-hero__inner { color: var(--c-white); }

.page-hero__eyebrow {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-gold-light);   /* fondo fotografico: vedi tokens.css */
  margin-bottom: var(--s-3);
}

.page-hero__title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  color: var(--c-white);
  text-wrap: balance;
}

.page-hero__text {
  margin-top: var(--s-4);
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.88);
}

/* --------------------------------------------------------------------------
   21. Briciole di pane
   -------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--s-4);
  border-bottom: var(--bw) solid var(--c-line);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--s-2);
  color: var(--c-gold);
}

.breadcrumb a { color: var(--c-ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-wine); }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   22. Mappa statica
   Immagine cliccabile invece di un iframe di Google Maps. Un iframe di Maps
   pesa piu' di tutto il resto del sito messo insieme, carica script di terze
   parti e imporrebbe il banner cookie. Qui: un'immagine e un link.
   -------------------------------------------------------------------------- */

.mappa {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--bw) solid var(--c-line);
  background: var(--c-mist);
  aspect-ratio: 16 / 10;
  text-decoration: none;
}

.mappa img { width: 100%; height: 100%; object-fit: cover; }

.mappa__cta {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  padding: var(--s-3) var(--s-5);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sh-card);
  transition: background-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}

.mappa:hover .mappa__cta { background: var(--c-wine); color: var(--c-white); }

/* Segnaposto finche' non c'e' l'immagine della mappa */
.mappa--vuota {
  display: grid;
  place-items: center;
  background-color: var(--c-sage);
  background-image: url("../assets/topo.svg");
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------------------------
   23. Navigazione fra schede vino
   -------------------------------------------------------------------------- */

.altri-vini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: center;
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-line);
}

/* --------------------------------------------------------------------------
   24. Utility
   -------------------------------------------------------------------------- */

/* Gruppo di bottoni centrato e che va a capo da solo */
.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}

.center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* Visibile solo agli screen reader */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}