/**
 * LFBC Card Group (6-up) pattern
 *
 * Heading + intro + 6 card-regular instances. Below 1375px it's a
 * horizontally-swipeable slider (CSS scroll-snap + touchswipe.js for
 * mouse drag); ≥1375px it's a 3-column × 2-row grid with 40px gap.
 *
 * Cards come in via `<!-- wp:pattern slug="card-regular" /-->`
 * references in the .php file. The composed `.lfbc-card-regular`
 * <section> is the flex item itself (padding reset to 0, sized to
 * the card's width) — see the rule below for why `display: contents`
 * on the section doesn't work here (WP's is-layout-constrained
 * cascade still targets the `__card` underneath).
 *
 * Backgrounds + breakout
 *   The outer section uses `align: full` so the oatmeal band spans
 *   the viewport. Head content stays constrained (centered under the
 *   1360px contentSize cap). On mobile the slider's track extends
 *   into the section's right edge so the next card peeks off-screen.
 *
 * Container query lives on the outer .lfbc-card-group; the
 * `@container (min-width: 1375px)` block flips slider → grid. Same
 * approach as hero/features/5050/slider.
 */

.lfbc-card-group.alignfull,
.lfbc-card-group {
	container-type: inline-size;
	padding-block: 40px 56px;
	padding-inline: 0; /* head + track manage their own inline padding */
}

/* Inline offset that lines up head text with the first card's left
   edge. Interpolates 16px (390px viewport) → 40px (1024px+ viewport). */
.lfbc-card-group {
	--lfbc-card-group-offset: clamp(16px, calc(2.46px + 3.78vw), 40px);
}

/* WP layout-flow injects `> * + * { margin-block-start: block-gap }`
   into default-layout groups. Reset on our direct children so our
   own block-gap controls spacing. */
.lfbc-card-group > *,
.lfbc-card-group .lfbc-card-group__head > *,
.lfbc-card-group .lfbc-card-group__track > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Head: title + intro
 * ------------------------------------------------------------------------- */

.lfbc-card-group__head {
	padding-inline: var(--lfbc-card-group-offset);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-end: 32px;
}

.lfbc-card-group__title {
	margin: 0;
	color: var(--wp--preset--color--soft-black-500);
	letter-spacing: -0.01em;
}

.lfbc-card-group__intro {
	margin: 0;
	color: var(--wp--preset--color--soft-black-500);
	line-height: 1.5;
	max-width: 712px;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Track (mobile-first: scroll-snap slider)
 *
 * Wrap is the scrolling viewport; track is the flex row inside it.
 * The wrap's left edge sits at the offset; its right edge runs flush
 * to the section's right edge so cards flow off-screen for the
 * "peek" affordance. `width: max-content` on the track keeps slides
 * at their natural widths.
 * ------------------------------------------------------------------------- */

.lfbc-card-group__track-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	/* overflow-y:hidden (needed for the horizontal scroller) would clip the
	   card's hover shadow at top/bottom. Pad the scroll box to give the
	   shadow room, then pull it back with an equal negative margin so the
	   group's vertical spacing is unchanged. Sized to the shadow's reach
	   (box-shadow: 0 16px 48px → ~64px below, ~32px above the card), so it's
	   asymmetric. Neutralized at ≥1375px below, where the wrap becomes
	   overflow:visible. */
	padding-block: 32px 56px;
	margin-block: -32px -56px;
	/* Left inline offset lives as padding INSIDE the scroll box (not a
	   margin outside it) so the first card's left hover shadow renders into
	   that gap instead of being clipped by the scroll box's left edge. The
	   card position is unchanged — the offset just moved from margin to
	   padding — but overflow-x:auto now has room to show the shadow at scroll
	   position 0. A negative margin (the vertical trick above) can't be used
	   here because overflow-x scrolls: it would push content off the left
	   edge. The box now runs edge-to-edge, so no horizontal overflow. */
	padding-inline-start: var(--lfbc-card-group-offset);
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	cursor: grab; /* JS shim swaps to grabbing during drag */
}

.lfbc-card-group__track-wrap::-webkit-scrollbar {
	display: none;
}

.lfbc-card-group__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	width: max-content;
	padding-inline-end: var(--lfbc-card-group-offset); /* trailing peek breathing room */
}

/* The composed card-regular <section> is the flex item itself. We
   don't `display: contents` it (which would dissolve it visually but
   leave WP's `.is-layout-constrained > *` selector still applying
   margin: auto !important + max-width to the `__card` underneath —
   that's what makes the partial-row cells look huge). Instead we
   reset the section to a 0-padding wrapper sized to match the card,
   and let card-regular's own CSS render the card inside it. */
.lfbc-card-group__track > .lfbc-card-regular {
	padding: 0;
	flex: 0 0 250px;
	max-width: 250px;
	scroll-snap-align: start;
	scroll-margin-inline-start: var(--lfbc-card-group-offset);
}

/* Still a slider below 1375px, but from 1024px up grow each slide to the
   426px desktop card size (matching card-regular.css's own ≥640px cap) so the
   1024–1375px range shows full-size cards instead of the 250px mobile size. */
@container (min-width: 1024px) {
	.lfbc-card-group__track > .lfbc-card-regular {
		flex-basis: 426px;
		max-width: 426px;
	}
}

/* -------------------------------------------------------------------------
 * Desktop (≥ 1375px container = viewport since the section is
 * align-full). Track flips from horizontal-scroll slider to a 3×2
 * CSS grid. Wrap loses its scrolling behavior. The breakpoint sits above
 * the full 3-up row width (3 × 426px + 2 × 40px gaps = 1358px) so the
 * cards never shrink or wrap — they stay in the slider until there's room
 * for the full row.
 * ------------------------------------------------------------------------- */

@container (min-width: 1375px) {

	.lfbc-card-group.alignfull,
	.lfbc-card-group {
		padding-block: 40px 80px;
	}

	.lfbc-card-group__head {
		gap: 20px;
		margin-block-end: 40px;
	}

	.lfbc-card-group__intro {
		font-size: 18px;
	}

	/* Wrap: drop the scrolling viewport, cap to a width that fits
	   exactly 3 cards × 403px + 2 × 40px gaps. Anything narrower and
	   flex-shrink lets the cards squeeze; anything wider would just
	   add wasted whitespace around a 3-up row. */
	.lfbc-card-group__track-wrap {
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: auto;
		max-width: 1360px;
		padding-inline: 0;
		cursor: auto;
		/* overflow is visible here, so the mobile shadow-room padding/margin
		   trick is no longer needed — reset it. */
		padding-block: 0;
		margin-block: 0;
	}

	/* Flexbox (not grid) so incomplete rows center.
	   `justify-content: center` keeps both full rows of 3 and partial
	   rows of 1 or 2 cards centered in the wrap. This matches the
	   Figma note: "if the client only has 5, the bottom two would be
	   centred in the column." */
	.lfbc-card-group__track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 40px;
		width: auto;
		padding-inline-end: 0;
	}

	/* Sections-as-flex-items: stay at the full 426px. The 1375px breakpoint
	   clears the full 3-up row width, so the cards never shrink — flex-shrink
	   is kept at 0 to hold them at 426px. */
	.lfbc-card-group__track > .lfbc-card-regular {
		flex: 0 0 426px;
		max-width: 426px;
		scroll-snap-align: none;
		scroll-margin-inline-start: 0;
	}
}