/* Blog — tipografia articoli + indice. Usa i token di styles.css. */

.article-wrap { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }
.article-head { padding-top: clamp(110px, 16vh, 160px); }
.breadcrumb { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: .6em; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--accent); }

.article-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; letter-spacing: -.025em; margin: 1.1rem 0 .9rem; }
.article-meta { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--ink-faint); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; }
.article-meta span { display: inline-flex; align-items: center; gap: .5em; }
.article-meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); font-style: normal; }

.prose { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; padding-block: 2.4rem 1rem; }
.prose > p:first-child { font-size: 1.18rem; color: var(--ink); }
.prose h2 { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 1.95rem); line-height: 1.15; letter-spacing: -.015em; margin: 2.3em 0 .7em; }
.prose h3 { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; display: grid; gap: .55em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { border-left: 2px solid var(--accent); padding: .2em 0 .2em 1.3em; margin: 1.8em 0; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.4; }

/* FAQ in fondo all'articolo (riusa .faq-item da styles.css) */
.article-faq { max-width: 760px; margin: 2.5rem auto 0; padding-inline: var(--gutter); }
.article-faq h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; margin-bottom: 1rem; }

/* CTA fine articolo */
.article-cta { max-width: 760px; margin: 3rem auto; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl); border: 1px solid var(--border); background: linear-gradient(155deg, var(--surface-2), var(--bg-2)); text-align: center; position: relative; overflow: hidden; }
.article-cta::before { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -130px; background: radial-gradient(circle, var(--accent-glow), transparent 65%); opacity: .22; }
.article-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -.02em; position: relative; }
.article-cta p { color: var(--ink-soft); margin: .8rem auto 1.5rem; max-width: 46ch; position: relative; }

.article-nav { max-width: 760px; margin: 2rem auto 0; padding-inline: var(--gutter); }

/* Indice blog */
.blog-head { padding-top: clamp(120px, 17vh, 180px); }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.8rem 1.6rem; background: var(--surface); transition: transform .4s var(--ease-out), border-color .4s; }
.post-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.post-card__tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.post-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; margin: .6rem 0 .6rem; }
.post-card h2 a { color: var(--ink); }
.post-card:hover h2 a { color: var(--accent); }
.post-card p { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.post-card__more { margin-top: 1.2rem; color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4em; }
.post-card__more svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease-out); }
.post-card:hover .post-card__more svg { transform: translateX(4px); }