/*
 * Media band: a full-bleed film or image (a media slot). 16:9 from 768; below, the portrait cut's own ratio — 4:5 or 9:16
 * (tokens §5), set inline from the file — or 4:5. A one-cut band exists only
 * at the width its cut suits. Captioned variant: headline (h1 size) and line (lead) bottom-left over
 * the one CSS gradient scrim (tokens §7: bottom 62%, 0.58).
 */

.media-band {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--ink);
}

/* The film or the image (a media slot, inc/media.php) fills the band. */
.media-band__picture {
	display: block;
	width: 100%;
	height: 100%;
}

.media-band__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-band--captioned::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 62%;
	background: var(--scrim-video);
	pointer-events: none;
}

.media-band__caption {
	position: absolute;
	inset: auto var(--container-pad) calc(var(--space-6) * 0.75);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem;
	color: var(--canvas);
}

.media-band__headline {
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.media-band__text {
	max-width: 32.5rem;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
}

@media (max-width: 767px) {
	.media-band {
		aspect-ratio: var(--media-band-portrait, 4 / 5);
	}

	.media-band--landscape {
		display: none;
	}

	.media-band--captioned::after {
		height: 58%;
	}

	.media-band__caption {
		bottom: 2.25rem;
		gap: 0.75rem;
	}
}

@media (min-width: 768px) {
	.media-band--portrait {
		display: none;
	}
}