/*
 * MetaBlogue – Related Posts by Category
 * Component: .mb-related  (BEM)
 * Enqueued only on single posts (is_single) — see functions.php.
 */

/* ── Custom properties ──────────────────────────────────────────────────── */
.mb-related {
	--mb-ink:    #1a1715;
	--mb-muted:  #6b6660;
	--mb-line:   #ece7df;
	--mb-accent: #d64f15;

	box-sizing: border-box;
	margin: 3rem 0 2rem;
	color: var(--mb-ink);
	/* Container queries let the grid respond to the block's own width,
	   independent of viewport or sidebar layout. */
	container-type: inline-size;
	container-name: mb-related;
}

.mb-related *,
.mb-related *::before,
.mb-related *::after { box-sizing: inherit; }

/* ── Section header ─────────────────────────────────────────────────────── */
.mb-related__head {
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--mb-line);
}

.mb-related__eyebrow {
	margin: 0 0 .25rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mb-accent);
}

.mb-related__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--mb-ink);
}

/* ── Grid — mobile-first ────────────────────────────────────────────────── */
.mb-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* 1 col default */
	gap: 1.25rem;
}

/* Prevent long titles / wide media from blowing out the 1fr track */
.mb-related__item { min-width: 0; }

/* 2 cols when the block itself is ≥ 540 px */
@container mb-related (min-width: 540px) {
	.mb-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1.25rem;
	}
}

/* 3 cols when the block itself is ≥ 820 px */
@container mb-related (min-width: 820px) {
	.mb-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.75rem 1.5rem;
	}
}

/* Viewport-based fallback for browsers without @container support */
@supports not (container-type: inline-size) {
	@media (min-width: 600px) {
		.mb-related__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1.5rem 1.25rem;
		}
	}
	@media (min-width: 960px) {
		.mb-related__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 1.75rem 1.5rem;
		}
	}
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.mb-related__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.mb-related__card:hover,
.mb-related__card:focus-visible {
	outline: none;
}

.mb-related__card:focus-visible {
	outline: 2px solid var(--mb-accent);
	outline-offset: 2px;
}

/* ── Thumbnail ──────────────────────────────────────────────────────────── */
.mb-related__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f1ece4;
	overflow: hidden;
	flex-shrink: 0;
	/* Safari fix: overflow:hidden + border-radius on a parent can silently
	   swallow child transforms. A new stacking context on the clipping
	   element forces Safari to respect the crop boundary. */
	transform: translateZ(0);
}

.mb-related__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
	will-change: transform;
}

/* Match the homepage grid zoom level (1.08) for visual consistency */
.mb-related__card:hover .mb-related__img { transform: scale(1.08); }

/* Placeholder when no featured image */
.mb-related__placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(
			135deg,
			#f1ece4 0 14px,
			#ece6dc 14px 28px
		);
	color: var(--mb-muted);
	font-family: Georgia, serif;
	font-size: 2.5rem;
	font-weight: 600;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.mb-related__body {
	padding: 1rem 1.1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}

.mb-related__cat {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mb-accent);
}

.mb-related__post-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mb-ink);
	text-wrap: pretty;
	/* Clamp at 3 lines */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms ease;
}

.mb-related__card:hover .mb-related__post-title { color: var(--mb-accent); }

.mb-related__meta {
	margin: auto 0 0;
	padding-top: .35rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	font-size: .78rem;
	color: var(--mb-muted);
}