/* Homepage — Demo (patterns/demo.php).
 *
 * Styles the CORE blocks of the section only. The cards themselves are the
 * infinitus/audio-transcript-player block and carry their own chrome in their
 * own stylesheet, so they still look right anywhere else they are used.
 *
 * Geometry is Figma 2659:12700 (default) and 2659:12953 (active), drawn at
 * 1440. Where the comp and a theme token disagree by a hair the TOKEN wins and
 * the comp value is named in the comment beside it.
 *
 * The accent under "Demo" is the shared growing underline — nothing here paints
 * it. assets/css/underline-grow.css owns the bar and the <mark> carries
 * `.infinitus-underline-grow` to opt in; only its two measurements are set
 * below, as every other consumer also does. */

.infinitus-section--demo {
	/* Comp 50px, three times over: heading to grid, card to title, and the
	   card's own inner padding (which the player block reads from the same
	   token). section-sm is exactly 50px at desktop and steps down to 32px on
	   the way to mobile, which is the "scale the padding down" the comp never
	   drew. */
	--demo-gap: var(--wp--preset--spacing--section-sm);
}

/* core/group with no `layout` attribute is flow, and core's blockGap rule
   (.is-layout-flow > * + *) never applies to it — so the rhythm is an owl.
   The grid below is the exception: a grid layout emits its own gap. */
.infinitus-section--demo .demo__inner > * + * {
	margin-block-start: var(--demo-gap);
}

/* Desktop/H2 — 56/62 at >= 1280, which is the comp's size exactly. Safe to zero
   both margins: the heading is the first child, so there is no owl gap here to
   cancel. */
.infinitus-section--demo .demo__heading {
	color: var(--wp--preset--color--gray-900);
	font-size: var(--fs-h2);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--lh-h2);
	margin-block: 0;
}

/* Comp 2659:12704 — a 15px bar on a 56px word, sitting 39px down the line box.
   The thickness is stated in em so it stays proportional as the heading steps
   down the type ladder; the baseline is the same offset every other consumer of
   this mechanism uses, which lands within a pixel of the comp at this size. */
.infinitus-section--demo .demo__heading .infinitus-underline-grow {
	--underline-grow-thickness: 0.268em;
	--underline-grow-baseline: 0.771em;
}

/* The 3 → 2 → 1 reflow, the column width and the gap all come from core's
   native grid layout on the wrapping group; nothing is needed here. Comp gap is
   30px and blockGap is set to sp-8 (32px), the nearest step on the theme's
   scale. */

.infinitus-section--demo .demo__card {
	/* Grid items stretch to the tallest row. A card is happy to be taller than
	   its content — the picture holds its own 393:430 proportion regardless. */
	min-width: 0;
}

/* Comp 2659:12707 — 50px from the foot of the card to its title. */
.infinitus-section--demo .demo__card > * + * {
	margin-block-start: var(--demo-gap);
}

/* Comp 2659:12737 — and 24px from the title to the description. More specific
   than the owl above, which is what lets one card carry two different gaps.
   Only after a title: a card without one (BugHerd 535295 #75) keeps the 50px
   the owl gives it, so the description sits where the title used to. */
.infinitus-section--demo .demo__card > .demo__card-title + .demo__card-text {
	margin-block-start: var(--wp--preset--spacing--sp-6);
}

/* Desktop/H4 — 26/34 at >= 1280, which is the comp's size exactly.
   margin-block-END only: `margin-block: 0` would tie with the owl above on
   specificity, win on source order, and close the gap to the card. */
.infinitus-section--demo .demo__card-title {
	font-size: var(--fs-h4);
	font-weight: 300;
	letter-spacing: 0.012em;
	line-height: var(--lh-h4);
	margin-block-end: 0;
}

/* Desktop/Body Default — 20/30 at >= 1025, the design system's primary body
   step. Steps to 18px below that, because the DS publishes no mobile body
   ladder. */
.infinitus-section--demo .demo__card-text {
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);
	margin-block-end: 0;
}