/* ==========================================================================
   Vinoteca — home: hero, liste vino editoriali, striscia fotografica+citazione
   ========================================================================== */

.hero{padding:60px 0 52px;border-bottom:1px solid var(--rule);}
.hero .kicker{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:18px;
}
.hero h1{
  font-family:"Newsreader",serif;font-style:italic;font-weight:600;
  font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.18;max-width:660px;
}
.hero p{color:var(--ink-dim);max-width:540px;margin-top:20px;font-size:1.02rem;}
.hero .cta-row{display:flex;gap:22px;margin-top:28px;align-items:center;flex-wrap:wrap;}
.btn{
  font-weight:700;font-size:.82rem;letter-spacing:.03em;
  padding:13px 22px;text-decoration:none;display:inline-block;border:0;cursor:pointer;
}
.btn-accent{background:var(--accent);color:var(--paper);}
.btn-accent:hover{background:var(--accent-hover);}
.link-inline{color:var(--ink);font-weight:700;border-bottom:1px solid var(--ink);text-decoration:none;}
.link-inline:hover{color:var(--accent);border-color:var(--accent);}

/* liste vino per provenienza */
.list-section{padding:50px 0;}
.list-section + .list-section{border-top:1px solid var(--rule);}
.region-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.region-head h2{font-family:"Newsreader",serif;font-style:italic;font-weight:600;font-size:1.6rem;}
.region-head .count{font-size:.76rem;color:var(--ink-dim);}
.region-note{color:var(--ink-dim);font-size:.88rem;margin-bottom:24px;max-width:520px;}
/* .wine-row è un <a> (l'intera riga porta al prodotto): reset dei default
   anchor (colore/sottolineatura), affordance di click sull'hover del nome. */
.wine-row{
  display:flex;align-items:baseline;gap:10px;padding:15px 0;border-bottom:1px solid var(--rule);
  color:inherit;text-decoration:none;
}
.wine-row:first-of-type{border-top:1px solid var(--rule);}
.wine-row .info{flex-shrink:0;}
.wine-row .denom{font-weight:700;font-size:1rem;}
.wine-row:hover .denom{color:var(--accent);}
.wine-row .sub{font-size:.82rem;color:var(--ink-dim);margin-top:2px;}
.wine-row .leader{flex:1;border-bottom:1px dotted var(--ink-dim);margin:0 4px 6px;min-width:24px;}
.wine-row .price{font-weight:700;font-size:1.02rem;white-space:nowrap;flex-shrink:0;}
.list-foot{margin-top:26px;}

/* striscia fotografica + citazione */
.mosaic-section{padding:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
/* grid-auto-rows fisso, non aspect-ratio per cella: con colonne di larghezza
   diversa (1.3fr/1fr/1fr) un aspect-ratio calcolato per singola cella dà
   altezze diverse tra loro — la traccia di riga del grid finisce alta quanto
   la cella più larga, e le celle più strette (aspect-ratio più basso) non si
   allungano a riempirla, lasciando uno spazio vuoto (sfondo di .mosaic)
   sotto di loro. Un'altezza di riga esplicita rende tutte le celle uniformi
   a prescindere dalla larghezza della colonna. */
.mosaic{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:380px;gap:2px;background:var(--rule);}
.mosaic > div{overflow:hidden;}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;}
.mosaic-quote{padding:44px 0;border-bottom:1px solid var(--rule);}
.mosaic-quote blockquote{
  font-family:"Newsreader",serif;font-style:italic;font-weight:600;font-size:1.4rem;margin:0;line-height:1.35;max-width:640px;
}
.mosaic-quote cite{display:block;font-style:normal;font-size:.78rem;color:var(--ink-dim);margin-top:14px;font-weight:700;letter-spacing:.04em;}

@media (max-width:760px){
  .wine-row{flex-wrap:wrap;}
  .wine-row .leader{display:none;}
  /* flex-shrink:0 (regola base, pensata per il leader tratteggiato del
     desktop) sulla larghezza intera farebbe traboccare orizzontalmente la
     pagina con nomi vino lunghi: qui .info deve invece occupare tutta la
     riga e poter andare a capo internamente. */
  .wine-row .info{flex:1 1 100%;min-width:0;}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:220px;}
  .mosaic > div:first-child{grid-column:1 / -1;}
}