/* ==========================================================================
   WINEFOR — blog.css
   Stile del blog nativo WordPress: hero della pagina Blog, restyle della
   griglia del plugin "The Post Grid" (classi rt-*/tpg-*, verificate sul
   markup reale generato dal plugin, non indovinate), tipografia del corpo
   di un articolo singolo (template nativo del tema, classi .page-header/
   .page-content, verificate allo stesso modo). Richiede home3h.css caricato
   PRIMA (variabili, reset, container, bottoni, .badge-pill, .card-cta,
   .ph-img). Vedi deploy/LEGGIMI.txt per come/quando aggiornarlo su stage e
   per il cache-bust (?v=, versione_css_blog in deploy/config.json).

   Le regole di tipografia sono scoperte con "body.single-post" perche'
   ".page-content" e' probabilmente il wrapper generico del tema per QUALSIASI
   contenuto (post E pagine): senza questo scope rischierebbero di toccare
   anche le pagine wp:html del sito (home, risorsa-*, la stessa pagina Blog),
   che hanno gia' le loro classi specifiche. Il blog nativo, invece, mostra
   SOLO Post (non Page): "body.single-post" li isola con certezza.
   ========================================================================== */

/* ======================================================= BLOG — HERO ==== */
.blog-hero {
  padding: 72px 0 64px;
  background: linear-gradient(180deg, var(--hero-grad-3) 0%, var(--blu-tint) 100%);
  text-align: center;
}

.blog-hero .container--stretto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.blog-hero-titolo {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--testo);
}

.blog-hero-sub {
  max-width: 620px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--testo-muted);
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 56px 0 48px;
  }
}

/* ================================================ BLOG — GRIGLIA ARTICOLI */
/* Il plugin genera una griglia in stile Bootstrap (.rt-row + .rt-col-md-4
   .rt-col-sm-6 .rt-col-xs-12): la sostituiamo con una griglia nostra (stessi
   breakpoint 1024/768 del resto del sito) invece di adattare le sue colonne,
   perche' i suoi stili di colonna sono numerosi e usano piu' selettori con
   ID dinamico (#rt-tpg-container-<id>) che avrebbero vinto di specificita'. */
.rt-tpg-container .rt-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0 !important;
}

.rt-tpg-container .rt-grid-item {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .rt-tpg-container .rt-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .rt-tpg-container .rt-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Card: stessa "fisionomia" di .resource-card (bianco, radius-lg, ombra che
   si accentua in hover). */
.rt-tpg-container .rt-holder {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bianco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.rt-tpg-container .rt-holder:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Copertina 4:3 (stesso principio di .resource-cover/.ph-img.ratio-4-3):
   l'immagine reale del plugin riempie sempre il riquadro, qualunque sia la
   sua proporzione originale. */
.rt-tpg-container .rt-img-holder {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--off-white);
  overflow: hidden;
}

.rt-tpg-container .rt-img-holder img.rt-img-responsive {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
}

.rt-tpg-container .rt-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 24px 24px;
}

/* Titolo (h3.entry-title DENTRO la card): scoperto a ".rt-detail" per non
   toccare mai ".page-header .entry-title" (h1 del singolo articolo, stile
   diverso piu' sotto). */
.rt-tpg-container .rt-detail h3.entry-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
}

.rt-tpg-container .rt-detail h3.entry-title a {
  color: var(--testo);
  transition: color var(--transition);
}

.rt-tpg-container .rt-detail h3.entry-title a:hover {
  color: var(--blu);
}

/* Riga categoria + data: la categoria (badge) passa PRIMA della data anche
   se nel markup del plugin viene dopo (order: -1, nessun tocco all'HTML). Le
   iconcine del plugin (calendario/cartella) non sono nel design approvato:
   nascoste. */
.rt-tpg-container .post-meta-user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.rt-tpg-container .post-meta-user .categories-links {
  order: -1;
}

.rt-tpg-container .post-meta-user .tpg-flaticon-calendar,
.rt-tpg-container .post-meta-user .tpg-flaticon-folder {
  display: none;
}

.rt-tpg-container .post-meta-user .date {
  font-size: 13px;
  color: var(--testo-muted);
}

/* Badge di categoria = stessa ricetta visiva di .badge-pill (home3h.css),
   applicata al link vero generato dal plugin (categories-links a). */
.rt-tpg-container .categories-links a {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--blu-light);
  color: var(--blu);
  text-decoration: none;
}

.rt-tpg-container .tpg-excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--testo-muted);
}

/* CTA "Leggi tutto" = stessa ricetta visiva di .card-cta (home3h.css). */
.rt-tpg-container .post-meta {
  margin-top: auto;
  width: 100%;
}

.rt-tpg-container .post-meta .read-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blu);
  text-decoration: none;
}

.rt-tpg-container .post-meta .read-more a::after {
  content: '→';
  transition: transform var(--transition);
}

.rt-tpg-container .post-meta .read-more a:hover::after {
  transform: translateX(3px);
}

/* ------------------------------------------------------------ PAGINAZIONE */
/* Markup reale del plugin: .rt-pagination > ul.pagination-list > li (.active
   per la pagina corrente) > a (o span se corrente/disabilitato). */
.rt-tpg-container .rt-pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.rt-tpg-container .pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rt-tpg-container .pagination-list li a,
.rt-tpg-container .pagination-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--bordo);
  font-size: 14px;
  font-weight: 600;
  color: var(--testo-muted);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.rt-tpg-container .pagination-list li a:hover {
  border-color: var(--blu);
  color: var(--blu);
}

.rt-tpg-container .pagination-list li.active span {
  background: var(--blu);
  border-color: var(--blu);
  color: var(--bianco);
}

@media (max-width: 480px) {
  .rt-tpg-container .pagination-list li a,
  .rt-tpg-container .pagination-list li span {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/* ==================================================== ARTICOLO SINGOLO == */
/* Colonna di lettura: 720px (non 900px di .container--stretto, pensato per
   pagine con form/colonna laterale: da solo il testo supererebbe le 90
   battute a riga). "body.single-post": vedi nota in testa al file. */
body.single-post .page-header {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 0 24px;
}

body.single-post .page-header .entry-title {
  margin: 0 0 28px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--testo);
}

body.single-post .page-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

body.single-post .page-content h2 {
  margin: 44px 0 18px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--testo);
}

body.single-post .page-content h3 {
  margin: 36px 0 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--testo);
}

body.single-post .page-content p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--testo);
}

body.single-post .page-content ul,
body.single-post .page-content ol {
  margin: 0 0 22px;
  padding-left: 1.3em;
  font-size: 18px;
  line-height: 1.7;
  color: var(--testo);
}

body.single-post .page-content ul {
  list-style: disc;
}

body.single-post .page-content ol {
  list-style: decimal;
}

body.single-post .page-content li {
  margin-bottom: 10px;
}

body.single-post .page-content li:last-child {
  margin-bottom: 0;
}

body.single-post .page-content li::marker {
  color: var(--ottone);
  font-weight: 700;
}

/* Citazione: bordo ottone nel flusso di lettura (non un box isolato), niente
   corsivo (il sito non lo usa mai, vedi anche blog-mockup/NOTE.md). */
body.single-post .page-content blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 22px;
  border-left: 4px solid var(--ottone);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--testo);
}

body.single-post .page-content blockquote p {
  margin: 0 0 10px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

body.single-post .page-content blockquote p:last-child {
  margin-bottom: 0;
}

body.single-post .page-content blockquote cite {
  display: block;
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  color: var(--testo-muted);
}

body.single-post .page-content figure {
  margin: 36px 0;
}

body.single-post .page-content figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.single-post .page-content figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: var(--testo-muted);
}

/* Link nel testo: il reset globale (home3h.css) rende i link "invisibili" di
   proposito (pensato per bottoni/card): nel corpo di un articolo vanno
   invece sempre sottolineati. */
body.single-post .page-content a {
  color: var(--blu);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Gli indirizzi lunghi nelle Fonti (es. Wine Meridian, con trattini bassi) non vanno a capo da soli
   e allargavano la pagina sul telefono (07/10/2026): li spezziamo dove serve. */
body.single-post .page-content a {
  overflow-wrap: anywhere;
}

body.single-post .page-content a:hover {
  color: var(--blu-dark);
}

@media (max-width: 480px) {
  body.single-post .page-content p,
  body.single-post .page-content ul,
  body.single-post .page-content ol {
    font-size: 16.5px;
  }

  body.single-post .page-content blockquote {
    font-size: 18px;
    padding-left: 18px;
  }
}

/* Aggiunte del 06/10/2026 (primo articolo vero, prodotto da deploy/md-a-gutenberg.py):
   sottotitolo in apertura, infografiche verticali, pulsante CTA verso la guida, separatore. */

/* Font: sugli articoli home3h.css arriva via wp_enqueue (mu-plugin) e il reset.css del tema,
   caricato dopo, rimette il font di sistema su "body" (stessa specificita'). Sulle pagine wp:html
   non succede perche' li' home3h.css sta nel contenuto, dopo il tema. */
body.single-post,
body.category {
  font-family: var(--font-base);
}

/* Il tema figlio (style.css) nasconde ".page-header .entry-title" ovunque, per le pagine wp:html
   che hanno il loro titolo nel contenuto, e lo fa con !important. Sugli articoli il titolo e'
   l'H1: va mostrato, quindi qui serve !important anche da parte nostra (selettore piu' specifico). */
html body.single-post .page-header .entry-title {
  display: block !important;
  padding-inline: 0 !important;   /* il tema (theme.css, proprieta' logiche) gli da' 20 px: titolo disallineato */
}
body.single-post .page-content .articolo-sottotitolo {
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--testo-muted);
}

body.single-post .page-content .articolo-sottotitolo em {
  font-style: normal;
}

/* Infografiche: sono verticali (1080 px di base, pensate per il telefono). Sul desktop,
   a tutta colonna, diventerebbero alte quanto due schermi: larghezza massima 520 px.
   Niente ombra: hanno gia' il loro riquadro avorio con gli angoli arrotondati. */
body.single-post .page-content .wp-block-image img {
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  box-shadow: none;
}

/* Sul telefono la colonna e' larga ~290 px (padding del tema + nostro): le infografiche escono dai
   margini e prendono tutta la larghezza dello schermo, cosi' il loro testo resta sui 14-15 px. */
@media (max-width: 600px) {
  body.single-post .page-content .wp-block-image {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  body.single-post .page-content .wp-block-image img {
    max-width: 100%;
    border-radius: 0;
  }
}

/* Pulsante CTA (blocco wp:button): stesso arancio dei pulsanti del sito (--arancio),
   l'unico "pop" della palette. Selettore con "html" per battere il tema e la regola dei
   link nel testo (sottolineati, teal) qui sopra. */
html body.single-post .page-content .wp-block-buttons {
  margin: 8px 0 40px;
}

html body.single-post .page-content .wp-block-button__link {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--arancio);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--transition);
}

html body.single-post .page-content .wp-block-button__link:hover,
html body.single-post .page-content .wp-block-button__link:focus {
  background: var(--arancio-hover, #CE5F1C);
  color: #FFFFFF;
}

/* Riquadro CTA con la copertina della guida (richiesta di Simone, 12/10/2026): copertina cliccabile
   a sinistra, presentazione + pulsante a destra; sul telefono uno sotto l'altro, centrati.
   Le copertine sono le "scheda" .webp trasparenti delle pagine risorsa. */
body.single-post .page-content .articolo-cta-guida {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin: 12px 0 40px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: #F7F3EA;
}

html body.single-post .page-content .articolo-cta-guida .articolo-cta-copertina {
  margin: 0;
}

html body.single-post .page-content .articolo-cta-guida .articolo-cta-copertina img {
  display: block;
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}

body.single-post .page-content .articolo-cta-testo p {
  margin-bottom: 18px;
}

html body.single-post .page-content .articolo-cta-testo .wp-block-buttons {
  margin: 0;
}

@media (max-width: 600px) {
  body.single-post .page-content .articolo-cta-guida {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
    text-align: center;
  }

  /* annulla, per la copertina, la regola "infografiche a tutta larghezza" qui sopra */
  html body.single-post .page-content .articolo-cta-guida .articolo-cta-copertina {
    margin-left: auto;
    margin-right: auto;
  }

  html body.single-post .page-content .articolo-cta-guida .articolo-cta-copertina img {
    max-width: 150px;
  }

  body.single-post .page-content .articolo-cta-testo .wp-block-buttons {
    justify-content: center;
  }
}

/* Scheda dell'autore a fine articolo (richiesta di Simone, 13/10/2026): "Scritto da…" + didascalia.
   La foto (.articolo-autore-foto) non c'e' ancora: quando arriva, si aggiunge sopra la didascalia. */
body.single-post .page-content .articolo-autore {
  margin: 48px 0 8px;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: #F7F3EA;
  text-align: center;
}

html body.single-post .page-content .articolo-autore .articolo-autore-titolo {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blu-dark);
}

html body.single-post .page-content .articolo-autore .articolo-autore-foto {
  margin: 0 auto 16px;
}

html body.single-post .page-content .articolo-autore .articolo-autore-foto img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: none;
}

html body.single-post .page-content .articolo-autore .articolo-autore-testo {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--testo);
}

@media (max-width: 600px) {
  body.single-post .page-content .articolo-autore {
    padding: 24px 20px;
  }
}

body.single-post .page-content .wp-block-separator {
  margin: 48px 0 32px;
  border: 0;
  border-top: 1px solid var(--bordo);
}

/* Fonti in fondo: testo di supporto, piu' piccolo */
body.single-post .page-content .wp-block-separator ~ h3,
body.single-post .page-content .wp-block-separator ~ ul {
  font-size: 15px;
  color: var(--testo-muted);
}

/* -------------------------------------------------------------- FOCUS a11y */
.rt-tpg-container .pagination-list li a:focus-visible,
.rt-tpg-container .rt-img-holder a:focus-visible,
.rt-tpg-container .rt-detail h3.entry-title a:focus-visible,
.rt-tpg-container .post-meta .read-more a:focus-visible,
body.single-post .page-content a:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
}

/* ===== Lettura facilitata (indicazioni di Simone n. 5, 21/10/2026; specifica dell'agente UX) =====
   In ordine nel contenuto: tempo di lettura, vignetta, sottotitolo, "In breve", apertura, indice,
   frasi in evidenza nel corpo. Le classi compaiono solo negli articoli che le usano. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.single-post .page-content h2 { scroll-margin-top: 90px; }

/* tempo di lettura, sotto il titolo */
html body.single-post .page-content .articolo-meta {
  margin: -8px 0 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--testo-muted);
}
html body.single-post .page-content .articolo-meta::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: var(--ottone);
  vertical-align: middle;
}

/* vignetta in apertura: a tutta colonna (non 520 px come le infografiche) */
html body.single-post .page-content .articolo-vignetta {
  margin: 0 0 26px;
}
html body.single-post .page-content .articolo-vignetta img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: none;
}
@media (max-width: 600px) {
  html body.single-post .page-content .articolo-vignetta {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  html body.single-post .page-content .articolo-vignetta img { border-radius: 0; }
}

/* "In breve": prosa corta su avorio, senza bordo (la barra ottone resta solo alle citazioni) */
body.single-post .page-content .articolo-inbreve {
  margin: 4px 0 34px;
  padding: 22px 26px 24px;
  border-radius: var(--radius-lg);
  background: #F7F3EA;
}
html body.single-post .page-content .articolo-inbreve .articolo-inbreve-etichetta {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blu);
}
html body.single-post .page-content .articolo-inbreve p:last-child {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

/* indice cliccabile: <details> aperto, numeri ottone, link senza sottolineatura fissa */
body.single-post .page-content .articolo-indice {
  margin: 30px 0 42px;
  border: 1px solid var(--bordo);
  border-radius: var(--radius-lg);
  background: var(--bianco);
}
body.single-post .page-content .articolo-indice summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--blu-dark);
  cursor: pointer;
  list-style: none;
}
body.single-post .page-content .articolo-indice summary::-webkit-details-marker { display: none; }
body.single-post .page-content .articolo-indice summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 16px;
  border-right: 2.5px solid var(--blu);
  border-bottom: 2.5px solid var(--blu);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transition);
}
body.single-post .page-content .articolo-indice[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
body.single-post .page-content .articolo-indice summary:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
html body.single-post .page-content .articolo-indice ol {
  margin: 0;
  padding: 0 22px 18px 46px;
  font-size: 16.5px;
  line-height: 1.5;
}
html body.single-post .page-content .articolo-indice li { margin-bottom: 8px; }
html body.single-post .page-content .articolo-indice li { padding: 4px 0; }
html body.single-post .page-content .articolo-indice a {
  display: inline;   /* inline-block allineava il numero all'ultima riga delle voci lunghe */
  font-weight: 500;
  color: var(--testo);
  text-decoration: none;
}
html body.single-post .page-content .articolo-indice a:hover,
html body.single-post .page-content .articolo-indice a:focus-visible {
  color: var(--blu-dark);
  text-decoration: underline;
  text-decoration-color: var(--ottone);
  text-decoration-thickness: 2px;
}

/* frase in evidenza: Inter 700, teal scuro, filetto ottone sopra; niente corsivo, niente barra laterale */
html body.single-post .page-content .articolo-evidenza {
  margin: 40px 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blu-dark);
}
html body.single-post .page-content .articolo-evidenza::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--ottone);
}
@media (max-width: 480px) {
  html body.single-post .page-content .articolo-evidenza { margin: 32px 0; font-size: 22px; }
  body.single-post .page-content .articolo-inbreve { padding: 18px 20px 20px; }
  html body.single-post .page-content .articolo-indice ol { padding-left: 40px; font-size: 16px; }
}