/**
 * LFBC Card Group — Small (4-up) pattern
 *
 * Four card-small instances in a row. Below 1375px it's a horizontally
 * swipeable slider (CSS scroll-snap + touchswipe.js for mouse drag) with
 * the next card peeking off the right edge; ≥1375px it's a 4-column row
 * capped at the 1360px content width. The breakpoint is set above the
 * 1352px four-card row width so the cards never shrink or wrap — they
 * stay in the slider until there's room for the full row.
 *
 * Cards come in via `<!-- wp:pattern slug="card-small" /-->` references in
 * the .php file. The composed `.lfbc-card-small` <section> is the flex item
 * itself (padding reset to 0, sized to the card's width) — same technique
 * as card-group: we can't `display: contents` it, since WP's
 * is-layout-constrained cascade would still target the `__card` underneath
 * and blow up partial-row cells.
 *
 * The section is `align: full` with no background band (matching the linked
 * Figma node — just the card row) so the mobile slider's track can run to
 * the viewport's right edge for the peek affordance, and the desktop row
 * centers within the content cap. Drop this pattern inside a colored
 * section, or add a heading above it, if the context needs one.
 *
 * Container query lives on the outer .lfbc-card-small-group; the
 * `@container (min-width: 1375px)` block flips slider → row. Same approach
 * as card-group / hero / features / 5050 / slider.
 */

.lfbc-card-small-group.alignfull,
.lfbc-card-small-group {
	container-type: inline-size;
	padding-block: 20px;
	padding-inline: 0; /* track manages its own inline padding / offset */
}

/* Inline offset for the mobile slider: the track's left edge sits here and
   the trailing peek breathing room matches. Interpolates 16px (390px
   viewport) → 40px (1024px+ viewport). Same curve as card-group. */
.lfbc-card-small-group {
	--lfbc-card-small-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 spacing
   controls the layout. */
.lfbc-card-small-group > *,
.lfbc-card-small-group .lfbc-card-small-group__track > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * 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` keeps slides at their natural widths.
 * ------------------------------------------------------------------------- */

.lfbc-card-small-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-small-group-offset);
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	cursor: grab; /* touchswipe.js swaps to grabbing during drag */
}

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

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

/* The composed card-small <section> is the flex item itself. Reset its
   padding (card-small adds 20px 0 + centering) and size it to the mobile
   card width; card-small's own CSS renders the card inside. */
.lfbc-card-small-group__track > .lfbc-card-small {
	padding: 0;
	flex: 0 0 251px;
	max-width: 251px;
	scroll-snap-align: start;
	scroll-margin-inline-start: var(--lfbc-card-small-group-offset);
}

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

/* -------------------------------------------------------------------------
 * Desktop (≥ 1375px container = viewport, since the section is align-full).
 * Track flips from horizontal-scroll slider to a centered 4-up row.
 * ------------------------------------------------------------------------- */

@container (min-width: 1375px) {

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

	/* Wrap: drop the scrolling viewport, cap to a width that fits exactly
	   4 cards × 320px + 3 × 24px gaps = 1352px (≈ the 1360px content cap).
	   The 1375px breakpoint clears this, so cards stay full-size — no
	   shrinking. */
	.lfbc-card-small-group__track-wrap {
		overflow: visible;
		scroll-snap-type: none;
		margin-inline: auto;
		max-width: 1352px;
		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: a row of 4 and any
	   partial row (e.g. an editor-added 5th–7th card) both stay centered. */
	.lfbc-card-small-group__track {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px 24px; /* row-gap col-gap */
		width: auto;
		padding-inline-end: 0;
	}

	.lfbc-card-small-group__track > .lfbc-card-small {
		flex: 0 1 320px;
		max-width: 320px;
		scroll-snap-align: none;
		scroll-margin-inline-start: 0;
	}
}