/* Post Archive — blog index: archive title, one featured post on a full-bleed
   grey band, then a two-column grid.

   No Figma exists for this page yet, so the values here are read off the old
   Shopify screenshots and reconciled with the theme's own language (Oswald
   uppercase headings, red accent rule, sharp corners, 0.2s hovers). Re-measure
   against the design file when the interior-page Figma lands. */

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

.tt-post-archive__title {
	margin: 0;
	padding: 80px 20px 0;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 52px;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink, #141412) !important;
}

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

/* ---- Featured post ------------------------------------------------------- */
/* The grey band runs the full viewport width while its content stays on the
   1216px measure, so the band is painted here and the inner columns are what
   gets constrained. */
.tt-post-archive__featured {
	margin-top: 56px;
	background: #f2f2f2;
}

.tt-post-archive__featured-inner {
	max-width: 1216px;
	margin-inline: auto;
	padding-inline: 20px;
	gap: 48px;
	align-items: center;
}

/* The image overhangs the band top and bottom in the design — it is taller than
   the band's own padding, which is what gives the featured post its weight. */
.tt-post-archive__featured .tt-post-archive__media {
	margin-block: -1px;
}

.tt-post-archive__featured .tt-post-archive__media img {
	display: block;
	width: 100%;
	height: 395px;
	object-fit: cover;
}

.tt-post-archive__featured-body {
	padding-block: 48px;
}

/* ---- Grid ---------------------------------------------------------------- */
.tt-post-archive__grid {
	max-width: 1216px;
	margin-inline: auto;
	margin-top: 64px;
	padding-inline: 20px;
}

.tt-post-archive__grid .wp-block-post-template {
	gap: 56px 40px;
}

.tt-post-archive__grid .tt-post-archive__media img {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: cover;
}

/* ---- Shared card type ---------------------------------------------------- */
.tt-post-archive__media {
	margin: 0;
	overflow: hidden;
}

.tt-post-archive__media img {
	transition: transform 0.2s ease;
}

.tt-post-archive__media:hover img {
	transform: scale(1.03);
}

.tt-post-archive__post-title {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 28px;
	line-height: 1.15;
	text-transform: uppercase;
}

.tt-post-archive__post-title a {
	color: var(--wp--preset--color--ink, #141412) !important;
	transition: color 0.2s ease;
}

.tt-post-archive__post-title a:hover {
	color: var(--wp--preset--color--red, #cf2026) !important;
}

/* The featured title leads the band, so it has no image above it to clear. */
.tt-post-archive__featured .tt-post-archive__post-title {
	margin-top: 0;
}

.tt-post-archive__excerpt {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink, #141412);
}

/* "Read more" is core's excerpt-more link; it renders inline after the text,
   so it gets its own line to match the design. */
.tt-post-archive__excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 12px;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--ink, #141412) !important;
	transition: color 0.2s ease;
}

.tt-post-archive__excerpt .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--red, #cf2026) !important;
}

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

	.tt-post-archive__title {
		padding-top: 48px;
		font-size: 36px;
	}

	.tt-post-archive__featured {
		margin-top: 40px;
	}

	/* Core stacks columns below 782px on its own; these just reset the desktop
	   gap and give the stacked body room. */
	.tt-post-archive__featured-inner {
		gap: 0;
		padding-inline: 0;
	}

	.tt-post-archive__featured .tt-post-archive__media img {
		height: 260px;
	}

	.tt-post-archive__featured-body {
		padding: 32px 20px 40px;
	}

	.tt-post-archive__grid {
		margin-top: 48px;
	}

	/* One column — core's grid layout would otherwise hold two at 440px. */
	.tt-post-archive__grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 40px;
	}

	.tt-post-archive__grid .tt-post-archive__media img {
		height: 240px;
	}

	.tt-post-archive__post-title {
		font-size: 24px;
	}
}