/*! Blog (W4): /blog index + native post templates. Loaded after style.css
   via inc/enqueue.php's assets/css/pages/*.css auto-enqueue; reuses the
   theme's :root tokens (--accent, --text-dim, --radius-l, etc.) and
   utility classes (.container, .display, .lead, .btn) -- no new tokens. */

/* ─── Shared blog hero (blog index + single post) ──────────────────────── */
.site-blog-hero .container {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.site-blog-hero-title { max-width: 20ch; }
.site-blog-hero-sub { text-align: center; margin-inline: auto; }

/* ─── Blog index: "The Growth Blog" head + card grid ────────────────────── */
.site-blog-index-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.site-blog-index-head .lead { text-align: center; }

.site-blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 720px) {
	.site-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

.site-blog-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-l);
	background: var(--bg-2);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: border-color 0.4s, transform 0.4s var(--ease-out), box-shadow 0.4s;
	box-shadow: 0 1px 2px rgba(10, 10, 15, 0.04);
}
.site-blog-card:hover {
	border-color: var(--accent);
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -16px rgba(10, 10, 15, 0.14);
}
.site-blog-card-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--surface);
}
.site-blog-card-img { width: 100%; height: 100%; object-fit: cover; }
.site-blog-card-body { padding: clamp(20px, 2.4vw, 28px); }
.site-blog-card-title {
	font-family: var(--display-font);
	font-size: clamp(19px, 1.8vw, 23px);
	line-height: 1.25;
	color: var(--text);
	margin-bottom: 10px;
}
.site-blog-card-byline { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.site-blog-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--accent-mid);
}
.site-blog-card-cta .arrow { transition: transform 0.3s var(--ease-out); }
.site-blog-card:hover .site-blog-card-cta .arrow { transform: translateX(4px); }

.site-blog-index-more { text-align: center; margin-top: 56px; }

/* ─── Blog index: "Behind the Work" / "Join the Conversation" CTA band ──── */
.site-blog-cta-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 880px) {
	.site-blog-cta-grid { grid-template-columns: repeat(2, 1fr); }
}
.site-blog-cta-block {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.site-blog-cta-block .lead { text-align: center; }

/* ─── Single post article ────────────────────────────────────────────── */
.site-blog-article-section { padding-block: var(--section-pad); }
.site-blog-article-wrap { max-width: 760px; margin-inline: auto; }
.site-blog-article-title { margin-bottom: 32px; }

.site-blog-article { color: var(--text); font-size: 17px; line-height: 1.7; }
.site-blog-article > * + * { margin-top: 20px; }
.site-blog-article h2,
.site-blog-article h3,
.site-blog-article h4 {
	font-family: var(--display-font);
	line-height: 1.2;
	margin-top: 40px;
	margin-bottom: 4px;
}
.site-blog-article h2 { font-size: clamp(26px, 2.6vw, 34px); }
.site-blog-article h3 { font-size: clamp(21px, 2vw, 26px); }
.site-blog-article h4 { font-size: clamp(18px, 1.6vw, 21px); }
.site-blog-article a { color: var(--accent-mid); text-decoration: underline; }
.site-blog-article strong { font-weight: 600; }
.site-blog-article em { font-style: italic; }
.site-blog-article ul { padding-inline-start: 22px; }
.site-blog-article li { margin-top: 6px; }
.site-blog-article figure { margin-block: 24px; }
.site-blog-article figure img { width: 100%; border-radius: var(--radius-m); display: block; }
.site-blog-article figure[style*="padding-bottom"] {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-m);
}
.site-blog-article figure[style*="padding-bottom"] iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.site-blog-article figure:not([style*="padding-bottom"]) iframe {
	width: 100%;
	height: 200px;
	border: 0;
	border-radius: var(--radius-m);
}
.site-blog-byline { color: var(--text-dim); font-size: 15px; }

/* ─── Single post: "Featured Blogs" / "Join the Conversation" / "Stay in
   the Loop" tail widgets (site-blog-related.php) ───────────────────────── */
.site-blog-loop-img {
	width: 100%;
	max-width: 420px;
	border-radius: var(--radius-l);
	margin-top: 8px;
}