/* ============================================================
   Blog Vela — indice /blog e articolo /blog/{slug}
   Dialetto editoriale (coerente con /metodo): viola scuro + puntini
   nell'hero, corpo chiaro e leggibile. DM Serif Display + DM Sans.
   ============================================================ */

:root {
	--bl-accent:      #7c3aed;
	--bl-accent-2:    #a78bfa;
	--bl-deep:        #2e1065;
	--bl-deep-2:      #4c1d95;
	--bl-ink:         #16121f;
	--bl-body:        #524c5e;
	--bl-bg:          #f7f6fc;
	--bl-card:        #ffffff;
	--bl-line:        #e9e5f6;
	--bl-terra:       #ff5d5d;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.blog-page {
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	color: var(--bl-ink);
	background: var(--bl-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.bl-wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.bl-narrow { max-width: 780px; margin: 0 auto; padding: 0 22px; }

a { color: var(--bl-accent); }

/* ── HERO (viola scuro + puntini) ─────────────────────────── */
.blog-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #fff;
	padding: 40px 0 62px;
	background:
		radial-gradient(ellipse 90% 60% at 78% 4%, rgba(124,58,237,.55), transparent 60%),
		linear-gradient(160deg, #16091f 0%, var(--bl-deep) 45%, var(--bl-deep-2) 100%);
}
.blog-hero::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	mix-blend-mode: overlay; opacity: .45;
}
.blog-hero > * { position: relative; z-index: 1; }
.blog-hero .bl-logo { height: 32px; width: auto; display: block; margin: 0 auto 22px; }
.blog-hero .bl-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bl-accent-2); margin-bottom: 14px;
}
.blog-hero h1 {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400; font-size: clamp(30px, 5vw, 46px); line-height: 1.1;
	margin: 0 auto 14px; max-width: 720px;
}
.blog-hero h1 em { font-style: italic; color: var(--bl-accent-2); }
.blog-hero p { font-size: 17px; color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto; }

/* ── FILTRI PILASTRO ──────────────────────────────────────── */
.blog-filters {
	display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
	margin: -26px auto 0; position: relative; z-index: 3;
}
.blog-filters a {
	display: inline-block; text-decoration: none;
	font-size: 14px; font-weight: 600; color: var(--bl-body);
	background: var(--bl-card); border: 1px solid var(--bl-line);
	padding: 9px 16px; border-radius: 999px; transition: all .15s;
	box-shadow: 0 6px 20px rgba(76,29,149,.06);
}
.blog-filters a:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
.blog-filters a.active { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }

/* ── GRIGLIA ARTICOLI ─────────────────────────────────────── */
.blog-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	padding: 40px 0 20px;
}
.blog-card {
	display: flex; flex-direction: column;
	background: var(--bl-card); border: 1px solid var(--bl-line);
	border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit;
	transition: transform .15s, box-shadow .15s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(76,29,149,.12); }
.blog-card .bl-thumb {
	aspect-ratio: 21 / 9; background: #efeafc center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
}
.blog-card .bl-thumb .bl-thumb-ph { color: var(--bl-accent-2); font-size: 34px; opacity: .6; }
.blog-card .bl-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.bl-tag {
	align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
	text-transform: uppercase; color: var(--bl-accent);
	background: rgba(124,58,237,.09); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.blog-card h2 {
	font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
	font-size: 21px; line-height: 1.22; margin: 0 0 8px;
}
.blog-card p { font-size: 14.5px; color: var(--bl-body); margin: 0 0 14px; flex: 1; }
.bl-date { font-size: 13px; color: #9089a0; }

.blog-empty { text-align: center; color: var(--bl-body); padding: 60px 0; font-size: 17px; }

/* ── PAGINAZIONE ──────────────────────────────────────────── */
.blog-pagination { display: flex; gap: 8px; justify-content: center; padding: 20px 0 60px; }
.blog-pagination a, .blog-pagination span {
	min-width: 40px; text-align: center; padding: 9px 12px; border-radius: 10px;
	text-decoration: none; font-weight: 600; font-size: 14px;
	border: 1px solid var(--bl-line); color: var(--bl-body); background: var(--bl-card);
}
.blog-pagination a:hover { border-color: var(--bl-accent); color: var(--bl-accent); }
.blog-pagination .current { background: var(--bl-accent); border-color: var(--bl-accent); color: #fff; }

/* ── ARTICOLO ─────────────────────────────────────────────── */
.article-head {
	position: relative; overflow: hidden; color: #fff; text-align: center;
	padding: 24px 0 36px;
	background:
		radial-gradient(ellipse 90% 60% at 78% 4%, rgba(124,58,237,.5), transparent 60%),
		linear-gradient(160deg, #16091f 0%, var(--bl-deep) 45%, var(--bl-deep-2) 100%);
}
.article-head::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	mix-blend-mode: overlay; opacity: .4;
}
.article-head > * { position: relative; z-index: 1; }
.article-head .bl-logo { height: 22px; width: auto; display: inline-block; margin: 0 0 14px; opacity: .92; }
.article-head .bl-tag { background: rgba(255,255,255,.14); color: #fff; margin: 0 auto 14px; }
.article-head h1 {
	font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
	font-size: clamp(23px, 3.4vw, 33px); line-height: 1.16; margin: 0 auto 14px; max-width: 680px;
}
.article-meta { font-size: 14px; color: rgba(255,255,255,.66); }
.article-meta .dot { margin: 0 8px; opacity: .5; }

.article-banner {
	max-width: 640px; margin: -14px auto 0; position: relative; z-index: 2; padding: 0 22px;
}
.article-banner img {
	width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover; border-radius: 12px; display: block;
	box-shadow: 0 14px 36px rgba(22,9,31,.22);
}

/* corpo articolo */
.article-body { padding: 44px 0 20px; font-size: 18px; color: #2c2738; }
.article-body h2 {
	font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
	font-size: 28px; line-height: 1.2; margin: 40px 0 14px;
}
.article-body h3 { font-size: 21px; font-weight: 700; margin: 30px 0 10px; }
.article-body p { margin: 0 0 20px; line-height: 1.72; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; line-height: 1.65; }
.article-body a { color: var(--bl-accent); text-underline-offset: 2px; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0 24px; }
.article-body blockquote {
	margin: 24px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--bl-accent);
	font-style: italic; color: var(--bl-body);
}
.article-body strong { color: var(--bl-ink); }
.article-body hr { border: none; border-top: 1px solid var(--bl-line); margin: 32px 0; }
.article-body .bl-disclaimer {
	font-size: 14.5px; color: var(--bl-body); background: #f1edfb;
	border: 1px solid var(--bl-line); border-radius: 12px; padding: 14px 18px; margin: 26px 0;
}

/* CTA in coda all'articolo */
.blog-cta {
	margin: 40px auto; text-align: center; color: #fff; border-radius: 20px;
	padding: 40px 26px; overflow: hidden; position: relative;
	background: linear-gradient(150deg, var(--bl-deep) 0%, var(--bl-accent) 120%);
}
.blog-cta h3 {
	font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
	font-size: clamp(24px, 4vw, 32px); margin: 0 0 10px;
}
.blog-cta p { color: rgba(255,255,255,.82); max-width: 460px; margin: 0 auto 22px; font-size: 16px; }
.blog-cta .bl-btn {
	display: inline-block; background: #fff; color: var(--bl-deep-2); font-weight: 700;
	text-decoration: none; padding: 14px 30px; border-radius: 12px; font-size: 16px;
	box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

/* correlati */
.article-related { padding: 20px 0 40px; }
.article-related h3 {
	font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 24px;
	text-align: center; margin: 0 0 24px;
}
.bl-back { display: inline-block; margin: 24px 0; color: var(--bl-body); text-decoration: none; font-size: 14px; font-weight: 600; }
.bl-back:hover { color: var(--bl-accent); }

/* ── FOOTER ───────────────────────────────────────────────── */
.blog-footer { text-align: center; color: var(--bl-body); font-size: 13px; padding: 30px 0 44px; border-top: 1px solid var(--bl-line); margin-top: 20px; }
.blog-footer img { height: 22px; width: auto; display: block; margin: 0 auto 10px; opacity: .85; }
.blog-footer a { color: var(--bl-body); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.blog-grid { grid-template-columns: 1fr; }
	.article-body { font-size: 17px; }
}