/* Platform — How it works. Page-scoped geometry for the fourth reuse of the
 * direct-to-patient structure.
 *
 * Base pattern: patterns/solutions-direct-to-patient.php
 * Base styles:  assets/css/sections/solutions-direct-to-patient.css
 * Comp node:    2640:2962
 *
 * Every rule starts with this page's own hook, so the signed-off Pharma,
 * Product Studio, Clinical Evidence, AI Agents and Lens insertions cannot be
 * reached from here.
 *
 * EVERY SELECTOR IS COMPOUND, and that is load-bearing rather than tidy.
 * infinitus_section_stylesheets() glob()s this directory alphabetically, so
 * platform-*.css enqueues BEFORE solutions-*.css — a single-class page hook
 * ties the base pattern's own rules on specificity and then LOSES on source
 * order. Compounding the page hook with the base section class makes these
 * (0,3,x) and order-independent. The first build of this page shipped single
 * class selectors and the base won silently; the mechanism is documented at
 * the top of solutions-hero-contained-square.css.
 *
 * THE ALTERNATION IS ABSENT FROM THIS FILE ON PURPOSE. The base reverses odd
 * rows above 1024, which puts illustration 1 on the left, and that is what
 * 2640:2971 draws. Clinical Evidence inverts that parity for its own comp;
 * copying its override here would silently mirror all three rows. The base
 * rule is correct for this page, so there is nothing to restate.
 */

.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient {
	/* Declared here rather than reusing another instance's value, so this page
	   does not depend on a different section's node matching by coincidence —
	   even where the numbers happen to agree with Clinical Evidence's, which
	   several below do. */
	--platform-how-it-works-header-measure: 711px;

	/* Board 534629 #185/#186: tighter rows and smaller illustrations. */
	--platform-how-it-works-row-gap: var(--wp--preset--spacing--sp-8);
	--platform-how-it-works-art-width: 400px;

	/* In-row split. The comp's 137px gap (the copy column starts at x=636 and the
	   499-wide aside ends the 1240 container) is NOT set as a fixed gap, and the
	   columns are NOT pinned to 605/499. Both fall out of proportional bases plus
	   the base pattern's own space-between: 48.79% and 40.24% of a 1240 content
	   box are exactly 605 and 499, and what is left between them is 136.

	   Pinning them instead is what the first build of this section did, and it
	   crushes the copy. At 1025 the content box is 865, so a pinned 499 media
	   plus a fixed 137 gap leaves the copy 229px — a ribbon four words wide,
	   while the comp's own measure is 605. Percentages hold the comp's ratio at
	   every width in the band instead of holding its pixels at one. */
	--platform-how-it-works-copy-basis: 48.79%;
	--platform-how-it-works-media-basis: 40.24%;
}

/* Header-to-rows is already the base pattern's section-sm owl, which is the
   comp's 50px (2640:2963 ends at y=419, 2640:2970 starts at y=469). Only the
   row-to-row distance needs setting. */
.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__rows
	> *
	+ * {
	margin-block-start: var(--platform-how-it-works-row-gap);
}

/* The cyan rule rides the heading's own <mark>, painted by underline-grow.css,
   so no bar geometry is needed here: the accent follows the marked sentence
   wherever it lands, at every wrap. The comp draws it as two bars because the
   sentence takes two lines at 1440 — that is the same one mark, wrapped. */
.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__heading {
	max-width: min(var(--platform-how-it-works-header-measure), 100%);
}

/* !important is required, not defensive: the pattern's wp:column blocks carry
   `style="flex-basis:605px"` and `flex-basis:499px` INLINE, and an inline style
   beats any stylesheet without it. Same reason the Clinical Evidence tablet
   block in solutions-direct-to-patient.css spells it out. */
@media (min-width: 1025px) {
	.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
		.solutions-direct-to-patient__copy {
		flex-basis: var(--platform-how-it-works-copy-basis) !important;
		flex-grow: 0;
		flex-shrink: 1;
		max-width: 605px;
	}

	.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
		.solutions-direct-to-patient__aside {
		flex-basis: var(--platform-how-it-works-media-basis) !important;
		flex-grow: 0;
		flex-shrink: 1;
		max-width: 499px;
	}
}

/* Illustrations, not photographs: neutralise the base pattern's photo chamfer,
   radius and cover-crop under this page's class rather than editing the shared
   rule, which three signed-off pages still depend on.

   object-fit: contain, never cover — an illustration is already padded to its
   own frame and must not be cropped. The ratios are each ROW's frame size from
   the comp, not the committed file's pixel dimensions: the exports carry a few
   px of transparent bleed, and contain absorbs that instead of stretching the
   art. Keyed to the row rather than to the image, so duplicating a row in the
   editor keeps the right shape. */
.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__row:nth-of-type(1),
.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__row:nth-of-type(2) {
	--platform-how-it-works-media-ratio: 499 / 500;
}

.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__row:nth-of-type(3) {
	--platform-how-it-works-media-ratio: 499 / 560;
}

.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__photo
	img {
	aspect-ratio: var(--platform-how-it-works-media-ratio);
	border-radius: 0;
	clip-path: none;
	object-fit: contain;
}

/* Mobile: illustration above the copy on every row. The DOM is copy-first, so
   that is column-reverse, and the base's own stacked band handles everything
   else. 767.98px, not 1024.98px — the base stacks from 1024.98 down, and this
   page has no instruction to hold the split through tablet the way Clinical
   Evidence does (BugHerd #87), so tablet takes the base's stacked band.

   ⚑ DESIGN QA — the comp draws 1440 only; tablet and mobile here are the
   base pattern's behaviour plus this reversal, not a mocked layout. */
@media (max-width: 1024.98px) {
	.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
		.solutions-direct-to-patient__row {
		flex-direction: column-reverse;
	}

	.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
		.solutions-direct-to-patient__copy {
		max-width: none;
	}

	.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
		.solutions-direct-to-patient__aside {
		align-self: center;
		max-width: 499px;
	}
}

.infinitus-section--platform-how-it-works.infinitus-section--solutions-direct-to-patient
	.solutions-direct-to-patient__photo {
	max-width: var(--platform-how-it-works-art-width);
	margin-inline: auto;
}