/* * Scholarship Detail. Portrait column beside a single content flow that runs * description, eligibility, application windows, key facts, footnote. * * The portrait sits second in the source so a reader meets the heading first * and the stacked order matches what is on screen; the grid moves it to the * left column once the two columns sit side by side. */ /* * Every length in this file is a literal rem, not a --wp--preset--spacing--* * token, and that is deliberate. Those presets do not carry the values * theme.json declares — WordPress's own default spacingScale is generating them * and its slugs collide, so spacing--50 arrives as 1.5rem where the array reads * 2.5rem and spacing--60 arrives as 2.25rem where it reads 4rem. Every value * here is measured off live, so it has to be the value it says it is. This is * what left the column gap 28px short of live's and the region rhythm loose. */ .cobell-scholarship__layout { display: grid; gap: 3rem; } /* * Live's detail body runs a shorter section than the interior default: 80px * stepping to 112px, against the shell's 112/128. Two classes because the * shell's own padding comes from a stylesheet that loads after this one, so a * single-class rule ties and loses — the same cascade trap the section shell * carries a note about. */ .cobell-section.cobell-scholarship { padding-block: 5rem; border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent ); } @media ( min-width: 48rem ) { .cobell-section.cobell-scholarship { padding-block: 7rem; } } /* * Five tracks and a span, not `2fr 3fr`. A five-column grid has four gaps and a * spanning child absorbs the ones inside it, so at a 1152px measure the figure is * 422 and the content column 666; `2fr 3fr` with a single gap divides only what * is left after it and gives 435/653. Thirteen pixels on each column, and on the * 3:4 figure that becomes seventeen on its height. */ @media ( min-width: 64rem ) { .cobell-scholarship__layout { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 4rem; align-items: start; } .cobell-scholarship--no-figure .cobell-scholarship__layout { grid-template-columns: minmax( 0, 48rem ); justify-content: center; } } /* * The figure owns the ratio, the radius and the clip because the caption plate * is pinned to it. Not sticky: live lets the portrait scroll away with the * column, and a sticky portrait beside a long eligibility list reads as a * different component. */ .cobell-scholarship__figure { position: relative; margin: 0; /* 4px: the reference's `rounded-sm` is 0.25rem in Tailwind v4, not the 0.125rem v3 gave it. */ border-radius: 0.25rem; aspect-ratio: 3 / 4; overflow: hidden; box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.15 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.15 ); } @media ( min-width: 64rem ) { .cobell-scholarship__figure { grid-column: 1 / span 2; grid-row: 1; } .cobell-scholarship__content { grid-column: 3 / span 3; grid-row: 1; } /* * The flip is grid placement only. Source order does not move, so the heading * still comes before the portrait for a screen reader and for the stacked * layout below this breakpoint — which is the whole reason the figure sits * second in the template to begin with. */ .cobell-scholarship--media-right .cobell-scholarship__figure { grid-column: 4 / span 2; } .cobell-scholarship--media-right .cobell-scholarship__content { grid-column: 1 / span 3; } } .cobell-scholarship__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; } .cobell-scholarship__heading { margin: 0; font-size: clamp( 2rem, 3.6vw, 3rem ); line-height: 1; } /* * The description column reads one step below the section default: the * reference sets it 15px stepping to 16px, where a lead paragraph is 16 * stepping to 18. Overriding the token on the element beats the section-level * media query at every width, so both steps are restated here. */ .cobell-scholarship__about { --cobell-body-size: var( --wp--preset--font-size--blurb ); margin-top: 2rem; color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent ); font-size: var( --cobell-body-size ); line-height: 1.7; } @media ( min-width: 48rem ) { .cobell-scholarship__about { --cobell-body-size: var( --wp--preset--font-size--medium ); } } .cobell-scholarship__about > * + * { margin-top: 1.25rem; } .cobell-scholarship__region { margin-top: 3.5rem; } /* The region labels are headings styled as eyebrows — they carry the outline for this section, so they are real headings rather than styled paragraphs. They take --flush and let the list below own the gap, because the eyebrow's own 2rem plus a list margin came to 48px where live sets 20px. */ .cobell-scholarship__region-label { display: inline-flex; font-family: var( --wp--preset--font-family--sans ); } /* * Eligibility list. Terracotta markers rather than the default bullet — a * decorative marker, so the colour only needs the 3:1 that applies to * non-text, which terracotta clears at 3.15:1. */ /* * Two classes on the padding, for the same reason as `li + li` below. * `.cobell-prose ul` sets 1.25em from the theme stylesheet, which core loads * after every block stylesheet, so a single-class `padding-left` here ties and * loses — the whole list sat 20px in from the column edge where live's markers * are flush with it and with the eyebrow's rule above them. */ .cobell-prose.cobell-scholarship__eligibility ul { padding-left: 0; } .cobell-scholarship__eligibility ul { --cobell-body-size: var( --wp--preset--font-size--blurb ); margin: 1.25rem 0 0; list-style: none; color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent ); font-size: var( --cobell-body-size ); line-height: 1.6; } @media ( min-width: 48rem ) { .cobell-scholarship__eligibility ul { --cobell-body-size: var( --wp--preset--font-size--medium ); } } /* * The marker is a flex item, not an absolutely positioned one hanging in a text * indent, because live's is a real element in a `flex gap-3` row and the two * geometries do not agree. * * An indent of 1.25em puts the text 20px from the list edge and scales with the * copy; live puts it at 25 — a 13px glyph plus a fixed 12px gap — and holds the * glyph at 16px even where the copy drops to 15. So we ran 5px tight at desktop * and 6 at mobile, which is small enough to read as a spacing bug and large * enough to move the wrap: the last row broke after "M.D.," here and after * "Psy.D.," on live. * * The text is an anonymous flex item. Every one of the six lists is flat * ``, and contiguous inline content forms a single * anonymous box, so inline markup inside an item stays on one line with it. A * block-level child would become a second flex item and sit beside the copy — * `cobell_rich_text()` permits one, so that is the case to check if a list ever * looks side-by-side. */ .cobell-scholarship__eligibility li { display: flex; gap: 0.75rem; } /* * Two classes. `.cobell-prose li + li` sets 0.5em from the theme stylesheet, which * core loads after every block stylesheet, so a single-class rule here ties on * specificity and loses on order — the list was spacing at 8px against live's 14 * and ran 30px short over six rows. */ .cobell-prose.cobell-scholarship__eligibility li + li { margin-top: 0.875rem; } /* * The marker is a real span carrying aria-hidden now — a ::before cannot, so the * glyph was announced in front of every criterion where live's own span is * hidden. The span holds the character as text, so it takes the styling and not * `content`: that property does nothing on an ordinary element. * * Live holds the glyph at 16px on 1.6 at every width — its own `text-base`, not * the row's `text-[15px] md:text-base`. */ .cobell-scholarship__eligibility-marker { flex: none; color: var( --wp--preset--color--terracotta ); font-family: var( --wp--preset--font-family--serif ); font-size: 1rem; line-height: 1.6; } /* * The fallback keeps the CSS marker, because a database this migration has not * reached still renders the one WYSIWYG