/*
 * hbd-feature-cards — the "why us" card row, in the two compositions production uses.
 *
 * Every number here is a var(--hbd-fc-*) from assets/css/tokens.css, where the measurement it came from
 * is named. Breakpoints are production's own Tailwind scale: 768 / 1024 / 1280
 * (docs/audit/widgets/feature-cards.md). Enqueued as `hbd-widget-feature-cards` only on pages that
 * render the widget.
 *
 * The shared rules below are the shell and the head; `.hbd-w-feature-cards--panel` (membership) and
 * `.hbd-w-feature-cards--photo` (home) each carry their own card, because the two share the *data* and
 * nothing else — sixteen measured values differ (doc §5.2).
 *
 * One card markup serves both: body (title + text) then media. `panel` lays them out as a flex row,
 * `photo` takes the media out of flow behind the body. No script: neither live section has a link, a
 * button or a disclosure anywhere (doc §4).
 */

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

/* Live's wrapper is a flat 1440px box with the site's discrete 20 / 60 / 80 gutter inside it — not the
   theme's clamp()ed --hbd-gutter, and not left to Design → Vertical padding, so a dropped-in instance
   matches production. `photo` overrides both the gutter ladder and the padding further down. */
.hbd-w-feature-cards > .hbd-w__inner {
	max-width: var(--hbd-fc-max);
	padding-inline: var(--hbd-fc-gutter);
	padding-block: var(--hbd-fc-pad);
	display: flex;
	flex-direction: column;
	gap: var(--hbd-fc-block-gap);
}

/* --------------------------------------------------------------- the head */

/* Stacked until the composition's own breakpoint, then heading and intro on one row. */
.hbd-w-feature-cards__head {
	display: flex;
	flex-direction: column;
	gap: var(--hbd-fc-head-gap);
	align-items: flex-start;
}

/* base.css gives every .hbd-heading Loretta 300 / 1.1 / -0.01em and a 1rem bottom margin; live's is
   48/52.8 with no tracking and takes its gap from the head's own flex gap. */
.hbd-w-feature-cards__heading {
	margin: 0;
	max-width: var(--hbd-fc-h-max);
	font-size: var(--hbd-fc-h);
	line-height: var(--hbd-fc-h-lh);
	letter-spacing: normal;
	color: var(--hbd-ink);
}

.hbd-w-feature-cards__intro {
	margin: 0;
	width: var(--hbd-fc-intro-w);
	max-width: 100%;
	font-size: var(--hbd-fc-intro);
	line-height: var(--hbd-fc-intro-lh);
	letter-spacing: var(--hbd-fc-ls);
	color: var(--hbd-text);
}

/* --------------------------------------------------------------- the grid */

.hbd-w-feature-cards__grid {
	display: grid;
	grid-template-columns: var(--hbd-fc-cols);
	gap: var(--hbd-fc-gap);
}

/* --------------------------------------------------------- the card, base */

.hbd-w-feature-cards__card { display: flex; }

.hbd-w-feature-cards__body {
	display: flex;
	flex-direction: column;
	gap: var(--hbd-fc-body-gap);
	min-width: 0;
}

.hbd-w-feature-cards__title {
	margin: 0;
	font-family: var(--hbd-font-display);
	font-weight: 300;
}

.hbd-w-feature-cards__text {
	margin: 0;
	letter-spacing: var(--hbd-fc-ls);
}

.hbd-w-feature-cards__img { display: block; }

/* ------------------------------------------------------------------ panel */

/* The card is the sky tint at 10px with 20px of padding; below md the illustration drops under the
   copy and the card carries live's own 453px minimum (doc §2). */
.hbd-w-feature-cards--panel .hbd-w-feature-cards__card {
	flex-direction: column;
	gap: var(--hbd-fc-card-gap);
	min-height: var(--hbd-fc-card-min-h);
	padding: var(--hbd-fc-card-pad);
	border-radius: var(--hbd-fc-card-radius);
	background: var(--hbd-fc-card-bg);
}

.hbd-w-feature-cards--panel .hbd-w-feature-cards__title {
	max-width: var(--hbd-fc-title-max);
	font-size: var(--hbd-fc-title);
	line-height: var(--hbd-fc-title-lh);
	letter-spacing: normal;
	color: var(--hbd-fc-title-color);
}

.hbd-w-feature-cards--panel .hbd-w-feature-cards__text {
	max-width: var(--hbd-fc-text-max);
	font-size: var(--hbd-fc-text);
	line-height: var(--hbd-fc-text-lh);
	color: var(--hbd-fc-text-color);
}

/* The illustration is centred under the copy on a phone and pinned to the card's right edge above md.
   `contain` at a measured box, not a crop: these are cut-out illustrations on a transparent ground. */
.hbd-w-feature-cards--panel .hbd-w-feature-cards__media {
	display: flex;
	justify-content: var(--hbd-fc-media-justify);
	min-width: 0;
}

.hbd-w-feature-cards--panel .hbd-w-feature-cards__img {
	width: var(--hbd-fc-img-w);
	height: var(--hbd-fc-img-h);
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 768px) {
	/* Copy left, illustration right, both centred against the taller of the two. The media column is
	   the illustration's own width, so the copy takes everything else — live's 288 at md and 260 at xl.
	   The head is still stacked here: `panel` only splits it at lg, which is one of the sixteen deltas. */
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__card {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__body { flex: 1 1 auto; }
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__media { flex: 0 0 var(--hbd-fc-img-w); }
}

@media (min-width: 1024px) {
	/* The heading and the intro share a row from lg up, centred against each other. */
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	/* lg only: live splits the card 50/50 (397 / 397 of 824) instead of sizing the media column to the
	   illustration. The illustration still ends on the card's right edge, so nothing *rendered* moves —
	   the two boxes do, and this is what makes them measure 0 as well (doc §2). */
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__body,
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__media { flex: 1 1 0; }
}

@media (min-width: 1280px) {
	/* Back to the illustration's own width: 620 − 40 of padding = 580, and 260 + 30 + 290 is live's. */
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__body { flex: 1 1 auto; }
	.hbd-w-feature-cards--panel .hbd-w-feature-cards__media { flex: 0 0 var(--hbd-fc-img-w); }
}

/* ------------------------------------------------------------------ photo */

/* A different shell ladder: 40px of vertical padding on a phone (not 80) and the 80px gutter only from
   xl (not lg) — two of the sixteen deltas (doc §5.2). */
.hbd-w-feature-cards--photo > .hbd-w__inner {
	padding-inline: var(--hbd-fc-ph-gutter);
	padding-block: var(--hbd-fc-ph-pad);
	overflow: hidden;
}

/* `stretch`, not `flex-start`: live's home head lets both children fill the column on a phone, where
   `panel`'s shrinks them to their own content. The heading reads identically either way (it is
   left-aligned and its own `<br>` sets the measure) but the box is 350 rather than 242.55. */
.hbd-w-feature-cards--photo .hbd-w-feature-cards__head { gap: var(--hbd-fc-ph-head-gap); align-items: stretch; }

@media (min-width: 768px) {
	/* `photo` splits its head one breakpoint earlier than `panel` does. The heading is shrink-to-fit
	   here, so the intro's measured width is what puts it on the right edge. */
	.hbd-w-feature-cards--photo .hbd-w-feature-cards__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__intro {
	width: var(--hbd-fc-ph-intro-w);
	font-size: var(--hbd-fc-ph-intro);
	line-height: var(--hbd-fc-ph-intro-lh);
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__grid {
	grid-template-columns: var(--hbd-fc-ph-cols);
	gap: var(--hbd-fc-ph-gap);
}

/* The card *is* the photograph: a fixed height per breakpoint, the image behind everything, and the
   copy in two blocks taken out of flow — 32px under the top edge and 27px above the bottom one, at
   every width. There is no scrim of any kind on live (doc §3). */
.hbd-w-feature-cards--photo .hbd-w-feature-cards__card {
	position: relative;
	height: var(--hbd-fc-ph-card-h);
	border-radius: var(--hbd-fc-card-radius);
	overflow: hidden;
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__body {
	position: absolute;
	z-index: 1;
	inset: var(--hbd-fc-ph-inset-top) 0 var(--hbd-fc-ph-inset-bottom);
	justify-content: space-between;
	gap: var(--hbd-fc-ph-head-gap);
	text-align: center;
}

.hbd-w-feature-cards--photo .hbd-w-feature-cards__title {
	font-size: var(--hbd-fc-ph-title);
	line-height: var(--hbd-fc-ph-title-lh);
	letter-spacing: var(--hbd-fc-ph-title-track);
	color: var(--hbd-fc-ph-color);
}

/* `margin-top: auto` rather than relying on space-between alone, so a card with a paragraph and no
   title still keeps its copy on the bottom edge. */
.hbd-w-feature-cards--photo .hbd-w-feature-cards__text {
	margin-top: auto;
	margin-inline: auto;
	max-width: var(--hbd-fc-ph-text-max);
	font-size: var(--hbd-fc-ph-text);
	line-height: var(--hbd-fc-ph-text-lh);
	color: var(--hbd-fc-ph-color);
}