/*!
 * EFLL Site Design - V2 site-wide refinements (v2-site.css)
 * Loaded after inner.css only when V2 is active (body.efll-v2). Every rule is scoped
 * body.efll-sd.efll-v2 .efll-inner (0-4-1+) so it out-ranks the matching inner.css rule (0-3-1+).
 *
 * A. Photo heroes (.ei-hero--photo, image in --ei-hero-img)
 *    Most hero images are 1920x670 composites from the old site: solid navy on the left third, a
 *    diagonal ORANGE stripe (~60px, from x~27% at the bottom to x~41% at the top) and a photo on
 *    the right. The stripe is off-brand, so:
 *    1. The section itself no longer paints the image - only navy gradients.
 *    2. The photo is painted by ::before, a box pinned to the right edge whose image is anchored
 *       right and sized so that only the right ~54% of a 1920x670 composite (x >= 46%, i.e. past
 *       the stripe's top end at ~44%) can ever be inside the box:
 *         image height >= box width x (670/1920) / 0.54  =  box width x 0.646
 *       expressed as  background-size: auto max(100%, <box width in vw> x 0.646 + slack).
 *       A second "cover" layer underneath only shows if an image is not a wide composite
 *       (e.g. a portrait photo) and would otherwise leave a gap.
 *    3. Belt and braces: the photo is rendered as a navy duotone (luminosity blend over navy), so
 *       even a sliver of stripe could only ever show as navy-blue, never orange.
 *    4. Navy gradients fade the photo into the text side (text keeps AA contrast); a fine gold
 *       diagonal hairline (::after, which also keeps the gold bottom sweep) echoes the old stripe.
 *
 * B. Readable measure: running text in full-width sections is capped at ~68ch (prose paragraphs
 *    and lists, section intros, ledes, CTA text, FAQ answers). The cap is put on the TEXT children,
 *    never on containers, so split layouts, card grids, forms and raw widgets keep their width.
 */

/* =============================================================================================
 * A. Photo hero
 * ============================================================================================= */
body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo {
	/* photo box width (share of the hero) and the matching minimum image height (see header) */
	--v2-photo-w: 100%;
	--v2-photo-minh: 68vw;
	--v2-duo: #1f3a5f;          /* duotone base: navy-blue hue the photo is tinted to */
	background-color: #08111d;
	background-image:
		linear-gradient(90deg, var(--ei-gold) 0%, rgba(212, 167, 44, 0) 100%),
		radial-gradient(ellipse 80% 70% at 85% 0%, rgba(42, 68, 103, .45) 0%, rgba(8, 17, 29, 0) 70%),
		linear-gradient(180deg, #050b14 0%, #08111d 100%);
	background-size: min(320px, 40%) 1px, auto, auto;
	background-position: 0 100%, 0 0, 0 0;
	background-repeat: no-repeat;
}
/* the photo layer */
body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--v2-photo-w);
	background-color: var(--v2-duo);
	background-image:
		/* legibility: dark at the bottom where the text sits, lighter at the top */
		linear-gradient(180deg, rgba(5, 11, 20, .62) 0%, rgba(5, 11, 20, .74) 30%, rgba(5, 11, 20, .92) 62%, rgba(5, 11, 20, .97) 100%),
		var(--ei-hero-img, none),
		var(--ei-hero-img, none);
	background-size: auto, auto max(100%, var(--v2-photo-minh)), cover;
	background-position: 0 0, 100% 50%, 100% 50%;
	background-repeat: no-repeat;
	background-blend-mode: normal, luminosity, luminosity;
	pointer-events: none;
}
/* the gold bottom sweep moved into the section background above; ::after is free for the hairline */
body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::after {
	content: none;
}

@media (min-width: 768px) {
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::before {
		background-image:
			linear-gradient(180deg, rgba(5, 11, 20, .55) 0%, rgba(5, 11, 20, .66) 35%, rgba(5, 11, 20, .9) 70%, rgba(5, 11, 20, .96) 100%),
			linear-gradient(90deg, rgba(5, 11, 20, .6) 0%, rgba(5, 11, 20, .2) 100%),
			var(--ei-hero-img, none),
			var(--ei-hero-img, none);
		background-size: auto, auto, auto max(100%, var(--v2-photo-minh)), cover;
		background-position: 0 0, 0 0, 100% 50%, 100% 50%;
		background-blend-mode: normal, normal, luminosity, luminosity;
	}
}

/* Desktop: text on navy at the left, duotone photo on the right ~60%, gold hairline between. */
@media (min-width: 1024px) {
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo {
		--v2-photo-w: 60%;
		--v2-photo-minh: 40vw;   /* 60vw x 0.646 = 38.8vw, plus slack */
	}
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::before {
		background-image:
			/* darker towards the text side, darker at the bottom where lede and buttons sit */
			linear-gradient(90deg, rgba(8, 17, 29, .62) 0%, rgba(8, 17, 29, .3) 50%, rgba(8, 17, 29, .12) 100%),
			linear-gradient(180deg, rgba(5, 11, 20, .35) 0%, rgba(5, 11, 20, 0) 24%, rgba(5, 11, 20, .1) 48%, rgba(5, 11, 20, .78) 76%, rgba(5, 11, 20, .92) 100%),
			var(--ei-hero-img, none),
			var(--ei-hero-img, none);
		background-size: auto, auto, auto max(100%, var(--v2-photo-minh)), cover;
		background-position: 0 0, 0 0, 100% 50%, 100% 50%;
		background-blend-mode: normal, normal, luminosity, luminosity;
		/* the photo dissolves into the section's own navy: no seam at the box edge */
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 42%);
		mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 16%, #000 42%);
	}
	/* fine gold diagonal hairline at the photo's leading edge, fading out before the text zone */
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: auto;
		left: calc(100% - var(--v2-photo-w) + 6%);
		width: 1px;
		height: 42%;
		background: linear-gradient(180deg, rgba(230, 194, 90, .8) 0%, rgba(230, 194, 90, .45) 50%, rgba(230, 194, 90, 0) 100%);
		transform: skewX(-21deg);
		transform-origin: 0 0;
		pointer-events: none;
	}
	/* hero with an aside (rating/stats panel): the panel sits on the photo; keep it glassy */
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo .ei-hero-aside {
		background: rgba(5, 11, 20, .78);
	}
}

/* Wide screens: the hero gets taller with the viewport (inner.css clamps it at 680px), so the
 * same 40vw floor still holds; nothing else to change. */

/* Text on the photo hero: a touch more shadow for the lede and eyebrow, which sit lower. */
body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo :is(.ei-lede, .ei-eyebrow) {
	text-shadow: 0 1px 14px rgba(5, 11, 20, .55);
}

@media print {
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::before,
	body.efll-sd.efll-v2 .efll-inner .ei-hero.ei-hero--photo::after { display: none; }
}

/* =============================================================================================
 * B. Readable measure (~68 characters per line)
 * --v2-measure is 31em, not 68ch: Barlow's "0" (what `ch` measures) is ~0.63em wide, so 68ch
 * would be ~770px at 18px = 115-125 characters of real text per line, no narrower than inner.css's
 * 780px. 31em measured on samples 895, 897, 905, 907 and 2166 at 1440px gives a median of 65-71
 * characters per line (max 74). Unregistered custom properties resolve `em` where they are used,
 * so the measure scales with each element's own font size (lede 20px -> 620px, prose 18px ->
 * 558px, FAQ answers 17px -> 527px). To widen or narrow, change this one value.
 * ============================================================================================= */
body.efll-sd.efll-v2 .efll-inner { --v2-measure: 31em; }

/* Running-text children carry the measure (never the containers). */
body.efll-sd.efll-v2 .efll-inner :is(.ei-prose, .ei-faq-a) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6):where(:not(:has(form, iframe, table, video, img, .wpforms-container, .ei-raw))) {
	max-width: var(--v2-measure);
}
body.efll-sd.efll-v2 .efll-inner .ei-prose > :is(h2, h3, h4) { text-wrap: balance; }

/* A text-editor block that carries a widget (e.g. the Trustindex review grid on 1897, a <pre>/<div>
 * shortcode output, a table or an embed) is no longer squeezed to 780px: it gets the full wrap. */
body.efll-sd.efll-v2 .efll-inner .ei-prose:has(> :is(div, pre, table, iframe, form, video, section)) { max-width: none; }

/* Section intros, ledes, CTA text: never wider than before (720px), never past the measure. */
body.efll-sd.efll-v2 .efll-inner :is(.ei-lede, .ei-sec-intro, .ei-cta-text) {
	max-width: min(720px, var(--v2-measure));
}

/* Centred contexts (CTA band): capped text blocks stay centred under the heading. */
body.efll-sd.efll-v2 .efll-inner .ei-cta :is(.ei-prose, .ei-faq-a) > * { margin-inline: auto; }