/* ==========================================================================================
   pagine/blog.css — /blog/ e i 7 articoli (partials/articolo.php)
   copertine in duotono viola · indice: hero compatto, filtri, griglia di schede (la prima grande, in
   evidenza) con copertina, categoria, data e attacco · articolo: testa compatta con la copertina a lato,
   indice dei paragrafi sticky (a sinistra su desktop, barra sotto la testata su telefono), prosa 64ch con
   i paragrafi numerati, poi autore, FAQ, invito e 3 correlati
   ========================================================================================== */

/* ---------------------------------------------------------------- copertine ------------ */
/* Le illustrazioni del vecchio blog sono foto di repertorio a colori caldi: qui passano in
   bianco e nero con una velatura viola, e tornano a colori al passaggio del puntatore. */
.copertina { position: relative; display: block; overflow: clip; background: var(--nero-3); }
.copertina img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.82); transition: filter .9s var(--curva-expo), transform 1.2s var(--curva-expo); }
.copertina::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(121, 64, 224, .62), rgba(35, 20, 61, .5) 60%, rgba(6, 5, 12, .35));
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity .9s var(--curva-expo);
}
a:hover .copertina img, a.copertina:hover img, .copertina--viva img { filter: none; transform: scale(1.03); }
a:hover .copertina::after, a.copertina:hover::after, .copertina--viva::after { opacity: 0; }

/* categorie in viola (componenti.css riporta ogni .etichetta a --carta-2) */
.etichetta.accento { color: var(--viola-luce); }

/* ================================================================ INDICE /blog/ ========== */
.bl-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(18px, 2.6vh, 28px);
  padding-top: clamp(120px, 18vh, 190px);
  padding-bottom: clamp(36px, 6vh, 64px);
}
.bl-hero__riga { display: grid; gap: 24px; }
.bl-hero__titolo { max-width: 100%; font-size: clamp(44px, min(8.4vw, 14svh), 132px); }
.bl-hero__titolo .rientro { --rientro: 1.2em; }
.bl-hero__lato { display: grid; gap: 16px; align-content: end; }
.bl-hero__lead { max-width: 40ch; color: var(--carta-2); }
@media (min-width: 1024px) {
  .bl-hero__riga { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .bl-hero__titolo { grid-column: 1 / span 8; }
  .bl-hero__lato { grid-column: 9 / -1; padding-bottom: .6em; }
}

/* filtri */
.bl-elenco { position: relative; padding-bottom: clamp(56px, 10vh, 120px); }
.bl-elenco__testa { padding-block: 18px; border-top: 1px solid var(--linea-forte); margin-bottom: clamp(20px, 3vh, 32px); }
.bl-filtri { display: flex; gap: 8px; }
.bl-filtri[hidden] { display: none; }
.bl-filtro {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linea-forte);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--carta-2);
  transition: background-color .4s var(--curva-expo), color .4s var(--curva-expo), box-shadow .4s;
}
.bl-filtro sup { font-size: 10px; margin-left: 2px; color: var(--carta-3); vertical-align: super; }
.bl-filtro:hover { color: var(--carta); box-shadow: inset 0 0 0 1px var(--carta-2); }
.bl-filtro[aria-pressed="true"] { background: var(--carta); color: var(--nero); box-shadow: none; }
.bl-filtro[aria-pressed="true"] sup { color: var(--nero); }
/* su telefono i filtri scorrono in una riga sola invece di andare a capo */
@media (max-width: 819px) {
  .bl-filtri { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margine) * -1); padding-inline: var(--margine); }
  .bl-filtri::-webkit-scrollbar { display: none; }
}

/* griglia di schede */
.bl-griglia { display: grid; gap: clamp(36px, 5vh, 56px) var(--gutter); }
@media (min-width: 700px) { .bl-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bl-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-card { min-width: 0; }
.bl-card.is-nascosta { display: none; }
.bl-card__link { display: grid; gap: 18px; align-content: start; height: 100%; }
.bl-card__img { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--linea); }
.bl-card__testo { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bl-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bl-card__titolo { font: 500 clamp(21px, 1.7vw, 26px)/1.12 var(--font-sans); letter-spacing: -.02em; color: var(--carta); text-wrap: balance; transition: color .4s; }
.bl-card__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 16px; line-height: 1.55; color: var(--carta-3); }
.bl-card__leggi { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--carta); }
.bl-card__leggi .freccia { transition: transform .5s var(--curva-expo); }
.bl-card__link:hover .bl-card__titolo { color: var(--viola-luce); }
.bl-card__link:hover .bl-card__leggi .freccia { transform: translateX(6px); }
.bl-card__link:focus-visible { outline-offset: 6px; }

/* la scheda in evidenza: tutta la riga, copertina grande e testo accanto */
.bl-card--grande { grid-column: 1 / -1; }
.bl-card--grande .bl-card__img { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--linea), 0 50px 140px -70px rgba(105, 49, 170, .8); }
.bl-card__sopra { color: var(--carta); }
.bl-card__sopra::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--viola-luce); vertical-align: .05em; }
.bl-card--grande .bl-card__titolo { font: var(--peso-display) clamp(28px, 3.2vw, 52px)/.98 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.bl-card--grande .bl-card__lead { -webkit-line-clamp: 5; max-width: 54ch; font-size: clamp(16px, 1.15vw, 18px); color: var(--carta-2); }
@media (min-width: 1024px) {
  .bl-card--grande .bl-card__link { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
  .bl-card--grande .bl-card__img { grid-column: 1 / span 7; }
  .bl-card--grande .bl-card__testo { grid-column: 8 / -1; gap: 18px; padding-left: clamp(0px, 1.5vw, 24px); }
}
/* su telefono le schede normali sono righe compatte: testo a sinistra, miniatura a destra */
@media (max-width: 699px) {
  .bl-griglia { gap: 0; }
  .bl-card--grande { padding-bottom: 32px; }
  .bl-card:not(.bl-card--grande) { border-top: 1px solid var(--linea); }
  .bl-card:not(.bl-card--grande) .bl-card__link { grid-template-columns: minmax(0, 1fr) 92px; gap: 16px; align-items: start; padding-block: 22px; }
  .bl-card:not(.bl-card--grande) .bl-card__img { grid-column: 2; grid-row: 1; aspect-ratio: 1; }
  .bl-card:not(.bl-card--grande) .bl-card__testo { grid-column: 1; grid-row: 1; gap: 8px; }
  .bl-card:not(.bl-card--grande) .bl-card__lead { -webkit-line-clamp: 2; font-size: 15px; }
  .bl-card:not(.bl-card--grande) .bl-card__leggi { display: none; }
}
.bl-vuoto { padding: 28px 0; }

/* ================================================================ ARTICOLO =============== */
.art-testa {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(28px, 4vh, 40px);
  padding-top: clamp(110px, 16vh, 170px);
  padding-bottom: clamp(32px, 5vh, 56px);
}
.art-testa__testo { display: grid; gap: clamp(16px, 2.4vh, 24px); align-content: end; min-width: 0; }
.art-briciole { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.art-briciole__su { display: inline-flex; align-items: center; gap: 8px; color: var(--carta); }
.art-titolo {
  max-width: 22ch;
  font: var(--peso-display) clamp(32px, min(4.6vw, 8.5svh), 74px)/.98 var(--font-display);
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.art-lead { max-width: 50ch; color: var(--carta-2); }
.art-firma { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.art-firma__foto { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--linea-forte); }
.art-firma__testo { display: grid; gap: 2px; }
.art-firma__nome { font: 500 15px/1.2 var(--font-sans); color: var(--carta); }
.art-copertina { margin: 0; }
.art-copertina__cornice { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--linea), 0 50px 160px -70px rgba(105, 49, 170, .8); }
@media (min-width: 1024px) {
  .art-testa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  .art-testa__testo { grid-column: 1 / span 7; }
  .art-copertina { grid-column: 9 / -1; }
  .art-copertina__cornice { aspect-ratio: 4 / 3; }
}

/* corpo: indice sticky + prosa (la stessa colonna regge anche autore, FAQ e invito) */
.art-corpo { display: grid; gap: 0 var(--gutter); padding-top: clamp(8px, 2vh, 24px); }
.art-corpo > *, .art-dopo > * { min-width: 0; }
@media (min-width: 1024px) {
  .art-corpo, .art-dopo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .art-corpo { padding-top: clamp(32px, 6vh, 72px); }
  .art-indice { grid-column: 1 / span 3; position: sticky; top: calc(var(--testata-h) + 40px); }
  .art-colonna { grid-column: 5 / span 7; }
}
.art-dopo { display: grid; }

/* indice dei paragrafi — desktop: colonna con una guida verticale che si riempie paragrafo per paragrafo */
.art-indice__testa { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; list-style: none; position: relative; }
.art-indice__testa::-webkit-details-marker { display: none; }
.art-indice__titolo { display: grid; min-width: 0; }
.art-indice__titolo .etichetta { color: var(--carta); }
.art-indice__ora { display: none; }
.art-indice__letto { color: var(--viola-luce); font-variant-numeric: tabular-nums; }
.art-indice__segno { display: none; }
.art-indice__tot { grid-column: 1 / -1; position: relative; display: block; height: 2px; margin-top: 12px; background: rgba(239, 233, 225, .08); }
.art-indice__tot i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--viola), var(--viola-luce)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.art-indice__voci { margin-top: 18px; }
.art-indice__voci a {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 6px;
  padding: 9px 0 9px 16px;
  font-size: 15px;
  line-height: 1.38;
  color: var(--carta-3);
  transition: color .3s;
}
.art-indice__voci a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(239, 233, 225, .08); }
.art-indice__voci a:hover { color: var(--carta); }
.art-indice__num { font: 500 11px/1.9 var(--font-mono); letter-spacing: .04em; }
.art-indice__barra { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--viola), var(--viola-luce)); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.art-indice__voci a.is-letto { color: var(--carta-2); }
.art-indice__voci a.is-attivo { color: var(--carta); }
.art-indice__voci a.is-attivo .art-indice__num { color: var(--viola-luce); }
.art-azioni { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); }
.art-azioni[hidden] { display: none; }
.art-azione { color: var(--carta-2); }
.art-azione:hover { color: var(--carta); }
@media (min-width: 1024px) {
  .art-indice__testa { cursor: default; pointer-events: none; }
}

/* telefono e tablet: l'indice diventa una barra fissa sotto la testata col paragrafo che si sta leggendo */
@media (max-width: 1023px) {
  .art-indice {
    position: sticky;
    top: var(--testata-h);
    z-index: 20;
    margin: 0 calc(var(--margine) * -1) clamp(24px, 4vh, 40px);
  }
  .art-indice__box { position: relative; background: rgba(9, 7, 18, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea), 0 -1px 0 var(--linea); }
  /* agganciata: la fascia sale anche dietro la testata, così il testo non scorre sotto il nome */
  .art-indice__box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--testata-h); background: #090712; opacity: 0; transition: opacity .3s; pointer-events: none; }
  .art-indice.is-agganciato .art-indice__box::before { opacity: 1; }
  .art-indice__testa { min-height: 56px; padding: 10px var(--margine) 12px; cursor: pointer; }
  .art-indice__ora { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 3px; font-size: 15px; line-height: 1.3; color: var(--carta); }
  .art-indice__ora:empty { display: none; }
  .art-indice__testa:has(.art-indice__ora:not(:empty)) .art-indice__titolo .etichetta { color: var(--carta-3); }
  .art-indice__segno { display: block; position: relative; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-forte); }
  .art-indice__segno::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -5px 0 0 -3.5px; border-right: 1.5px solid var(--carta); border-bottom: 1.5px solid var(--carta); transform: rotate(45deg); transition: transform .4s var(--curva-expo), margin .4s var(--curva-expo); }
  .art-indice__box[open] .art-indice__segno::before { transform: rotate(-135deg); margin-top: -1.5px; }
  .art-indice__tot { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  .art-indice__voci {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin: 0;
    max-height: 62svh;
    overflow-y: auto;
    padding: 8px var(--margine) 16px;
    background: #090712;
    box-shadow: 0 1px 0 var(--linea), 0 40px 80px -20px rgba(0, 0, 0, .8);
  }
  .art-indice__voci a { padding-block: 12px; font-size: 16px; }
  .art-azioni { display: none; }
}

/* prosa: lettura comoda, 64 caratteri, paragrafi numerati come nell'indice */
.art-prosa { max-width: var(--lettura); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; color: var(--carta-2); counter-reset: paragrafo; }
.art-prosa > * + * { margin-top: 1.15em; }
.art-prosa h2 {
  margin-top: 2em;
  font: 500 clamp(25px, 2.3vw, 34px)/1.12 var(--font-sans);
  letter-spacing: -.025em;
  color: var(--carta);
  text-wrap: balance;
  scroll-margin-top: calc(var(--testata-h) + 72px);
}
.art-prosa h2::before {
  counter-increment: paragrafo;
  content: counter(paragrafo, decimal-leading-zero);
  display: block;
  margin-bottom: .9em;
  padding-top: 1.1em;
  border-top: 1px solid var(--linea);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--viola-luce);
}
.art-prosa > h2:first-child { margin-top: 0; }
.art-prosa > h2:first-child::before { padding-top: 0; border-top: 0; }
.art-prosa h3 { margin-top: 1.8em; font: 500 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--viola-luce); }
.art-prosa h2 + p, .art-prosa h3 + ul, .art-prosa h3 + p { margin-top: .7em; }
.art-prosa ul { list-style: none; padding: 0; }
.art-prosa ul li { position: relative; padding-left: 1.6em; }
.art-prosa ul li + li { margin-top: .55em; }
.art-prosa ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: .8em; height: 1px; background: var(--viola-luce); }
.art-prosa blockquote {
  margin: 1.9em 0;
  padding: .1em 0 .1em 1.1em;
  border-left: 2px solid var(--viola);
  font: 300 clamp(22px, 2vw, 30px)/1.3 var(--font-voce);
  letter-spacing: -.015em;
  color: var(--carta);
}
.art-prosa blockquote p { margin: 0; }
.art-prosa a { color: var(--viola-luce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.art-prosa strong { color: var(--carta); font-weight: 600; }
.articolo-sintesi {
  position: relative;
  margin-top: 2.6em !important;
  padding: 22px 24px 24px;
  background: var(--nero-2);
  box-shadow: inset 0 0 0 1px var(--linea-forte);
  color: var(--carta);
}
.articolo-sintesi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--viola), var(--neon)); }
.articolo-sintesi p { margin: 0; }
.articolo-sintesi p + p { margin-top: .6em; }
.articolo-sintesi__etichetta { font: 500 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--viola-luce); margin-bottom: 10px !important; }

/* segno di fine testo */
.art-fine { display: flex; align-items: center; gap: 16px; max-width: var(--lettura); margin-top: clamp(40px, 7vh, 72px); }
.art-fine i { flex: 1; height: 1px; background: var(--linea); }

/* dopo il testo: autore, FAQ, invito — nella colonna di lettura */
.art-dopo .art-colonna { display: grid; gap: clamp(40px, 7vh, 72px); max-width: calc(var(--lettura) + 8ch); padding-top: clamp(32px, 5vh, 56px); }
.art-autore { display: flex; gap: 20px; align-items: flex-start; }
.art-autore__foto { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; filter: grayscale(.2); box-shadow: 0 0 0 1px var(--linea-forte); }
.art-autore__testo { display: grid; gap: 6px; }
.art-autore__nome { font: 500 22px/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--carta); }
.art-autore__testo .secondario { font-size: 16px; line-height: 1.5; }
.art-autore__link { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; }
.art-autore__link a { display: inline-flex; gap: 6px; align-items: center; color: var(--carta); }

.art-blocco-titolo { margin-top: 10px; font: 500 clamp(26px, 2.4vw, 36px)/1.08 var(--font-sans); letter-spacing: -.025em; color: var(--carta); }
.art-faq__voci { margin-top: clamp(18px, 3vh, 28px); }
.art-faq .faq__domanda { font-size: clamp(18px, 1.4vw, 21px); padding-block: 18px; }

.art-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  overflow: hidden;
  background: var(--nero-2);
  box-shadow: inset 0 0 0 1px var(--linea-forte);
}
.art-cta .bagliori i { opacity: .8; }
.art-cta__titolo { font: var(--peso-display) clamp(28px, 2.8vw, 44px)/.98 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; color: var(--carta); text-wrap: balance; }
.art-cta__testo { max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
.art-continua { justify-self: stretch; display: grid; gap: 6px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--linea); }
.art-continua li + li { border-top: 1px solid var(--linea); }
.art-continua a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; font-size: clamp(16px, 1.2vw, 18px); color: var(--carta); transition: color .3s, padding-left .5s var(--curva-expo); }
.art-continua a:hover { color: var(--viola-luce); padding-left: 6px; }

/* correlati */
.art-correlati { padding-block: clamp(64px, 12vh, 140px) clamp(56px, 10vh, 120px); }
.art-correlati__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 18px; margin-bottom: clamp(24px, 4vh, 40px); border-top: 1px solid var(--linea-forte); }
.art-correlati__testa .link { display: inline-flex; align-items: center; gap: 8px; color: var(--carta); }
.art-correlati__lista { display: grid; gap: clamp(32px, 4vh, 44px) var(--gutter); }
@media (min-width: 700px) { .art-correlati__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .art-correlati__lista > li:nth-child(3) { display: none; } }
@media (min-width: 1024px) { .art-correlati__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } .art-correlati__lista > li:nth-child(3) { display: block; } }
.blog-card { display: grid; gap: 14px; align-content: start; }
.blog-card__img { aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--linea); }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.blog-card__titolo { font: 500 clamp(20px, 1.6vw, 24px)/1.15 var(--font-sans); letter-spacing: -.02em; color: var(--carta); text-wrap: balance; transition: color .4s; }
.blog-card:hover .blog-card__titolo { color: var(--viola-luce); }
@media (max-width: 699px) {
  .art-correlati__lista { gap: 0; border-bottom: 1px solid var(--linea); }
  .art-correlati__lista > li + li { border-top: 1px solid var(--linea); }
  .blog-card { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 16px; padding-block: 18px; }
  .blog-card__img { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1; }
  .blog-card__meta { grid-column: 1; grid-row: 1; }
  .blog-card__titolo { grid-column: 1; grid-row: 2; font-size: 19px; }
}