/* =========================================================
   La Rocca in Chianti — Degustazioni (pagina autonoma)
   Carica DOPO css/styles.css: riusa variabili, tipografia,
   .wrap .section .btn .eyebrow .section-head, header e footer.
   Tutto ciò che è specifico di questa pagina usa il prefisso .t-
   ========================================================= */

/* --- utilità -------------------------------------------- */
.t-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* voce di menu della pagina corrente */
.nav-links a[aria-current="page"] { color: var(--cotto); }
.nav-links a[aria-current="page"]::after { width: 100%; }

/* =========================================================
   HERO
   ========================================================= */
/* Ancorato in alto, come l'hero della home: centrandolo, il blocco
   scivolava su e giù a ogni cambio di lingua. */
.t-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: var(--calce);
  background: var(--olivo);
}
.t-hero-media { position: absolute; inset: 0; z-index: 0; }
.t-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  transform: translate3d(0, 0, 0) scale(1.16);
  will-change: transform;
}
.t-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(30,32,22,.58) 0%, rgba(30,32,22,.22) 26%, rgba(30,32,22,.44) 62%, rgba(26,28,20,.86) 100%),
    linear-gradient(90deg, rgba(30,32,22,.62) 0%, rgba(30,32,22,.06) 58%);
}
.t-hero-inner {
  position: relative; z-index: 2;
  padding-top: clamp(8.5rem, 27vh, 15rem);
  padding-bottom: 7rem;
}
.t-hero-card { max-width: 42rem; }

/* l'occhiello poggia sulla fotografia: regola condivisa, vive in
   css/styles.css come .hero .eyebrow, .t-hero .eyebrow */

.t-hero-title {
  color: var(--calce);
  font-size: clamp(2.4rem, 5.8vw, 4.3rem);
  font-weight: 500;
  font-optical-sizing: auto;
  margin: 0.15em 0 0.5em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(20,22,14,.55);
}
.t-hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 34rem;
  color: rgba(243,237,225,.95);
  margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(20,22,14,.5);
}
.t-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.t-hero .wm-label { color: rgba(243,237,225,.95); }
.t-hero .waymarker { z-index: 2; }

/* ingresso morbido del contenuto dell'hero (non dipende dallo scroll) */
.t-hero-card > * { animation: tHeroIn .95s var(--ease) both; }
.t-hero-card > *:nth-child(2) { animation-delay: .08s; }
.t-hero-card > *:nth-child(3) { animation-delay: .16s; }
.t-hero-card > *:nth-child(4) { animation-delay: .24s; }
@keyframes tHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* parallasse guidata dallo scroll (browser che la supportano) */
@keyframes tHeroPan {
  from { transform: translate3d(0, -6%, 0) scale(1.16); }
  to   { transform: translate3d(0,  6%, 0) scale(1.16); }
}
@supports (animation-timeline: scroll()) {
  .t-hero-media img {
    animation: tHeroPan linear both;
    animation-timeline: scroll(root);
    /* svh, not vh, to match the hero's own min-height: 100svh — otherwise
       the pan drifts out of sync once the mobile browser toolbar hides */
    animation-range: 0 100svh;
  }
}

/* =========================================================
   RIVELAZIONI ALLO SCROLL
   ========================================================= */
.t-rev {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.t-rev.in { opacity: 1; transform: none; }
@keyframes tRev {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  .t-rev {
    opacity: 1; transform: none; transition: none;
    animation: tRev linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 66%;
  }
}

/* =========================================================
   GALLERIA "COM'È UNA DEGUSTAZIONE"
   Le due fotografie stanno in una scatola 3:2 identica, così le
   didascalie si allineano fra loro.
   ========================================================= */
.t-crop {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--olivo-2);
  aspect-ratio: 3 / 2;
  box-shadow: 0 22px 46px -30px rgba(42,38,32,.6);
}
.t-crop img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
}
.t-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 2.8vw, 2.2rem);
  align-items: start;
  /* -1/3 (era clamp(2.4rem, 5vw, 3.6rem)): con prezzi e contatti ora
     affiancati sotto, la sezione non ha più bisogno di tanto respiro
     verticale qui — restava "dispersiva". */
  margin-bottom: clamp(1.6rem, 3.3vw, 2.4rem);
}
.t-gallery figure { margin: 0; display: flex; flex-direction: column; }
.t-gallery figcaption {
  margin-top: 0.7rem;
  font-family: var(--display); font-style: italic;
  color: var(--inchiostro-2); font-size: 0.92rem;
}

/* =========================================================
   PANNELLO PREZZI + CONTATTI (affiancati)
   .t-prices (id="prezzi") e .t-contact vivono ora dentro lo stesso
   div.t-panel: li affianchiamo in una griglia a due colonne, prezzi
   più larghi perché portano più contenuto (titolo + elenco).
   ========================================================= */
.t-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  /* start, non stretch: le due colonne hanno altezze diverse (l'elenco
     prezzi è più alto della nota di contatto) e non devono allungarsi
     a vicenda */
  align-items: start;
  /* Il separatore che prima viveva su .t-prices (bordo + padding-top)
     ora sta qui, sul contenitore della griglia: se restasse solo su
     .t-prices le due colonne partirebbero da altezze diverse — .t-prices
     più in basso, .t-contact subito in cima — disallineate fra loro. */
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--cream-line);
}

/* =========================================================
   PREZZI — elenco compatto (non più due grandi card)
   ========================================================= */
.t-prices-title {
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--olivo);
  /* -1/3 (era 1.1rem) */
  margin-bottom: 0.75rem;
}
/* affiancate quando c'è spazio: in colonna lasciavano vuota
   metà pagina su uno schermo largo */
.t-price-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  /* -1/3 su entrambi gli assi (era 1.1rem clamp(1.5rem, 4vw, 3.5rem)) */
  gap: 0.75rem clamp(1rem, 2.7vw, 2.3rem);
}
/* -1/3 (era 1.1rem) */
.t-price-item { padding-bottom: 0.75rem; border-bottom: 1px solid var(--cream-line); }
.t-price-item-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 1rem;
}
.t-price-item-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  color: var(--inchiostro);
}
.t-price-item-value {
  flex: none;
  font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; color: var(--cotto); white-space: nowrap;
}
.t-price-item-value small {
  font-family: var(--body); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--inchiostro-2);
}
.t-price-item-desc { margin-top: 0.3rem; color: var(--inchiostro-2); font-size: 0.94rem; }

/* =========================================================
   CONTATTI
   ========================================================= */
/* -1/3 (era 1.2rem) */
.t-contact-note { max-width: 40rem; margin-bottom: 0.8rem; color: var(--inchiostro-2); }
.t-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.t-actions .btn svg { width: 18px; height: 18px; flex: none; }
/* .t-contact è ora una colonna stretta (circa 1fr su 2.4 del pannello):
   senza min-width:0 i tre pulsanti flex non possono restringersi sotto
   la loro larghezza naturale e il bottone del telefono ("+39 339 852
   1652") rischia di sporgere dalla colonna invece di andare a capo */
.t-actions .btn { min-width: 0; }
/* il bottone fantasma di base è pensato per un fondo scuro */
.t-contact .btn-ghost { color: var(--olivo); border-color: var(--olivo); }
.t-contact .btn-ghost:hover { background: rgba(61,66,48,.08); }

/* =========================================================
   FOOTER — link di ritorno
   ========================================================= */
.t-back {
  display: inline-block; margin-top: 0.7rem;
  font-weight: 600; color: var(--calce);
  border-bottom: 1.5px solid var(--cotto); padding-bottom: 2px;
  transition: color .25s;
}
.t-back:hover { color: var(--rosa-ink); }
.site-footer .footer-contact a:hover { color: var(--rosa-ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* .t-panel è concettualmente la stessa cosa di .about-grid,
   .services-grid, .contact-grid e .chianti-explorer in css/styles.css
   (due colonne di contenuto affiancate): quelle collassano tutte a
   900px, non a 760px, ed è lì che il pannello prezzi+contatti inizia
   a essere stretto (l'elenco prezzi perderebbe la sua seconda colonna
   interna ben prima). Stessa soglia, per coerenza col resto del sito. */
@media (max-width: 900px) {
  .t-panel { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  /* Sul telefono la cornice era 100svh con la scheda ancorata in alto:
     sotto i pulsanti restavano ~420px di prato vuoto e il tramonto —
     la ragione stessa della fotografia — finiva schiacciato dietro
     l'header. Cornice piu' bassa (si intravede la sezione successiva,
     e invita a scorrere), taglio alzato via dall'erba, e la scheda
     appoggiata sulla linea di terra, dove la velatura e' gia' al suo
     punto piu' scuro: il testo ci guadagna anche in contrasto.
     La scala 1.16 NON si tocca: e' lo spazio che serve alla
     parallasse per traslare +-6% senza scoprire i bordi. */
  .t-hero { min-height: 82svh; align-items: flex-end; }
  .t-hero-inner { padding-top: 6.5rem; padding-bottom: 3.25rem; }
  .t-hero-media img { object-position: center 40%; }
  @supports (animation-timeline: scroll()) {
    /* la corsa della parallasse resta legata all'altezza dell'hero */
    .t-hero-media img { animation-range: 0 82svh; }
  }

  .t-hero-lead { font-size: 1.02rem; }
  .t-hero-title { font-size: clamp(1.95rem, 8vw, 2.6rem); text-wrap: normal; overflow-wrap: break-word; }
  .t-actions .btn { flex: 1 1 100%; }
  .t-price-item-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  /* la regola per .t-hero .eyebrow a questa breakpoint vive già in
     css/styles.css, raggruppata con .hero .eyebrow */
}

/* =========================================================
   MOVIMENTO RIDOTTO
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .t-rev { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .t-hero-card > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .t-hero-media img { animation: none !important; transform: scale(1.02) !important; }
}