/**
 * Full Width Image
 *
 * The section is the .media box. .page-builder is a bare section at body width, so a
 * module section is already viewport-wide — no breakout, no negative margin.
 */

.module.full-width-image {
	aspect-ratio: 1440 / 740;
	overflow-x: clip;
	overflow-y: visible;
}

.page-builder > .module.full-width-image:last-child {
	margin-bottom: 0;
}

.module.full-width-image img {
	object-position: top center;
}

/* script.js reads the file's first frame and publishes the height that clears the black bands a
   16/9 export of this band's footage carries. Unmeasurable — a cross-origin file, or one with no
   bands — leaves the frame filling the band exactly, which is what it did before. */
.module.full-width-image.background video {
	height: var(--band-video-height, 100%);
	top: 50%;
	translate: 0 -50%;
}

.module.full-width-image .watermark {
	bottom: var(--watermark-y, calc((740 + 174 - 1277 * 434 / 990) / 740 * 100%));
	color: var(--watermark-color);
	left: var(--watermark-x, calc(81 / 1440 * 100%));
	opacity: .05;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * -80px), 0);
	width: calc(1277 / 1440 * 100%);
	z-index: -1;
}

.module.full-width-image .watermark svg {
	display: block;
	width: 100%;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* The band's own ratio is 1440/740, which on a phone is a 200px strip. The floor holds it open
	   and the ratio takes over again as soon as it asks for more; the crop is centred and clipped,
	   not fitted. */
	.module.full-width-image {
		min-height: 250px;
	}

	.module.full-width-image img {
		object-position: center;
	}

	/* A third of the travel: the mark is drawn against a band a third the height here, so the rise
	   that frames it on a desktop carries its own foot up into view. It starts where it always
	   did — the multiplier is what changes, and at rest the multiplier is nothing. */
	.module.full-width-image .watermark {
		transform: translate3d(0, calc(var(--jazzy-progress, 0) * -26px), 0);
	}

	/* Held to the floor the band is shorter than its own ratio asks for, so the crop is driven by
	   the height and fits the whole frame. Where the file could not be read, this is the standing
	   guess at what its bands cost. */
	.module.full-width-image.background video {
		height: var(--band-video-height, 112%);
	}

	/* A provider's frame cannot be cropped the way `object-fit` crops a file — fitted to a box this
	   shape it letterboxes itself. Sized to cover the box instead, centred on it, and the section
	   clips what runs past. */
	.module.full-width-image.background iframe {
		aspect-ratio: 16 / 9;
		height: auto;
		left: 50%;
		/* The global cap on a frame's width is what a fitted embed wants and the opposite of what
		   a covering one does: at 100% it can only ever be as wide as the box it is filling. */
		max-width: none;
		top: 50%;
		translate: -50% -50%;
		/* Wide enough that its own 16/9 stands at least as tall as the floor below it — 250 of
		   height needs 444 of width — and the section clips the rest. Anything narrower and the
		   player letterboxes itself inside the frame, which is the black band. */
		width: max(100%, calc(250px * 16 / 9));
	}

}

.module.full-width-image .pause {
	bottom: var(--text-spacing-small);
	position: absolute;
	right: var(--text-spacing-small);
	z-index: 1;
}

.module.full-width-image .pause .icon-play,
.module.full-width-image .pause[aria-pressed="true"] .icon-pause {
	display: none;
}

.module.full-width-image .pause[aria-pressed="true"] .icon-play {
	display: block;
}