/**
 * Blog index + single post (build phase 4). Shares band classes,
 * .tcc-blogfeed__grid, .tcc-blog-card and .tcc-section-heading from
 * home.css (enqueued alongside this file — see functions.php).
 *
 * Sticky CTA card: per wordpress-build-brief.md §9, no ancestor of a
 * `position: sticky` element may carry transform/filter/perspective/
 * will-change:transform/overflow:hidden — checked against every rule
 * below and .tcc-post-grid / .tcc-container / .tcc-band-white on
 * purpose stay free of all five.
 */

.tcc-blog-hero {
	padding: 160px 0 var( --space-3xl );
}
.tcc-blog-hero__inner {
	max-width: 720px;
}
.tcc-blog-hero__inner .tcc-label {
	color: var( --color-primary );
}
.tcc-blog-hero__inner h1 {
	margin: var( --space-2xs ) 0;
	color: var( --text-on-dark );
}
.tcc-blog-hero__inner p {
	margin: 0;
	color: var( --text-on-dark-muted );
	font-size: var( --text-body-lg-size );
}

.tcc-blogfeed__pagination {
	margin-top: var( --space-lg );
	display: flex;
	justify-content: center;
	gap: var( --space-sm );
}
.tcc-blogfeed__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var( --radius-sm );
	border: var( --elevation-hairline );
	color: var( --text-strong );
	text-decoration: none;
}
.tcc-blogfeed__pagination .page-numbers.current {
	background: var( --color-primary );
	border-color: var( --color-primary );
}

.tcc-blog-card--cross-link {
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: var( --space-md );
	display: flex;
	align-items: center;
}
.tcc-blog-card__cross-link-body h3 {
	margin: 0 0 var( --space-2xs );
	font-size: var( --text-h6-size );
}
.tcc-blog-card__cross-link-cta {
	/* On the white band — gold fails contrast here, brand-deep passes. */
	color: var( --color-brand-deep );
	font-weight: var( --weight-medium );
}

/* ---- Single post -------------------------------------------------- */

.tcc-post-hero {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-top: 140px;
}
.tcc-post-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tcc-post-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 11, 31, 82, 0.88 ), rgba( 11, 31, 82, 0.35 ) );
}
.tcc-post-hero__inner {
	position: relative;
	z-index: 1;
	padding-bottom: var( --space-3xl );
	max-width: 760px;
}
.tcc-post-hero__inner .tcc-label {
	color: var( --color-primary );
}
.tcc-post-hero__inner h1 {
	margin: var( --space-2xs ) 0 0;
	color: var( --text-on-dark );
	font-size: var( --text-h2-size );
	line-height: var( --text-h2-lh );
}

.tcc-post-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: var( --space-3xl );
	align-items: start;
}

.tcc-post-content {
	max-width: 75ch;
	color: var( --text-body );
	font-size: var( --text-body-size );
	line-height: var( --text-body-lh );
}
.tcc-post-content > * + * {
	margin-top: var( --space-md );
}
.tcc-post-content h2 {
	font-size: var( --text-h4-size );
	line-height: var( --text-h4-lh );
	margin-top: var( --space-xl );
}
.tcc-post-content h3 {
	font-size: var( --text-h5-size );
	line-height: var( --text-h5-lh );
	margin-top: var( --space-lg );
}
.tcc-post-content h4 {
	font-size: var( --text-h6-size );
	line-height: var( --text-h6-lh );
}
.tcc-post-content p.tcc-lead,
.tcc-post-content > p:first-of-type {
	font-size: var( --text-body-lg-size );
	line-height: var( --text-body-lg-lh );
	color: var( --text-strong );
}
.tcc-post-content blockquote {
	margin: 0;
	padding: var( --space-sm ) var( --space-md );
	border-left: 3px solid var( --color-primary );
	background: var( --surface-muted );
	border-radius: 0 var( --radius-md ) var( --radius-md ) 0;
	font-family: var( --font-display );
	font-size: var( --text-h6-size );
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
}
.tcc-post-content ul,
.tcc-post-content ol {
	padding-left: 1.4em;
}
.tcc-post-content li + li {
	margin-top: 6px;
}
.tcc-post-content a {
	color: var( --color-brand-deep );
	text-decoration: underline;
}
.tcc-post-content a:hover {
	/* Article body is always on the white band — gold text fails contrast
	   there (~1.6:1). Darken toward ink instead of switching hue, still a
	   clear hover signal alongside the underline. */
	color: var( --tcc-ink-900 );
}
.tcc-post-content figure {
	margin: 0;
}
.tcc-post-content figure img {
	width: 100%;
	border-radius: var( --radius-md );
	display: block;
}
.tcc-post-content figcaption {
	margin-top: var( --space-2xs );
	color: var( --text-body );
	font-size: var( --text-label-size );
	text-align: center;
}
.tcc-post-content hr {
	border: none;
	border-top: var( --elevation-hairline );
	margin: var( --space-xl ) 0;
}
/* Tables size to content by default and can exceed the 75ch column,
   spilling under the sticky sidebar card. Cap and scroll instead. */
.tcc-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.tcc-post-content th,
.tcc-post-content td {
	padding: var( --space-2xs ) var( --space-sm );
	border-bottom: var( --elevation-hairline );
	text-align: left;
}

/* The grid sets `align-items: start`, which sizes this column to its own
   content (~300px). A sticky child can only travel inside its containing
   block, so that left the CTA card with zero runway and it never stuck.
   Stretching just this column to the full row height gives it the article's
   height to travel through, without changing how the article column aligns. */
.tcc-post-sidebar {
	position: relative;
	align-self: stretch;
}
.tcc-post-cta-card {
	position: sticky;
	top: calc( var( --tcc-navbar-h ) + var( --space-lg ) );
	background: var( --surface-card );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	padding: var( --space-md );
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}
.tcc-post-cta-card h2 {
	margin: 0;
	font-size: var( --text-h6-size );
}
.tcc-post-cta-card p {
	margin: 0;
	color: var( --text-body );
}

@media ( max-width: 991px ) {
	.tcc-post-grid {
		grid-template-columns: 1fr;
	}
	.tcc-post-cta-card {
		position: static;
	}
}