/*
 * hbd-cta-banner — the full-bleed closing CTA.
 *
 * Every number here is a var(--hbd-*) from assets/css/tokens.css, where the measurement it came from
 * is named. Breakpoints are the ones production actually switches at: 768 (layout, type, the 650px
 * floor) and 1024 (the paragraph column) — the 640 and 1280 steps live also takes are the shared
 * --hbd-row-gutter scale and live's own image swap, neither of which this widget re-declares.
 * Tables: docs/audit/widgets/cta-banner.md. Enqueued as `hbd-widget-cta-banner` only on pages that
 * render the widget.
 */

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

/* Live's section is `position: relative; min-height: 612px` at every width; from 768 up the content
   box's own 650px floor is what actually sets the height. */
.hbd-w-cta-banner { min-height: var(--hbd-cta-min-h-sm); }

/* The cover photo is positioned against the <section>, so this box must stay unpositioned —
   .hbd-w (design.css) is the relative ancestor and .hbd-w-cta-banner__content carries the z-index.
   This is also live's padded flex column: the 1440 cap, the 20/60/80 gutter and the vertical
   centring all live on one element, exactly as they do in production. */
.hbd-w-cta-banner > .hbd-w__inner {
	position: static;
	width: 100%;
	max-width: var(--hbd-cta-max);
	margin-inline: auto;
	padding-inline: var(--hbd-row-gutter);
	padding-block: var(--hbd-cta-pad);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

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

.hbd-w-cta-banner__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--hbd-cta-gap); }
/* The shared heading/eyebrow utilities carry their own bottom margins; the column's gap is the single
   source of vertical rhythm here. */
.hbd-w-cta-banner__content > * { margin: 0; }

/* Loretta Light 48/52.8 at every width. base.css puts -0.01em on every heading; live has none. */
.hbd-w-cta-banner__heading { font-size: var(--hbd-cta-heading); line-height: var(--hbd-cta-heading-lh); letter-spacing: normal; }
/* Live's own CSS un-italicises the <em> in this heading — the probe reads font-style: normal on it,
   and the 1440 screenshot shows "support" upright. base.css italicises every heading em, which is
   right everywhere else on the site, so the exception is scoped to this widget
   (docs/audit/widgets/cta-banner.md §5.2). */
.hbd-w-cta-banner__heading em { font-style: normal; }

.hbd-w-cta-banner__text { width: 100%; max-width: var(--hbd-cta-text-col); font-size: var(--hbd-cta-text); line-height: var(--hbd-cta-text-lh); }
.hbd-w-cta-banner__text > p { margin: 0; }
/* The block sits 4px above its first line on live — measured on every width of the HRT banner. */
.hbd-w-cta-banner__text > p:first-child { margin-top: var(--hbd-cta-text-gap); }
.hbd-w-cta-banner__text > p + p { margin-top: var(--hbd-cta-gap); }

/* ---------------------------------------------------------------- actions */

.hbd-w-cta-banner__actions { display: flex; flex-direction: column; align-items: center; gap: var(--hbd-cta-gap); }

/* Astra's global a/button rules put a box-shadow (and a hover colour) on anything interactive; live
   has neither, in either state. */
.hbd-w-cta-banner__actions .hbd-btn,
.hbd-w-cta-banner__actions .hbd-btn:hover,
.hbd-w-cta-banner__actions .hbd-btn:focus,
.hbd-w-cta-banner__actions .hbd-btn:focus-visible { box-shadow: none; text-decoration: none; }
.hbd-w-cta-banner__actions .hbd-btn:focus-visible { outline: 2px solid var(--hbd-white); outline-offset: 3px; }
/* Live centres the label in both pills. .hbd-btn is content-sized, so this changes no measured box —
   it is here so a label that is ever given room to move stays where production puts it. */
.hbd-w-cta-banner__actions .hbd-btn { justify-content: center; text-align: center; }

/* The filled pill is 44px tall on live because it has no border; .hbd-btn gives every button a 1px
   transparent one, which made it 46. The colour is declared even at zero width, as live declares it. */
.hbd-w-cta-banner__actions .hbd-btn--white { border-width: 0; border-color: var(--hbd-ink); }
.hbd-w-cta-banner__actions .hbd-btn--white:hover,
.hbd-w-cta-banner__actions .hbd-btn--white:focus-visible { background: var(--hbd-slate); color: var(--hbd-white); border-color: var(--hbd-white); }

/* The outline pill: 12px 16px rather than .hbd-btn's 12/24, white at 90% at rest and solid white on
   hover. `.hbd-btn--outline` borders with currentColor, which hover would turn ink. */
.hbd-w-cta-banner__actions .hbd-btn--outline { padding-inline: var(--hbd-cta-btn-pad-2); color: var(--hbd-white); border-color: var(--hbd-white-a90); }
.hbd-w-cta-banner__actions .hbd-btn--outline:hover,
.hbd-w-cta-banner__actions .hbd-btn--outline:focus-visible { background: var(--hbd-white); color: var(--hbd-ink); border-color: var(--hbd-white); }

/* ------------------------------------------------------------------ media */

.hbd-w-cta-banner__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hbd-w-cta-banner__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* The focal point is the single-image answer to live's three art-directed crops: production serves a
   landscape, a tablet and a portrait file and shows one per band, all of them `50% 0%`. */
.hbd-w-cta-banner--focal-center .hbd-w-cta-banner__media img { object-position: 50% 50%; }
.hbd-w-cta-banner--focal-top .hbd-w-cta-banner__media img { object-position: 50% 0%; }
.hbd-w-cta-banner--focal-bottom .hbd-w-cta-banner__media img { object-position: 50% 100%; }
.hbd-w-cta-banner--focal-left .hbd-w-cta-banner__media img { object-position: 0% 50%; }
.hbd-w-cta-banner--focal-right .hbd-w-cta-banner__media img { object-position: 100% 50%; }

/* Above the cover <img>, not below it: the Design section's own overlay (.hbd-row--image::before) is a
   sibling of .hbd-w__inner and would be painted over by this image. Only rendered when the slider is
   above 0; the opacity arrives as the inline --hbd-cta-overlay custom property, the convention
   design.css uses. Live scopes its own 30% overlay to the portrait crop's band; here it is the
   editor's contrast control at every width (§5.5). */
.hbd-w-cta-banner__overlay { position: absolute; inset: 0; background: var(--hbd-black); opacity: var(--hbd-cta-overlay, 0); pointer-events: none; }

/* -------------------------------------------------------------- 768 and up */

@media (min-width: 768px) {
	/* The measured floor, per instance. Below this the banner sizes from its content and only the
	   section's 612px floor applies — live at 640 is 612 tall around a 611.19 column. */
	.hbd-w-cta-banner > .hbd-w__inner { min-height: var(--hbd-cta-min-h); align-items: flex-start; }
	.hbd-w-cta-banner__content { align-items: flex-start; }
	.hbd-w-cta-banner__actions { flex-direction: row; align-items: flex-start; }
}

/* ------------------------------------------------------- centred alignment */

/* No production banner uses this — all five are left — so it carries no measured numbers; it is the
   `align` select from the task's form spec, after the 768 rules so it wins at every width. */
.hbd-w-cta-banner--center > .hbd-w__inner,
.hbd-w-cta-banner--center .hbd-w-cta-banner__content { align-items: center; text-align: center; }

/* ------------------------------------------------------------------ layout: split

   /pincc/ #section-impactSection — the seventh live composition and the only one that is not one
   photograph with the copy on it: a second photograph takes half the band and the copy panel takes
   the other half, on the banner's own photo. Below 1024 the two stack, each with its own height, and
   live's 4px seam between them is there at every width. Measured 2026-09-21
   (docs/audit/widgets/cta-banner.md §7).

   The grid goes on `.hbd-w__inner`, not on the section: the section has exactly one child. */
.hbd-w-cta-banner--split { min-height: 0; }
/* The seam between the photograph and the panel is a pink rule on production, sampled off
   its own screenshot, exactly the 4px the gap already was (client QC, 2026-09-21). The grid's own
   background is what paints it: the two columns and the gap fill the inner exactly, so the only place
   this colour shows is the seam. */
.hbd-w-cta-banner--split > .hbd-w__inner { position: static; display: grid; gap: var(--hbd-cta-split-seam); background: var(--hbd-cta-split-seam-color); max-width: none; padding: 0; min-height: 0; }
.hbd-w-cta-banner--split .hbd-w-cta-banner__aside { height: var(--hbd-cta-split-photo-h); }
.hbd-w-cta-banner--split .hbd-w-cta-banner__aside img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The banner's own photo stops being a full-bleed cover and becomes the copy panel's ground. */
.hbd-w-cta-banner--split .hbd-w-cta-banner__media { inset: auto 0 0 0; height: var(--hbd-cta-split-panel-h); }
.hbd-w-cta-banner--split .hbd-w-cta-banner__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; width: 100%; max-width: none; height: var(--hbd-cta-split-panel-h); padding: var(--hbd-cta-split-pad); gap: var(--hbd-cta-split-gap); }
.hbd-w-cta-banner--split .hbd-w-cta-banner__heading { font-size: var(--hbd-cta-split-h); line-height: var(--hbd-cta-split-h-lh); }
.hbd-w-cta-banner--split .hbd-w-cta-banner__text { max-width: none; font-size: var(--hbd-cta-split-text); line-height: var(--hbd-cta-split-text-lh); }
.hbd-w-cta-banner--split .hbd-w-cta-banner__text > p { margin: 0; }
.hbd-w-cta-banner--split .hbd-w-cta-banner__actions { gap: var(--hbd-cta-split-actions-gap); margin-top: 0; }
.hbd-w-cta-banner--split .hbd-w-cta-banner__actions .hbd-btn { flex: 1 1 100%; justify-content: center; }

@media (min-width: 768px) {
	.hbd-w-cta-banner--split .hbd-w-cta-banner__actions .hbd-btn { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
	/* Two halves of live's 603px band; the photo fills its half and the copy panel sits on the banner
	   photo, which is now only the right half of the section. */
	/* Production's two columns are not equal: the photograph is 716 and the panel 720 at 1440, i.e. the
	   panel takes a true half and the photograph gives up the seam. */
	.hbd-w-cta-banner--split > .hbd-w__inner { grid-template-columns: calc(50% - var(--hbd-cta-split-seam)) 50%; min-height: var(--hbd-cta-split-h-min); }
	/* The photograph matches the panel's height rather than its own aspect ratio. `height: auto` alone
	   left the `<img>`'s `height: 100%` with no definite parent to resolve against, so it fell back to
	   the intrinsic 1024×600 and came up 182px short of the band (client QC, 2026-09-21). */
	.hbd-w-cta-banner--split .hbd-w-cta-banner__aside { height: var(--hbd-cta-split-h-min); }
	/* Live's filled pill measures 44, not 46: `.hbd-btn`'s 1px transparent border is cancelled here as
	   it is in the hero's actions row, the footer pills and image-cards' button slot. That is the fifth
	   copy, which CLAUDE.md's Plan 6 backlog names as the signal to replace all five with one
	   `--hbd-btn-border-width` the filled styles zero by default. */
	.hbd-w-cta-banner--split .hbd-w-cta-banner__actions .hbd-btn { border-width: 0; }
	/* The panel's ground is a true half anchored right — 720 at 1440, measured — so the seam is taken
	   out of the photograph's column rather than split between the two. */
	.hbd-w-cta-banner--split .hbd-w-cta-banner__media { inset: 0 0 0 auto; width: 50%; height: auto; }
	/* The copy is centred in the band on production (its block sits 197.5px below the top of a 603px
	   panel, which is dead centre). The column has to fill the band for `justify-content: center` to
	   have anything to centre in — left to size itself it was 352 tall and the copy rode high. */
	.hbd-w-cta-banner--split .hbd-w-cta-banner__content { height: auto; min-height: var(--hbd-cta-split-h-min); max-width: var(--hbd-cta-split-content-max); margin-inline: auto; }
}