/*
 * hbd-cta-card — the card beside the FAQ accordion.
 *
 * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from is
 * named. Live renders this card at 1280 and up only (its column is `hidden xl:block`), so 1280 is the
 * one breakpoint with live geometry behind it — see docs/audit/widgets/cta-card.md §1. Enqueued as
 * `hbd-widget-cta-card` only on pages that render the widget.
 */

/* ------------------------------------------------------------------ shell */

/* Live's discrete 20 / 60 / 80 section gutter rather than the theme's clamp()ed --hbd-gutter, so the
   card lines up with the accordion beside it. */
.hbd-w-cta-card > .hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); }

/* ------------------------------------------------------------------- card */

/* 600px on an 8px radius, no padding, no border, no shadow. `overflow: hidden` is ours: live lets the
   <img> carry the same radius instead, which leaves the corners to two rounded boxes agreeing. */
.hbd-w-cta-card__card { position: relative; height: var(--hbd-cta-card-h); border-radius: var(--hbd-cta-card-radius); overflow: hidden; }

/* The surface, when no image is chosen. No live card uses any of these — every one is a photo
   (docs/audit/widgets/cta-card.md §4). */
.hbd-w-cta-card--grad-orange { background: var(--hbd-grad-orange); }
.hbd-w-cta-card--grad-blue-dark { background: var(--hbd-grad-blue-dark); }
.hbd-w-cta-card--grad-teal-orange { background: var(--hbd-grad-teal-orange); }
.hbd-w-cta-card--navy { background: var(--hbd-navy); }
.hbd-w-cta-card--sky { background: var(--hbd-sky); }

/* The image *is* the card: absolutely behind the copy, cropped from the centre. */
.hbd-w-cta-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* ---------------------------------------------------------------- content */

/* Live pins the copy to the panel's edges and lets `space-between` do the rest: the head block at the
   top, the closing line at the bottom, and — with only a heading, as on /service/membership/ — the
   head block alone at the top. */
.hbd-w-cta-card__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }

/* No explicit width: as a fit-content flex item this block is as wide as its widest line and no wider
   than the card — 319.2px for home's "Medicine that's not", the full 480 for the treatment pages'
   longer sentence. Both measured; one rule. */
.hbd-w-cta-card__head { display: flex; flex-direction: column; align-items: center; gap: var(--hbd-cta-card-gap); padding-top: var(--hbd-cta-card-pad-top); text-align: center; }

.hbd-w-cta-card__heading { margin: 0; font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-cta-card-heading); line-height: var(--hbd-cta-card-heading-lh); letter-spacing: var(--hbd-cta-card-heading-ls); color: var(--hbd-text); }
/* base.css italicises every heading `em` in Loretta at weight 300 — the theme-wide accent. Live's
   accent on this card is the *same* EK Notice Classic face at 400, which has a real italic and so
   slants on its own (caught as a 178.13 × 47 span where live measures 175.25 × 48). Specificity 0,2,1
   so it beats base.css's `.hbd-heading em` whatever order the stylesheets land in. */
.hbd-heading.hbd-w-cta-card__heading em, .hbd-heading.hbd-w-cta-card__heading i { font-family: inherit; font-weight: inherit; }

/* `.hbd-on-dark h2` in utilities.css paints headings pure white; live's card copy is cream, and the
   closing line is the same cream, so both are said here at a specificity that beats it. */
.hbd-on-dark .hbd-w-cta-card__heading, .hbd-on-dark .hbd-w-cta-card__footer, .hbd-on-dark .hbd-w-cta-card__text { color: var(--hbd-cream); }

/* No live card has this paragraph (docs/audit/widgets/cta-card.md §5) — body type, so it cannot be
   mistaken for a second heading. */
.hbd-w-cta-card__text { margin: 0; font-size: var(--hbd-fs-body); line-height: var(--hbd-lh-body); color: var(--hbd-text); }
.hbd-w-cta-card__text p { margin: 0; }
.hbd-w-cta-card__text p + p { margin-top: var(--hbd-space-4); }

/* `.hbd-btn` gives every button a 1px transparent border; live's filled pill has none, and that 1px
   would make this button 135.97 × 46 instead of 133.97 × 44 (hbd-faq's footer zeroes it the same way). */
.hbd-w-cta-card__btn.hbd-btn { border-width: 0; }

/* 300px wide, centred, 12px off the card's bottom edge. */
.hbd-w-cta-card__footer { margin: 0 0 var(--hbd-cta-card-footer-gap); max-width: var(--hbd-cta-card-footer-max); font-family: var(--hbd-font-serif-2); font-weight: 400; font-size: var(--hbd-cta-card-footer); line-height: var(--hbd-cta-card-footer-lh); letter-spacing: var(--hbd-cta-card-heading-ls); color: var(--hbd-text); text-align: center; }

/* ------------------------------------------------------------- modifiers */

/* Two opt-in classes for the Design section's **Extra CSS classes** field, both reproducing something
   the live *row* does rather than something the card does:
   - `hbd-w-cta-card--beside-faq` sizes the card to the FAQ row's first cell (`w-2/5` of the row less
     its 80px gap: 480 at 1440, 416 at 1280). It is what /widget-gallery/ uses, because the gallery has
     no two-column Page Builder row to put the card in; on a real page the row's cell does this.
   - `hbd-w-cta-card--desktop-only` hides the card below 1280, which is where live's column stops
     existing. Not the default: a card dropped in a one-column layout should still be readable. */
@media (min-width: 1280px) {
	/* Left-aligned, like the live cell: the card is the row's *first* column, not a centred block. */
	.hbd-w-cta-card--beside-faq .hbd-w-cta-card__card { max-width: calc((100% - var(--hbd-cta-card-row-gap)) * var(--hbd-cta-card-col)); }
}
@media (max-width: 1279px) {
	.hbd-w-cta-card--desktop-only { display: none; }
}