/*
 * pm-video — the architects page's video block (WO-36, frame 76:382).
 *
 * Source frame: docs/design/frames/36-architects.json#video — a full-width
 * band, padding 96 all sides, whose content is one media box: the video
 * still with the word "Magnific", no controls and no play button drawn.
 *
 * Compiled to assets/css/components/video.css by src/build-tokens.mjs,
 * which substitutes the breakpoint markers (a comment holding `@bp <name>`)
 * with the pixel value from tokens/tokens.json. Never type a breakpoint
 * width here. Every colour is a --pm-color-* token; no hex value and no
 * literal breakpoint width may appear in this file.
 */

/*
 * The section: a full-width band, padding 96 all sides
 * (36-architects.json#video.layout). The scaffold stylesheet (style.css)
 * constrains body to a centred 72rem column; the section escapes that box
 * with the same full-bleed technique as the services section
 * (services.css). The background is not painted: the page's Blush Linen
 * (the scaffold body's surface) shows, as in the frame.
 */
.pm-video {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding: var(--pm-space-24);
}

/*
 * The media box: full width inside the padding (36-architects.json#video
 * .layout — "content fills"). Below laptop the box holds the frame's
 * 1248/360 ratio; the 200px floor is developer judgement (MISTAKES.md
 * §C7 — at 375px the ratio alone would give a ~94px box, which reads as
 * a broken image rather than a video slot; the work order's §C7 clause
 * sets the floor). overflow: hidden clips the cover-fitted media to the
 * box.
 */
.pm-video__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1248 / 360;
	min-height: 200px;
	overflow: hidden;
}

/*
 * ≥ laptop: the provisional height — 360px at the 1440 frame
 * (36-architects.json#video.decision), full width inside the 96 padding
 * (1248 at 1440).
 *
 * TODO(open-question): the 360px height is provisional — client feedback
 * point 7 asks for a smaller block so it does not read as the end of the
 * page, and Eleonor owes the final height (ticket 36 open question).
 * Reversing it is this one value.
 */
@media (min-width: 1024px) {
	.pm-video__media {
		aspect-ratio: auto;
		height: 360px;
	}
}

/*
 * TODO(open-question): the extract measures the 1440 frame only — its 96
 * side padding at 375px would leave a 183px media box, which reads as a
 * broken image rather than a video slot. MISTAKES.md §C7. Developer
 * judgement, matching the intro's and the partners strip's step: below
 * tablet the side padding becomes 24px (--pm-space-6) so the sections'
 * edges stay aligned down the page; the 96 block padding stands. Owner:
 * the designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-video {
		padding: var(--pm-space-24) var(--pm-space-6);
	}
}

/*
 * The media layers: poster beneath, video above it — the hero's paint
 * order (hero.css), cover-fitted to the box.
 *
 * Two-class selector on purpose (MISTAKES.md §C15): Elementor's own
 * `.elementor img { height: auto; max-width: 100% }` is (0,1,1) and would
 * beat a lone `.pm-video__poster` (0,1,0) — the poster would render at
 * natural size. This selector is (0,2,0) and wins.
 */
.pm-video .pm-video__poster,
.pm-video .pm-video__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Reduced motion (WO-36 AC 2): the video layer is withdrawn and the
 * poster stands in — the hero's WO-27 pattern. The element itself never
 * plays either: the markup carries no autoplay attribute and the theme's
 * video.js module calls play() only when the visitor allows motion, and
 * pause() when the preference flips (the WO-36 fix round — an autoplay
 * attribute kept playing behind display:none in WebKit and Firefox).
 */
@media (prefers-reduced-motion: reduce) {
	.pm-video__video {
		display: none;
	}
}