/* ContentV5 — "Content - Variation - 01 - Image + Values Overlap" (custom design). */

/* Harvest: water-ripple photo under the 0.8 white overlay = effective image opacity ~0.2. */
.cnt.v5.bg-image {
	--img-bg-o: 0.15;
}

/* Brand watermark bleeding off the section's left edge, behind the masthead column.
   Straight off the comp (Figma 15402-17020 in a 1920 frame): x -36.59 = -1.9%,
   w 465.18 = 24.2%, y 89.52 of a 557.21-tall section = 16%. Top stays a percentage
   because the real section height varies per page.

   Opacity 0.05 is derived, not eyeballed. The comp renders the mark at a flat
   #f2f2f2, and the artwork is the full-colour logomark — so the comp is just that
   logomark ghosted over white: black -> 255 x (1 - a) = 242 gives a = 0.051. The
   faintly yellow pennants in the comp export confirm it (#FED10A at the same alpha).
   ContentV4's 0.2 would be four times too heavy here — it sits on alternate-dark,
   where the same value reads as a near-black shape rather than a blob.

   No overflow:hidden here, unlike .cnt.v4 — the section already clips horizontally
   with overflow-x: clip, and clip (unlike hidden) doesn't create a scroll container,
   so the .half.stcky accessory keeps working. */
.cnt.v5 {
	--wtr-mrk-tp: 16%;
	--wtr-mrk-lt: -1.9%;
	--wtr-mrk-w: 24.2%;
	--wtr-mrk-o: 0.05;
}

/* Below 1280 the section stacks and grows tall, but the mark is pinned to a % of
   WIDTH — so it collapsed to ~100px and read as a stray smudge next to the subhead
   rather than a watermark. Scale it up and push it further off the left edge so it
   sits behind the masthead the way it does on desktop.

   Width is a clamp rather than a flat %, because the two ends of this range pull in
   opposite directions: a constant 70% looks right on a phone, but the section gets
   SHORTER as the viewport widens (the copy reflows to fewer lines), so by 1279 that
   same 70% hangs ~30px past the bottom edge. The 38.75rem cap holds it inside the
   section across the whole range; the 15rem floor stops it shrinking away again on
   the narrowest phones. rem (not px) so it tracks the fluid root size, and therefore
   the heading it sits behind. Measured 336-1279: no bottom spill, no h-scroll. */
@media screen and (max-width: 1279px) {

	.cnt.v5 {
		--wtr-mrk-tp: 8%;
		--wtr-mrk-lt: -12%;
		--wtr-mrk-w: clamp(15rem, 65%, 38.75rem);
	}

}

/* Harvest: About boards' plain foreground image is 768x665, r=10. */
.cnt.v5 picture.cnt-fgi {
	display: block;

	img {
		width: 100%;
		aspect-ratio: 768 / 665;
		object-fit: cover;
	}
}

/* Harvest (Figma 15301-27835): the About board's video poster is a square crop,
   unlike the 768x665 plain foreground image above. */
.cnt.v5 .vid-popup .fg-img-btn img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* The comp shows the poster as a flush photo — no card frame, inset, or drop
   shadow. Zeroing the shared poster padding also pulls the Play CTA's inset back
   to the image edge, since VideoPopup.css derives that inset from this prop. */
.cnt.v5 .vid-popup {
	--vid-popup-fg-pd: 0rem;
}

.cnt.v5 .vid-popup .fg-img-btn {
	background-color: transparent;
	box-shadow: none;
}

/* Default list markers come from the CastleWindows theme (the window-pane mark
   in themes/CastleWindows/theme.css). Only the opt-in .dsh-lst variant is
   restyled here. */

/* Harvest: Bullet List Bullet is a 12x3 accent dash. */
.cnt.v5 .cnt-stl ul.dsh-lst > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 0.75em;
	height: 3px;
	background-color: var(--accent);
}

/* Callout rows pairing the brand logomark with text (About / Service Parent boards).
   Matches either element: the CMS content authors this band as <aside> or <p>. */
.cnt.v5 .cnt-stl :is(aside, p).flx {
	column-gap: 2rem;

	&.bdr_tp {
		border-color: var(--accent);
		border-top-width: 2px;
	}
	> img {
		flex: 0 0 auto;
	}
}

/* Section flair (Figma 15301-27853): a bar pinned to the section's bottom-left
   corner, painted to match the background of the section that FOLLOWS, so it reads
   as the next section pushing up into this one. Comp measures 960/1920 wide (50%)
   and ~23px tall, flush to the corner. Desktop only, per the brief. */
@media screen and (min-width: 1280px) {

	.cnt.v5 {
		--cnt-v5-flr-w: 50%; /* { friendly: 'Content V5 Flair Width' } */
		--cnt-v5-flr-h: 1.33rem; /* { friendly: 'Content V5 Flair Height' } */
		--cnt-v5-flr-clr: transparent; /* resolved from the next section, below */

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: var(--cnt-v5-flr-w);
			height: var(--cnt-v5-flr-h);
			background-color: var(--cnt-v5-flr-clr);
			pointer-events: none;
		}
	}

	/* Raw palette tokens are deliberate here: the flair needs the FOLLOWING
	   section's colour, not a semantic token resolved in this section's context.
	   No match (or no next section) leaves it transparent. */
	.cnt.v5:has(+ [data-colors="primary-light"])   { --cnt-v5-flr-clr: var(--lt-bg); }
	.cnt.v5:has(+ [data-colors="alternate-light"]) { --cnt-v5-flr-clr: var(--lt-alt-bg); }
	.cnt.v5:has(+ [data-colors="primary-dark"])    { --cnt-v5-flr-clr: var(--dk-bg); }
	.cnt.v5:has(+ [data-colors="alternate-dark"])  { --cnt-v5-flr-clr: var(--dk-alt-bg); }

}

/* ContentV5HeaderText — the masthead accessory. It reads as the section's header
   rather than as media hung beside the copy, so it top-aligns with the prose
   column; the shared accessory wrapper's mrg_tp would drop it out of line. */
.cnt.v5 .half:has(> .cnt-v5-hdr) {
	margin-top: 0;
}

/* Stacked, the section has to read masthead -> prose -> CTA, but the DOM is
   [prose half][masthead half] (the desktop split is reversed with f_rev) and the
   CTA is nested two levels down inside the masthead half. Source order alone
   can't produce the mobile order, and neither can column-reverse — the button
   has to LEAVE its half and land after the prose.

   So dissolve the two wrappers with display:contents. That promotes the
   HeaderText block and the CTA to flex items of the stacked row itself,
   alongside the prose half, and `order` places all three. Nothing moves in the
   markup, so desktop is untouched and the other six <ContentV5> layouts — none
   of which use this accessory — never match these rules.

   Scoped on :has(> .half > .cnt-v5-hdr) throughout, mirroring flex.css's own
   :not([class*="sw-"]) opt-out guard. */
@media screen and (max-width: 1279px) {

	.cnt.v5 [class*="flx-at-1280"]:not([class*="sw-"]):has(> .half > .cnt-v5-hdr) {
		display: flex;
		flex-direction: column;

		/* The row carries f_t (align-items: flex-start), which in a column shrinks
		   items to their content width. flex.css's `> :not(...)  { width: 100% }`
		   rescues real children, but display:contents doesn't change selector
		   matching — the promoted grandchildren are still DOM grandchildren, so
		   that rule never reaches them. Stretch instead; the CTA keeps its own
		   width because .max-cnt pins it to max-content. */
		align-items: stretch;

		/* f_gp only sets column-gap; mrg_tp (zeroed above) used to space the stack. */
		row-gap: var(--sp-vm-clc);
	}

	.cnt.v5 .half:has(> .cnt-v5-hdr),
	.cnt.v5 .cnt-v5-hdr {
		display: contents;
	}

	/* Masthead ahead of the prose half (order 0), CTA after it. */
	.cnt.v5 .cnt-v5-hdr > * {
		order: -1;
	}

	.cnt.v5 .cnt-v5-hdr > .btn {
		order: 1;
	}

}