/* ==========================================================================
   BLOG.CSS — sezione BLOG V1, 17/9/2026
   Solo token esistenti (radar.css/ossatura.css), niente `!important`,
   niente libreria esterna. Pillole proprie (`.blog-pillola`), non `.pillola`:
   quella è legata ai colori delle sei categorie della mappa (`data/pin.php`),
   non alle rubriche del blog.
   ========================================================================== */

/* --------------------------------------------------------------------
   1 · Briciole visibili — stessa forma di `.sa-briciole` (annuncio.css),
   coi token globali invece delle variabili locali di quella scheda.
   -------------------------------------------------------------------- */

.blog-briciole {
	max-width: var(--colonna-larga);
	margin: clamp(16px, 2vh, 24px) auto 0;
	padding-inline: var(--fascia-x);
}

.blog-briciole ol {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	list-style: none;
	border-radius: 999px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	box-shadow: var(--ombra);
	font-size: var(--t-5);
	font-weight: 500;
	line-height: 1.3;
	color: var(--testo-2);
}

.blog-briciole li { display: inline-flex; align-items: center; gap: 6px; }
.blog-briciole li + li::before { content: "/"; opacity: .35; }
.blog-briciole a { color: inherit; text-decoration: none; }
.blog-briciole a:hover { color: var(--testo); }
.blog-briciole li[aria-current] span { font-weight: 600; color: var(--testo); }

/* --------------------------------------------------------------------
   2 · Pillole delle rubriche
   -------------------------------------------------------------------- */

.blog-pillole {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(20px, 2.6vh, 32px);
	padding: 0;
	list-style: none;
}

.blog-pillola {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border-radius: var(--raggio-pillola, 999px);
	border: 1px solid var(--bordo);
	background: var(--superficie);
	color: var(--testo);
	font-size: var(--t-5);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.blog-pillola:hover { border-color: var(--testo-2); }

.blog-pillola--attiva {
	background: var(--inchiostro, var(--testo));
	border-color: var(--inchiostro, var(--testo));
	color: var(--su-inchiostro, #fff);
}

/* --------------------------------------------------------------------
   3 · Articolo in evidenza
   -------------------------------------------------------------------- */

.blog-evidenza {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: stretch;
	margin-bottom: clamp(28px, 4vh, 48px);
	padding-bottom: clamp(28px, 4vh, 48px);
	border-bottom: 1px solid var(--bordo);
}

@media (max-width: 780px) {
	.blog-evidenza { grid-template-columns: 1fr; }
}

.blog-evidenza__immagine,
.blog-scheda__immagine {
	display: block;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: var(--raggio-grande);
	background: var(--superficie-alt);
}

.blog-evidenza__immagine img,
.blog-scheda__immagine img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-evidenza__testo { display: flex; flex-direction: column; justify-content: center; gap: 10px; }

.blog-evidenza__titolo {
	margin: 0;
	font-family: var(--font-titolo);
	font-size: var(--t-2);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.015em;
}

.blog-evidenza__titolo a,
.blog-scheda__titolo a {
	color: var(--testo);
	text-decoration: none;
}

.blog-evidenza__titolo a:hover,
.blog-scheda__titolo a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------
   4 · Griglia delle schede
   -------------------------------------------------------------------- */

.blog-griglia { margin-bottom: clamp(20px, 3vh, 32px); }

.blog-scheda {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	overflow: hidden;
}

.blog-scheda__corpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: calc(var(--passo) * 1.2);
	padding-top: 0;
}

.blog-scheda__rubrica {
	margin: 12px calc(var(--passo) * 1.2) 0;
	font-size: var(--t-5);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--marchio);
}

.blog-scheda__rubrica a { color: inherit; text-decoration: none; }
.blog-scheda__rubrica a:hover { text-decoration: underline; }

.blog-scheda__titolo {
	margin: 0;
	font-family: var(--font-titolo);
	font-size: var(--t-4);
	font-weight: 700;
	line-height: 1.3;
}

.blog-scheda__estratto {
	margin: 0;
	color: var(--testo-2);
	font-size: var(--t-5);
	line-height: 1.5;
	/* Estratto a 2 righe — capitolato §3. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-scheda__meta {
	margin: 0;
	font-size: .78125rem;
	color: var(--testo-2);
}

/* --------------------------------------------------------------------
   5 · Segnaposto della copertina
   -------------------------------------------------------------------- */

.blog-segnaposto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	background: linear-gradient(155deg, var(--superficie-alt), var(--superficie));
	color: var(--testo-2);
}

.blog-segnaposto__testo {
	font-size: var(--t-5);
	font-weight: 600;
	letter-spacing: .02em;
}

/* --------------------------------------------------------------------
   6 · Stato vuoto
   -------------------------------------------------------------------- */

.blog-vuoto {
	max-width: var(--colonna-lead);
	padding: clamp(24px, 4vh, 48px) 0;
	color: var(--testo-2);
	font-size: var(--t-3);
}

.blog-vuoto a { color: var(--marchio); font-weight: 600; }

/* --------------------------------------------------------------------
   7 · L'articolo
   -------------------------------------------------------------------- */

.blog-articolo__meta {
	margin: 0;
	color: var(--testo-2);
	font-size: var(--t-5);
}

.blog-articolo__autore { font-weight: 700; color: var(--testo); }

.blog-articolo__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15.5rem;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 900px) {
	.blog-articolo__griglia { grid-template-columns: 1fr; }
}

.blog-articolo__principale { max-width: var(--colonna-lead); }

.blog-articolo__immagine {
	margin: 0 0 clamp(20px, 3vh, 32px);
	border-radius: var(--raggio-grande);
	overflow: hidden;
	background: var(--superficie-alt);
}

.blog-articolo__immagine img { width: 100%; height: auto; display: block; }

.blog-indice {
	margin: 0 0 clamp(24px, 3vh, 36px);
	padding: 18px 20px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	background: var(--superficie-alt);
}

.blog-indice__titolo {
	margin: 0 0 8px;
	font-size: var(--t-5);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--testo-2);
}

.blog-indice ol { margin: 0; padding-left: 1.2em; }
.blog-indice li { margin-bottom: 4px; }
.blog-indice a { color: var(--testo); }

/* Corpo dell'articolo — colonna di lettura, come `.pagina__corpo`. */
.blog-corpo {
	max-width: var(--colonna-lead);
	font-size: var(--t-4);
	line-height: 1.75;
	color: var(--testo);
}

.blog-corpo :where(h2, h3, h4) {
	font-family: var(--font-titolo);
	font-weight: 700;
	line-height: 1.25;
	margin: 1.6em 0 .6em;
	scroll-margin-top: 90px;
}

.blog-corpo h2 { font-size: var(--t-3); }
.blog-corpo h3 { font-size: var(--t-4); }
.blog-corpo p { margin: 0 0 1.2em; }
.blog-corpo ul,
.blog-corpo ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.blog-corpo li { margin-bottom: .4em; }
.blog-corpo a { color: var(--marchio); }
.blog-corpo img { max-width: 100%; height: auto; border-radius: var(--raggio); }
.blog-corpo blockquote {
	margin: 0 0 1.2em;
	padding-left: 1rem;
	border-left: 3px solid var(--bordo);
	color: var(--testo-2);
}

.blog-condividi {
	margin-top: clamp(28px, 4vh, 44px);
	padding: 18px 20px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	background: var(--superficie);
}

.blog-condividi__titolo {
	margin: 0 0 10px;
	font-size: var(--t-5);
	font-weight: 700;
}

.blog-condividi__riga { display: flex; gap: 8px; flex-wrap: wrap; }

.blog-condividi__campo {
	flex: 1 1 16rem;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie-alt);
	color: var(--testo-2);
	font-size: var(--t-5);
}

.blog-condividi__bottone {
	min-height: 44px;
	padding: 0 20px;
	border: none;
	border-radius: var(--raggio-pillola, 999px);
	background: var(--azione);
	color: var(--azione-testo);
	font-weight: 700;
	font-size: var(--t-5);
	cursor: pointer;
}

.blog-condividi__bottone:hover { background: var(--azione-hover); }

.blog-condividi__bottone[data-radar-copiato] { background: var(--verificato); }

.blog-articolo__laterale { display: flex; flex-direction: column; gap: 16px; }

.blog-riquadro {
	padding: 16px 18px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	background: var(--superficie-alt);
}

.blog-riquadro p { margin: 0; }

.blog-riquadro__titolo {
	font-size: .78125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--testo-2);
	margin-bottom: 4px;
}

.blog-invito {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.blog-invito p { margin: 0; font-size: var(--t-3); font-weight: 600; }

.blog-invito__bottone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 24px;
	border-radius: var(--raggio-pillola, 999px);
	background: var(--azione);
	color: var(--azione-testo);
	font-weight: 700;
	text-decoration: none;
}

.blog-invito__bottone:hover { background: var(--azione-hover); }

/* 17/9/2026 — guardato alle catture: a 1440 il testo stava in una colonna a
   sinistra e il riquadro «Rubrica/Autore» sul bordo destro, con mezzo schermo
   vuoto in mezzo. L'articolo intero (briciole, titolo, corpo e riquadro) sta
   in un blocco centrato, largo quanto la colonna di lettura più il riquadro. */
.single-post .blog-briciole,
.single-post .blog-articolo__capo .fascia__interno,
.single-post .blog-articolo__griglia {
	box-sizing: border-box;
	max-width: calc(var(--colonna-lead) + 15.5rem + clamp(28px, 4vw, 56px) + 2 * var(--fascia-x, 1rem));
	margin-inline: auto;
}

.single-post .blog-articolo__principale { max-width: none; }