/* Master Module Template — page chrome (banner + label bands).
 * Built by bin/master-module-template/existing-modules/build.php.
 *
 * The banner carries `infinitus-section--master-module-template` purely to
 * satisfy the content sniff in infinitus_enqueue_section_styles(); every rule
 * here is scoped to `.infinitus-mmt-*` so the file is inert on the other pages
 * that sniff also loads it on.
 *
 * ⚑ MEASURED, NOT INSPECTED. Values were sampled off the 1440 render of frame
 * 1274:2, because get_metadata on that frame exceeds the Figma MCP response
 * limit and never returns. The colours landed exactly on DS tokens, which is
 * good evidence the sampling is right, but the two type sizes are inferred from
 * cap heights rather than read off the layer. If the designer's panel says
 * otherwise, the custom properties at the top of each block are the only things
 * to change. */

.infinitus-mmt-banner {
	--mmt-banner-padding-bottom: var(--wp--preset--spacing--sp-10);

	background-color: var(--wp--preset--color--gray-900);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	/* ⚑ DESIGN QA — the comp puts the logo top at y=81, which is the 80px MOBILE
	   navbar height. At the 1440 width it is drawn at, the theme's fixed header is
	   99px, so building the comp's 81 literally tucks the logo under the live
	   header. The token wins, which makes the bar 172px here instead of 154px.
	   Raise it with the designer; the fix if they want the comp's proportions is a
	   smaller bottom padding, not a smaller top one. */
	padding-top: var(--navbar-height, 80px);
	padding-bottom: var(--mmt-banner-padding-bottom);
}

.infinitus-mmt-banner__inner,
.infinitus-mmt-label__inner {
	/* `min()` rather than max-width + padding: padding would sit INSIDE the 1280
	   and push the content edge in by that much, which is what put the comp's 80px
	   logo edge at 89px on the first pass. */
	width: min(1280px, 100% - 2 * var(--wp--preset--spacing--sp-8));
	margin-inline: auto;
}

.infinitus-mmt-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sp-6);
}

.infinitus-mmt-banner__logo {
	/* The partial's intrinsic box is the same mark at the same ratio, so width
	   alone scales it and the height stays honest. */
	width: 191px;
	height: auto;
	flex: 0 0 auto;
	display: block;
}

.infinitus-mmt-banner__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: 300;
	line-height: 1.2;
	text-align: right;
}

.infinitus-mmt-label {
	/* 18px is off the ladder (sp-4 is 16, sp-5 is 20) and load-bearing for the
	   comp's 77px band, so it is held here rather than rounded to a rung that
	   would shift every band by 3-6px over a 24,000px page. */
	--mmt-label-padding-block: 18px;
	--mmt-label-inset: var(--wp--preset--spacing--sp-5);
	/* The two rows sit flush. A 2px gap overshoots the band by 4px, which is 80px
	   of drift over 20 bands. */
	--mmt-label-row-gap: 0px;

	/* Client, 2026-08-25: a rule on BOTH edges, not just the top. The band sits
	   between two specimens, so a single hairline only separated it from the one
	   above and let it run into the one below. Neutral 25 ground, Neutral 200
	   rules — the comp's own values. */
	background-color: var(--wp--preset--color--gray-25);
	border-top: 1px solid var(--wp--preset--color--gray-200);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	padding-block: var(--mmt-label-padding-block);
}

.infinitus-mmt-label__inner {
	/* END ONLY. This was `padding-inline`, which put every band title one sp-5
	   right of the module it labels. Client call, 2026-08-24: no padding-left. The
	   end padding stays as a wrap guard for the note line on a narrow viewport. */
	padding-inline-end: var(--mmt-label-inset);
	display: flex;
	flex-direction: column;
	gap: var(--mmt-label-row-gap);
}

.infinitus-mmt-label__title,
.infinitus-mmt-label__note {
	margin: 0;
	/* The comp types most labels in caps but leaves one mixed ("Homepage HERO").
	   That only survives if the case is literal, so there is deliberately no
	   text-transform and the manifest carries the exact string. */
	text-transform: none;
	letter-spacing: normal;
}

.infinitus-mmt-label__title {
	color: var(--wp--preset--color--gray-600);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: 1.3;
}

.infinitus-mmt-label__note {
	color: var(--wp--preset--color--gray-500);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 400;
	line-height: 1.4;
}

/* The comp is a single 1440 desktop frame. Two things need saying below it: the
   banner stops being one row once the title would collide with the logo, and the
   extra label inset costs real width on a phone. */
@media (max-width: 767.98px) {
	.infinitus-mmt-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--sp-4);
	}

	.infinitus-mmt-banner__title {
		text-align: left;
	}

	.infinitus-mmt-label {
		--mmt-label-inset: 0px;
	}
}

/* The page is ~24,000px of full-bleed sections, several wider than the viewport
   by design (the logo marquee runs to 3096px). CLIP rather than hide, so the page
   never gains a horizontal scrollbar while sticky and fixed descendants — the
   subnav specimen among them — keep working. */
html:has(.infinitus-mmt-label),
body:has(.infinitus-mmt-label) {
	overflow-x: clip;
}

/* CLEAR THE FIXED HEADER. This page's first element is a thin label band, and
   .navbar is `position: fixed` at z-index 101 — so the band rendered entirely
   behind the nav, 97px of label under 99px of header.
 *
 * A regression from removing the page banner (client, 2026-08-21: "remove the bar
 * at the top"). That banner carried `padding-top: var(--navbar-height)` and was
 * what pushed the first band clear; nothing replaced it. Every other page on the
 * site opens with a section whose own top padding does the same job.
 *
 * On .global-main via the same `:has()` page scope as the clip above, so it cannot
 * reach a page that has no label bands. */
html:has(.infinitus-mmt-label) .global-main {
	padding-top: var(--navbar-height, 80px);
}

/* ══ ONE BAND RHYTHM FOR THE WHOLE PAGE ═══════════════════════════════════
 *
 * Client, 2026-08-25, three notes that are all this one thing:
 *   "there is too much space below the module label - this should be CONSISTENT
 *    across all modules"
 *   "single row of logos needs some margin-bottom (or the CTA section label needs
 *    margin top) not enough space between right now"
 *   "this module needs more spacing between it and the next section"  (on Simple
 *    Justified CTA)
 *
 * WHERE THE INCONSISTENCY CAME FROM. The label band sits flush against the
 * specimen below it — measured, the gap is 0 at every one of the 20 bands — so the
 * air under a label was never the label's. It was whatever that specimen's own
 * stored `pt-*` utility happened to be, and across the page those were:
 *
 *   150, 96, 96, 80, 80, 96, 192, 0, 200, 100, 0, 64, 24, 112, 40, 0, 0, 80, 100, 0
 *
 * Twelve different values, a 200px spread. Simple Justified CTA and Subnav stored
 * pt-0/pb-0, which is why those two ran straight into the next label; Regular
 * Block stored 192 both sides, which is why that one looked cavernous.
 *
 * THE FIX IS ONE VALUE, PAGE-SCOPED. On the catalogue page a specimen's band
 * padding is page chrome, not module design — the page exists to show twenty
 * modules in a row, and the comp's own bands are 100px (Vertical Spacing/Medium),
 * so that is the value. Nothing stored changes; this is a stylesheet rule on one
 * page and the revert is deleting it.
 *
 * `:has()` scopes it to a page that has label bands, exactly as the clip and the
 * header-clearance rules above do, so no other page can pick it up. Every
 * specimen is a direct child of .global-main alternating with the bands, which is
 * what makes `> *:not(.infinitus-mmt-label)` an exact match for "every specimen".
 *
 * !important because the stored values are `pt-*` / `pb-*` utility classes at
 * (0,1,0), and .block-logos-simple sets its own `padding-top: section-xl
 * !important`. This selector is (0,3,0), so it wins on specificity among
 * !important declarations rather than on load order — which matters, because the
 * block bundles and this section stylesheet are enqueued by different code paths.
 *
 * PADDING, NOT MARGIN, deliberately — and this is the one place the earlier
 * `gap-xl` note (client, 2026-08-23: "as MARGIN, not padding") is not being
 * contradicted. That note was about two ADJACENT Neutral 900 specimens: padding
 * grew the dark ground itself and welded them into one tall slab. Here every
 * specimen gets the SAME padding, so two adjacent dark specimens are separated by
 * 100 + 100 of their own grounds rather than merged — the slab problem cannot
 * recur, and the 200px between them is the same figure the margin used to supply.
 * Anything that needs the page ground to show through between two specimens
 * instead should say so and go back to a margin. */
html:has(.infinitus-mmt-label) {
	--mmt-band-rhythm: var(--wp--preset--spacing--section-md, 100px);
}

html:has(.infinitus-mmt-label) .global-main > *:not(.infinitus-mmt-label) {
	padding-block: var(--mmt-band-rhythm) !important;
}

/* THE TWO SPACING HELPERS WERE ZEROED, and one is back — at the rhythm's value,
 * not its old one.
 *
 * `.infinitus-mmt-gap-xl` (200px between adjacent specimens) and
 * `.infinitus-mmt-air-xl` (200px above a specimen) both existed to patch
 * individual bands whose stored padding was wrong for this page. The rhythm above
 * supplies both cases for every band at once, so leaving them live would stack
 * 200px on top of it and reintroduce exactly the inconsistency the client asked
 * to remove — the Logos band measured 400px of air above it with both applied.
 *
 * `air-xl` stays a no-op, and the classes stay in the manifest, because removing
 * them means rebuilding the page content; a CSS no-op is reversible in one line
 * and cannot leave the stored markup and the stylesheet disagreeing.
 *
 * WHY THE ADJACENT-PAIR RULE IS LIVE AGAIN. Client, 2026-08-31: the second
 * Testimonial specimen "should have some margin above it to separate it from the
 * one above". That is the exact case the rhythm note above says to come back for
 * — two Neutral 900 specimens with no label band between them, whose 100 + 100 of
 * padding is all dark, so they read as one slab however tall it gets. This is a
 * MARGIN, so the page ground shows through.
 *
 * Only the two Testimonial specimens carry `gap-xl`, so this reaches exactly one
 * element: the second of the pair. `--mmt-band-rhythm`, not the old section-xl,
 * so the white gap is the same 100px figure as every band's padding instead of a
 * second independent number. */
.infinitus-mmt-gap-xl + .infinitus-mmt-gap-xl {
	margin-block-start: var(--mmt-band-rhythm);
}

/* ══ THE SUBNAV TAKES THE RHYTHM AS MARGIN ════════════════════════════════
 *
 * The rule above gives every specimen 100px of padding-block, which is right for
 * a band: the padding is inside the module's own ground and reads as air around
 * its content. The subnav is the one specimen where the module's ground IS the
 * component — a 63px white bar with a Neutral 200 rule along its bottom edge
 * (Figma 1243:2950). Padded, that bar measured 266px tall on this page, so the
 * white ran the full height, the bottom rule sat 100px below the tabs, and the
 * thing stopped reading as a container at all. Client, 2026-08-31: "missing
 * white container."
 *
 * Margin puts the same 100px on the page ground instead, and the bar is the
 * height the node draws. Nothing else on the page wants this — every other
 * specimen has content inside a band, not a band that is the content. */
html:has(.infinitus-mmt-label) .global-main > .sticky-subnav {
	margin-block: var(--mmt-band-rhythm);
	padding-block: 0 !important;
}

.infinitus-mmt-air-xl {
	margin-block-start: 0;
}

/* ══ THE FULL-WIDTH CTA IS FULL WIDTH ═════════════════════════════════════
 *
 * Client, 2026-08-25: "this last version of the CTA, the content is wrong and
 * also it should be a true full-width module."
 *
 * Both halves are done outside this file — the wrapper comes off in the manifest
 * (patterns/solutions-insights.php now renders unwrapped in the CTA band) and the
 * picture is swapped by that band's `copy` map. What is left here is the two
 * things the pattern does on its own page that this page's node does not want.
 *
 * NOT A REVERSAL of "those 2 CTAs that you added should not be full-width",
 * 2026-08-23. That was about the FEATURED card, which node 2366:14344 draws as a
 * 1240 card at x=100 and which is still contained. This one is node 2366:14322,
 * named "Full-width CTA", drawn 1440 edge to edge — the band's `gap` line has said
 * since it was built that it was shown contained on instruction rather than on the
 * comp's. The instruction has changed back.
 *
 * NO SCRIM, because the picture already has one. assets/css/sections/solutions-insights.css
 * paints a left-to-right gradient on the section — Neutral 900 to 25.84%, clear by
 * 68.79% — to keep the Pharma page's copy legible over its own photograph. The
 * comp's picture is a FLATTENED export of node 2366:14323, the whole mask group,
 * so that fade is baked into the pixels; running the CSS scrim over it too darkens
 * the midtones twice and the clinician goes muddy.
 *
 * THE MEDIA ASPECT is the export's own 1440 x 580. The pattern's layer is
 * 1280 / 607 for its own page's node, and since the layer is `width: auto` off
 * that ratio, leaving it would letterbox or crop the picture rather than map it
 * 1:1.
 *
 * Both page-scoped through `:has()`, so the Pharma page keeps its scrim and its
 * ratio. */
html:has(.infinitus-mmt-label) .infinitus-section--solutions-insights::after {
	content: none;
}

html:has(.infinitus-mmt-label) .infinitus-section--solutions-insights {
	--solutions-insights-media-aspect: 1440 / 580;
}

/* A FULL-BLEED PATTERN, CONTAINED. `container infinitus-mmt-contained` is a
 * WRAPPER this page puts around its own copy of a pattern — see $load_pattern in
 * the builder. It is never in the pattern file, so no other page can pick it up,
 * and the pattern's markup stays untouched, which is what keeps the block valid
 * in the editor.
 *
 * Client, 2026-08-25: "those 2 CTAs that you added should not be full-width".
 * Both patterns are full-bleed because their OWN pages' nodes are, while node
 * 1256:687 draws the CTA family as cards in the content column.
 *
 * `.container` does the geometry with no arithmetic here, because both patterns
 * build the same way: the box carrying the dark ground is
 * `position: relative; overflow: clip` with its scrim and picture absolutely
 * positioned against it. Capping that box re-crops the picture, re-spans the
 * scrim, and leaves the pattern's own inner `.container` to inset the copy.
 *
 * So all this adds is the corner. Two selectors, because the two patterns hang
 * their ground on different elements: solutions-insights paints the SECTION,
 * clinical-evidence-featured paints an inner __band. */
.infinitus-mmt-contained > .infinitus-section--solutions-insights,
.infinitus-mmt-contained .clinical-evidence-featured__band {
	border-radius: var(--wp--custom--radius--md);
}

/* NO SURROUND GROUND. Client, 2026-08-25: "remove grey background".
   clinical-evidence-featured paints its section Neutral 100 and insets the dark
   band into it, which is right on its own page but a grey slab around nothing
   here. Not applied to solutions-insights: there the section IS the card. */
.infinitus-mmt-contained > .infinitus-section--clinical-evidence-featured {
	/* Both !important, for two different reasons. The PADDING is an inline style
	   attribute core renders from the block's spacing style, which no stylesheet
	   rule outranks. The GROUND is the `has-gray-100-background-color` preset
	   class, and core generates every one of those WITH `!important` from
	   theme.json — so a plain declaration loses even at higher specificity. */
	background-color: transparent !important;
	padding-block: 0 !important;
}

/* AIR BETWEEN THE CARDS — now the shared band rhythm's job. Client, 2026-08-25:
   "add space between", which this used to do with a section-sm end margin on the
   wrapper.

   The rhythm rule above gives every specimen 100px of block padding, and these
   wrappers are specimens, so the margin is 50px of double-spacing on top of it.
   Zeroed for the same reason the two helpers are: one value for the whole page is
   what the client asked for, and a card in this band should not be spaced
   differently from a module in any other. */
.infinitus-mmt-contained {
	margin-block-end: 0;
}

/* A BAND HEADING THE PATTERN HAS NO SLOT FOR. Client, 2026-08-25, on the
   RESOURCES WRAPPER band: "should have the title with highlight here".
 *
 * Node 2366:14894 draws "The latest from our clinical team" above the card grid
 * with the cyan rule under the first two words. infinitus/resource-grid is a grid
 * and nothing else — the /resources/ page supplies its own headings around it — so
 * this page inserts a core/heading ahead of the block in its own copy, the same
 * shape as the SPOTLIGHT eyebrow below.
 *
 * Styled here rather than left to the theme's h2 because a bare core/heading in a
 * `.container` group renders at body size: this page's chrome stylesheet is the
 * only thing that knows the element exists. Desktop/H2 at the 711 measure, which
 * is the measure every other intro in this comp uses. */
html:has(.infinitus-mmt-label) .infinitus-mmt-band-title {
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: var(--lh-h2);
	margin: 0 0 var(--wp--preset--spacing--sp-10);
	max-width: 711px;
	text-align: left;
}

/* The eyebrow solutions-insights has no slot for. Node 2366:14336 draws SPOTLIGHT
   above the full-width CTA's headline; the pattern was built without one, so this
   page inserts a core/paragraph ahead of the heading in its own copy — see the
   `copy` map on the CTA band in the manifest. Styled here because the element
   exists only on this page, and given the featured card's eyebrow treatment so
   the two read as one idiom in the same band.

   PAGE-SCOPED, NOT WRAPPER-SCOPED. This selector used to start
   `.infinitus-mmt-contained`, which stopped matching the moment the full-width CTA
   lost its wrapper (client, 2026-08-25: "it should be a true full-width module") —
   the eyebrow was still in the markup and silently reverted to body copy. `:has()`
   on the page is the scope that survives the box changing. */
html:has(.infinitus-mmt-label) .solutions-insights__eyebrow {
	font-size: var(--fs-h6);
	font-weight: 500;
	letter-spacing: 0.012em;
	line-height: var(--lh-h6);
	margin: 0 0 var(--wp--preset--spacing--sp-3);
	text-transform: uppercase;
}