/**
 * Still Water Article header (sw-post-header): Figma "Article header" at 1440, 834 and 390.
 *
 * Mist. Padding 80 / 56 / 32. The breadcrumb (14/20, the link underlined, "/" 12 apart, 44
 * tall), then 24 under it (20 on phones) the text block, 792 wide: label (12/16 muted), title
 * (display 104/124; 56/60 on tablet and phones), lead (20/30 muted; 18/28), byline (14/20),
 * 16 apart. 24 under it (20 on phones) the photo (16:9, radius 12) and its caption (14/20
 * muted) 24 under that (20 on phones).
 */

.sw-pheader__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sw-pheader__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	min-height: 44px;
}

.sw-pheader__crumb {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sw-heading);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sw-pheader__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 792px;
}

.sw-pheader__byline {
	color: var(--sw-heading);
}

.sw-pheader__figure {
	margin: 0;
}

.sw-pheader__photo {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--sw-radius);
	background: var(--sw-c-line);
}

.sw .sw-pheader__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.sw-pheader__caption {
	margin-top: 24px;
}

@media (max-width: 1024px) {
	.sw-pheader__title {
		font-size: var(--sw-fs-display-sm);
		line-height: var(--sw-lh-display-sm);
	}
}

@media (max-width: 767px) {
	.sw-pheader__inner {
		gap: 20px;
	}

	.sw-pheader__caption {
		margin-top: 20px;
	}
}