/* ═══════════════════════════════════════════════════════════════
   ScoreLens — Blog System Styles
   Templates  : home.php · single.php · page-templates/blog-listing.php
   Namespace  : sl-blog-*  (listing)  · sl-article-* (single)
                sl-toc-*  (TOC)       · sl-author-*  (author card)
   Loaded     : Only on blog pages (scorelens_is_blog_page())
   Tokens     : Inherits --sl-* from scorelens.css
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. BLOG HERO (pillar page)
   ──────────────────────────────────────────────────────────────── */
.sl-blog-hero {
	padding: var(--space-2xl) var(--sl-container-px) var(--space-xl);
	text-align: center;
}

.sl-blog-hero-inner {
	max-width: 720px;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	gap: var(--space-md);
}

.sl-blog-hero-h {
	font-family: var(--sl-font-sans);
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--sl-ink);
	margin: 0;
}

.sl-blog-hero-lede {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sl-muted);
	max-width: 600px;
	margin: 0;
}

.sl-blog-hero-meta {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 10px;
	font-family: var(--sl-font-mono);
	font-size: 12px;
	color: var(--sl-muted);
}

.sl-blog-hero-sep { opacity: .4; }

.sl-blog-hero-count {
	font-weight: 600;
	color: var(--sl-ink-soft);
}

.sl-blog-hero-cta {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 12px;
	-webkit-justify-content: center;
	justify-content: center;
}

/* ────────────────────────────────────────────────────────────────
   2. BLOG ARCHIVE HEADER
   ──────────────────────────────────────────────────────────────── */
.sl-blog-archive-page {
	min-height: calc(100vh - 80px);
	background: var(--sl-bg);
	position: relative;
}

.sl-blog-archive-header {
	padding: var(--space-2xl) var(--sl-container-px) 0;
}

.sl-blog-archive-header-inner {
	max-width: var(--sl-max-w);
	margin: 0 auto;
}

.sl-blog-archive-title {
	font-family: var(--sl-font-sans);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--sl-ink);
	margin: 8px 0 12px;
}

.sl-blog-archive-desc {
	font-size: 16px;
	color: var(--sl-muted);
	max-width: 560px;
	line-height: 1.6;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   3. LISTING CONTAINER
   ──────────────────────────────────────────────────────────────── */
.sl-blog-listing-inner {
	max-width: var(--sl-max-w);
	margin: 0 auto;
	padding: 0 var(--sl-container-px);
}

/* ────────────────────────────────────────────────────────────────
   4. CATEGORY FILTER TABS
   ──────────────────────────────────────────────────────────────── */
.sl-cat-filter {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--sl-rule);
}

.sl-cat-filter-btn {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 8px 18px;
	background: transparent;
	border: 1.5px solid var(--sl-rule);
	border-radius: var(--sl-radius-pill);
	font-size: 13px;
	font-weight: 600;
	color: var(--sl-muted);
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
	white-space: nowrap;
}

.sl-cat-filter-btn:hover {
	border-color: var(--sl-brand);
	color: var(--sl-brand);
}

.sl-cat-filter-btn--active {
	background: var(--sl-brand);
	border-color: var(--sl-brand);
	color: var(--sl-bg);
}

[data-theme="dark"] .sl-cat-filter-btn--active {
	color: #0f1e33;
}

/* ────────────────────────────────────────────────────────────────
   4b. CLUSTER FILTER TABS (legacy — kept for back-compat)
   ──────────────────────────────────────────────────────────────── */
.sl-cluster-filter {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--sl-rule);
}

.sl-cluster-filter-btn {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: transparent;
	border: 1.5px solid var(--sl-rule);
	border-radius: var(--sl-radius-pill);
	font-size: 13px;
	font-weight: 600;
	color: var(--sl-muted);
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
	white-space: nowrap;
}

.sl-cluster-filter-btn:hover {
	border-color: var(--sl-brand);
	color: var(--sl-brand);
}

.sl-cluster-filter-btn--active {
	background: var(--sl-brand);
	border-color: var(--sl-brand);
	color: var(--sl-bg);
}

[data-theme="dark"] .sl-cluster-filter-btn--active {
	color: #0f1e33;
}

.sl-cf-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.sl-cf-dot--A { background: var(--sl-brand); }
.sl-cf-dot--B { background: var(--sl-accent); }
.sl-cf-dot--C { background: var(--sl-accent-2); }

.sl-cf-label {
	font-family: var(--sl-font-mono);
	font-size: 10px;
	opacity: .7;
	font-weight: 400;
}

/* ────────────────────────────────────────────────────────────────
   5. BLOG GRID
   ──────────────────────────────────────────────────────────────── */
.sl-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sl-blog-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* hidden cards when cluster filter is active */
.sl-blog-card[hidden] { display: none; }

/* ────────────────────────────────────────────────────────────────
   6. BLOG CARD
   ──────────────────────────────────────────────────────────────── */
.sl-blog-card {
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-lg);
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	transition: -webkit-transform .22s var(--sl-ease-spring), box-shadow .22s, border-color .22s;
	transition: transform .22s var(--sl-ease-spring), box-shadow .22s, border-color .22s;
}

.sl-blog-card:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--sl-brand) 30%, transparent);
	box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--sl-brand) 12%, transparent);
}

/* Card image area */
.sl-blog-card-img-wrap {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	background: var(--sl-rule);
}

.sl-blog-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: -webkit-transform .4s;
	transition: transform .4s;
}

.sl-blog-card:hover .sl-blog-card-img {
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

/* Placeholder when no featured image */
.sl-blog-card-img-placeholder {
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.sl-blog-card-img-placeholder--A { background: color-mix(in srgb, var(--sl-brand) 8%, var(--sl-bg)); color: var(--sl-brand); }
.sl-blog-card-img-placeholder--B { background: color-mix(in srgb, var(--sl-accent) 12%, var(--sl-bg)); color: var(--sl-accent); }
.sl-blog-card-img-placeholder--C { background: color-mix(in srgb, var(--sl-accent-2) 12%, var(--sl-bg)); color: var(--sl-accent-2); }
.sl-blog-card-img-placeholder--none { background: color-mix(in srgb, var(--sl-muted) 10%, var(--sl-bg)); color: var(--sl-muted); }

.sl-blog-card-img-placeholder svg {
	width: 40px;
	height: 40px;
	opacity: .5;
}

/* Card body */
.sl-blog-card-body {
	padding: 20px 22px 22px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 8px;
	-webkit-flex: 1;
	flex: 1;
}

/* Category badge (replaces cluster on listing cards) */
.sl-blog-card-cat {
	display: -webkit-inline-flex;
	display: inline-flex;
	align-items: center;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 9px;
	border-radius: var(--sl-radius-pill);
	border: 1px solid color-mix(in srgb, var(--sl-brand) 22%, transparent);
	color: var(--sl-brand);
	background: color-mix(in srgb, var(--sl-brand) 6%, transparent);
}
[data-theme="dark"] .sl-blog-card-cat {
	color: var(--sl-accent);
	border-color: color-mix(in srgb, var(--sl-accent) 28%, transparent);
	background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
}

/* Cluster badge */
.sl-blog-card-cluster {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 4px;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 9px;
	border-radius: var(--sl-radius-pill);
	border: 1px solid;
}

.sl-blog-card-cluster--A {
	color: var(--sl-brand);
	border-color: color-mix(in srgb, var(--sl-brand) 25%, transparent);
	background: color-mix(in srgb, var(--sl-brand) 6%, transparent);
}
.sl-blog-card-cluster--B {
	color: color-mix(in srgb, var(--sl-accent) 85%, var(--sl-ink));
	border-color: color-mix(in srgb, var(--sl-accent) 35%, transparent);
	background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
}
.sl-blog-card-cluster--C {
	color: color-mix(in srgb, var(--sl-accent-2) 85%, var(--sl-ink));
	border-color: color-mix(in srgb, var(--sl-accent-2) 30%, transparent);
	background: color-mix(in srgb, var(--sl-accent-2) 8%, transparent);
}

/* Card title */
.sl-blog-card-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sl-ink);
	margin: 0;
}

.sl-blog-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color .18s;
}

.sl-blog-card-title a:hover { color: var(--sl-brand); }

/* Subheading */
.sl-blog-card-sub {
	font-size: 13px;
	color: var(--sl-muted);
	line-height: 1.5;
	margin: 0;
}

/* Meta row */
.sl-blog-card-meta {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--sl-muted);
	font-family: var(--sl-font-mono);
}

.sl-blog-meta-sep { opacity: .4; }

/* Excerpt */
.sl-blog-card-excerpt {
	font-size: 13.5px;
	color: var(--sl-muted);
	line-height: 1.6;
	margin: 4px 0 0;
	-webkit-flex: 1;
	flex: 1;
}

/* Read more link */
.sl-blog-read-more {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sl-brand);
	text-decoration: none;
	margin-top: 4px;
	transition: gap .18s;
}

.sl-blog-read-more:hover { gap: 8px; }

.sl-blog-read-more svg {
	width: 14px;
	height: 14px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   7. BLOG PAGINATION
   ──────────────────────────────────────────────────────────────── */
.sl-blog-pagination {
	margin-top: var(--space-xl);
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}

.sl-blog-pagination .nav-links {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 6px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.sl-blog-pagination .page-numbers {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	border: 1.5px solid var(--sl-rule);
	border-radius: var(--sl-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--sl-muted);
	text-decoration: none;
	transition: border-color .18s, color .18s, background .18s;
}

.sl-blog-pagination .page-numbers:hover,
.sl-blog-pagination .page-numbers.current {
	border-color: var(--sl-brand);
	color: var(--sl-brand);
	background: color-mix(in srgb, var(--sl-brand) 6%, transparent);
}

.sl-blog-pagination .page-numbers svg {
	width: 14px;
	height: 14px;
}

/* ────────────────────────────────────────────────────────────────
   8. NO POSTS MESSAGE
   ──────────────────────────────────────────────────────────────── */
.sl-blog-no-posts {
	text-align: center;
	padding: var(--space-2xl) var(--sl-container-px);
	color: var(--sl-muted);
	font-size: 15px;
}

/* ────────────────────────────────────────────────────────────────
   9. READING PROGRESS BAR
   ──────────────────────────────────────────────────────────────── */
.sl-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 300;
	background: transparent;
}

.sl-reading-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--sl-brand) 0%, var(--sl-accent) 100%);
	transition: width .1s linear;
	border-radius: 0 2px 2px 0;
}

/* ────────────────────────────────────────────────────────────────
   10. ARTICLE PAGE WRAPPER
   ──────────────────────────────────────────────────────────────── */
.sl-article-page {
	max-width: var(--sl-max-w);
	margin: 0 auto;
	padding: var(--space-lg) var(--sl-container-px) var(--space-2xl);
}

.sl-article {
	max-width: 100%;
}

/* ────────────────────────────────────────────────────────────────
   11. ARTICLE HEADER
   ──────────────────────────────────────────────────────────────── */
.sl-article-header {
	margin: 0 0 var(--space-xl);
}

.sl-article-cluster-badge {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 4px;
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	padding: 4px 12px;
	border-radius: var(--sl-radius-pill);
	border: 1px solid;
	margin-bottom: 16px;
}

.sl-article-cluster-badge--A {
	color: var(--sl-brand);
	border-color: color-mix(in srgb, var(--sl-brand) 25%, transparent);
	background: color-mix(in srgb, var(--sl-brand) 6%, transparent);
}
.sl-article-cluster-badge--B {
	color: color-mix(in srgb, var(--sl-accent) 80%, var(--sl-ink));
	border-color: color-mix(in srgb, var(--sl-accent) 35%, transparent);
	background: color-mix(in srgb, var(--sl-accent) 8%, transparent);
}
.sl-article-cluster-badge--C {
	color: color-mix(in srgb, var(--sl-accent-2) 80%, var(--sl-ink));
	border-color: color-mix(in srgb, var(--sl-accent-2) 30%, transparent);
	background: color-mix(in srgb, var(--sl-accent-2) 8%, transparent);
}

.sl-article-title {
	font-family: var(--sl-font-sans);
	font-size: clamp(26px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--sl-ink);
	margin: 0 0 14px;
}

.sl-article-subheading {
	font-size: 18px;
	color: var(--sl-ink-soft);
	line-height: 1.55;
	margin: 0 0 16px;
	font-weight: 400;
}

.sl-article-meta {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var(--sl-muted);
	font-family: var(--sl-font-mono);
	margin-bottom: 24px;
}

.sl-article-meta-dot { opacity: .4; }

.sl-article-featured-img {
	border-radius: var(--sl-radius-lg);
	overflow: hidden;
	margin-top: var(--space-md);
}

.sl-article-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ────────────────────────────────────────────────────────────────
   12. ARTICLE LAYOUT: 2-COL (content + TOC)
   ──────────────────────────────────────────────────────────────── */
.sl-article-layout {
	display: grid;
	grid-template-columns: 1fr 264px;
	gap: var(--space-xl);
	-webkit-align-items: start;
	align-items: start;
}

/* ────────────────────────────────────────────────────────────────
   13. ARTICLE CONTENT TYPOGRAPHY
   ──────────────────────────────────────────────────────────────── */
.sl-article-content {
	min-width: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--sl-ink-soft);
}

.sl-article-content > * + * { margin-top: 1.25em; }

.sl-article-content h2,
.sl-article-content h3,
.sl-article-content h4 {
	color: var(--sl-ink);
	font-family: var(--sl-font-sans);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin-top: 2em;
	margin-bottom: .5em;
	position: relative;
}

.sl-article-content h2 { font-size: clamp(20px, 2.5vw, 26px); }
.sl-article-content h3 { font-size: clamp(17px, 2vw, 20px); }
.sl-article-content h4 { font-size: 17px; }

/* Anchor link on headings — shown on hover */
.sl-article-content h2[id]::before,
.sl-article-content h3[id]::before {
	content: '#';
	position: absolute;
	left: -1.4em;
	top: 0;
	font-size: .75em;
	font-weight: 400;
	color: var(--sl-muted);
	opacity: 0;
	transition: opacity .18s;
}

.sl-article-content h2[id]:hover::before,
.sl-article-content h3[id]:hover::before { opacity: 1; }

.sl-article-content p { margin: 0; }

.sl-article-content a {
	color: var(--sl-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sl-brand) 40%, transparent);
	transition: text-decoration-color .18s;
}

.sl-article-content a:hover {
	text-decoration-color: var(--sl-brand);
}

.sl-article-content strong { color: var(--sl-ink); font-weight: 700; }
.sl-article-content em { font-style: italic; }

/* Lists */
.sl-article-content ul,
.sl-article-content ol {
	padding-left: 1.6em;
}

.sl-article-content ul { list-style: none; padding-left: 0; }

.sl-article-content ul li {
	padding-left: 1.5em;
	position: relative;
}

.sl-article-content ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: .65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sl-accent);
}

.sl-article-content ol { list-style: decimal; }

.sl-article-content li + li { margin-top: .5em; }

/* Blockquote */
.sl-article-content blockquote {
	border-left: 3px solid var(--sl-accent);
	padding: 12px 20px;
	margin: 2em 0;
	background: color-mix(in srgb, var(--sl-accent) 5%, var(--sl-surface));
	border-radius: 0 var(--sl-radius-sm) var(--sl-radius-sm) 0;
	font-size: 17px;
	font-style: italic;
	color: var(--sl-ink);
}

.sl-article-content blockquote p { margin: 0; }

/* Code */
.sl-article-content code {
	font-family: var(--sl-font-mono);
	font-size: .875em;
	background: color-mix(in srgb, var(--sl-brand) 7%, var(--sl-surface));
	color: var(--sl-brand);
	padding: 2px 6px;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--sl-brand) 15%, transparent);
}

.sl-article-content pre {
	background: var(--sl-brand);
	color: var(--sl-bg);
	padding: var(--space-md);
	border-radius: var(--sl-radius-md);
	overflow-x: auto;
	font-family: var(--sl-font-mono);
	font-size: 13.5px;
	line-height: 1.6;
}

.sl-article-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	border: none;
	font-size: inherit;
}

/* HR */
.sl-article-content hr {
	border: none;
	border-top: 1px solid var(--sl-rule);
	margin: 2.5em 0;
}

/* Images */
.sl-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sl-radius-md);
	display: block;
}

/* ────────────────────────────────────────────────────────────────
   14. TABLES
   ──────────────────────────────────────────────────────────────── */
.sl-table-wrap,
.sl-article-content .sl-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
	margin: 1.5em 0;
}

.sl-article-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.sl-article-content thead th {
	background: color-mix(in srgb, var(--sl-brand) 8%, var(--sl-surface));
	color: var(--sl-ink);
	font-weight: 700;
	padding: 10px 16px;
	text-align: left;
	white-space: nowrap;
}

.sl-article-content tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--sl-brand) 3%, var(--sl-surface));
}

.sl-article-content td {
	padding: 9px 16px;
	color: var(--sl-ink-soft);
	border-top: 1px solid var(--sl-rule);
}

/* ────────────────────────────────────────────────────────────────
   15. CALLOUT BOXES (via [sl_callout] shortcode)
   ──────────────────────────────────────────────────────────────── */
.sl-callout {
	border-radius: var(--sl-radius-md);
	padding: 16px 20px;
	margin: 1.5em 0;
	border: 1px solid;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 6px;
}

.sl-callout-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-family: var(--sl-font-mono);
}

.sl-callout-body {
	font-size: 14.5px;
	line-height: 1.6;
}

.sl-callout-body > * + * { margin-top: .6em; }
.sl-callout-body p { margin: 0; }

.sl-callout--info {
	background: color-mix(in srgb, var(--sl-brand) 6%, var(--sl-surface));
	border-color: color-mix(in srgb, var(--sl-brand) 20%, transparent);
	color: var(--sl-ink);
}
.sl-callout--info .sl-callout-title { color: var(--sl-brand); }

.sl-callout--tip {
	background: color-mix(in srgb, var(--sl-accent-2) 8%, var(--sl-surface));
	border-color: color-mix(in srgb, var(--sl-accent-2) 25%, transparent);
	color: var(--sl-ink);
}
.sl-callout--tip .sl-callout-title { color: var(--sl-accent-2); }

.sl-callout--warning {
	background: color-mix(in srgb, var(--sl-accent) 8%, var(--sl-surface));
	border-color: color-mix(in srgb, var(--sl-accent) 30%, transparent);
	color: var(--sl-ink);
}
.sl-callout--warning .sl-callout-title { color: color-mix(in srgb, var(--sl-accent) 80%, var(--sl-ink)); }

.sl-callout--danger {
	background: color-mix(in srgb, var(--sl-danger) 6%, var(--sl-surface));
	border-color: color-mix(in srgb, var(--sl-danger) 20%, transparent);
	color: var(--sl-ink);
}
.sl-callout--danger .sl-callout-title { color: var(--sl-danger); }

/* ────────────────────────────────────────────────────────────────
   16. TABLE OF CONTENTS (TOC)
   ──────────────────────────────────────────────────────────────── */
.sl-article-toc-wrap {
	-webkit-align-self: start;
	align-self: start;
	position: -webkit-sticky;
	position: sticky;
	top: 88px;
}

.sl-article-toc {
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
	padding: 20px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--sl-rule) transparent;
}

.sl-article-toc::-webkit-scrollbar { width: 4px; }
.sl-article-toc::-webkit-scrollbar-thumb { background: var(--sl-rule); border-radius: 2px; }

.sl-toc-title {
	font-family: var(--sl-font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sl-muted);
	margin: 0 0 14px;
}

.sl-toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 2px;
}

.sl-toc-item a {
	display: block;
	padding: 5px 8px;
	font-size: 13px;
	color: var(--sl-muted);
	text-decoration: none;
	border-radius: 5px;
	line-height: 1.4;
	transition: color .18s, background .18s;
	border-left: 2px solid transparent;
}

.sl-toc-item--h3 a { padding-left: 20px; font-size: 12px; }

.sl-toc-item a:hover {
	color: var(--sl-brand);
	background: color-mix(in srgb, var(--sl-brand) 5%, transparent);
}

.sl-toc-item--active a {
	color: var(--sl-brand);
	font-weight: 600;
	border-left-color: var(--sl-brand);
	background: color-mix(in srgb, var(--sl-brand) 6%, transparent);
}

/* ────────────────────────────────────────────────────────────────
   17. ARTICLE IN-LINE CTAs
   ──────────────────────────────────────────────────────────────── */
.sl-article-primary-cta {
	margin: var(--space-xl) 0;
	padding: var(--space-lg) var(--space-lg);
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-left: 4px solid var(--sl-brand);
	border-radius: 0 var(--sl-radius-md) var(--sl-radius-md) 0;
	text-align: center;
}

.sl-article-cta-lead {
	font-size: 14px;
	color: var(--sl-muted);
	margin: 0 0 8px;
	font-family: var(--sl-font-mono);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 11px;
}

.sl-article-cta-h {
	font-size: 20px;
	font-weight: 700;
	color: var(--sl-ink);
	margin: 0 0 20px;
}

.sl-article-cta-trust {
	font-size: 12px;
	color: var(--sl-muted);
	margin: 12px 0 0;
}

.sl-article-secondary-cta {
	margin: var(--space-xl) 0;
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
	overflow: hidden;
}

.sl-article-secondary-cta-inner {
	padding: var(--space-md) var(--space-lg);
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	gap: var(--space-md);
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--sl-brand) 4%, var(--sl-surface));
}

.sl-article-secondary-cta-inner p {
	font-size: 15px;
	color: var(--sl-ink);
	font-weight: 600;
	margin: 0;
}

/* Internal links block in article */
.sl-article-internal-links {
	margin: var(--space-xl) 0;
	padding: var(--space-lg);
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
}

/* ────────────────────────────────────────────────────────────────
   18. AUTHOR CARD
   ──────────────────────────────────────────────────────────────── */
.sl-author-card {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	margin: var(--space-xl) 0;
	background: var(--sl-surface);
	border: 1px solid var(--sl-rule);
	border-radius: var(--sl-radius-md);
}

.sl-author-avatar {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.sl-author-avatar-img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: block;
	border: 2px solid var(--sl-rule);
}

.sl-author-info {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	gap: 3px;
}

.sl-author-label {
	font-family: var(--sl-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--sl-muted);
}

.sl-author-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--sl-ink);
}

.sl-author-bio {
	font-size: 13px;
	color: var(--sl-muted);
	line-height: 1.5;
	margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   19. RELATED POSTS
   ──────────────────────────────────────────────────────────────── */
.sl-related-posts {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--sl-rule);
}

.sl-related-header {
	margin-bottom: var(--space-lg);
}

.sl-related-title {
	font-size: clamp(20px, 2.5vw, 26px);
	font-weight: 700;
	color: var(--sl-ink);
	letter-spacing: -.01em;
	margin: 8px 0 0;
}

/* ────────────────────────────────────────────────────────────────
   20. SHORTCODE CTA LINK (.sl-sc-cta)
   ──────────────────────────────────────────────────────────────── */
.sl-article-content .sl-sc-cta {
	display: -webkit-inline-flex;
	display: inline-flex;
	margin: .5em 0;
	text-decoration: none;
}

/* ────────────────────────────────────────────────────────────────
   21. DARK MODE OVERRIDES
   ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] .sl-blog-card {
	background: color-mix(in srgb, var(--sl-surface) 80%, transparent);
}

[data-theme="dark"] .sl-blog-card:hover {
	box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--sl-accent) 20%, transparent);
}

[data-theme="dark"] .sl-cluster-filter-btn--active {
	background: var(--sl-ink);
	border-color: var(--sl-ink);
	color: #0f1e33;
}

[data-theme="dark"] .sl-article-toc {
	background: color-mix(in srgb, var(--sl-surface) 80%, transparent);
}

[data-theme="dark"] .sl-article-primary-cta,
[data-theme="dark"] .sl-article-secondary-cta,
[data-theme="dark"] .sl-author-card,
[data-theme="dark"] .sl-article-internal-links {
	background: color-mix(in srgb, var(--sl-surface) 80%, transparent);
}

[data-theme="dark"] .sl-article-content code {
	background: color-mix(in srgb, var(--sl-accent) 10%, var(--sl-surface));
	color: var(--sl-accent);
	border-color: color-mix(in srgb, var(--sl-accent) 20%, transparent);
}

[data-theme="dark"] .sl-article-content pre {
	background: #0f1e33;
}

/* ────────────────────────────────────────────────────────────────
   22. RESPONSIVE
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.sl-article-layout {
		grid-template-columns: 1fr;
	}

	.sl-article-toc-wrap {
		position: static;
		order: -1;
		margin-bottom: var(--space-md);
	}

	.sl-article-toc {
		max-height: none;
		overflow-y: visible;
	}

	.sl-article-header {
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.sl-blog-grid,
	.sl-blog-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sl-blog-hero {
		padding: var(--space-xl) var(--sl-container-px) var(--space-lg);
	}

	.sl-article-secondary-cta-inner {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		text-align: left;
	}

	.sl-author-card {
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		gap: var(--space-sm);
	}
}

@media (max-width: 480px) {
	.sl-blog-grid,
	.sl-blog-grid--3 {
		grid-template-columns: 1fr;
	}

	.sl-cluster-filter,
	.sl-cat-filter {
		gap: 6px;
	}

	.sl-cat-filter-btn {
		padding: 7px 14px;
		font-size: 12px;
	}

	.sl-cf-label { display: none; }

	.sl-article-primary-cta {
		padding: var(--space-md);
	}

	.sl-blog-hero-cta .sl-btn {
		width: 100%;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.sl-reading-progress { height: 2px; }
}