/* Post Single — full-bleed hero, an overlapping white title card, then the
   article body on a narrow measure.

   No Figma for this page yet: values are read off the reference screenshots and
   reconciled with the theme's language (Oswald uppercase headings, red accent
   rule, sharp-cornered badge). Re-measure when the interior-page Figma lands. */

.tt-post {
	padding-bottom: 100px;
}

/* ---- Hero ---------------------------------------------------------------- */
.tt-post__hero {
	margin: 0;
}

.tt-post__hero img {
	display: block;
	width: 100%;
	height: 500px;
	object-fit: cover;
}

/* ---- Title card ---------------------------------------------------------- */
/* Sits over the bottom of the hero. The negative margin is the overlap; the
   z-index keeps the card above the image rather than the image's own stacking
   context painting over it. */
.tt-post__card {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: -70px auto 0;
	padding: 40px 40px 32px;
	background: #fff;
	text-align: center;
}

.tt-post__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 40px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #141412) !important;
}

.tt-post__rule {
	display: block;
	width: 40px;
	height: 2px;
	margin: 20px auto 0;
	background: var(--wp--preset--color--red, #cf2026);
}

/* Date badge — sharp corners, like every other badge on the site. The block
   wrapper is a div, so the colour goes on the <time> to keep the badge tight to
   the text rather than spanning the card. */
.tt-post__date {
	margin-top: 24px;
}

.tt-post__date time {
	display: inline-block;
	padding: 5px 14px;
	background: var(--wp--preset--color--red, #cf2026);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
}

/* ---- Article body -------------------------------------------------------- */
/* A reading measure, narrower than the card above it — the card is a display
   element, this is prose. */
.tt-post__content {
	max-width: 680px;
	margin: 16px auto 0;
	padding-inline: 20px;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 16px;
	/* Looser than the site's 1.6 — long-form body copy, not UI text. */
	line-height: 1.75;
	color: var(--wp--preset--color--ink, #141412);
}

.tt-post__content > * {
	margin-block: 0 24px;
}

.tt-post__content > *:last-child {
	margin-bottom: 0;
}

/* Content headings come from imported article HTML, so they're styled here
   rather than per-block. theme.json already makes headings Oswald uppercase. */
.tt-post__content h2 {
	margin-top: 40px;
	font-size: 28px;
	line-height: 1.2;
}

.tt-post__content h3 {
	margin-top: 32px;
	font-size: 22px;
	line-height: 1.25;
}

.tt-post__content a {
	color: var(--wp--preset--color--red, #cf2026) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.tt-post__content a:hover {
	color: var(--wp--preset--color--ink, #141412) !important;
}

.tt-post__content img {
	display: block;
	max-width: 100%;
	height: auto;
}

.tt-post__content ol,
.tt-post__content ul {
	padding-left: 24px;
}

.tt-post__content li {
	margin-bottom: 8px;
}

/* ---- Mobile (≤767px) ----------------------------------------------------- */
@media (max-width: 767px) {
	.tt-post {
		padding-bottom: 64px;
	}

	.tt-post__hero img {
		height: 280px;
	}

	/* Less overlap at this width — the card is nearly the full viewport, so a
	   70px bite out of a 280px hero would swallow most of the image. */
	.tt-post__card {
		max-width: none;
		margin: -40px 20px 0;
		padding: 28px 20px 24px;
	}

	.tt-post__title {
		font-size: 28px;
	}

	.tt-post__content {
		margin-top: 32px;
	}

	.tt-post__content h2 {
		font-size: 24px;
	}

	.tt-post__content h3 {
		font-size: 20px;
	}
}