/*
 * Layout support for the non-flexible-content single templates (§10.6):
 * templates/single-post.php and templates/single-case-study.php. Everything
 * these templates can borrow from components.css/base.css (case study
 * metrics, cards, grids, breadcrumbs, testimonial quote) is reused directly
 * in the markup — this file only covers what neither already provides:
 * the hero meta row, the author block, the case-study meta list and the
 * technologies tag list. New standalone file, enqueued from its own
 * inc/setup/enqueue-single-templates.php per IMPLEMENTATION.md.
 */

.single-hero { padding-block: var(--space-8) var(--space-6); }

.single-hero h1 { margin-top: var(--space-3); font-size: var(--fs-h1-l2); } /* #049(d): L2 templates use the H1-L2 step (60px), not the homepage 72px */

.single-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	color: var(--muted-light);
	font-size: var(--fs-small);
	margin: var(--space-4) 0 0;
}

.single-hero__media { margin-top: var(--space-7); }

.post-author {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line-light);
	max-width: var(--measure);
}
.post-author img { border-radius: 50%; flex-shrink: 0; }
.post-author strong { display: block; margin-bottom: var(--space-1); }
.post-author p { margin-bottom: 0; }

.cs-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: var(--space-6) 0 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--line-light);
}
.cs-meta-row dt {
	font-size: var(--fs-interface);
	text-transform: uppercase;
	letter-spacing: var(--tracking-interface);
	color: var(--muted-light);
	margin: 0 0 var(--space-1);
}
.cs-meta-row dd { margin: 0; font-size: var(--fs-body); }
.cs-meta-row dd a { color: inherit; }

.cs-narrative { max-width: var(--measure); }
.cs-narrative + .cs-narrative { margin-top: var(--space-8); }
.cs-narrative__label {
	font-family: var(--font-display);
	font-size: var(--fs-h2); /* #049(e): an H2 — was the H3 step, smaller than the page's H3s on mobile */
	margin-bottom: var(--space-4);
}

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.tag-list__item {
	font-size: var(--fs-interface);
	text-transform: uppercase;
	letter-spacing: var(--tracking-interface);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--line-light);
	border-radius: 999px;
	color: var(--muted-light);
}

@media (max-width: 767px) {
	.cs-meta-row { gap: var(--space-4); }
}