/* Blog (extension/blog, extension/post) — only what the purged Tailwind build (stylesheet/style.css) does not cover.
   Tokens come from the theme: --primary, --foreground, --background, --card, --muted-foreground, --border, --radius. */

/* Category chips in the page intro (shown only when there is more than one blog category) */
.blog-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}
.blog-chip {
	display: inline-flex;
	align-items: center;
	padding: .375rem .75rem;
	border: 1px solid color-mix(in oklab, var(--background) 15%, transparent);
	border-radius: calc(var(--radius) - 2px);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--background) 70%, transparent);
	transition: color .2s, border-color .2s, background-color .2s;
}
.blog-chip:hover {
	color: var(--background);
	border-color: color-mix(in oklab, var(--background) 35%, transparent);
}
.blog-chip.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

/* Pagination (the static layout has none) */
.blog-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .375rem;
	margin-top: 2.5rem;
}
.blog-pager__page,
.blog-pager__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .75rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	background: var(--background);
	font-size: .875rem;
	font-weight: 500;
	color: var(--foreground);
	transition: background-color .2s, color .2s, border-color .2s;
}
.blog-pager__page:hover,
.blog-pager__arrow:hover {
	border-color: var(--primary);
	color: var(--primary);
}
.blog-pager__page.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

/* Article body: content comes from the WYSIWYG editor (flat h2/p/ul), so plain tags get the look of the layout's
   sections (div.grid.gap-8 > section > h2.font-display.text-xl.font-semibold.md:text-2xl + p.mt-3.leading-8.text-muted-foreground). */
.blog-article > * + * { margin-top: .75rem; }
.blog-article > h2,
.blog-article > h3,
.blog-article > section + section { margin-top: 2rem; }
.blog-article > :first-child { margin-top: 0; }
.blog-article section > * + * { margin-top: .75rem; }
.blog-article h2 {
	font-family: Outfit, sans-serif;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--foreground);
}
.blog-article h3 {
	font-family: Outfit, sans-serif;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: var(--foreground);
}
@media (min-width: 48rem) {
	.blog-article h2 { font-size: 1.5rem; line-height: 2rem; }
}
.blog-article p,
.blog-article ul,
.blog-article ol {
	line-height: 2rem;
	color: var(--muted-foreground);
}
.blog-article ul,
.blog-article ol { padding-left: 1.5rem; }
.blog-article ul { list-style: disc; }
.blog-article ol { list-style: decimal; }
.blog-article li + li { margin-top: .25rem; }
.blog-article a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.blog-article strong { color: var(--foreground); font-weight: 600; }
.blog-article blockquote {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--card);
	color: var(--muted-foreground);
	line-height: 1.75rem;
}
.blog-article img,
.blog-article video,
.blog-article iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 1rem;
	border-radius: var(--radius);
}
.blog-article iframe { width: 100%; aspect-ratio: 16 / 9; }
.blog-article table {
	width: 100%;
	margin-top: 1rem;
	border-collapse: collapse;
	font-size: .875rem;
	line-height: 1.5rem;
}
.blog-article th,
.blog-article td {
	padding: .5rem .75rem;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}
.blog-article th { background: var(--card); font-weight: 600; color: var(--foreground); }
.blog-article hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
	.blog-chip,
	.blog-pager__page,
	.blog-pager__arrow { transition: none; }
}