/**
 * LFBC Card Group — Horizontal (2-up) pattern
 *
 * Two card-horizontal instances side-by-side on desktop, stacking to
 * a single column at narrower widths.
 *
 * Cards come in via `<!-- wp:pattern slug="card-horizontal" /-->`
 * references in the .php file. The composed `.lfbc-card-horizontal`
 * <section> becomes the flex item — its own block padding (16px top/
 * bottom) is reset here so the parent row controls spacing.
 *
 * Spacing (per Figma node 9163:9709)
 *   Section padding: 20px block, clamped inline (16px → 40px @ ≥1024px).
 *   Row gap: 20px stacked / 40px 2-up.
 *   Figma showed pb:80 but that was bottom-of-page space, not this
 *   section's own footer — overridden to 20px here.
 *
 * Layout — three clean stages, no flip-flop:
 *   ≥ 1280px container: 2-up flex row, each card image-left (horizontal).
 *   600–1280px container: single-column stack, cards still horizontal.
 *   < 600px container: single column, each card image-on-top.
 *
 *   The 2-up breakpoint is deliberately 1280px, NOT 1024px. Each inner
 *   card flips to its image-on-top layout below a 600px slot (its own
 *   container query). In a 2-up row with a 40px gap, each slot is only
 *   (container − 40) / 2 — so a 1024px breakpoint would put ~492px slots
 *   side-by-side and the cards would render image-on-top *while* 2-up,
 *   then flip back to horizontal once stacked. Gating 2-up at 1280px keeps
 *   each slot ≈ 620px (≥ 600), so 2-up cards stay horizontal and the
 *   stack-then-image-on-top progression is monotonic.
 *
 * Container query lives on .lfbc-card-horizontal-group so the layout
 * responds to its own slot — matches hero / features / 5050 / card-group.
 */

.lfbc-card-horizontal-group {
	container-type: inline-size;
	padding-block: 20px;
}

/* WP layout-flow injects `> * + * { margin-block-start: block-gap }`
   into default-layout groups. Reset on our direct children so our own
   gap rules stay in control. */
.lfbc-card-horizontal-group > *,
.lfbc-card-horizontal-group .lfbc-card-horizontal-group__row > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* Row — mobile-first stack. */
.lfbc-card-horizontal-group__row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Composed card-horizontal <section> is the flex item. Reset its own
   block padding since the row now controls spacing. */
.lfbc-card-horizontal-group__row > .lfbc-card-horizontal {
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Desktop (≥ 1280px container): 2-up side-by-side row. Each section
 * fills half the row; the inner __card stretches to match the taller
 * sibling so both cards in the row keep equal heights regardless of
 * content length. max-width on __card is dropped so the card fills its
 * slot rather than capping at 660px and leaving gaps at intermediate
 * widths — the row's flex math controls the cap instead.
 * Breakpoint is 1280px (not 1024px) so each card slot stays ≥ 600px and
 * the inner cards remain horizontal — see the layout note up top.
 * ------------------------------------------------------------------------- */
@container (min-width: 1280px) {

	.lfbc-card-horizontal-group__row {
		flex-direction: row;
		gap: 40px;
		align-items: stretch;
	}

	.lfbc-card-horizontal-group__row > .lfbc-card-horizontal {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.lfbc-card-horizontal-group__row > .lfbc-card-horizontal > .lfbc-card-horizontal__card {
		flex: 1 1 auto;
		max-width: none;
	}
}