/* ============================================================
   NEW MONDAY BLOG THEME — blog.css
   Tutto ciò che il tema aggiunge a main.css (copia del sito, da non
   toccare qui): token del blog, pagina blog, articolo.

   Fonte: Figma "Website 2026 — New Style" (691Xmz61IOB6lzDwxhrpQV)
     Blog      2693:7589  · mobile 2699:22227
     Articolo  2707:22375 · mobile 2708:22954
     componenti: pagination 2707:22323, breadcrumbs-back 2708:23202,
                 breadcrumbs-link 2708:23209

   Titolo, filtri e "Load more" sono componenti del sito e usano i suoi
   token così come sono. I token qui sotto sono quelli che il sito non
   ha: le variabili aggiunte per il blog e le misure fisse del Figma.
   ============================================================ */

:root{
  /* ---- font/size/special/note — Desktop 14 · Laptop 12 · Mobile 10.
         Mobile != Laptop: due rampe, come headings-xl in main.css
         (500→1280 qui, 1280→1920 nel @media sotto). ---- */
  --font-size-special-note: clamp(10px, calc(0.2564vw + 8.7179px), 12px);

  /* ---- font/size/article/h2…h6 (stili Article/h2…h6).
         Tutti con Mobile != Laptop, quindi due rampe. ---- */
  --font-size-article-h2: clamp(36px, calc(1.1538vw + 30.2308px), 45px);  /* 36 · 45 · 54 */
  --font-size-article-h3: clamp(32px, calc(1.0256vw + 26.8718px), 40px);  /* 32 · 40 · 48 */
  --font-size-article-h4: clamp(24px, calc(1.1538vw + 18.2308px), 33px);  /* 24 · 33 · 42 */
  --font-size-article-h5: clamp(20px, calc(1.0256vw + 14.8718px), 28px);  /* 20 · 28 · 36 */
  --font-size-article-h6: clamp(16px, calc(0.8974vw + 11.5128px), 23px);  /* 16 · 23 · 30 */

  /* ---- tabelle negli articoli (Figma: font/size/article/table,
         component/article-table-cell-pad, Component/article-table-*).
         Puntano ai token del sito come le variabili Figma puntano
         a font/size/paragraph/xs, spacing-12 e ai grigi. ---- */
  --font-size-article-table: var(--font-size-paragraph-xs);
  --article-table-cell-pad: var(--space-12);
  --article-table-border: var(--color-gray-20);
  --article-table-outline: var(--color-gray-40);
  --article-table-head-bg: var(--color-gray-10);
  --article-table-col-min: 160px;   /* sotto si schiaccia: si scorre */

  /* ---- titolo delle card: 24 in desktop, 18 in mobile. In Figma è un
         valore scritto a mano, non una variabile, e non c'è un frame
         Laptop: interpola in linea retta fra 500 e 1920. ---- */
  --font-size-post-title: clamp(18px, calc(0.4225vw + 15.8873px), 24px);

  /* ---- rapporti delle immagini, dal Figma ----
     Devono restare allineati ai ritagli di inc/images.php. */
  --ratio-article-hero: 842 / 620;
  --ratio-post-image:   1200 / 780;

  /* ---- misure fisse dei componenti nuovi (uguali in tutti i mode) ---- */
  --size-page-btn:     48px;   /* pagination: bottoni tondi */
  --size-page-number:  20px;   /* pagination: cifra */
  --size-page-icon:    16px;   /* pagination: chevron */
  --size-share-btn:    52px;   /* button-icon-share */
  --size-badge-label:  20px;   /* etichetta "NEW", come la label del filtro */

  /* altezza della barra del menu desktop: padding sopra + pill (logo
     alto header-item più lo spacing-16 sopra e sotto). La barra di
     lettura si aggancia sotto a questa. */
  --size-menu-bottom: calc(var(--space-32) + var(--size-header-item) + var(--space-16) * 2);
}
@media (min-width: 1280px){
  :root{
    --font-size-special-note: clamp(12px, calc(0.3125vw + 8px), 14px);
    --font-size-article-h2: clamp(45px, calc(1.4063vw + 27px), 54px);
    --font-size-article-h3: clamp(40px, calc(1.25vw + 24px), 48px);
    --font-size-article-h4: clamp(33px, calc(1.4063vw + 15px), 42px);
    --font-size-article-h5: clamp(28px, calc(1.25vw + 12px), 36px);
    --font-size-article-h6: clamp(23px, calc(1.0938vw + 9px), 30px);
  }
}

/* custom element: display esplicito, altrimenti sono inline */
blog-feed{ display:grid; }

/* ---- barra di amministrazione di WordPress ----
   Solo per chi è loggato: da 783px in su è alta 32 e fissa in cima, e
   coprirebbe l'header. Sotto i 1024 l'header sta in basso e non serve. */
@media (min-width: 1024px){
  body.admin-bar .site-header{ top:32px; }
  body.admin-bar{ --size-admin-bar:32px; }
}

/* ============================================================
   TESTO DI SERVIZIO — Special/Note e il suo uso nella riga
   "tempo di lettura | categorie" (Figma "post-info")
   ============================================================ */
.post-info{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--space-12);
  min-width:0;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-special-note);
  line-height:1.2;
  color:var(--color-gray-60);
}
.post-info p{ margin:0; }
.post-info-time{
  display:flex;
  align-items:center;
  gap:var(--space-8);
  padding-inline-end:var(--space-12);
  border-inline-end:1px solid var(--color-gray-60);
  flex-shrink:0;
  white-space:nowrap;
}
.post-info-icon{ width:16px; aspect-ratio:1; }
.post-info-categories{
  text-transform:uppercase;
  min-width:0;
}
/* nella hero dell'articolo la riga è Paragraph/XS, icona 20 */
.post-info--hero{
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
}
.post-info--hero .post-info-icon{ width:clamp(16px, 1.0417vw, 20px); }

/* ============================================================
   PAGINA BLOG — titolo
   ============================================================ */
.blog-hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-128);
}
/* titolo e sottotitolo, centrati sulle otto colonne centrali (1128 a
   1920), a spacing-32 l'uno dall'altro (Figma 2693:7591) */
.blog-hero-copy{
  --grid-col: 3 / span 8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
  text-align:center;
}
.blog-hero-intro{ color:var(--color-gray-80); }

/* pagina categoria e tag (Figma 2718:23281): allineata a sinistra, su
   tutta la larghezza, con "Kategorie" o "Schlagwort" in grigio sopra al
   nome. Il breadcrumb sopra sta dove sta nell'articolo: in cima, a
   spacing-32 dal resto. */
.blog-hero--term{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
}
.term-hero-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
}
.term-hero-eyebrow{ color:var(--color-gray-60); }

/* ============================================================
   PAGINA BLOG — filtri, card, griglia, load more, paginazione.
   Fra un blocco e l'altro spacing-128, come nel frame.
   ============================================================ */
.blog-section{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin) var(--space-240);
}
.blog-feed,
.blog-results{ row-gap:var(--space-128); }

/* ---- filtri: categorie sopra, ricerca sotto (Figma 2734:23297) ---- */
.blog-filters-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-32);
}

/* filter-primary è il componente del sito (main.css): qui cambia solo
   la distanza fra le pillole, spacing-16 */
.blog-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-16);
}

/* ---- campo di ricerca (Figma 2734:23324) ----
   È il campo del sito: la scatola porta .form-input (main.css), che dà
   padding, testo Paragraph/SM, fondo bianco, filo interno gray-20,
   raggio e transizione. Qui c'è solo quello che cambia:
   - dentro ci stanno icona, testo e X, quindi è una riga flex;
   - è largo sei colonne, non tutta la riga;
   - il filo diventa nero quando c'è qualcosa scritto: dice che la
     ricerca sta filtrando la lista (search-field-filling). Il fuoco da
     solo non lo accende.
   Le icone sono alte quanto una riga di testo (1.5em): 36 dove il testo
   è 24, e scendono con lui in mobile. */
.blog-search.form-input{
  display:flex;
  align-items:center;
  gap:var(--space-12);
  width:var(--size-col-6);
}
.blog-search:has(.blog-search-input:not(:placeholder-shown)){
  box-shadow:inset 0 0 0 1px var(--color-black);
}
.blog-search-icon{
  width:1.5em;
  aspect-ratio:1;
  color:var(--color-gray-40);
}
/* border:0 e appearance:none: il campo nativo porta bordo, sfondo e,
   essendo type="search", una sua X che qui c'è già */
.blog-search-input{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  color:var(--color-black);
  appearance:none;
}
.blog-search-input::placeholder{ color:var(--color-gray-40); opacity:1; }
/* niente anello di fuoco: nel campo vuoto il fuoco lo dice il cursore
   che lampeggia, e il bordo cambia solo quando si scrive (Figma) */
.blog-search-input:focus{ outline:none; }
.blog-search-input::-webkit-search-cancel-button,
.blog-search-input::-webkit-search-decoration{ appearance:none; }
/* la X compare solo quando c'è qualcosa da cancellare */
.blog-search-clear{
  display:none;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:1.5em;
  aspect-ratio:1;
  border-radius:8px;
  color:var(--color-gray-40);
  transition:background-color .2s var(--ease-out);
}
.blog-search:has(.blog-search-input:not(:placeholder-shown)) .blog-search-clear{ display:flex; }
.blog-search-clear .icon{ width:100%; aspect-ratio:1; }
/* search-field-resethover */
.blog-search-clear:hover{ background:var(--color-gray-15); }

.blog-empty{
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  text-align:center;
  color:var(--color-gray-60);
}

/* ---- link che copre la card ----
   Il solo link della card è il titolo; il suo ::after si stende sulla
   card, così si clicca ovunque ma il link resta uno. */
.post-link{ color:inherit; }
.post-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.post-link:focus-visible{ outline:none; }
.post-card:has(.post-link:focus-visible),
.post-featured:has(.post-link:focus-visible){
  outline:2px solid var(--color-primary);
  outline-offset:3px;
}

/* ---- card "new": l'ultimo articolo (Figma 2700:22596) ----
   Dieci colonne su dodici (1414 a 1920). Immagine e testo si dividono
   la card 699 : 715 come nel frame. */
.post-featured{
  --grid-col: 2 / span 10;
  position:relative;
  display:grid;
  grid-template-columns:699fr 715fr;
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-white);
}
/* Lo stroke primary di Figma è interno e sta SOPRA all'immagine: un
   border la rimpicciolirebbe di 2px per lato, un box-shadow inset
   finirebbe sotto. Serve uno strato sopra a tutto. */
.post-featured::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--color-primary);
  pointer-events:none;
  z-index:2;
}
.post-featured-media{
  position:relative;
  min-height:0;
  overflow:hidden;
  background:var(--color-primary-40);
}
/* L'immagine tiene il suo rapporto ma, se il testo accanto è più alto, si
   allunga fino al fondo della card e cover ritaglia: niente fasce
   vuote sotto la foto. */
.post-featured-media img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:var(--ratio-post-image);
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
/* etichetta "NEW": la pillola bianca di filter-primary, con testo
   primary (istanza 2700:22746) */
.post-badge{
  position:absolute;
  inset-block-start:clamp(10px, calc(0.1408vw + 9.2958px), 12px);
  inset-inline-start:clamp(10px, calc(0.1408vw + 9.2958px), 12px);
  display:flex;
  align-items:center;
  height:calc(var(--size-badge-label) + var(--space-12) * 2);
  padding-inline:var(--space-20);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-button-sm);
  line-height:1;
  text-transform:uppercase;
  color:var(--color-primary);
}
.post-featured-content{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
  min-width:0;
  padding:var(--space-32) var(--space-48);
}
.post-featured-excerpt{
  color:var(--color-gray-80);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
/* la riga in fondo: info a sinistra, freccia a destra, spinta al
   bordo inferiore dallo spazio che resta */
.post-featured-footer{
  flex:1 0 auto;
  display:flex;
  align-items:flex-end;
  gap:var(--space-16);
}
.post-featured-footer .post-info{ flex:1 1 auto; }
/* La freccia è button-icon-secondary, ma qui non è un bottone: il link
   è quello della card. Prende lo stato hover quando si punta la card,
   che è quello che il puntatore sta davvero indicando. */
.post-featured:has(.post-link:hover) .post-featured-arrow{
  box-shadow:inset 0 0 0 2px var(--color-primary);
}

/* ---- hover delle card: come portfolio-item-small nel sito ----
   immagine al 105% dentro al riquadro, titolo in primary */
.post-featured-title,
.post-card-title{ transition:color .3s var(--ease-out); }
.post-featured:has(.post-link:hover) .post-featured-media img,
.post-card:has(.post-link:hover) .post-card-media img{ transform:scale(1.05); }
.post-featured:has(.post-link:hover) .post-featured-title,
.post-card:has(.post-link:hover) .post-card-title{ color:var(--color-primary); }

/* ---- griglia delle card: 4 colonne, cioè 3 colonne di pagina l'una ---- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  column-gap:var(--grid-gutter);
  row-gap:var(--space-128);
}

/* ---- card (Figma "post-item-small") ---- */
.post-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-20);
}
.post-card-media{
  aspect-ratio:var(--ratio-post-image);
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-60);
}
.post-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.post-card-title{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-post-title);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--color-black);
  overflow-wrap:anywhere;
}

/* ---- load more: button-secondary del sito, centrato ---- */
.blog-more{
  display:flex;
  justify-content:center;
}
.blog-load-more[aria-busy="true"]{ opacity:.5; pointer-events:none; }

/* ---- paginazione (Figma 2707:22323) ----
   Uguale in desktop e mobile, tranne il gap: spacing-8. */
.blog-pagination{ display:flex; justify-content:center; }
.pagination-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-8);
}
.page-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--size-page-btn);
  height:var(--size-page-btn);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  color:var(--color-gray-60);
  font-family:var(--font-base);
  font-weight:400;
  font-size:var(--size-page-number);
  line-height:1;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.page-btn .icon{ width:var(--size-page-icon); aspect-ratio:1; }
/* button-pagination-number-active */
.page-btn.is-current{ color:var(--color-black); cursor:default; }
/* button-pagination-arrow-hover. Il componente ha l'hover solo per le
   frecce: i numeri prendono lo stesso. */
a.page-btn:hover{
  background:var(--color-gray-15);
  color:var(--color-black);
}
/* button-pagination-arrow-disable */
.page-btn[aria-disabled="true"]{
  background:var(--color-gray-10);
  color:var(--color-gray-20);
}

/* ============================================================
   ARTICOLO — hero (Figma 2707:22376)
   ============================================================ */
.article-hero{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-80);
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
}

/* ---- breadcrumb ---- */
/* il reset di main.css toglie i pallini agli ul, non i numeri agli ol */
.breadcrumbs-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-8);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  text-transform:uppercase;
  color:var(--color-gray-60);
}
.breadcrumbs-back{
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
/* nel componente la freccia resta grigia anche in hover: cambia solo
   il testo */
.breadcrumbs-icon{ width:16px; aspect-ratio:1; color:var(--color-gray-60); }
.breadcrumbs-separator{ color:var(--color-gray-80); }
.breadcrumbs-categories{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-8);
}
.breadcrumbs-back span,
.breadcrumbs-link{ transition:color .25s var(--ease-out); }
.breadcrumbs-back:hover span,
.breadcrumbs-link:hover{ color:var(--color-black); }

/* ---- immagine + scheda: sei colonne ciascuna, con la grondaia
   della griglia in mezzo (842 + 16 + 842 a 1920) ---- */
.article-feature{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--grid-gutter);
}
.article-hero-media{
  aspect-ratio:var(--ratio-article-hero);
  border-radius:var(--radius-24);
  overflow:hidden;
  background:var(--color-gray-15);
}
.article-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.article-hero-content{
  display:flex;
  flex-direction:column;
  gap:var(--space-32);
  min-width:0;
  padding:var(--space-64);
  border-radius:24px;   /* in Figma è 24 fisso, non spacing-24 */
  background:var(--color-gray-15);
}
.article-hero-footer{
  flex:1 0 auto;
  display:flex;
  align-items:flex-end;
  gap:var(--space-16);
}
/* date sopra, tempo di lettura e categorie sotto (Figma 2707:22779) */
.article-meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-4);
}
.post-dates{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--space-12);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-gray-60);
}

/* ---- condivisione (button-icon-share) ---- */
.share-actions{
  display:flex;
  gap:var(--space-8);
  flex-shrink:0;
}
.share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--size-share-btn);
  height:var(--size-share-btn);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  color:var(--color-black);
  transition:background-color .25s var(--ease-out);
}
/* button-icon-share-hover */
.share-btn:hover{ background:var(--color-gray-20); }
.share-icon{ width:22px; aspect-ratio:1; }

/* ---- "Link kopieren": come i pulsanti copia del footer ----
   Al clic compare "Kopiert" accanto all'icona e la pillola si allunga
   per farle posto; dopo COPIED_MS (blog.js) torna tonda.
   La larghezza non si anima con width:auto, che non è interpolabile:
   l'etichetta sta in una griglia che passa da 0fr a 1fr, la stessa
   tecnica dell'accordion del sito. */
.share-copy{
  width:auto;
  min-width:var(--size-share-btn);
  padding-inline:calc((var(--size-share-btn) - 24px) / 2);
}
.share-copy-label{
  display:grid;
  grid-template-columns:0fr;
  transition:grid-template-columns .35s var(--ease-out), margin .35s var(--ease-out);
}
.share-copy-text{
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-black);
}
.share-copy.is-copied .share-copy-label{
  grid-template-columns:1fr;
  margin-inline-start:var(--space-8);
}
.share-icon--facebook{ width:12px; aspect-ratio:12 / 22; }
.share-icon--link{ width:24px; }

/* ============================================================
   ARTICOLO — barra di lettura (Figma "read-progress")
   Si ferma sotto al menu e resta lì finché c'è testo da leggere.
   Fascia bianca a tutta larghezza, barra sulle otto colonne del testo.
   Il riempimento lo scrive blog.js in --read-progress (0…1).
   ============================================================ */
.read-progress{
  position:sticky;
  inset-block-start:calc(var(--size-menu-bottom) + var(--size-admin-bar, 0px));
  z-index:2;
  background:var(--color-white);
  padding-block:var(--space-48);
}
/* Agganciata, la fascia bianca sale fino in cima allo schermo: il testo
   scorre sotto al bianco e non si vede più passare fra il menu e la
   barra. Solo da agganciata (is-stuck lo mette blog.js): prima, la
   stessa fascia coprirebbe il fondo della hero. */
.read-progress.is-stuck::before{
  content:"";
  position:absolute;
  inset-inline:0;
  inset-block-end:100%;
  height:calc(var(--size-menu-bottom) + var(--size-admin-bar, 0px));
  background:var(--color-white);
}
.read-progress-inner{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding-inline:var(--space-page-margin);
}
.read-progress-track{
  --grid-col: 3 / span 8;
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--color-gray-10);
  overflow:hidden;
}
.read-progress-fill{
  height:100%;
  background:var(--color-primary);
  border-radius:inherit;
  transform:scaleX(var(--read-progress, 0));
  transform-origin:left center;
}

/* ============================================================
   ARTICOLO — testo (stili Article/*)
   Otto colonne centrali (1128 a 1920).
   ============================================================ */
.article-body{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:0 var(--space-page-margin) var(--space-128);
  row-gap:var(--space-80);   /* fra il testo e il piè d'articolo */
}
/* seguito dagli articoli correlati: lo spazio sotto lo dà la loro fascia */
.article-body--flush{ padding-block-end:0; }
.article-content{
  --grid-col: 3 / span 8;
  min-width:0;
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-sm);   /* Article/paragraph */
  line-height:1.5;
  color:var(--color-black);
  overflow-wrap:break-word;
}
/* Article/paragraph ha paragraphSpacing = spacing-24; i titoli
   (frame "heading") hanno spacing-48 sopra e spacing-24 sotto. */
.article-content > * + *{ margin-block-start:var(--space-24); }
.article-content > :is(h2, h3, h4, h5, h6){ margin-block-start:var(--space-48); }
.article-content > :first-child{ margin-block-start:0; }

.article-content :is(h2, h3, h4, h5, h6){
  font-family:var(--font-base);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.01em;
  overflow-wrap:anywhere;
}
.article-content h2{ font-size:var(--font-size-article-h2); }
.article-content h3{ font-size:var(--font-size-article-h3); }
.article-content h4{ font-size:var(--font-size-article-h4); }
.article-content h5{ font-size:var(--font-size-article-h5); }
.article-content h6{ font-size:var(--font-size-article-h6); }

.article-content a{
  text-decoration:underline;
  text-underline-position:from-font;
}

/* ---- elementi che il Figma non disegna ----
   Gli articoli veri li contengono (elenchi, immagini, citazioni):
   qui hanno il minimo per non uscire dallo stile del testo. Da rivedere
   quando ci saranno nel progetto. */
.article-content :is(ul, ol){ padding-inline-start:1.5em; }
.article-content ul{ list-style:disc; }
.article-content ol{ list-style:decimal; }
.article-content li + li{ margin-block-start:var(--space-8); }
.article-content :is(img, video, iframe){
  max-width:100%;
  height:auto;
  border-radius:var(--radius-24);
}
.article-content figure{ margin-inline:0; }
.article-content figcaption{
  margin-block-start:var(--space-12);
  font-size:var(--font-size-paragraph-xs);
  color:var(--color-gray-60);
}
.article-content blockquote{
  padding-inline-start:var(--space-24);
  border-inline-start:2px solid var(--color-primary);
}
.article-content :is(strong, b){ font-weight:600; }

/* ---- tabelle (componente Figma article-table-cell) ----
   Lo scroll sta nel contenitore, non nella pagina: una tabella più larga
   della colonna di testo scorre da sola, e il bordo esterno resta fermo.
   La prima colonna resta ferma mentre si scorre (criteri sempre in vista).
   border-collapse:separate perché con collapse i bordi delle celle
   sticky non le seguono. */
.article-content table-scroll{
  display:block;
  overflow-x:auto;
  border:1px solid var(--article-table-outline);
}
.article-content table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--font-size-article-table);   /* Article/table-head, Article/table-cell */
  line-height:1.5;
}
.article-content :is(th, td){
  min-width:var(--article-table-col-min);
  padding:var(--article-table-cell-pad);
  border-inline-end:1px solid var(--article-table-border);
  border-block-end:1px solid var(--article-table-border);
  text-align:start;
  vertical-align:top;
  font-weight:400;
  background:var(--color-white);
}
.article-content th{ background:var(--article-table-head-bg); }
/* il bordo esterno lo dà il contenitore: niente linea doppia sui lati */
.article-content :is(th, td):last-child{ border-inline-end:0; }
.article-content tbody tr:last-child td{ border-block-end:0; }
.article-content :is(th, td):first-child{
  position:sticky;
  inset-inline-start:0;
  z-index:1;
}

/* ============================================================
   ARTICOLO — piè d'articolo (Figma 2763:21579)
   Riquadro grigio largo quanto il testo: i tag a sinistra, che
   prendono lo spazio che c'è e vanno a capo, la condivisione a destra.
   ============================================================ */
.article-footer{
  --grid-col: 3 / span 8;
  display:flex;
  align-items:flex-start;
  gap:var(--space-24);
  padding:var(--space-64);
  border-radius:24px;   /* fisso, come la scheda della hero */
  background:var(--color-gray-15);
}
.article-footer-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-12);
  flex-shrink:0;
}
.article-footer-group--tags{
  flex:1 1 0;
  min-width:0;
}
.article-footer-label{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-gray-60);
}
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-12);
}
/* pillola bianca in Paragraph/XS; in hover gray-20 con testo gray-80 */
.tag-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-12) var(--space-16);
  border-radius:var(--radius-pill);
  background:var(--color-white);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-gray-60);
  white-space:nowrap;
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.tag-pill:hover{
  background:var(--color-gray-20);
  color:var(--color-gray-80);
}

/* ============================================================
   ARTICOLO — blocco autore (Figma 2763:21715, "team-pillow")
   Largo quanto il testo, a spacing-80 dal piè d'articolo (è il row-gap
   di .article-body). Il filo gray-40 è interno, quindi box-shadow.
   ============================================================ */
.author-card{
  --grid-col: 3 / span 8;
  display:flex;
  align-items:center;
  gap:var(--space-24);
  padding:var(--space-24) var(--space-32);
  border-radius:var(--radius-24);
  box-shadow:inset 0 0 0 1px var(--color-gray-40);
}
/* lato = spacing-80: 80 in desktop, 48 in mobile (Figma 2763:21733) */
.author-card-avatar{
  width:var(--space-80);
  height:var(--space-80);
  border-radius:var(--radius-pill);
  object-fit:cover;
  flex-shrink:0;
}
.author-card-copy{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-4);
}
.author-card-label,
.author-card-bio{
  font-family:var(--font-sans);
  font-weight:400;
  font-size:var(--font-size-paragraph-xs);
  line-height:1.5;
  color:var(--color-gray-60);
}
/* Article/h6 per intero, come i titoli h6 dentro al testo: famiglia,
   peso, misura, interlinea e spaziatura */
.author-card-name{
  font-family:var(--font-base);
  font-weight:600;
  font-size:var(--font-size-article-h6);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--color-black);
}

/* ============================================================
   ARTICOLO — articoli correlati (Figma 2764:21764)
   Fascia a tutta pagina dopo l'articolo: titolo Headings/SM e una
   fila di card, le stesse dell'elenco del blog (.blog-grid, .post-card).
   Le card sono sempre quattro nel markup; se ne vedono quattro in
   desktop, tre in tablet, due in mobile. Affiancate su una fila fino
   a 600px, sotto impilate.
   ============================================================ */
.related-articles{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-128) var(--space-page-margin);
  display:flex;
  flex-direction:column;
  gap:var(--space-128);
}
@media (max-width: 1023px){
  .blog-grid.related-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:var(--grid-gutter);
  }
  .related-grid > :nth-child(n+4){ display:none; }
}
@media (max-width: 767px){
  .blog-grid.related-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .related-grid > :nth-child(n+3){ display:none; }
}
/* sotto i 600 due card affiancate sarebbero troppo strette (172px a
   402): si impilano, una per riga, come nell'elenco del blog */
@media (max-width: 599px){
  .blog-grid.related-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PAGINA INIZIALE DI WORDPRESS (Figma 2766:21895)
   Stesso disegno delle pagine d'errore del sito (error.css, che il
   tema non carica): un blocco centrato con occhiello, titolo, riga
   di spiegazione e un pulsante. Si riusano .eyebrow, .heading-lg e
   .btn-primary di main.css.
   ============================================================ */
.start-page{
  width:100%;
  max-width:var(--size-page-max);
  margin-inline:auto;
  padding:var(--space-240) var(--space-page-margin) var(--space-128);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-64);
}
/* Le distanze interne sono due: 24 fra occhiello e titolo, 32 fra
   titolo e riga. Il gap fa i 24, gli 8 che mancano stanno sopra
   alla riga. */
.start-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-24);
  text-align:center;
  width:100%;
}
.start-eyebrow{ color:var(--color-primary-40); }
/* Paragraph/SM su otto colonne */
.start-text{
  max-width:var(--size-col-8);
  margin-top:calc(var(--space-32) - var(--space-24));
  font-family:var(--font-sans);
  font-size:var(--font-size-paragraph-sm);
  line-height:1.5;
  color:var(--color-black);
}
.start-actions{
  display:flex;
  align-items:center;
  gap:var(--space-32);
}
@media (max-width: 1023px){
  .start-page{ padding-top:120px; padding-bottom:80px; gap:48px; }
  /* il pulsante prende tutta la riga, come nelle altre pagine sotto
     i 1024 */
  .start-actions{ flex-direction:column; align-self:stretch; }
  .start-actions .btn-primary{ justify-content:center; width:100%; }
}

/* Footer nel flusso: la pagina è corta, e col footer fisso dietro se
   ne vedrebbe già un pezzo all'apertura. main.js legge questa classe
   sul body e non scrive il margin-bottom del main. */
.has-static-footer .site-footer{ position:static; }
.has-static-footer .site-footer::after{ display:none; }

/* ============================================================
   SOTTO I 1024 — impilato, come il resto del sito.
   La griglia delle card fa eccezione fra 768 e 1023: una colonna
   sola lì darebbe card larghe fino a 975px, con l'immagine più alta
   dello schermo. Due colonne tengono la card vicina alla misura
   desktop (413).
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px){
  .blog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:var(--grid-gutter);
    row-gap:var(--space-128);
  }
}
@media (max-width: 1023px){
  /* in mobile le card scrivono le info a 12, non al 10 di special/note
     (valore fisso nel frame 2699:22227) */
  .post-info{ font-size:12px; }
  .post-info-icon{ width:14px; }
  .post-info--hero .post-info-icon{ width:12px; }

  .post-featured{ grid-template-columns:1fr; }
  .post-featured-media img{ height:auto; }
  .post-featured-content{ padding:var(--space-32) var(--space-48); }
  .post-featured-excerpt{ -webkit-line-clamp:3; line-clamp:3; }
  /* in mobile la freccia non c'è (nascosta nel frame) */
  .post-featured-arrow{ display:none; }

  /* in mobile i 120 di spacing-240 sopra le testate sono troppi:
     basta spacing-80. Vale per l'articolo e per la testata del blog,
     che è anche quella della pagina categoria. */
  .article-hero,
  .blog-hero{ padding-block-start:var(--space-80); }

  .article-feature{
    grid-template-columns:1fr;
    gap:16px;
  }
  .article-hero-footer{
    flex-direction:column;
    align-items:flex-start;
  }
  /* blocco autore: foto in alto, accanto all'inizio del testo
     (Figma 2763:21732) */
  .author-card{ align-items:flex-start; }

  /* piè d'articolo impilato: tag sopra, condivisione sotto */
  .article-footer{ flex-direction:column; }
  .article-footer-group--tags{ flex:0 0 auto; width:100%; }

  /* l'header in mobile sta in basso: la barra si ferma in cima */
  .read-progress{ inset-block-start:0; }
  .read-progress-track{ height:6px; }
}

@media (max-width: 767px){
  .blog-grid{
    grid-template-columns:1fr;
    row-gap:var(--space-64);
  }
}