/* * hbd-split-content — the two-column text/media section, in the five compositions production uses. * * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from * is named. Breakpoints are production's own Tailwind scale, read off the live class attributes: * 768 / 1024 / 1280 (docs/audit/widgets/split-content.md). Enqueued as `hbd-widget-split-content` * only on pages that render the widget. * * Layout: a shared shell, then one block per media type — each media type is one live composition and * carries that composition's type scale, gaps and stacking breakpoint, the way hbd-hero's layouts do. */ /* ------------------------------------------------------------------ shell */ /* Live's discrete 20 / 60 / 80 section gutter rather than the theme's clamp()ed --hbd-gutter, and the per-composition vertical padding declared here rather than left to Design → Vertical padding, so a dropped-in instance matches production. This file loads after utilities.css, so it wins over .hbd-row--pad-*. */ .hbd-w-split-content > .hbd-w__inner { display: flex; flex-direction: column; max-width: calc(var(--hbd-container) + 2 * var(--hbd-split-gutter)); padding-inline: var(--hbd-split-gutter); } .hbd-w-split-content__media { position: relative; min-width: 0; } .hbd-w-split-content__body { display: flex; flex-direction: column; min-width: 0; } .hbd-w-split-content__head, .hbd-w-split-content__group { display: flex; flex-direction: column; min-width: 0; } /* The media sits after the text once the row splits. The portrait card is the exception: while it is stacked, live leads with the photo (see the portrait-card block below). */ .hbd-w-split-content--media-right .hbd-w-split-content__media { order: 2; } .hbd-w-split-content__img { display: block; width: 100%; height: auto; } /* --------------------------------------------------------------- type */ /* base.css gives every .hbd-heading Loretta 300 / 1.1 / -0.01em and a 1rem bottom margin; no live heading in this section has tracking, and each composition sets its own size and margin below. */ .hbd-w-split-content__heading { margin: 0; letter-spacing: normal; } .hbd-w-split-content__text { font-size: var(--hbd-split-text); line-height: var(--hbd-split-text-lh); letter-spacing: var(--hbd-split-ls); color: var(--hbd-ink); } .hbd-w-split-content__text > * { margin: 0 0 var(--hbd-split-text-gap); } .hbd-w-split-content__text > :last-child { margin-bottom: 0; } /* Live's inline links in this section are navy and underlined, and swing to slate on hover — not the theme-wide blue base.css paints every . */ .hbd-w-split-content__text a { color: var(--hbd-navy); text-decoration: underline; } .hbd-w-split-content__text a:hover { color: var(--hbd-slate); } /* The plain eyebrow is uppercase mono; .hbd-eyebrow is 16px body text with a bottom margin. */ .hbd-w-split-content__eyebrow { margin: 0; font-family: var(--hbd-font-mono); font-size: var(--hbd-split-eyebrow); line-height: var(--hbd-split-eyebrow-lh); letter-spacing: var(--hbd-split-ls); text-transform: uppercase; color: var(--hbd-ink); } /* The pill eyebrow is filled and dashed on black at 40%, where .hbd-eyebrow--pill is a transparent 12px pill dashed on ink at 55%. Its fill colour is per composition. */ .hbd-w-split-content__eyebrow.hbd-eyebrow--pill { align-self: flex-start; padding: var(--hbd-split-pill-pad); border: var(--hbd-split-pill-border); line-height: 1; } /* --------------------------------------------------------------- buttons */ /* Live's filled pills are exactly 44 tall and its outline pills 46: .hbd-btn ships a 1px transparent border, which the filled ones do not have. Same fix footer.css makes for the footer pills. */ .hbd-w-split-content .hbd-btn:not(.hbd-btn--outline) { border-width: 0; } /* Live's outline pill is bordered ink at 16%, at rest and on hover alike; .hbd-btn--outline borders with currentColor, which is full-strength ink. Hover still only fills the pill white. */ .hbd-w-split-content .hbd-btn--outline { border-color: var(--hbd-ink-a16); } .hbd-w-split-content__actions { display: flex; flex-wrap: wrap; gap: var(--hbd-split-item-icon-gap); } /* ------------------------------------------------------------- checklist */ .hbd-w-split-content__rule { height: 0; border: 0; border-top: var(--hbd-split-rule); margin: var(--hbd-split-rule-space) 0; background: none; color: inherit; } .hbd-w-split-content__checklist-block { display: flex; flex-direction: column; gap: var(--hbd-split-checklist-gap); } /* EK Notice Classic at a computed weight of 400 — base.css would make it Loretta 300. */ .hbd-w-split-content__checklist-heading { margin: 0; font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-split-serif-h); line-height: var(--hbd-split-serif-h-lh); letter-spacing: var(--hbd-split-checklist-h-ls); color: var(--hbd-ink); } /* .hbd-list is a grid with its own gap and bottom margin; live's is a flex row of shrink-to-fit items that wraps to a column below 768. */ .hbd-w-split-content__checklist { display: flex; flex-direction: column; gap: var(--hbd-split-item-gap); margin: 0; } .hbd-w-split-content__checklist .hbd-list__item { display: flex; align-items: flex-start; gap: var(--hbd-split-item-icon-gap); } .hbd-w-split-content__checklist .hbd-list__marker { width: var(--hbd-split-item-icon); height: var(--hbd-split-item-icon); flex-shrink: 0; } .hbd-w-split-content__checklist .hbd-list__text { flex: 1; max-width: var(--hbd-split-item-max); padding-bottom: var(--hbd-split-item-pad); font-size: var(--hbd-split-item); line-height: var(--hbd-split-item-lh); letter-spacing: var(--hbd-split-ls); color: var(--hbd-ink); } /* Live's lead is Neue Haas Medium, not bold. */ .hbd-w-split-content__checklist strong { font-weight: 500; } @media (min-width: 768px) { .hbd-w-split-content__checklist { flex-direction: row; } } /* ------------------------------------------------------- secondary card */ .hbd-w-split-content__card { display: flex; flex-direction: column; gap: var(--hbd-split-card-gap); height: 100%; padding: var(--hbd-split-card-pad); background: var(--hbd-split-card-bg); border: var(--hbd-split-card-border); border-radius: var(--hbd-split-card-radius); } .hbd-w-split-content__card-head { display: flex; flex-direction: column; gap: var(--hbd-split-card-head-gap); } .hbd-w-split-content__card-heading { margin: 0; font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-split-serif-h); line-height: var(--hbd-split-serif-h-lh); letter-spacing: normal; color: var(--hbd-ink); } /* The card's eyebrow sits *under* its heading, which is where live puts it. */ .hbd-w-split-content__card-eyebrow { margin: 0; font-family: var(--hbd-font-mono); font-size: var(--hbd-split-eyebrow); line-height: var(--hbd-split-card-eyebrow-lh); letter-spacing: var(--hbd-split-ls); text-transform: uppercase; color: var(--hbd-ink); } .hbd-w-split-content__card-text { font-size: var(--hbd-split-text); line-height: var(--hbd-split-card-text-lh); letter-spacing: var(--hbd-split-ls); color: var(--hbd-ink); } .hbd-w-split-content__card-text > * { margin: 0 0 var(--hbd-split-text-gap); } .hbd-w-split-content__card-text > :last-child { margin-bottom: 0; } .hbd-w-split-content__card-action { margin-top: auto; width: 100%; } .hbd-w-split-content__card-action .hbd-btn { display: flex; width: 100%; justify-content: center; } @media (min-width: 768px) { .hbd-w-split-content__card-action .hbd-btn { display: inline-flex; width: auto; } } /* The card paragraph is capped at 90% for exactly one band — 1024 to 1279. Live's own rule. */ @media (min-width: 1024px) and (max-width: 1279px) { .hbd-w-split-content__card-text > p { max-width: 90%; } } @media (min-width: 1280px) { .hbd-w-split-content__card-action .hbd-btn { display: flex; width: 100%; } } /* ============================================ composition: avatar (home) */ /* The split here is body | card, not text | media: the portrait is a round 160 × 168 avatar inline with the heading, and the secondary card is the row's second column. */ .hbd-w-split-content--avatar { padding-block: var(--hbd-split-pad-avatar); } .hbd-w-split-content--avatar > .hbd-w__inner { gap: var(--hbd-split-row-gap-avatar); } .hbd-w-split-content--avatar .hbd-w-split-content__body { flex: 1; } .hbd-w-split-content--avatar .hbd-w-split-content__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hbd-split-avatar-gap); } .hbd-w-split-content--avatar .hbd-w-split-content__media { flex-shrink: 0; } .hbd-w-split-content__avatar { position: relative; width: var(--hbd-split-avatar-w); height: var(--hbd-split-avatar-h); border: var(--hbd-split-avatar-ring); border-radius: 50%; overflow: hidden; } /* Inset by the ring, exactly as live's absolutely-positioned crop is. */ .hbd-w-split-content__avatar .hbd-w-split-content__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } .hbd-w-split-content--avatar .hbd-w-split-content__intro-body { flex: 1; display: flex; flex-direction: column; gap: var(--hbd-split-avatar-col-gap); min-width: 0; } .hbd-w-split-content--avatar .hbd-w-split-content__head { gap: var(--hbd-split-avatar-head-gap); } .hbd-w-split-content--avatar .hbd-w-split-content__group { max-width: var(--hbd-split-avatar-col-max); } .hbd-w-split-content--avatar .hbd-w-split-content__heading { font-size: var(--hbd-split-h-avatar); line-height: var(--hbd-split-h-avatar-lh); margin-bottom: var(--hbd-split-h-avatar-gap); } .hbd-w-split-content--avatar .hbd-w-split-content__actions .hbd-btn { flex: 0 0 auto; } .hbd-w-split-content--avatar .hbd-w-split-content__card-col { width: 100%; } @media (min-width: 1024px) { .hbd-w-split-content--avatar .hbd-w-split-content__intro { flex-direction: row; } } @media (min-width: 1280px) { .hbd-w-split-content--avatar > .hbd-w__inner { flex-direction: row; align-items: stretch; } .hbd-w-split-content--avatar .hbd-w-split-content__card-col { width: var(--hbd-split-card-w); flex-shrink: 0; align-self: stretch; } } /* ================================ composition: portrait-card (our-story) */ .hbd-w-split-content--portrait-card { padding-block: var(--hbd-split-pad-quote); } .hbd-w-split-content--portrait-card > .hbd-w__inner { gap: var(--hbd-split-row-gap-quote); max-width: calc(var(--hbd-container) + 2 * var(--hbd-split-gutter-narrow)); padding-inline: var(--hbd-split-gutter-narrow); } .hbd-w-split-content--portrait-card .hbd-w-split-content__media { flex-shrink: 0; width: 100%; max-width: var(--hbd-split-portrait-max); display: flex; justify-content: center; margin-inline: auto; } /* Stacked, live leads with the photo whichever side it takes once the row splits. */ .hbd-w-split-content--portrait-card.hbd-w-split-content--media-right .hbd-w-split-content__media { order: 0; } .hbd-w-split-content__portrait { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; background: var(--hbd-sky-deep); border-radius: var(--hbd-split-card-radius); overflow: hidden; } .hbd-w-split-content__portrait-photo { width: 100%; height: var(--hbd-split-portrait-photo-h); } .hbd-w-split-content__portrait-photo .hbd-w-split-content__img { width: 100%; height: 100%; object-fit: cover; } .hbd-w-split-content__portrait-caption { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; } .hbd-w-split-content__portrait-name { font-family: var(--hbd-font-display); font-style: italic; font-weight: 400; font-size: var(--hbd-split-portrait-name); line-height: var(--hbd-split-portrait-name-lh); letter-spacing: var(--hbd-split-portrait-name-ls); color: var(--hbd-ink); margin-top: var(--hbd-split-text-gap); } /* The title is a block on the card's own 24px line box with an inline span inside it, which is what live's
is — the span's height comes from EK Notice's font metrics (17), not from the 14px line-height, and the 24px block is what sets the card's last row. */ .hbd-w-split-content__portrait-title { display: block; line-height: var(--hbd-split-portrait-title-block); margin: var(--hbd-split-card-head-gap) 0 var(--hbd-split-text-gap); } .hbd-w-split-content__portrait-title > span { font-family: var(--hbd-font-serif-2); font-size: var(--hbd-split-portrait-title); line-height: var(--hbd-split-portrait-title-lh); text-transform: uppercase; color: var(--hbd-ink); } .hbd-w-split-content--portrait-card .hbd-w-split-content__body { flex: 1; align-items: center; max-width: var(--hbd-split-quote-col); margin-inline: auto; gap: var(--hbd-split-body-gap-quote); } .hbd-w-split-content--portrait-card .hbd-w-split-content__head { gap: var(--hbd-split-body-gap-quote); width: 100%; align-items: center; } .hbd-w-split-content--portrait-card .hbd-w-split-content__group { gap: var(--hbd-split-group-gap-quote); width: 100%; } .hbd-w-split-content--portrait-card .hbd-w-split-content__heading { font-size: var(--hbd-split-h-quote); line-height: 1; } .hbd-w-split-content--portrait-card .hbd-w-split-content__eyebrow.hbd-eyebrow--pill { align-self: auto; background: var(--hbd-sky-deep); font-size: var(--hbd-split-pill-quote); } /* The paragraphs are grid cells, not stacked blocks: one column until 1280, two from it. */ .hbd-w-split-content--portrait-card .hbd-w-split-content__text { display: grid; grid-template-columns: repeat(var(--hbd-split-quote-cols), minmax(0, 1fr)); gap: var(--hbd-split-body-gap-quote); } .hbd-w-split-content--portrait-card .hbd-w-split-content__text > * { margin: 0; } @media (min-width: 1024px) { .hbd-w-split-content--portrait-card > .hbd-w__inner { flex-direction: row; align-items: center; justify-content: space-between; } .hbd-w-split-content--portrait-card .hbd-w-split-content__media { justify-content: flex-start; margin-inline: 0; } .hbd-w-split-content--portrait-card.hbd-w-split-content--media-right .hbd-w-split-content__media { order: 2; } .hbd-w-split-content--portrait-card .hbd-w-split-content__body { align-items: flex-start; margin-inline: 0; } .hbd-w-split-content--portrait-card .hbd-w-split-content__head { align-items: flex-start; } } /* ======================================= composition: photo (our-story) */ .hbd-w-split-content--photo { padding-block: var(--hbd-split-pad-photo); } .hbd-w-split-content--photo > .hbd-w__inner { gap: var(--hbd-split-row-gap-photo); max-width: calc(var(--hbd-container) + 2 * var(--hbd-split-gutter-narrow)); padding-inline: var(--hbd-split-gutter-narrow); } .hbd-w-split-content--photo .hbd-w-split-content__media { flex-shrink: 0; width: 100%; } /* One with the crop ratio live serves at each width; it ships three files and hides two. */ .hbd-w-split-content--photo .hbd-w-split-content__img { width: var(--hbd-split-photo-w); height: var(--hbd-split-photo-h); aspect-ratio: var(--hbd-split-photo-ratio); object-fit: cover; } .hbd-w-split-content--photo .hbd-w-split-content__body { flex: 1; gap: var(--hbd-split-body-gap-photo); } .hbd-w-split-content--photo .hbd-w-split-content__head { gap: var(--hbd-split-body-gap-photo); } .hbd-w-split-content--photo .hbd-w-split-content__group { gap: var(--hbd-split-body-gap-photo); } .hbd-w-split-content--photo .hbd-w-split-content__eyebrow.hbd-eyebrow--pill { background: var(--hbd-sky); font-size: var(--hbd-split-pill-photo); } .hbd-w-split-content--photo .hbd-w-split-content__text { font-size: var(--hbd-split-text-photo); line-height: var(--hbd-split-text-photo-lh); letter-spacing: normal; } @media (min-width: 1024px) { .hbd-w-split-content--photo > .hbd-w__inner { flex-direction: row; align-items: flex-start; } .hbd-w-split-content--photo .hbd-w-split-content__media { width: 50%; } } @media (min-width: 1280px) { .hbd-w-split-content--photo .hbd-w-split-content__media { width: auto; } } /* ====== composition: photo-compact (/treatment/hormone-replacement-therapy/) */ /* `#section-whyInjections` — "What is Bioidentical Hormone Replacement Therapy?". Re-read off production's markup in the 2026-09-23 tablet/phone pass (docs/audit/widgets/split-content.md §12.4): a 540 × 600 illustration (`object-cover`, at 350 wide on a phone) that sits LEFT of the copy from 1024 and BELOW it before that (`lg:order-first order-last`), the copy in a `lg:max-w-[450px] xl:max-w-[550px]` column whose paragraphs are EK Notice 20/22 — the hero eyebrow's face — with 20px between them, the heading and the bold candidate line 32px under (`mb-8`), and the list in the body face at 16/19.2 on 2.5% tracking, 8px between rows. The band is 60px tall on a phone and 120px from 768 (`md:py-[120px] py-[60px]`). */ .hbd-w-split-content--photo-compact { padding-block: var(--hbd-split-pad-compact); } .hbd-w-split-content--photo-compact > .hbd-w__inner { gap: var(--hbd-split-row-gap-compact); max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); } .hbd-w-split-content--photo-compact .hbd-w-split-content__media { flex-shrink: 0; display: flex; justify-content: center; width: 100%; order: 2; } .hbd-w-split-content--photo-compact .hbd-w-split-content__img { width: var(--hbd-split-compact-photo-w); max-width: 100%; height: var(--hbd-split-compact-photo-h); object-fit: cover; } .hbd-w-split-content--photo-compact .hbd-w-split-content__body { flex: 1; width: 100%; max-width: var(--hbd-split-compact-copy-w); gap: var(--hbd-split-compact-block-gap); order: 1; } .hbd-w-split-content--photo-compact .hbd-w-split-content__head, .hbd-w-split-content--photo-compact .hbd-w-split-content__group { gap: var(--hbd-split-compact-block-gap); } .hbd-w-split-content--photo-compact .hbd-w-split-content__heading { font-size: var(--hbd-split-compact-heading); line-height: var(--hbd-split-compact-heading-lh); } .hbd-w-split-content--photo-compact .hbd-w-split-content__text { font-family: var(--hbd-font-serif-2); font-size: var(--hbd-split-compact-text); line-height: var(--hbd-split-compact-text-lh); letter-spacing: var(--hbd-split-compact-text-ls); } .hbd-w-split-content--photo-compact .hbd-w-split-content__text > * { margin-bottom: var(--hbd-split-compact-para-gap); } /* The bold candidate line is live's `
`: 32px under it, like the heading. */ .hbd-w-split-content--photo-compact .hbd-w-split-content__text > p:has(> strong:only-child) { margin-bottom: var(--hbd-split-compact-block-gap); } .hbd-w-split-content--photo-compact .hbd-w-split-content__text > :last-child { margin-bottom: 0; } /* …except the list, whose `mb-5` live keeps: 20 + the column's 32 = the 52px above the button. */ .hbd-w-split-content--photo-compact .hbd-w-split-content__text > ul:last-child { margin-bottom: var(--hbd-split-compact-para-gap); } /* Live's candidate list: the body face, 16/19.2 on 2.5% tracking, discs outside a 20px indent, 8px rows. */ .hbd-w-split-content--photo-compact .hbd-w-split-content__text ul { display: grid; gap: var(--hbd-split-compact-list-gap); padding-inline-start: var(--hbd-split-compact-list-indent); list-style-position: outside; font-family: var(--hbd-font-body); font-size: var(--hbd-split-compact-list); line-height: var(--hbd-split-compact-list-lh); letter-spacing: var(--hbd-split-ls); } .hbd-w-split-content--photo-compact .hbd-w-split-content__text li { line-height: var(--hbd-split-compact-list-lh); } @media (min-width: 1024px) { /* Two columns from 1024, the photograph first (`lg:order-first`) in a half-width column and the copy pushed to the far side (`justify-between`). */ .hbd-w-split-content--photo-compact > .hbd-w__inner { flex-direction: row; align-items: center; justify-content: space-between; } .hbd-w-split-content--photo-compact .hbd-w-split-content__media { width: 50%; order: 1; } .hbd-w-split-content--photo-compact .hbd-w-split-content__body { flex: 0 1 auto; order: 2; } } /* ============================= composition: clinic-photo (/location/*) */ /* `#section-clinicContentSection`, the same block on all seven clinic pages (docs/audit/widgets/split-content.md §10). Equal columns with the photo on the right, centred against each other; the whole thing stacks below 1024 with the photo under the copy. */ .hbd-w-split-content--clinic-photo { padding-block: var(--hbd-split-clinic-pad) var(--hbd-split-clinic-pad-bottom); } .hbd-w-split-content--clinic-photo > .hbd-w__inner { gap: var(--hbd-split-clinic-row-gap); max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__media { width: 100%; } .hbd-w-split-content--clinic-photo .hbd-w-split-content__img { width: 100%; height: var(--hbd-split-clinic-photo-h); object-fit: cover; border-radius: var(--hbd-radius-xs); } /* 8px eyebrow -> heading, 36px heading -> copy, 36px copy -> buttons, 24px between the buttons. */ .hbd-w-split-content--clinic-photo .hbd-w-split-content__body { gap: var(--hbd-split-clinic-block-gap); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__head { gap: var(--hbd-split-clinic-head-gap); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__group { gap: var(--hbd-split-clinic-block-gap); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__actions { gap: var(--hbd-split-clinic-btn-gap); } /* The eyebrow is EK Notice Classic at 20/24, not the shell's 14px uppercase mono. */ .hbd-w-split-content--clinic-photo .hbd-w-split-content__eyebrow { font-family: var(--hbd-font-serif-2); font-size: var(--hbd-split-clinic-eyebrow); line-height: var(--hbd-split-clinic-eyebrow-lh); letter-spacing: normal; text-transform: capitalize; } .hbd-w-split-content--clinic-photo .hbd-w-split-content__heading { font-size: var(--hbd-split-clinic-heading); line-height: var(--hbd-split-clinic-heading-lh); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__text { font-size: var(--hbd-split-clinic-text); line-height: var(--hbd-split-clinic-text-lh); letter-spacing: normal; } /* The copy's own blocks are 36px apart — the composition's block gap, not the shell's 16 — and a bulleted list follows its lead-in line by 3px (measured on /location/waco-lab/ at 1440 and 1024; --hbd-split-clinic-list-top). */ .hbd-w-split-content--clinic-photo .hbd-w-split-content__text > * { margin-bottom: 0; } .hbd-w-split-content--clinic-photo .hbd-w-split-content__text > * + * { margin-top: var(--hbd-split-clinic-block-gap); } .hbd-w-split-content--clinic-photo .hbd-w-split-content__text > * + ul { margin-top: var(--hbd-split-clinic-list-top); } /* Live's list also sits 4px *tighter* at its foot than a paragraph does — its 35/32 either side of the list against the 36 this composition uses everywhere else (measured on /location/waco-lab/). */ .hbd-w-split-content--clinic-photo .hbd-w-split-content__text > ul:last-child { margin-bottom: var(--hbd-split-clinic-list-bottom); } /* Live's bulleted list inside this copy: the item box is inset 16px from the column (its marker sits in that inset) and the items are 4px apart — measured on /location/waco-lab/ at 1440 and 1024, where the `li` boxes are x 96 / w 564 inside an 80/580 column and 58px apart at a 54px height. */ .hbd-w-split-content--clinic-photo .hbd-w-split-content__text ul { padding-inline-start: var(--hbd-split-clinic-list-indent); list-style-position: outside; } .hbd-w-split-content--clinic-photo .hbd-w-split-content__text li + li { margin-top: var(--hbd-split-clinic-list-gap); } /* Stacked, live gives both buttons the width of the wider one (211.33 on every clinic page), which is a `fit-content` column stretching its children — not a width typed per button. */ @media (max-width: 767px) { .hbd-w-split-content--clinic-photo .hbd-w-split-content__actions { flex-direction: column; align-items: stretch; width: fit-content; } } @media (min-width: 1024px) { /* Two equal halves, not 50%/auto: `flex: 1 1 0` is what makes the gap come out of both columns, which is how live's 580 + 120 + 580 fills its 1280 content box. */ .hbd-w-split-content--clinic-photo > .hbd-w__inner { flex-direction: row; align-items: center; } .hbd-w-split-content--clinic-photo .hbd-w-split-content__media, .hbd-w-split-content--clinic-photo .hbd-w-split-content__body { flex: 1 1 0; min-width: 0; } } /* ==================================== composition: framed-photo (PINCC) */ .hbd-w-split-content--framed-photo { padding-block: var(--hbd-split-pad-framed) var(--hbd-split-pad-framed-bottom); } .hbd-w-split-content--framed-photo > .hbd-w__inner { gap: var(--hbd-split-row-gap-framed); } .hbd-w-split-content--framed-photo .hbd-w-split-content__media { width: 100%; margin-bottom: var(--hbd-split-framed-media-bottom); } .hbd-w-split-content__frame { position: relative; width: 100%; height: var(--hbd-split-frame-h); border: var(--hbd-split-frame-border); border-radius: var(--hbd-split-frame-radius); overflow: hidden; background: var(--hbd-white); } .hbd-w-split-content__frame .hbd-w-split-content__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--hbd-split-frame-photo-radius); } /* The quote card hangs half outside the frame's bottom edge. */ .hbd-w-split-content__quote { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; transform: translateY(50%); } /* Astra styles every
with a 5px left rule, 20px of padding, 1.2em italic type — all of which this card resets, because live's is a plain rounded box of upright 18px copy. */ .hbd-w-split-content__quote-card { width: var(--hbd-split-quote-card-w); margin: 0; padding: var(--hbd-split-quote-card-pad); border: 0; background: var(--hbd-sky); border-radius: var(--hbd-split-frame-photo-radius); font-size: inherit; font-style: normal; } .hbd-w-split-content__quote-text { margin: 0; font-size: var(--hbd-split-text); line-height: var(--hbd-split-text-lh); letter-spacing: var(--hbd-split-ls); color: var(--hbd-ink); } /* Live's attribution opens with a
, so its box is two lines tall and starts flush with the end of the quote. A line of top padding is the same geometry without a stray
in the content. */ .hbd-w-split-content__quote-author { display: block; padding-top: var(--hbd-split-text-lh); font-family: var(--hbd-font-serif-2); font-style: normal; font-size: var(--hbd-split-text); line-height: var(--hbd-split-text-lh); letter-spacing: var(--hbd-split-ls); color: var(--hbd-ink); } /* Stacked, the text column clears the hanging card with a top margin — live's own value per band. */ .hbd-w-split-content--framed-photo .hbd-w-split-content__body { width: 100%; gap: var(--hbd-split-body-gap-framed); margin-top: var(--hbd-split-framed-body-top); } .hbd-w-split-content--framed-photo .hbd-w-split-content__head { gap: var(--hbd-split-body-gap-framed); } .hbd-w-split-content--framed-photo .hbd-w-split-content__group { gap: var(--hbd-split-body-gap-framed); } .hbd-w-split-content--framed-photo .hbd-w-split-content__heading { font-size: var(--hbd-split-h-framed); line-height: 1; } .hbd-w-split-content--framed-photo .hbd-w-split-content__text { margin-bottom: var(--hbd-split-text-gap); } @media (min-width: 1280px) { .hbd-w-split-content--framed-photo > .hbd-w__inner { flex-direction: row; align-items: flex-start; } .hbd-w-split-content--framed-photo .hbd-w-split-content__media, .hbd-w-split-content--framed-photo .hbd-w-split-content__body { width: 50%; } } /* ========================================= composition: artwork (PINCC) */ .hbd-w-split-content--artwork { padding-block: var(--hbd-split-pad-artwork); } .hbd-w-split-content--artwork > .hbd-w__inner { gap: var(--hbd-split-row-gap-artwork); } /* A letterboxed illustration in a box with a floor, not a cropped photo. */ .hbd-w-split-content--artwork .hbd-w-split-content__media { width: var(--hbd-split-artwork-media-w); min-height: var(--hbd-split-artwork-min-h); overflow: hidden; } .hbd-w-split-content--artwork .hbd-w-split-content__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .hbd-w-split-content--artwork .hbd-w-split-content__body { width: var(--hbd-split-artwork-body-w); gap: var(--hbd-split-body-gap-artwork); } .hbd-w-split-content--artwork .hbd-w-split-content__head { gap: var(--hbd-split-body-gap-artwork); } .hbd-w-split-content--artwork .hbd-w-split-content__group { gap: var(--hbd-split-body-gap-artwork); } /* The one heading on the site with *positive* tracking. */ .hbd-w-split-content--artwork .hbd-w-split-content__heading { font-size: var(--hbd-split-h-artwork); line-height: var(--hbd-split-h-artwork-lh); letter-spacing: var(--hbd-split-ls); } .hbd-w-split-content--artwork .hbd-w-split-content__text { margin-bottom: var(--hbd-split-text-gap); } @media (min-width: 768px) { .hbd-w-split-content--artwork > .hbd-w__inner { flex-direction: row; align-items: center; } } @media (min-width: 1280px) { .hbd-w-split-content--artwork .hbd-w-split-content__body { max-width: var(--hbd-split-artwork-body-max); } .hbd-w-split-content--artwork .hbd-w-split-content__media { flex: 1; width: auto; } } /* ========== composition: panel-photo (/treatment/hormone-replacement-therapy/) */ /* `#section-whyChooseHormonesSection` — a sky panel carrying a heading, one paragraph and one pill, with the photograph beside it **running off the section's own right edge** from 1024 up, dropping into the padded column at 768 and above the copy below it (docs/audit/widgets/split-content.md §11). Every number here was read off that page's single production load (`docs/audit/pages/shots/hrt/`), so the three that carry the section are named in §11.2: the 495px copy column, the 603px photo from 1024 and the 445px one at ≤767. */ .hbd-w-split-content--panel-photo { padding-block: var(--hbd-split-panel-pad); } .hbd-w-split-content--panel-photo > .hbd-w__inner { gap: var(--hbd-split-panel-row-gap); max-width: calc(var(--hbd-container) + 2 * var(--hbd-split-panel-gutter)); padding-inline: var(--hbd-split-panel-gutter); } .hbd-w-split-content--panel-photo .hbd-w-split-content__media { width: 100%; } .hbd-w-split-content--panel-photo .hbd-w-split-content__img { width: 100%; height: var(--hbd-split-panel-photo-h); object-fit: cover; border-radius: var(--hbd-split-panel-radius); } .hbd-w-split-content--panel-photo .hbd-w-split-content__body { gap: var(--hbd-split-panel-block-gap); } .hbd-w-split-content--panel-photo .hbd-w-split-content__head, .hbd-w-split-content--panel-photo .hbd-w-split-content__group { gap: var(--hbd-split-panel-head-gap); } .hbd-w-split-content--panel-photo .hbd-w-split-content__heading { font-size: var(--hbd-split-panel-heading); line-height: var(--hbd-split-panel-heading-lh); } .hbd-w-split-content--panel-photo .hbd-w-split-content__text { font-size: var(--hbd-split-panel-text); line-height: var(--hbd-split-panel-text-lh); letter-spacing: var(--hbd-split-ls); } /* live's `tracking-[2.5%]` (2026-09-23 pass) */ .hbd-w-split-content--panel-photo .hbd-w-split-content__text > * { margin-bottom: 0; } .hbd-w-split-content--panel-photo .hbd-w-split-content__text > * + * { margin-top: var(--hbd-split-panel-head-gap); } /* Stacked, live leads with the photograph whichever side it takes as a row — the opposite of the shared rule, which puts the media after the text while stacked — so the order is set here. */ .hbd-w-split-content--panel-photo .hbd-w-split-content__media { order: 1; } .hbd-w-split-content--panel-photo .hbd-w-split-content__body { order: 2; } @media (min-width: 768px) { /* 768–1023: the padded two-column row, photo right, the copy a 30% column against it and vertically centred against the photograph — live's 558px box is taller than its copy, which is what makes the section 40 + 558 + 40 there. */ .hbd-w-split-content--panel-photo > .hbd-w__inner { flex-direction: row; align-items: stretch; } .hbd-w-split-content--panel-photo .hbd-w-split-content__body { flex: 0 0 var(--hbd-split-panel-copy-w); padding-top: var(--hbd-split-panel-copy-pad-top); } .hbd-w-split-content--panel-photo .hbd-w-split-content__media { flex: 1 1 0; min-width: 0; } /* The row is `md:items-stretch` with the photo `md:h-full md:min-h-[480px]`: 480 is a floor. */ .hbd-w-split-content--panel-photo .hbd-w-split-content__img { height: 100%; min-height: var(--hbd-split-panel-photo-h); } /* As a row the media takes the side the field asks for — live's one instance is photo right. */ .hbd-w-split-content--panel-photo.hbd-w-split-content--media-right .hbd-w-split-content__body { order: 1; } .hbd-w-split-content--panel-photo.hbd-w-split-content--media-right .hbd-w-split-content__media { order: 2; } .hbd-w-split-content--panel-photo.hbd-w-split-content--media-left .hbd-w-split-content__media { order: 1; } .hbd-w-split-content--panel-photo.hbd-w-split-content--media-left .hbd-w-split-content__body { order: 2; } } @media (min-width: 1024px) { /* From 1024 the photograph leaves the container: the inner drops its own gutter and its cap, the copy column carries the gutter back on the left, and the photo runs to the section's edge on a fixed 603px height — which is the section's whole height, live's own box at 1440 and 1024. */ .hbd-w-split-content--panel-photo { padding-block: 0; } /* The copy stays inside the site's 1440 container and the photograph runs from there to the window's edge: capped and centred, with the media pulling itself back out by whatever the window is wider than the container (client QC, 2026-09-21 — above 1440 the copy hugged the viewport gutter and the photo grew to two thirds of the screen). Both terms are 0 at 1440, so every measured width here is untouched. */ .hbd-w-split-content--panel-photo > .hbd-w__inner { max-width: var(--hbd-split-panel-max); margin-inline: auto; padding-inline: 0; gap: var(--hbd-row-gutter); align-items: center; } .hbd-w-split-content--panel-photo .hbd-w-split-content__media { margin-right: calc((100% - 100vw) / 2); } .hbd-w-split-content--panel-photo .hbd-w-split-content__body { flex: 0 0 calc(var(--hbd-split-panel-copy-w) + var(--hbd-row-gutter)); } .hbd-w-split-content--panel-photo.hbd-w-split-content--media-right .hbd-w-split-content__body { padding-left: var(--hbd-row-gutter); } .hbd-w-split-content--panel-photo.hbd-w-split-content--media-left .hbd-w-split-content__body { padding-right: var(--hbd-row-gutter); } .hbd-w-split-content--panel-photo .hbd-w-split-content__img { height: var(--hbd-split-panel-photo-h); border-radius: 0; } }