/* Why Infinitus §1 — Hero. Figma node 2640:4402 in frame 2640:4400 ("Why
 * Infinitus, r3"), file SO8J0OKWo5wIM44YgqbgG0; handoff
 * docs/Infinitus-Why-Infinitus-Dev-Handoff.md §1. Issue #921.
 *
 * Base pattern: patterns/solutions-hero.php (fifth consumer)
 * Base styles:  assets/css/sections/solutions-hero.css
 * Markup:       bin/why-infinitus-page/content/hero.php
 *
 * AN OVERRIDE FILE. Every selector compounds the page hook only the inserted
 * Why Infinitus copy carries (.infinitus-section--why-hero) with the base
 * section class, so it outweighs the base's one-class rules regardless of
 * enqueue order, and the base stylesheet — shared with ten other pages — is
 * not edited. Where a rule has to beat the base's tablet block, which already
 * costs two classes for its :not(), a third class (.infinitus-section, also on
 * the wrapper) is added so the win is on specificity rather than on the
 * alphabetical glob order of this directory.
 *
 * WHAT THE COMP SHARES WITH THE BASE, and so is inherited untouched: the
 * Neutral 100 ground, the eyebrow/H1/lede type and rhythm, the fixed-header
 * clearance, the top fade (Neutral 25 → transparent at 23.198%, node
 * 2640:4406's first stop list) and the horizontal scrim (#F2F2F2 from 11.007%
 * to 62.014%, its second). Those four gradient numbers are the base's own
 * custom properties, and the node's values are identical to Pharma's, so no
 * override is needed for either.
 *
 * WHAT DIFFERS — three things, all measured on the 1440 canvas:
 *
 *   1. The copy measure. 2640:4409 ("Container") is 711px, both headline and
 *      lede, against the base's 810 / 698. Same call as Lens.
 *   2. The glow. The node's Ellipse 93 (2640:4407) is 1028×1029 at (−39, −150)
 *      in the hero frame, a larger circle than Pharma's 945, and its blur
 *      export scales differently, so it ships as its own SVG under
 *      assets/images/why/hero/ rather than resizing the Pharma one.
 *   3. The photograph's framing. The base fills the section with `cover`,
 *      which ties the picture's drawn width to the viewport; the node draws
 *      it 1876.578px wide on a 1440 hero — 1.303× the section — flush left,
 *      its top 196.75px above the section's top (−295.75 in the hero frame,
 *      which itself sits under the 99px nav), overflowing on the right and
 *      the bottom. Under cover-at-section-width the two people land
 *      three-quarters as large and ~200px further left, across the headline.
 *      So the image box is widened to the comp's proportion and cover is kept
 *      as the safety net; see the desktop block for the arithmetic.
 *
 * Colours are absent on purpose: ground, eyebrow, headline and lede colours
 * are palette presets on the blocks. The scrim value lives in the base.
 *
 * ⚑ DESIGN QA — no CTA: see content/hero.php.
 *
 * ⚑ DESIGN QA — the hero is shorter than the comp's 817px. The comp's 150px
 * block padding is the theme's `section-lg` rung, which has been 112.5px since
 * the 2026-08-31 rhythm cut (docs/agents/section-patterns.md), so the section
 * renders 742px at 1440 with this copy. Not corrected with a min-height: the
 * cut is deliberate and applies to every section on every page.
 *
 * ⚑ DESIGN QA — tablet and mobile are not mocked (handoff: "build from this
 * spec + DS"). The handoff's "copy above, background group below or hidden"
 * is what the base already does below 768; from 768 up the base keeps the
 * desktop composition over an opaque plateau (BugHerd #144, all consumers).
 * This file only chooses which part of the photograph each band shows, so
 * the two people stay the subject and clear the copy plateau.
 */

.infinitus-section--why-hero.infinitus-section--solutions-hero {
	/* Node 2640:4409, 2640:4412, 2640:4413: 711 wide, all three. */
	--solutions-hero-title-measure: 711px;
	--solutions-hero-lede-measure: 711px;

	/* Node 2640:4407, exported with its own blur padding (inset −37.21% each
	   side of a 1028×1029 ellipse → 1793.8×1794.8). Position is the ellipse's
	   centre in section coordinates minus half the export: the ellipse sits
	   at (−39, −150) in the hero frame, the frame starts 99px below the
	   section's top, so the centre is (475, 463.5). */
	--why-hero-glow-width: 1793.8px;
	--why-hero-glow-height: 1794.8px;
	--why-hero-glow-x: -421.9px;
	--why-hero-glow-y: -433.9px;

	/* Node 2640:4405 — 1876.578 / 1440 of the section's width, flush left. */
	--why-hero-media-width: 130.318%;
	/* 196.75px above the section's top on the 1440 canvas, kept proportional
	   to the section width. vw rather than a percentage because the offset is
	   applied through object-position, whose percentages resolve against the
	   box's HEIGHT; the base already spends 62vw on the scrim and accepts the
	   same scrollbar-width error (~2px on Windows, none on macOS). */
	--why-hero-media-top: calc(-100vw * 196.75 / 1440);
	/* The same 196.75px as a share of the overflow the comp has to crop:
	   1251.205 − 817 = 434.2 of the picture's drawn height do not fit the
	   comp's 817px hero, and the crop takes 45.3% of that off the top. This
	   is the value that never gaps, whatever height the copy gives the
	   section — see the desktop block. */
	--why-hero-media-overflow-focus: 45.3%;
}

/* The comp's glow, at desktop only — the base paints its own Pharma-sized
 * glow here, and the position is two hard pixel offsets measured on the 1440
 * canvas, so the base already drops the layer below 1025. The two gradients
 * are restated rather than re-derived: a background-image list cannot be
 * overridden one layer at a time. The stops read the base's own properties,
 * so a retune of the shared scrim still reaches this page. */
@media (min-width: 1025px) {
	.infinitus-section--why-hero.infinitus-section--solutions-hero::before {
		background-image:
			url("../../images/why/hero/hero-glow.svg"),
			linear-gradient(
				180deg,
				var(--wp--preset--color--gray-25) 0%,
				color-mix(in srgb, var(--wp--preset--color--gray-25), transparent 100%) var(--solutions-hero-fade-top-end)
			),
			linear-gradient(
				90deg,
				var(--solutions-hero-scrim) var(--solutions-hero-scrim-start),
				color-mix(in srgb, var(--solutions-hero-scrim), transparent 100%) var(--solutions-hero-scrim-end)
			);
		background-position:
			var(--why-hero-glow-x) var(--why-hero-glow-y),
			0 0,
			0 0;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-size:
			var(--why-hero-glow-width) var(--why-hero-glow-height),
			auto,
			auto;
	}

	/* The comp's framing. The picture box is widened to 130.318% of the
	 * section so that, at the section's height, `cover` has no horizontal
	 * slack and scales the photograph to exactly the width the comp draws it
	 * at — 1876px at 1440, proportional elsewhere. The figure clips the
	 * overflow on the right; the section's own `overflow: clip` would too,
	 * but the figure is the box the base gives `height: 100%`, and clipping
	 * there keeps the layer's box honest for anything that measures it.
	 *
	 * Vertical crop: max() of two offsets, both negative.
	 *   --why-hero-media-top      the comp's offset, proportional to width
	 *   --why-hero-media-overflow-focus   45.3% of (box − image) height
	 * A percentage in object-position is a share of the overflow, so it can
	 * never leave a gap at the bottom; the vw offset can, whenever the copy
	 * makes the section taller than the comp's 817 minus what the picture
	 * has to spare. max() picks the comp's offset when it fits and the
	 * gap-free one when it does not: at 1440 the section is 742px tall and
	 * both resolve near −197, so the comp wins; at 1025 with a five-line
	 * headline the section is ~900px, cover has already scaled the picture
	 * to fit it vertically, and the percentage term resolves to 0.
	 *
	 * Studio's hero (solutions-hero.css, --studio-hero) positions its image
	 * the same way for the same reason — a crop object-position alone cannot
	 * express. */
	.infinitus-section--why-hero.infinitus-section--solutions-hero .solutions-hero__image {
		overflow: hidden;
		position: relative;
	}

	.infinitus-section--why-hero.infinitus-section--solutions-hero .solutions-hero__image img {
		height: 100%;
		inset-block-start: 0;
		inset-inline-start: 0;
		max-width: none;
		object-fit: cover;
		object-position: 50% max(var(--why-hero-media-overflow-focus), var(--why-hero-media-top));
		position: absolute;
		width: var(--why-hero-media-width);
	}
}

/* Tablet band: the base restores the full-bleed layer at section width, over
 * an opaque scrim plateau that runs to 62% − 46px of the section. `cover`
 * draws this 1.5:1 photograph ~1200px wide in a ~768×800 box, and the base's
 * 60% desktop focus centres the two people under the plateau. The subject
 * sits at 49–66% of the picture's width; a 15% focus walks the window left
 * so they land just right of the plateau's edge at 768 and stay in frame at
 * 1024. Three classes: the base's tablet rule is two (one plus its :not()),
 * and this must win on specificity, not on the glob order of this directory. */
@media (min-width: 768px) and (max-width: 1024.98px) {
	.infinitus-section.infinitus-section--why-hero.infinitus-section--solutions-hero {
		--solutions-hero-media-focus: 15%;
	}
}

/* Phone band: the bottom-pinned near-square window. The base's 100% pins the
 * right edge, which framed the Pharma clinician; here the two people are at
 * 49–66% of the width, and a 71% focus puts them in the middle of a 359px
 * window at 390 (538px drawn, 179px of slack, 127px of it spent on the
 * left). */
@media (max-width: 767.98px) {
	.infinitus-section.infinitus-section--why-hero.infinitus-section--solutions-hero {
		--solutions-hero-media-focus: 71%;
	}
}