/*
 * Card Grid. Two registers: plain cards separated by whitespace, and tiles
 * separated by hairlines. The hairline effect is a 1px grid gap over a forest
 * background — internal dividers with no doubled borders at the seams.
 */

/*
 * The gap under the header is per-register and the spacing--60 token that used
 * to paint it (2.25rem, not the 4rem theme.json's array reads as) was none of
 * them — 36px against the reference's 56/80 on InfoCardGrid and 48/64 on
 * DownloadLedger, on every card grid on the site.
 */
.cobell-card-grid__header {
	margin-inline: auto;
	margin-bottom: 3.5rem;
	max-width: 42rem;
	text-align: center;
}

/*
 * The heading has two registers across the four components this block serves,
 * and the xxx-large preset it was riding is neither of them — it put every card
 * grid on the site at 52px where the reference draws 48 or 32.
 *
 *   48px  InfoCardGrid, DownloadLedger and AudiencePickerGrid — a section
 *         heading over a full-width row of cards. The base.
 *   32px  ScholarshipCardGrid — a heading over a wayfinding surface,
 *         deliberately quieter than the tiles beneath it.
 *
 * AudiencePickerGrid was on the second of those and is not: /support draws this
 * heading at the base 3.8vw, 48px at 1440 where we rendered 32. The 2.6vw slope
 * that used to be here is the *tile title's*, not the section heading's — the
 * two are separate registers that happen to share a component.
 */
.cobell-card-grid__heading {
	margin: 0;
	font-size: clamp( 1.75rem, 3.8vw, 3rem );
	line-height: 1;
	letter-spacing: -0.015em;

	/* text-balance, which the reference sets on both header registers. The global
	   `text-wrap: pretty` only forbids a widow, so a two-line heading broke where
	   the measure ran out rather than at live's midpoint — /support/counselors set
	   "to help" on the first line where live starts the second with it. */
	text-wrap: balance;
}

.cobell-card-grid--accent .cobell-card-grid__heading {
	font-size: clamp( 1.5rem, 2.2vw, 2rem );
}

/*
 * The two centred registers have no accent slot on live. InfoCardGrid and
 * DownloadLedger are handed heading and accent already concatenated into one
 * plain string — `${heading} ${headingAccent}` at every one of the nine call
 * sites — so those headings are wholly forest, where we painted the second
 * clause terracotta on the five that still carry the field.
 *
 * The two registers that do show a terracotta span, AudiencePickerGrid on
 * /support and IEIMission on /about-iei, both have their header written by the
 * page rather than by the component. So the split is by register, and the
 * `heading_accent` field is a size-is-a-field-style no-op on the rest: an
 * editor filling it in on a plain grid gets the words, not the colour.
 */
.cobell-card-grid__heading .cobell-accent {
	color: inherit;
}

.cobell-card-grid--split .cobell-card-grid__heading .cobell-accent,
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card-grid__heading .cobell-accent {
	color: var( --wp--preset--color--terracotta );
}

/* AudiencePickerGrid's header is not width-limited — live centres its text in
   the full 72rem column, so the heading wraps later than a 42rem one does. */
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card-grid__header {
	max-width: none;
}

/* DownloadLedger and PrintCalloutRow sit a step tighter than the rest. */
.cobell-card-grid--tiles.cobell-card-grid--cols-3 .cobell-card-grid__header {
	margin-bottom: 3rem;
}

@media ( min-width: 48rem ) {
	.cobell-card-grid__header {
		margin-bottom: 5rem;
	}

	.cobell-card-grid--tiles.cobell-card-grid--cols-3 .cobell-card-grid__header {
		margin-bottom: 4rem;
	}
}

/*
 * Live writes `py-24 md:py-32` on every one of these sections. The wide half of
 * that is the shell's own token and correct at 128; the mobile half is not —
 * `sectionPadding` is 7rem, so at 375 both card grids on /support/professionals
 * stood 32px taller than live's while every card, gap and header inside them
 * measured identical. The token is global and 20 other sections ride it, so this
 * corrects the block rather than the token: moving 7rem needs a pixel diff per
 * page, same call as the gutter clamp and the spacing scale.
 *
 * Above 48rem it hands the section straight back to the shell, which is what
 * keeps the homepage's looser 9rem rhythm reachable if a card grid ever lands
 * there. Two classes for the reason flush-top gives below, and it has to sit
 * *before* flush-top: they tie on specificity and source order is the decider.
 */
.cobell-section.cobell-card-grid {
	padding-block: 6rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-card-grid {
		padding-block: var( --cobell-section-padding );
	}
}

/*
 * IEIMission runs `py-28 md:py-36`, deeper than the base above at both ends, and
 * it is the only card-grid on the site that does. /about-iei's three sections all
 * take that band — this one plus the two people grids — which is what put the
 * page 125px short of live.
 *
 * After the base and its query, not before: all three selectors are two classes,
 * so nothing here is won on specificity and source order is the whole of what
 * decides. That also means the query has to be repeated rather than relying on
 * the base's, or the mobile value would win above 48rem.
 */
.cobell-section.cobell-card-grid--split {
	padding-block: 7rem;
}

@media ( min-width: 48rem ) {
	.cobell-section.cobell-card-grid--split {
		padding-block: 9rem;
	}
}

/* Two classes, because .cobell-section owns this padding from the theme
   stylesheet — which loads after every block stylesheet, so a single-class rule
   here would tie and lose. */
.cobell-section.cobell-card-grid--flush-top {
	padding-top: 0;
}

/*
 * The intro sits on the header's own 42rem measure, not a narrower one of its
 * own: the reference gives InfoCardGrid and DownloadLedger — the only two of the
 * four components that carry a subhead at all — no second cap. A 36rem box was
 * 48px narrower per side and turned live's two lines into three on
 * /support/counselors. mt-6, not the 1.25rem it was.
 */
.cobell-card-grid__intro {
	margin-inline: auto;
	margin-top: 1.5rem;
	color: var( --cobell-body-color );
	font-size: var( --cobell-body-size );
}

/*
 * The intro is a wysiwyg field, so its paragraph arrives with the UA's 1em
 * margins. The top one collapses into the 1.5rem above and is harmless; the
 * bottom one has nothing to collapse against and stood the header 16px taller
 * than live's, whose subhead carries mt-6 and nothing under it. Outer edges
 * only — the gap between two paragraphs belongs to `.cobell-prose > * + *`.
 */
.cobell-card-grid__intro > p:first-child {
	margin-top: 0;
}

.cobell-card-grid__intro > p:last-child {
	margin-bottom: 0;
}

/*
 * text-[15px] md:text-base on 1.7 — the subhead register InfoCardGrid and
 * DownloadLedger share. The body token above is 18px at desktop, which is
 * IEIMission's size (text-base md:text-lg) and only IEIMission's; on a 42rem
 * measure those two extra pixels turned live's two lines into three on
 * /support/counselors and stood the header 32px taller. Scoped off --split for
 * the same reason the title sizes are.
 */
.cobell-card-grid:not( .cobell-card-grid--split ) .cobell-card-grid__intro {
	font-size: var( --wp--preset--font-size--blurb );
	line-height: 1.7;
}

@media ( min-width: 48rem ) {
	.cobell-card-grid:not( .cobell-card-grid--split ) .cobell-card-grid__intro {
		font-size: var( --wp--preset--font-size--medium );
	}
}

.cobell-card-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cobell-card-grid__item {
	display: flex;
}

.cobell-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.cobell-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: auto;
}

/* The numeral leads, the audience line sits opposite it. Baseline-aligned, so
   the two read as one row rather than a large glyph with a caption beside it. */
.cobell-card__kicker {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.cobell-card__numeral {
	color: var( --wp--preset--color--terracotta );
	font-family: var( --wp--preset--font-family--serif );
	font-size: clamp( 1.5rem, 2.2vw, 2rem );
	font-style: italic;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/*
 * Live's terracotta at 85%, which measures 2.76:1 at 10px — under the 4.5:1
 * this size needs. It is here because live is the target and this is the same
 * call recorded at the top of need-help.css. Ember reaches 6.26:1 and is what
 * to swap in if that trade is ever reversed; nothing else has to move with it.
 */
.cobell-card__eyebrow {
	color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 85%, transparent );
	font-size: var( --wp--custom--eyebrow-size );
	font-weight: 600;
	letter-spacing: var( --wp--custom--eyebrow-tracking );
	line-height: 1.5;
	text-transform: uppercase;
}

/*
 * Right-aligned only when a numeral shares the row with it — that is the whole
 * reason the kicker is a space-between flex. On its own the eyebrow was still
 * being pushed to the far edge of a row it was the only occupant of, so the
 * download cards' first line sat hard right while everything under it was left.
 */
.cobell-card__numeral + .cobell-card__eyebrow {
	text-align: right;
}

/*
 * Four registers in the reference, all different sizes, so the size keys off
 * the register rather than sitting on the base:
 *
 *   split     IEIMission — 26.4px title on 1.1 leading. The base below.
 *   plain     InfoCardGrid — 24px title on 1.05, over a 16px body.
 *   tiles     ScholarshipCardGrid — 25.92px title over a 15px blurb.
 *   tiles+4   AudiencePickerGrid — a wayfinding surface, 32px title.
 *
 * The base is the split register's because that is the one component that sets
 * no size of its own here. Leaving InfoCardGrid on it ran every plain card
 * 2.4px over on a leading 4px loose, which is the /support "what's inside" row
 * the fidelity pass keeps landing on.
 */
.cobell-card__title {
	margin: 0;
	font-size: clamp( 1.35rem, 2vw, 1.65rem );
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.cobell-card-grid--tiles .cobell-card__title {
	font-size: clamp( 1.35rem, 1.8vw, 1.75rem );
}

.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__title,
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__numeral {
	font-size: clamp( 1.5rem, 2.6vw, 2rem );
}

.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__title {
	letter-spacing: -0.015em;
	line-height: 1;
}

/*
 * text-balance, on the three registers whose reference component sets it —
 * InfoCardGrid, DownloadLedger and AudiencePickerGrid. ScholarshipCardGrid and
 * IEIMission deliberately do not, so the base keeps the global `pretty`: that
 * only forbids a widow, which is why "Counselor One-Sheet: Cobell / Scholarships"
 * broke a word later than live's balanced pair of lines.
 */
.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__title,
.cobell-card-grid--tiles .cobell-card--download .cobell-card__title,
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__title {
	text-wrap: balance;
}

.cobell-card__text {
	margin-top: var( --wp--preset--spacing--30 );
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.7;
}

.cobell-card-grid--tiles .cobell-card__text {
	font-size: var( --wp--preset--font-size--blurb );
	line-height: 1.65;
}

/* Link cue for a whole-card link. Mirrors the ghost button so the affordance
   reads the same everywhere, but it is a span — the card is the anchor. */
.cobell-card__cue {
	display: inline-flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-top: var( --wp--preset--spacing--40 );
	padding-bottom: 0.375rem;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 40%, transparent );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}

/*
 * Forest-deep, not ember. This is the one cue whose hover the reference actually
 * draws — AudiencePickerGrid takes both the label and its rule to #14201a — and
 * the ember here was the substitution the eyebrow note above records, applied to
 * a colour that never needed it. 13.5:1 on cream, so it clears AA either way.
 */
.cobell-card-grid:not( .cobell-card-grid--accent ) .cobell-card:hover .cobell-card__cue,
.cobell-card-grid:not( .cobell-card-grid--accent ) .cobell-card:focus-visible .cobell-card__cue {
	border-bottom-color: var( --wp--preset--color--forest-deep );
	color: var( --wp--preset--color--forest-deep );
}

/* The arrow nudges 4px, gated the way live gates it — motion-safe:, so under
   reduced motion the tile's tint and the label are the whole affordance. The
   base .btn__arrow transition is already declared in the theme stylesheet. */
@media ( prefers-reduced-motion: no-preference ) {
	.cobell-card-grid:not( .cobell-card-grid--accent ) .cobell-card:hover .cobell-card__cue .btn__arrow,
	.cobell-card-grid:not( .cobell-card-grid--accent ) .cobell-card:focus-visible .cobell-card__cue .btn__arrow {
		transform: translateX( 0.25rem );
	}
}

/*
 * ── Download register: a tile whose card is a file, not a link ──
 *
 * The reference calls this DownloadLedger and it is the tiles card with two
 * affordances at the foot instead of a cue in the flow. Keyed off the presence
 * of a file rather than a field, the same way --imaged is: a card with a file
 * attached is a download, and there is nothing else it could be.
 *
 * Nothing here hovers. The card is a <div>, not an <a> — a tile carrying two
 * buttons cannot also be one — so the tile tint and the cue recolour further up
 * this file never match it, which is exactly the reference's behaviour.
 */
.cobell-card__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

/* auto, so the pair leaves the copy where it is and takes the slack itself.
   The card's own space-between would otherwise spread the kicker away from the
   body, and __body's `margin-top: auto` was already sending the whole copy
   block to the foot — which is what made the three titles sit at three
   different heights. */
.cobell-card--download .cobell-card__body {
	margin-top: 0;
	/* The base body is a flex column on flex-start, which shrinks the title to
	   its text and stopped it wrapping on the same word live does. Stretch is
	   the reference's plain block flow. */
	align-items: stretch;
}

.cobell-card--download .cobell-card__actions {
	margin-top: auto;
	padding-top: 2.5rem;
}

/* The buttons stretch, so the label needs centring inside them; --caps has no
   opinion about that on its own. */
.cobell-card__download,
.cobell-card__email {
	justify-content: center;
	width: 100%;
}

/* The download glyph points at the action, so it drops rather than slides. */
.btn__arrow--down {
	transition: transform 150ms ease;
}

.btn:hover .btn__arrow--down {
	transform: translateY( 0.125rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.btn:hover .btn__arrow--down {
		transform: none;
	}
}

/* ── Plain: whitespace between cards, no card surface ── */

/*
 * gap-10, md:gap-12. Written as literals: spacing--50 resolves to 1.5rem, so
 * the row that used to read as "the 2.5rem token" was painting 24px against
 * live's 40 and 48 — the largest single spacing error on the /support hub.
 */
.cobell-card-grid--plain .cobell-card-grid__list {
	gap: 2.5rem;
}

.cobell-card-grid--plain .cobell-card__kicker {
	margin-bottom: var( --wp--preset--spacing--30 );
}

/* stretch, not the base's flex-start: a shrink-wrapped title is only as wide as
   its own text, so text-balance has a narrower box to break in than live's
   full-width h3 and a long card title wraps a word early. */
.cobell-card-grid--plain .cobell-card__body {
	align-items: stretch;
	margin-top: 0;
}

/*
 * InfoCardGrid's own register, kept off the base so IEIMission's cards — the
 * only other consumer, through --split — keep the sizes they were fitted to.
 */
.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__title {
	font-size: clamp( 1.25rem, 2vw, 1.5rem );
	letter-spacing: -0.015em;
	line-height: 1.05;
}

/*
 * mt-4, and the paragraph's own margins have to go with it. .cobell-card__text
 * is a .cobell-prose div and a flex item, so its child's UA margins cannot
 * collapse out of it — the token above plus a 1em margin measured 27px over
 * live's 16, and the trailing one added a whole line to every card's height.
 * Same trap the --accent and --split registers each carry a note about.
 *
 * `text-[15px] md:text-base` goes with it, and it was missed for the same reason
 * the header intro's was: the base is a flat 16px. At 375 that ran every card 8px
 * tall against live and wrapped the shortest body onto a fourth line where live
 * keeps three — 99px on the eligibility section on a phone, and nothing at all
 * at desktop, where the two sizes agree.
 */
.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__text {
	margin-top: 1rem;
	font-size: var( --wp--preset--font-size--blurb );
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__text {
		font-size: var( --wp--preset--font-size--medium );
	}
}

.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__text > :first-child {
	margin-top: 0;
}

.cobell-card-grid--plain:not( .cobell-card-grid--split ) .cobell-card__text > :last-child {
	margin-bottom: 0;
}

/* ── Tiles: hairline dividers, each tile painted on cream ── */

.cobell-card-grid--tiles .cobell-card-grid__list {
	gap: 1px;
	background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	overflow: hidden;
}

/*
 * The padding is a custom property because the accent register's hover rule has
 * to be inset to exactly the same value, and the two must not drift. It is a
 * literal because --wp--preset--spacing--50 resolves to 1.5rem, not the 2.5rem
 * theme.json's spacingSizes array reads as — which is what painted 24px here
 * below 48rem against the reference's p-8 on both tile components.
 *
 * box-sizing, because the theme has no global border-box: min-height excludes
 * padding, so a 14rem tile measured 14rem *plus* 80px of padding and every tile
 * in the row inherited that height. Live's tiles are content-driven at these
 * widths and the min-height only floors a short one.
 */
.cobell-card-grid--tiles .cobell-card {
	--cobell-card-pad: 2rem;

	box-sizing: border-box;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--50 );
	padding: var( --cobell-card-pad );
	min-height: 14rem;
	background-color: var( --wp--preset--color--cream );
	transition: background-color 300ms ease;
}

/*
 * The download tile is its own set of four sizes inside the tiles register — the
 * reference sets DownloadLedger a step under ScholarshipCardGrid at every one of
 * them, because this card carries two buttons under the blurb where that one
 * carries a single line of cue.
 *
 * The card's gap goes too. The reference spaces these parts with margins, and a
 * 2.5rem gap on top of them put 40px between the eyebrow and the title where
 * live has 16.
 */
.cobell-card-grid--tiles .cobell-card--download {
	gap: 0;
	min-height: 0;
}

.cobell-card-grid--tiles .cobell-card--download .cobell-card__title {
	margin-top: 1rem;
	font-size: clamp( 1.25rem, 2vw, 1.5rem );
	letter-spacing: -0.015em;
	line-height: 1.05;
}

.cobell-card-grid--tiles .cobell-card--download .cobell-card__text {
	margin-top: 1rem;
	font-size: var( --wp--preset--font-size--blurb );
	line-height: 1.7;
}

/* The prose margins again: __text is a .cobell-prose div and a flex item, so its
   paragraph's UA 1em margins cannot collapse out of it — 32px of them made every
   download blurb measure a line and a half over live's. Same pair the --plain and
   --split registers each carry. */
.cobell-card-grid--tiles .cobell-card--download .cobell-card__text > :first-child {
	margin-top: 0;
}

.cobell-card-grid--tiles .cobell-card--download .cobell-card__text > :last-child {
	margin-bottom: 0;
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--tiles .cobell-card--download .cobell-card__text {
		font-size: var( --wp--preset--font-size--medium );
	}
}

.cobell-card-grid--tiles:not( .cobell-card-grid--accent ) a.cobell-card:hover,
.cobell-card-grid--tiles:not( .cobell-card-grid--accent ) a.cobell-card:focus-visible {
	background-color: #ede0c4;
}

/*
 * theme.json's elements.link hover paints every anchor terracotta and the whole
 * tile is the anchor, so hovering one recoloured the title and the cue with it —
 * three colour changes where live makes one. The accent register already pins
 * this; the note there said the other tile grids still had it, and this is it.
 * Live's tile ink does not move on hover at all.
 */
.cobell-card-grid--tiles:not( .cobell-card-grid--accent ) a.cobell-card:hover {
	color: var( --wp--preset--color--forest );
}

/*
 * ── AudiencePickerGrid: the /support wayfinding register ──
 *
 * The --tiles rules above are this component's surface treatment. What is left
 * is its interior rhythm, and none of it is shared: the reference spaces the two
 * halves of the tile with a margin (mt-10) rather than the tile's gap, and its
 * lower half is plain block flow — a flex column shrink-wraps the title to its
 * own text, which changes where a three-word audience label wraps.
 */
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card {
	gap: 0;
}

.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__body {
	display: block;
	margin-top: 2.5rem;
}

/* 1.5 leading, not the root's 1.6 — a pixel on the label, but the tile's height
   is the sum of its parts and live's is 294. Scoped rather than set on the base
   because the accent register's tiles were fitted with the root value. */
.cobell-card-grid--tiles.cobell-card-grid--cols-4 .cobell-card__cue {
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding-bottom: 0.25rem;
	line-height: 1.5;
}

.cobell-card-grid--tiles a.cobell-card:focus-visible {
	outline: 2px solid var( --wp--preset--color--forest );
	outline-offset: -3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-card-grid--tiles .cobell-card {
		transition: none;
	}
}

/*
 * ── Accent: the /scholarships register ──
 *
 * ScholarshipCardGrid's affordance, verified against the deployed page rather
 * than the reference repo. The tile surface does not move: a terracotta
 * hairline fades in across the top edge, the title drops to forest-deep, the
 * cue turns terracotta and its arrow nudges 4px right.
 *
 * Every one of those is gated behind prefers-reduced-motion: no-preference,
 * because live gates them behind Tailwind's motion-safe: — so under reduced
 * motion this card has no hover feedback at all beyond the focus outline.
 * That is live's behaviour, not a reading of the spec: a colour change is not
 * motion, and 2.3.3 is AAA, so nothing here fails AA either way. Flagged
 * rather than silently corrected; moving the four colour rules out of the
 * media query is the whole fix if that call gets reversed.
 *
 * The cue's hover terracotta measures 3.15:1 on cream at 11px semibold, under
 * 1.4.3's 4.5:1 — the same trade already recorded on the eyebrow above and at
 * the top of need-help.css. Ember reaches 6.26:1 and is the substitute if it
 * is reversed. The hairline and the arrow glyph are decorative and exempt
 * under 1.4.11.
 */

/*
 * The section rules itself off the one above. Live authors this per section
 * rather than deriving it — the note on `cobell_ruled_sections_class()` in
 * inc/helpers.php rules the three pages where every section takes it and leaves
 * the rest alone, and /scholarships is one of the pages that rules only some of
 * its five. Its two are ScholarshipCardGrid and DeadlinesLedger, and `--accent`
 * is ScholarshipCardGrid and nothing else: it is the one instance of thirteen
 * that carries the register, verified across all nine pages that hold a grid.
 * So the register already names the split and no field is needed. `--tiles`
 * would not — three other grids share it and live leaves all three bare.
 *
 * Three classes because `.cobell-section` is one and the theme stylesheet loads
 * after every block stylesheet, so a rule that only ties with it loses.
 */
.cobell-section.cobell-card-grid--accent {
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

.cobell-card-grid--accent .cobell-card {
	position: relative;
}

/*
 * Layout. The --tiles rules above are AudiencePickerGrid's — `justify-between`
 * on the tile and one padding value on both axes, which is what that component
 * does. ScholarshipCardGrid shares the register and does neither: it flows its
 * parts from the top on a fixed gap and pushes only the cue down.
 *
 * That difference is the whole bug. `justify-between` on the tile plus the
 * base's `margin-top: auto` on __body sent the title, blurb and cue to the
 * bottom as one group, so the title's position was a function of how long its
 * blurb was — three titles in a row starting at three different heights. Live
 * has every title on the same line and only "Learn more" bottom-aligned.
 *
 * Scoped to --accent rather than to --cols-3 deliberately: three other tiles
 * grids are also cols-3 and live gives none of them this treatment.
 */
.cobell-card-grid--accent .cobell-card {
	--cobell-card-pad: 1.75rem;

	justify-content: flex-start;
	gap: 1.5rem;
	padding-block: 2.5rem;
}

.cobell-card-grid--accent .cobell-card__body {
	flex: 1;
	margin-top: 0;
	gap: 1.5rem;
}

.cobell-card-grid--accent .cobell-card__cue {
	margin-top: auto;
}

/*
 * 0.4em here against the 0.45em the other registers carry — live tracks this
 * one tighter, and at two lines the difference decides where it wraps: at 0.45em
 * the audience line on card 04 ran to three lines where live holds it at two.
 *
 * The 1.5 leading is not a choice live made either — its eyebrow carries no
 * leading class and inherits the body's — but it is what live renders, and it is
 * 6px of a two-line kicker's height.
 *
 * text-align is the one that actually reads as misalignment. The kicker's
 * space-between already puts this span against the tile's right edge, so the
 * base rule's `text-align: right` only ever changes where a *wrapped* line
 * starts — and live left-aligns both lines to the span. Live sets no text-align
 * on any card eyebrow, so the base is likely wrong for the other registers too;
 * it is invisible there because their audience lines do not wrap.
 */
.cobell-card-grid--accent .cobell-card__eyebrow {
	letter-spacing: 0.4em;
	line-height: 1.5;
	text-align: left;
}

.cobell-card-grid--accent .cobell-card__title {
	line-height: 1.05;
}

/*
 * The same prose-margin trap the --split register carries a note about further
 * down: .cobell-card__text is a .cobell-prose div and a flex item, so its
 * paragraph's UA margins cannot collapse out of it. A single-paragraph blurb was
 * adding a full line above and below inside the card, and __text's own
 * margin-top stacked on the body's gap — 42px per tile, which is what kept these
 * cards taller than live's even after every part measured identically.
 *
 * Scoped, not fixed on .cobell-prose: the same is true of every prose field on
 * the site, so the general fix moves spacing on all 24 pages.
 */
.cobell-card-grid--accent .cobell-card__text {
	margin-top: 0;
}

.cobell-card-grid--accent .cobell-card__text > :first-child {
	margin-top: 0;
}

.cobell-card-grid--accent .cobell-card__text > :last-child {
	margin-bottom: 0;
}

/* Three classes, not two: the --tiles media query below sets --cobell-card-pad
   at two classes and comes later in source order, so a two-class rule here ties
   and loses at exactly the widths that matter. */
@media ( min-width: 48rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--accent .cobell-card {
		--cobell-card-pad: 2.25rem;

		padding-block: 3rem;
	}
}

/*
 * theme.json's elements.link hover paints every anchor terracotta, and here
 * the whole tile is the anchor — so hovering it recoloured anything inside
 * without a colour of its own. Live leaves the tile's inherited colour alone
 * and lets the cue set its own. Nothing visible inherits it on this grid
 * today, which is exactly why it would have gone unnoticed until a part
 * without an explicit colour was added.
 */
.cobell-card-grid--accent a.cobell-card:hover {
	color: var( --wp--preset--color--forest );
}

.cobell-card__rule {
	position: absolute;
	top: 0;
	right: var( --cobell-card-pad );
	left: var( --cobell-card-pad );
	height: 1px;
	background-color: transparent;
	pointer-events: none;
}

/* Live gives this cue no underline — the rule at the top of the tile is the
   accent, and an underline here would read as a second one. */
.cobell-card-grid--accent .cobell-card__cue {
	padding-top: 1rem;
	padding-bottom: 0;
	border-bottom: 0;
}

.cobell-card-grid--accent .cobell-card__cue .btn__arrow {
	color: var( --wp--preset--color--terracotta );
}

.cobell-card-grid--tiles.cobell-card-grid--accent a.cobell-card:focus-visible {
	outline-offset: -4px;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cobell-card__rule {
		transition: background-color 300ms ease;
	}

	.cobell-card-grid--accent .cobell-card__title,
	.cobell-card-grid--accent .cobell-card__cue {
		transition: color 150ms ease;
	}

	.cobell-card-grid--accent .cobell-card__cue .btn__arrow {
		transition: transform 150ms ease;
	}

	.cobell-card-grid--accent .cobell-card:hover .cobell-card__rule,
	.cobell-card-grid--accent .cobell-card:focus-visible .cobell-card__rule {
		background-color: var( --wp--preset--color--terracotta );
	}

	.cobell-card-grid--accent .cobell-card:hover .cobell-card__title {
		color: var( --wp--preset--color--forest-deep );
	}

	.cobell-card-grid--accent .cobell-card:hover .cobell-card__cue {
		color: var( --wp--preset--color--terracotta );
	}

	.cobell-card-grid--accent .cobell-card:hover .cobell-card__cue .btn__arrow,
	.cobell-card-grid--accent .cobell-card:focus-visible .cobell-card__cue .btn__arrow {
		transform: translateX( 0.25rem );
	}
}

/* ── Column counts ── */

@media ( min-width: 40rem ) {
	.cobell-card-grid__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--plain .cobell-card-grid__list {
		gap: 3rem;
	}
}

@media ( min-width: 64rem ) {
	.cobell-card-grid--cols-3 .cobell-card-grid__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.cobell-card-grid--cols-4 .cobell-card-grid__list {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	/*
	 * ── Five-up: three cards, then two centred under them ──
	 *
	 * InfoCardGrid's "five" variant. The reference renders it as two grids — a
	 * 3-up row, then a 2-up row in its own 56rem column, centred — so the lower
	 * pair is *wider* than the upper three (424 against 352 at 1440), not two
	 * tracks of a three-track grid. No grid can express both rows at once, so
	 * the list becomes a centred flex wrap for this one arrangement and the last
	 * two items take the narrower column's basis.
	 *
	 * **Keyed on the preset, not on the item count.** It was
	 * `:has( > .item:last-child:nth-child( 5 ) )`, which reproduced the reference
	 * exactly and was invisible to the editor — the arrangement appeared and
	 * disappeared as cards were added, with nothing on the form to say why. The count
	 * is still what this shape needs; it is no longer what chooses it. The admin says
	 * so when a grid carrying this kind does not have five cards.
	 *
	 * `--three-then-rest` is cobell_card_grid_presets()' `information_five`, which is
	 * the reference's own `variant="five"` — one component, two arrangements, which is
	 * why this is not a second block.
	 *
	 * Scoped to 64rem and up: below it the reference's two containers each fall
	 * to their own 2-up, which a single flex line cannot reproduce, and the
	 * existing two-column grid is the closer approximation of the pair.
	 */
	.cobell-card-grid--three-then-rest:not( .cobell-card-grid--split ) .cobell-card-grid__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.cobell-card-grid--three-then-rest:not( .cobell-card-grid--split ) .cobell-card-grid__list > .cobell-card-grid__item {
		flex: 0 0 calc( ( 100% - 2 * 3rem ) / 3 );
	}

	.cobell-card-grid--three-then-rest:not( .cobell-card-grid--split ) .cobell-card-grid__list > .cobell-card-grid__item:nth-child( n + 4 ) {
		flex-basis: min( 26.5rem, calc( ( 100% - 3rem ) / 2 ) );
	}
}

/*
 * DownloadLedger is the one grid with no two-up stage: `grid-cols-1
 * md:grid-cols-3`, one column straight to three at 768. The base ramp above is
 * InfoCardGrid's and AudiencePickerGrid's (`sm:grid-cols-2 lg:grid-cols-3`),
 * which both match live exactly, so this is scoped rather than shared — tiles at
 * three columns and no accent hover is DownloadLedger and only DownloadLedger,
 * on /support/professionals, /support/counselors and /support/students.
 *
 * Both queries are min-width and the order is what decides between them: the
 * first re-collapses the 40rem two-up and holds to 768, where the second takes
 * over. Measured at 768 the difference was a 353px card against live's 223 —
 * two columns where live already has three.
 */
@media ( min-width: 40rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--cols-3:not( .cobell-card-grid--accent ) .cobell-card-grid__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--cols-3:not( .cobell-card-grid--accent ) .cobell-card-grid__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/*
 * ScholarshipCardGrid starts its two-up at `md` too, not at the base ramp's
 * `sm` — `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`. The note above recorded
 * this as known and unfixed; measured on /scholarships at 640 it is a 294px
 * card against live's 592, two columns where live still has one, and 1471
 * against live's 2024 on the section.
 *
 * Three rules rather than two, because these carry a class more than the base
 * ramp does and would otherwise hold their two-up all the way up: the 64rem
 * `--cols-3` rule is (0,2,0) and this is (0,3,0), so the three-up has to be
 * restated here or it never applies. 640–767 only for the first two; from 1024
 * this and the base agree.
 */
@media ( min-width: 40rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--accent .cobell-card-grid__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--accent .cobell-card-grid__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 64rem ) {
	.cobell-card-grid--tiles.cobell-card-grid--accent .cobell-card-grid__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--tiles .cobell-card {
		--cobell-card-pad: 2.5rem;

		min-height: 16rem;
	}
}

/*
 * Imaged cards. The homepage audience tiles carry a photograph above the title;
 * the /support tiles do not, so this only applies when an image is set.
 */
.cobell-card--imaged {
	padding-top: 0;
	overflow: hidden;
}

.cobell-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	margin-bottom: var( --wp--preset--spacing--40 );
	object-fit: cover;
}

/*
 * ── Split: the /about-iei "who we are" register ──
 *
 * Same cards, turned on their side. The header stops being a centred banner
 * and becomes the left column of a twelve-track grid; the cards stack down the
 * right one, each with its numeral in a gutter and a hairline over it.
 *
 * The grid goes on .cobell-section__inner rather than a wrapper, because the
 * header and the list are already its only two children — the same reason the
 * /contact spread hangs off .wp-block-post-content.
 *
 * Live's container here is 80rem, not the theme's 72rem wide-size. Overriding
 * it per block is the pattern blocks/lineup already uses; the section's own
 * gutter still applies, so nothing bleeds at narrow widths.
 *
 * Two tracks below 64rem is what the base rule gives every card grid, and a
 * split grid is one column by construction — hence the single-column reset.
 */

.cobell-card-grid--split .cobell-section__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	column-gap: 4rem;
	row-gap: 5rem;
	max-width: 80rem;
}

.cobell-card-grid--split .cobell-card-grid__header {
	margin-inline: 0;
	margin-bottom: 0;
	max-width: none;
	text-align: left;
}

/*
 * IEIMission writes its own h2 instead of routing through the shared header, and
 * its ramp is a register above the base at both ends — 52px at 1440 against 48,
 * and a 32px floor against 28. Leading and tracking are the base's already.
 *
 * It is also the one header register the reference does not balance: the base
 * rule's `text-wrap: balance` is `text-balance` on the two centred components,
 * and this h2 carries no such class, so it breaks where the measure runs out.
 * Balanced, it read "What IEI does," / "and why it exists." against live's
 * "What IEI does, and why" / "it exists." at 1440, 1024 and 390 — same size,
 * same column, different line.
 */
.cobell-card-grid--split .cobell-card-grid__heading {
	font-size: clamp( 2rem, 4.2vw, 3.25rem );
	text-wrap: pretty;
}

.cobell-card-grid--split .cobell-eyebrow--ruled-leading::before {
	width: 2.5rem;
}

.cobell-card-grid--split .cobell-card-grid__intro {
	margin-inline: 0;
	margin-top: 2.5rem;
	max-width: 55ch;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	line-height: 1.625;
}

.cobell-card-grid--split .cobell-card-grid__list,
.cobell-card-grid--split.cobell-card-grid--plain .cobell-card-grid__list {
	grid-template-columns: minmax( 0, 1fr );
	gap: 3.5rem;
}

/*
 * The hairline and the numeral gutter sit on .cobell-card rather than the list
 * item: the card is the item's only child and spans it, so the two are the same
 * box, and keeping it on the card means the plain register's own rules are the
 * only ones that have to be undone.
 */
.cobell-card-grid--split .cobell-card {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	column-gap: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--terracotta ) 40%, transparent );
}

/*
 * The gutter's line box has to be the numeral's own. Left at the inherited 16px
 * font it is 25.6px tall and drops the 10px figure 8px below the hairline it is
 * supposed to sit against — which reads as a vertical-alignment bug in a rule
 * that never mentions alignment.
 */
.cobell-card-grid--split .cobell-card__kicker {
	display: block;
	align-self: start;
	margin-bottom: 0;
	font-size: var( --wp--custom--eyebrow-size );
	line-height: 1;
}

/* Not the serif italic numeral of the process registers — live sets this one in
   the small-caps eyebrow treatment, so it reads as a list marker rather than a
   display figure. */
.cobell-card-grid--split .cobell-card__numeral {
	color: var( --wp--preset--color--terracotta );
	font-family: inherit;
	font-size: var( --wp--custom--eyebrow-size );
	font-style: normal;
	font-weight: 600;
	letter-spacing: var( --wp--custom--eyebrow-tracking );
	line-height: 1;
	text-transform: uppercase;
}

/* The plain register packs a card's parts to the left so a short CTA does not
   stretch. Here the title and the description are the full measure, and a
   shrink-wrapped title would wrap earlier than live's. */
.cobell-card-grid--split .cobell-card__body {
	align-items: stretch;
}

.cobell-card-grid--split .cobell-card__text {
	margin-top: 1rem;
	max-width: 60ch;
	color: color-mix( in srgb, var( --wp--preset--color--forest ) 80%, transparent );
	font-size: var( --wp--preset--font-size--blurb );
	line-height: 1.65;
}

/*
 * The theme never resets the user agent's 1em block margins on a paragraph, and
 * a .cobell-prose div sitting inside .cobell-card__body is a flex item — so its
 * child's margins cannot collapse out of it. A single-paragraph field therefore
 * carries a full line of margin above and below, inside the card. That put every
 * pillar here 25px over live.
 *
 * Scoped rather than fixed on .cobell-prose: the same thing is true of every
 * card and every prose field on the site, so the general fix moves spacing on
 * all 24 pages and is not this section's to make.
 */
.cobell-card-grid--split .cobell-card__text > :first-child,
.cobell-card-grid--split .cobell-card-grid__intro > :first-child {
	margin-top: 0;
}

.cobell-card-grid--split .cobell-card__text > :last-child,
.cobell-card-grid--split .cobell-card-grid__intro > :last-child {
	margin-bottom: 0;
}

@media ( min-width: 48rem ) {
	.cobell-card-grid--split .cobell-card {
		column-gap: 2.5rem;
	}
}

@media ( min-width: 64rem ) {
	.cobell-card-grid--split .cobell-section__inner {
		grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
		column-gap: 5rem;
	}

	/* Sticky so the thesis holds while the numbered list is read past it. The
	   site header is static, so 6rem is clear of nothing but the section's own
	   breathing room — live's value. */
	.cobell-card-grid--split .cobell-card-grid__header {
		position: sticky;
		top: 6rem;
		grid-column: span 6;
		align-self: start;
	}

	.cobell-card-grid--split .cobell-card-grid__list {
		grid-column: span 6;
		gap: 4rem;
	}
}

@media ( min-width: 80rem ) {
	.cobell-card-grid--split .cobell-card-grid__header {
		grid-column: span 5;
	}

	.cobell-card-grid--split .cobell-card-grid__list {
		grid-column: span 7;
	}
}