/* ─────────────────────────────────────────────────────────────────────────
   article.css — pagine articolo di dedicawine.it

   Caricato SOLO dalle pagine articolo, SEMPRE dopo styles.css:
     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/article.css">

   styles.css fornisce le variabili (:root), i font, header, nav e footer.
   Qui c'e' solo cio' che manca: la colonna di lettura, il breadcrumb, il
   corpo dell'articolo, le FAQ e gli override delle regole della home che
   sulle pagine articolo si comportano male.

   Palette e font NON sono ridefiniti: arrivano da :root in styles.css.
   ───────────────────────────────────────────────────────────────────────── */


/* ── Override delle regole della home ──────────────────────────────────────
   1. header e' position:absolute + color:#fff perche' sulla home galleggia
      sopra l'immagine hero. Qui dietro non c'e' nessuna immagine: senza
      questo blocco la testata sarebbe bianca su fondo chiaro, cioe' invisibile.
   2. il selettore `h2` della home e' clamp(42px,5.3vw,76px): dentro un
      articolo i titoli di sezione risulterebbero enormi.                     */

/* Selettore ristretto alla testata del sito: "header" da solo colpisce anche
   <header class="article-header"> dentro l'articolo. */
body > header {
  position: static;
  background: var(--paper);
  color: var(--dark);
  border-bottom: 1px solid #e5dfd3;
}

body > header nav a:hover { color: var(--terra); }
body > header .menu i { background: var(--dark); }

/* La regola `header{}` di styles.css e' pensata per la barra in cima alla
   home: display:flex, height:78px, justify-content:space-between,
   position:absolute. Applicandosi anche a .article-header, occhiello, H1 e
   descrizione finivano sulla STESSA RIGA, alti 78px e spinti ai due lati:
   il titolo si sovrapponeva al testo. Qui la testata dell'articolo torna un
   normale blocco in flusso. */
.article-header {
  display: block;
  height: auto;
  position: static;
  inset: auto;
  z-index: auto;
  padding: 0;
  background: none;
  color: inherit;
  border: 0;
}


/* ── Colonna di lettura ──────────────────────────────────────────────────── */

.article-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 32px) 90px;
}


/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.breadcrumb {
  font-size: 12px;
  color: #7a8079;
  margin-bottom: 28px;
  line-height: 1.6;
}

.breadcrumb a { color: var(--terra); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #7a8079; }


/* ── Testata dell'articolo ───────────────────────────────────────────────── */

.article-header { margin-bottom: 36px; }

.article-eyebrow {
  margin: 0 0 14px;
  color: var(--terra);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.article-header h1 {
  font: 700 clamp(32px, 4.4vw, 52px)/1.1 var(--serif);
  letter-spacing: -.03em;
  margin: 0 0 18px;
  color: var(--dark);
}

.article-meta {
  font-size: 12px;
  color: #7a8079;
  margin: 0 0 26px;
  letter-spacing: .02em;
}

.article-intro {
  font-size: 19px;
  line-height: 1.65;
  color: #4a534b;
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--gold);
}


/* ── Immagini ────────────────────────────────────────────────────────────── */

.article-hero-image,
.article-inline-image {
  margin: 36px 0;
}

.article-hero-image img,
.article-inline-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-inline-image figcaption,
.article-hero-image figcaption {
  font-size: 12px;
  color: #7a8079;
  margin-top: 10px;
}


/* ── Corpo dell'articolo ─────────────────────────────────────────────────── */

.article-body {
  font-size: 17px;
  line-height: 1.75;
  color: #2f3a32;
}

.article-body h2 {
  font: 700 clamp(26px, 3vw, 34px)/1.2 var(--serif);
  letter-spacing: -.02em;
  margin: 52px 0 16px;
  color: var(--dark);
}

.article-body h3 {
  font: 700 21px/1.3 var(--serif);
  margin: 32px 0 12px;
  color: var(--dark);
}

.article-body p { margin: 0 0 20px; }

.article-body ul,
.article-body ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.article-body li { margin-bottom: 9px; }

.article-body a {
  color: var(--terra);
  border-bottom: 1px solid rgba(165, 77, 50, .35);
}

.article-body a:hover { border-bottom-color: var(--terra); }

.article-body strong { font-weight: 700; color: var(--dark); }

.article-body blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--olive);
  color: #4a534b;
  font-style: italic;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}

.article-body th,
.article-body td {
  border-bottom: 1px solid #e0dbcf;
  padding: 10px 12px;
  text-align: left;
}

.article-body th {
  font: 900 10px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terra);
}


/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq-section {
  margin-top: 60px;
  padding-top: 34px;
  border-top: 1px solid #e0dbcf;
}

.faq-section h2 {
  font: 700 clamp(26px, 3vw, 34px)/1.2 var(--serif);
  letter-spacing: -.02em;
  margin: 0 0 24px;
  color: var(--dark);
}

.faq-item {
  padding: 18px 0;
  border-bottom: 1px dashed #ddd7ca;
}

.faq-item:last-child { border-bottom: 0; }

.faq-q {
  font: 700 18px/1.35 var(--serif);
  margin: 0 0 8px;
  color: var(--dark);
}

.faq-a {
  margin: 0;
  color: #4a534b;
  line-height: 1.7;
}


/* ── Pagine hub di sezione (/enoturismo/, /occasioni/, ...) ──────────────── */

.hub-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-top: 1px solid #e0dbcf;
}

.hub-item {
  margin: 0;
  border-bottom: 1px solid #e0dbcf;
}

/* Selettore di FIGLIO, non di discendente. Con ".hub-item a" questa regola
   colpiva anche i due link dentro al credito del fotografo: diventavano
   blocchi in serif 20px con 20px di padding, cioe' il nome dell'autore
   sembrava un secondo titolo alto quanto quello dell'articolo. La scheda
   alta 120px si portava dietro 167px di credito. */
.hub-item > a {
  display: block;
  padding: 20px 4px;
  font: 700 20px/1.35 var(--serif);
  color: var(--dark);
  border: 0;
  transition: color .18s;
}

.hub-item > a:hover {
  color: var(--terra);
}

.hub-empty {
  margin: 8px 0 0;
  padding: 26px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  color: #4a534b;
}


/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 800px) {
  .article-container { padding: 30px 20px 64px; }
  .article-intro { font-size: 17px; }
  .article-body { font-size: 16px; }
  .article-body h2 { margin-top: 40px; }

  /* Sulla home il menu mobile e' un pannello scuro sovrapposto all'hero.
     Qui la testata e' chiara e in flusso: il pannello va ancorato sotto di
     essa e i link resi leggibili. */
  header nav {
    top: 64px;
    background: var(--paper);
    border: 1px solid #e5dfd3;
  }
  header nav a { color: var(--dark); }
}

/* ── Credito fotografico ──────────────────────────────────────────────────
   I termini dell'API Unsplash chiedono di nominare l'autore e il sito con un
   link. Discreto ma leggibile: e' un obbligo di licenza, non una didascalia
   da nascondere. Vale per la hero e per le inline. */
.article-hero-image .img-credit,
.article-inline-image .img-credit {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #7a8079;
  text-align: right;
}

.article-hero-image .img-credit a,
.article-inline-image .img-credit a {
  color: #59605a;
  border-bottom: 1px solid #cfc9bd;
}

.article-hero-image .img-credit a:hover,
.article-inline-image .img-credit a:hover {
  color: var(--terra, #a54d32);
  border-bottom-color: currentColor;
}


/* ── Hub di sezione ───────────────────────────────────────────────────────
   La fascia porta il testo SOPRA di se', a tutta larghezza. Il velo scuro
   non e' decorazione: senza, il bianco sparisce sulle zone chiare
   dell'immagine, e le sette testate hanno tutte un cielo al tramonto in
   alto a destra.
   L'immagine e' una generazione: nessun credito Unsplash da stampare, ma si
   dichiara com'e' nata. */

.hub-hero{
  position:relative;
  /* "contain" e non "cover": l'aspect-ratio arriva inline dal file, quindi
     nella norma le due proporzioni coincidono e non si vede differenza. La
     differenza si vede quando NON coincidono — schermi molto stretti, dove
     il testo chiede piu' altezza di quanta la proporzione ne conceda: li'
     "cover" taglierebbe la composizione, "contain" la lascia intera e
     riempie il resto col fondo scuro. */
  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;
  background-color:var(--dark);
  color:#fff;
  padding:0;
  display:flex;
  align-items:flex-end;
}
.hub-hero--spoglio{background:var(--dark)}

.hub-hero:before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(20,24,18,.92) 0%, rgba(20,24,18,.72) 45%, rgba(20,24,18,.42) 100%);
}

.hub-hero-inner{
  position:relative; z-index:1;
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:72px clamp(20px,5vw,40px) 44px;
}

/* Le briciole stanno sopra la fascia, su fondo pagina: sull'immagine
   cadevano nella zona piu' chiara di tutte e sette le testate. */
.hub-briciole{
  max-width:1160px;
  margin:0 auto;
  padding:20px clamp(20px,5vw,40px) 0;
  font-size:12px;
  color:#7a8079;
}
.hub-briciole a{color:var(--terra)}
.hub-briciole a:hover{text-decoration:underline}

.hub-hero-count{
  margin:0 0 10px;
  font:900 10px var(--sans);
  letter-spacing:.18em; text-transform:uppercase;
  color:#e5c36e;
}

.hub-hero-title{
  font:700 clamp(38px,5.4vw,64px)/1.05 var(--serif);
  letter-spacing:-.03em;
  margin:0 0 14px;
  color:#fff;
}

.hub-hero-desc{
  margin:0;
  max-width:560px;
  font-size:17px; line-height:1.6;
  color:#e8e4da;
}

/* Una riga sola, piu' piccola del testo corrente: e' una nota di
   provenienza, non un'informazione da leggere. */
.hub-hero-credit{
  margin:26px 0 0;
  font-size:11px; line-height:1.4;
  color:#a8b0a4;
}

/* ── Griglia delle schede ────────────────────────────────────────────── */

.hub-wrap{
  max-width:1160px;
  margin:0 auto;
  padding:44px clamp(20px,5vw,40px) 88px;
}

.hub-grid{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(288px, 1fr));
  gap:28px;
}

.hub-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e6e1d6;
  border-radius:3px;
  overflow:hidden;
  transition:box-shadow .18s, transform .18s;
}
.hub-card:hover{
  box-shadow:0 10px 26px rgba(40,34,22,.11);
  transform:translateY(-2px);
}

/* Tutta la scheda e' cliccabile. Il link e' un blocco, non una griglia:
   immagine sopra, testo sotto. */
.hub-card-link{
  display:flex; flex-direction:column;
  flex:1;
  color:inherit;
  border:0;
  padding:0;
  font:inherit;
}

.hub-card-img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#efe9dd;
}

.hub-card-body{
  display:flex; flex-direction:column;
  gap:9px;
  padding:20px 20px 4px;
}

.hub-card-title{
  font:700 20px/1.3 var(--serif);
  color:var(--dark);
  transition:color .18s;
}
.hub-card-link:hover .hub-card-title{color:var(--terra)}

.hub-card-excerpt{
  font-size:14px; line-height:1.55;
  color:#6b736a;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Il credito sta fuori dal link della scheda: dentro sarebbero due <a>
   annidati, e il click sul nome del fotografo avrebbe portato all'articolo
   invece che al suo profilo. */
.hub-card-credit{
  margin:12px 20px 0;
  font-size:11px; line-height:1.4;
  color:#9aa196;
}
.hub-card-credit a{
  display:inline; padding:0; font:inherit;
  color:#8a9089;
  border-bottom:1px solid #ddd7ca;
}
.hub-card-credit a:hover{color:var(--terra); border-bottom-color:currentColor}

.hub-card-cta{
  margin:14px 20px 20px;
  font:900 10px var(--sans);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--terra);
}

.hub-empty{
  max-width:1160px;
  margin:0 auto;
  padding:26px;
  background:var(--cream);
  border-left:3px solid var(--gold);
  color:#4a534b;
}

@media(max-width:720px){
  .hub-hero-inner{padding:44px 20px 32px}
  .hub-wrap{padding:32px 20px 64px}
  .hub-grid{grid-template-columns:1fr; gap:22px}
  .hub-hero-desc{font-size:16px}
}