/* article-photo — Figma 243:762: the featured photo, full width, 16:9, from the
   top of the page (the header floats over it). The title band that follows
   overlaps its bottom edge. Tokens only (R8), logical props (R9). */

.article-photo {
	/* Figma: the band starts 131px above the 1080px photo's bottom (131 of 1920
	   wide) → scales with the photo. Token proposal: --space-photo-overlap. */
	--article-photo-overlap: 6.823vw; /* lint-ok: 131/1920 — overlap that scales with the photo */
	aspect-ratio: 16 / 9; /* the shape lives on the container (R7) */
	overflow: hidden; /* crop mask for the cover image — decorative */
	margin-block-end: calc(-1 * var(--article-photo-overlap));
}

.article-photo__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Phones: 16:9 leaves a sliver under the sticky bar — a taller crop reads. */
@media (max-width: 767px) { /* bp: --bp-md */
	.article-photo {
		aspect-ratio: 4 / 3;
	}
}

/* The title band on an article (Figma 243:775): 32px bar padding, 24px gaps,
   and the two gold lines keep their 350px — the two-line title takes the rest. */
.article .page-title-band {
	gap: var(--space-6);
	padding-block: var(--space-8);
}

.article .page-title-band__line {
	flex: none;
	inline-size: clamp(var(--space-16), 18.23vw, 21.875rem); /* lint-ok: 350 of 1920 — scales with the bar, capped at the Figma length */
}