/*
 * hbd-care-options — the two-card "select your care" section, in the one composition production uses.
 *
 * Every number here is a var(--hbd-care-*) 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/care-options.md). Enqueued as `hbd-widget-care-options` only
 * on pages that render the widget.
 *
 * The two live instances — home's "Select your Hormone Care" and virtual-care's "Which Option is
 * Right for Me?" — are the same boxes with different data (§1 of the measurement doc), so there is
 * one block of rules here and no variant modifier.
 */

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

/* Live's wrapper is a flat 1440px box with a discrete 20 / 60 / 80 gutter inside it and 80px of
   vertical padding at every width — not the theme's clamp()ed --hbd-gutter, and not 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-care-options > .hbd-w__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hbd-care-gap);
	max-width: var(--hbd-care-max);
	padding-inline: var(--hbd-care-gutter);
	padding-block: var(--hbd-care-pad);
}

/* --------------------------------------------------------------- head row */

/* Stacked and left-aligned below 1024; from it the intro sits at the far right, its last line on the
   heading's bottom edge (live's `lg:items-end`). */
.hbd-w-care-options__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hbd-care-head-gap);
}
/* base.css gives every .hbd-heading Loretta 300 / 1.1 / -0.01em and a 1rem bottom margin; live's has
   no tracking, no margin, and holds its 48px at every width. The two families are live's own and are
   load-bearing: the heading element is set in the body face and only its inner <span> in Loretta, so
   each line box is the union of two struts (53.795px, not 52.8px). See tpl/default.php. */
.hbd-w-care-options__heading {
	font-family: var(--hbd-font-body);
	margin: 0;
	font-size: var(--hbd-care-h);
	line-height: var(--hbd-care-h-lh);
	letter-spacing: normal;
	color: var(--hbd-ink);
}
.hbd-w-care-options__heading-face { font-family: var(--hbd-font-display); }
.hbd-w-care-options__intro {
	width: 100%;
	max-width: var(--hbd-care-intro-max);
	margin: 0;
	font-size: var(--hbd-care-intro);
	line-height: var(--hbd-care-intro-lh);
	letter-spacing: var(--hbd-care-ls);
	color: var(--hbd-ink);
}

@media (min-width: 1024px) {
	.hbd-w-care-options__head { flex-direction: row; align-items: flex-end; }
}

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

.hbd-w-care-options__cards {
	display: grid;
	grid-template-columns: repeat(var(--hbd-care-cards-cols), minmax(0, 1fr));
	gap: var(--hbd-care-cards-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* No bottom padding: the checklist's own 60px bottom margin is the floor when there is no mockup,
   and the mockup is flush with the bottom edge when there is one. */
.hbd-w-care-options__card {
	display: flex;
	flex-direction: column;
	padding: var(--hbd-care-card-pad-top) var(--hbd-care-card-pad-x) 0;
	background: var(--hbd-care-card-bg);
	border-radius: var(--hbd-care-card-radius);
	text-align: center;
}

/* EK Notice Classic at a computed weight of 400, and *not* uppercase — the one serif label on the
   site that is set in sentence case. */
.hbd-w-care-options__label {
	margin: 0 0 var(--hbd-care-label-space);
	font-family: var(--hbd-font-serif-2);
	font-weight: 400;
	font-size: var(--hbd-care-label);
	line-height: var(--hbd-care-label-lh);
	letter-spacing: var(--hbd-care-label-ls);
	color: var(--hbd-ink);
}

.hbd-w-care-options__card-head {
	display: flex;
	flex-direction: column;
	gap: var(--hbd-care-card-head-gap);
	margin-bottom: var(--hbd-care-card-head-space);
}
/* Live's heading is `mx-auto` in a flex column, which sizes it to its content and centres it — so it
   wraps on its own words, not on the card's width, until the card is narrower than the longest line. */
.hbd-w-care-options__card-heading {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	font-size: var(--hbd-care-card-h);
	line-height: var(--hbd-care-card-h-lh);
	letter-spacing: normal;
	color: var(--hbd-ink);
}
.hbd-w-care-options__card-text {
	max-width: var(--hbd-care-card-text-max);
	margin: 0 auto;
	font-size: var(--hbd-care-card-text);
	line-height: var(--hbd-care-card-text-lh);
	letter-spacing: var(--hbd-care-ls);
	color: var(--hbd-ink);
}
/* The pill is centred by the card's own text-align; the block around it is live's full-width <div>. */
.hbd-w-care-options__action { width: 100%; }
/* Live's pills are exactly 44 tall: .hbd-btn ships a 1px transparent border, which they do not have.
   Same fix footer.css and hbd-split-content make. */
.hbd-w-care-options .hbd-btn { border-width: 0; }

/* -------------------------------------------------------------- checklist */

/* .hbd-list is a grid with its own gap and bottom margin; live's is a dashed box holding a flex
   column, centred, and capped at 464 from 1280. */
.hbd-w-care-options__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--hbd-care-item-gap);
	width: 100%;
	max-width: var(--hbd-care-check-max);
	margin: 0 auto var(--hbd-care-check-space);
	padding: var(--hbd-care-check-pad);
	border: var(--hbd-care-check-border);
	border-radius: var(--hbd-care-check-radius);
}
.hbd-w-care-options__checklist .hbd-list__item {
	display: flex;
	align-items: center;
	gap: var(--hbd-care-item-icon-gap);
}
/* Live's marker is a 32px ring drawn on ink at 40% — .hbd-list__marker ships 28px at ink 50%. */
.hbd-w-care-options__checklist .hbd-list__marker {
	width: var(--hbd-care-item-icon);
	height: var(--hbd-care-item-icon);
	flex-shrink: 0;
	border-color: var(--hbd-ink-a40);
}
/* And its tick is ink, not the theme-wide blue, sized to live's painted 11.3 × 8 glyph. */
.hbd-w-care-options__checklist .hbd-list__marker svg {
	width: var(--hbd-care-item-tick);
	height: var(--hbd-care-item-tick);
	color: var(--hbd-ink);
}
/* The only left-aligned text in the card. Live's span is a plain flex item — it takes its content's
   width and only shrinks when the row is too narrow, so a short item does not stretch to the box. */
.hbd-w-care-options__checklist .hbd-list__text {
	min-width: 0;
	text-align: left;
	font-size: var(--hbd-care-item);
	line-height: var(--hbd-care-item-lh);
	letter-spacing: var(--hbd-care-ls);
	color: var(--hbd-ink);
}

/* ------------------------------------------------------------ the mockup */

/* `margin-top: auto` pins the mockup to the card's bottom edge, so both cards' images sit on the
   floor whatever the copy above them does — which is what makes the two cards read as a pair. */
.hbd-w-care-options__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: auto;
}
.hbd-w-care-options__img {
	display: block;
	width: 100%;
	max-width: var(--hbd-care-media-max);
	height: auto;
	margin-top: var(--hbd-care-media-gap);
	object-fit: contain;
}