/**
 * "Between" section: a 16:9 card that straddles the seam between two
 * neighboring full-width rows (about 60% over the previous row, 40% over the
 * next), e.g. the homepage hero -> card -> white section.
 *
 * The overlay takes up zero net layout height. Its negative margins pull it
 * over both neighbors, and each neighbor pays for its share with padding so
 * its own content is never covered and its background paints behind the card:
 *
 *   previous row  padding-block-end   = 60% of the card height
 *   overlay       margin-block-start  = -60%, margin-block-end = -40%
 *   next row      padding-block-start = 40% of the card height
 *
 * Card height is derived from its width (aspect-ratio 16/9). Percentages in
 * min() resolve against the parent's content width for all three siblings, so
 * the neighbors' own widths don't matter. Caveat: percentages on a grid item
 * resolve against its grid area, so the neighbors must not be grid items.
 *
 * Neighbor padding on those two sides uses !important because WP writes row
 * padding from the spacing panel inline, which would otherwise win. Authors
 * add extra space on nested elements instead.
 *
 * Overridable: --between-max (card max width), --between-gutter (row inline
 * padding), --between-top-ratio (share of the card over the previous row),
 * --between-controls-height (extra height under the 16:9 media, e.g. for video
 * controls; total card height = 16:9 + this, and the 60/40 split applies to
 * the whole card). Set it on :root or a shared ancestor, not on the overlay
 * element: the neighboring rows read it too and can't see a value set there.
 *
 * Keep identical with the Astro mirror (backend/src/styles/between-16x9-section.css).
 */

:root {
	--between-max: 60.625rem; /* 970px, fuse-page-section's own max-width */
	--between-gutter: var(--fuse-spacing-1, 0.5rem);
	--between-top-ratio: 0.7; /* 70% over previous row, 30% over next */
	--between-controls-height: 0px;
	--between-w: min(100% - 2 * var(--between-gutter), var(--between-max));
	--between-h: calc(var(--between-w) * 9 / 16 + var(--between-controls-height));
	--between-top: calc(var(--between-h) * var(--between-top-ratio));
	--between-bottom: calc(var(--between-h) * (1 - var(--between-top-ratio)));
}

/* 12-col stack, 10-col wide (offset 1): same math, 10/12 of the width. */
.between-16x9-section[class~="10-col-variant"] {
	--between-w: calc(
		min(100% - 2 * var(--between-gutter), var(--between-max)) * 10 / 12
	);
}

.between-16x9-section {
	/* The host is a fuse-page-section, which pads itself on all sides. That
	   padding would sit between the host edge and the card and skew the
	   60/40 split, so zero it: the host box becomes exactly the card box. */
	--section-spacing-vertical: 0;
	--section-spacing-horizontal: 0;

	/* One-cell grid: the child fills the 16:9 content box even though the
	   host's height comes from aspect-ratio (percent heights don't resolve
	   against it). */
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	position: relative;
	z-index: 1;
	/* content-box so aspect-ratio sizes the 16:9 media area and the controls
	   padding is added on top of it. */
	box-sizing: content-box;
	width: var(--between-w);
	max-width: none; /* --between-max is the cap, so the math and the box agree */
	margin-inline: auto;
	margin-block: calc(var(--between-top) * -1) calc(var(--between-bottom) * -1);
	aspect-ratio: 16 / 9;
	min-height: 0;
	padding: 0 0 var(--between-controls-height);
}

/* The side gutter already comes from --between-w, so cancel the
   .mobile-padding utility's own 8px padding, which would shrink the media
   inside the 16:9 box. Two classes beat that utility's one. */
.between-16x9-section.mobile-padding {
	padding: 0 0 var(--between-controls-height);
}

/* The card content (image, video or embed) fills the 16:9 box; crop rather than grow. */
.between-16x9-section > * {
	width: 100%;
	min-height: 0;
	margin: 0;
}

.between-16x9-section img,
.between-16x9-section video,
.between-16x9-section iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Videos can have controls and often aren't exactly 16:9: show the whole frame
   rather than cropping it. */
.between-16x9-section video {
	object-fit: contain;
	background: #000;
}

/* Previous row: room for the card's top share. */
:has(+ .between-16x9-section) {
	padding-block-end: var(--between-top) !important;
}

/* Next row: room for the card's bottom share; cancel WP block-gap margin. */
.between-16x9-section + * {
	padding-block-start: var(--between-bottom) !important;
	margin-block-start: 0 !important;
}