/*
 * hbd-offerings — the offerings row, in both live compositions.
 *
 * 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: 640 / 768 / 1024 / 1280
 * (docs/audit/widgets/offerings.md §2–§3). Enqueued as `hbd-widget-offerings` 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, and the
   section's own flex column, which is where the 20px between the heading and the row comes from. */
.hbd-w-offerings > .hbd-w__inner { max-width: calc(var(--hbd-container) + 2 * var(--hbd-row-gutter)); padding-inline: var(--hbd-row-gutter); display: flex; flex-direction: column; gap: var(--hbd-offerings-head-gap); }
/* Both variants carry live's own 40 / 80 of vertical padding. Plan 2 recorded the image-cards section
   as having none, because the sample it was measured against was matched on live's *inner* 1280 box
   rather than on `#section-imageCardsSection`; measuring the whole clinic page in Plan 4 Task 2 showed
   live's section to be exactly 2 x 80 taller at 1440 and 2 x 40 taller below 1280 than a section
   without it (docs/audit/widgets/offerings.md §7). */
.hbd-w-offerings--icon-tiles,
.hbd-w-offerings--image-cards { padding-block: var(--hbd-offerings-pad); }

/* --------------------------------------------------------------- heading */

/* Live's tile-row heading sits in a flex row with `justify-content: space-between` and an empty second
   slot, so the heading box is shrink-to-fit (114.2px for "Our offerings:") rather than the full content
   width. The image-cards heading is a plain block and does fill it. */
.hbd-w-offerings--icon-tiles .hbd-w-offerings__head { display: flex; justify-content: space-between; }

/* base.css styles every .hbd-heading as Loretta 300 / 1.1 / -0.01em ink with a 1rem bottom margin;
   both live headings are EK Notice Classic in navy with no margin at all, so all of it is reset here. */
.hbd-w-offerings__heading { margin: 0; font-family: var(--hbd-font-serif-2); color: var(--hbd-navy); letter-spacing: normal; }
/* Weight 400, although live's rule says 500: live loads exactly one EK Notice face (its computed
   family is the literal "EKNoticeClassicRegular") and Chrome does not synthesise bold below 600, so
   production paints the *Regular* glyphs. The theme ships a real Medium, so obeying live's declared
   500 would render a heavier cut than production does — and measurably so: 119.25px of "Our
   offerings:" against live's 114.2. At 400 the box is 114.2 to the hundredth. */
.hbd-w-offerings--icon-tiles .hbd-w-offerings__heading { font-size: var(--hbd-offerings-heading); line-height: var(--hbd-offerings-heading-lh); font-weight: 400; }
.hbd-w-offerings--image-cards .hbd-w-offerings__heading { font-size: var(--hbd-offerings-cards-heading); line-height: var(--hbd-offerings-cards-heading-lh); font-weight: 400; letter-spacing: var(--hbd-offerings-cards-heading-ls); }

/* ------------------------------------------------------------- icon tiles */

.hbd-w-offerings--icon-tiles .hbd-w-offerings__grid { display: flex; flex-direction: column; gap: var(--hbd-offerings-gap); }
/* `1 1 0` with live's own 417px cap: at 1440 that is what makes three tiles 417 wide with 13px left
   over instead of 421.33 each. The cap only applies while they are in a row, as on live. */
.hbd-w-offerings__item { flex: 1 1 0; min-width: 0; }

/* `color`/`text-decoration` are not housekeeping: base.css paints every <a> blue and swings it navy on
   hover, and Astra adds its own. Live's tile link is plain black (the tile inside it is ink) and
   changes nothing by itself. */
.hbd-w-offerings__tile-link { display: block; color: var(--hbd-black); text-decoration: none; }
.hbd-w-offerings__tile-link:hover, .hbd-w-offerings__tile-link:focus { color: var(--hbd-black); text-decoration: none; }
.hbd-w-offerings__tile-link:focus-visible { outline: 2px solid var(--hbd-navy); outline-offset: 4px; border-radius: var(--hbd-radius-card); }

/* .hbd-card ships a 16px radius and 32px of padding; live's tile is a 10px pill with side padding
   only and a fixed 150px height. `box-shadow`/`border` are reset because Astra's global rules put a
   shadow and a border colour on anything interactive — in rest *and* on hover, where live's tile
   changes nothing but its background and its text colour (docs/audit/widgets/offerings.md §4). */
.hbd-w-offerings__tile { display: flex; align-items: center; justify-content: space-between; gap: var(--hbd-offerings-tile-gap); height: var(--hbd-offerings-tile-h); padding: 0 var(--hbd-offerings-tile-pad); border: 0; border-radius: var(--hbd-radius-card); box-shadow: none; background: var(--hbd-sky); color: var(--hbd-ink); transition: background-color var(--hbd-dur) var(--hbd-ease), color var(--hbd-dur) var(--hbd-ease); }
/* The measured hover: sky → slate, ink → white. Nothing else moves. */
.hbd-w-offerings__tile-link:hover .hbd-w-offerings__tile, .hbd-w-offerings__tile-link:focus-visible .hbd-w-offerings__tile { background: var(--hbd-slate); color: var(--hbd-white); box-shadow: none; }

.hbd-w-offerings__title-box { max-width: var(--hbd-offerings-title-max); }
/* The tile title inherits the tile's colour so the hover carries it; the card title never changes. */
.hbd-w-offerings--icon-tiles .hbd-w-offerings__title { margin: 0; font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-offerings-title); line-height: var(--hbd-offerings-title-lh); letter-spacing: normal; color: inherit; }

.hbd-w-offerings__icon { flex: 0 0 auto; }
.hbd-w-offerings__icon img { display: block; width: var(--hbd-offerings-icon); height: var(--hbd-offerings-icon); object-fit: contain; }

/* A 38px navy circle with a 14px glyph — decorative, because the whole tile is already the link.
   It keeps its navy on the slate hover, exactly as live's does. */
.hbd-w-offerings__arrow { flex: 0 0 var(--hbd-offerings-arrow); box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: var(--hbd-offerings-arrow); height: var(--hbd-offerings-arrow); padding: var(--hbd-offerings-arrow-pad); border-radius: var(--hbd-radius-pill); background: var(--hbd-navy); color: var(--hbd-white); }
.hbd-w-offerings__arrow svg { display: block; width: var(--hbd-offerings-arrow-glyph); height: var(--hbd-offerings-arrow-glyph); }

/* ------------------------------------------------------------ image cards */

.hbd-w-offerings--image-cards .hbd-w-offerings__grid { display: grid; gap: var(--hbd-offerings-cards-gap); }
/* .hbd-card again: live's card is a 10px radius with 24px of padding, not 16/32. */
.hbd-w-offerings__card { padding: var(--hbd-offerings-card-pad); border-radius: var(--hbd-radius-card); background: var(--hbd-sky); }
.hbd-w-offerings__card-inner { display: flex; flex-direction: column; gap: var(--hbd-offerings-card-gap); height: 100%; }

.hbd-w-offerings__media { border-radius: var(--hbd-offerings-media-radius); overflow: hidden; }
.hbd-w-offerings__media img { display: block; width: 100%; height: var(--hbd-offerings-media-h); object-fit: cover; }

.hbd-w-offerings__body { display: flex; flex-direction: column; gap: var(--hbd-offerings-card-text-gap); }
.hbd-w-offerings--image-cards .hbd-w-offerings__title { margin: 0; font-family: var(--hbd-font-display); font-weight: 300; font-size: var(--hbd-offerings-card-title); line-height: var(--hbd-offerings-card-title-lh); letter-spacing: normal; color: var(--hbd-ink); }
.hbd-w-offerings__text { margin: 0; font-family: var(--hbd-font-body); font-size: var(--hbd-offerings-card-text); line-height: var(--hbd-offerings-card-text-lh); color: var(--hbd-ink); }

/* `margin-top: auto` rather than `justify-content: space-between`: live keeps the text 8px under the
   photo in a short card and pushes only the button down. */
.hbd-w-offerings__action { margin-top: auto; padding-top: var(--hbd-offerings-card-action-pad); }
/* `.hbd-btn` gives every button a 1px transparent border; live's filled pill has none, and that 1px
   would make it 135.97 × 46 instead of 133.97 × 44 (footer.css and hbd-faq zero it the same way). */
.hbd-w-offerings__action .hbd-btn { border-width: 0; }

/* ------------------------------------------------------------ breakpoints */

@media (min-width: 1024px) {
	.hbd-w-offerings--icon-tiles .hbd-w-offerings__grid { flex-direction: row; }
	.hbd-w-offerings__item { max-width: var(--hbd-offerings-tile-max); }
}
@media (min-width: 1280px) {
	.hbd-w-offerings--image-cards .hbd-w-offerings__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.hbd-w-offerings__tile { transition: none; }
}