/**
 * LFBC Logo Slider pattern
 *
 * Oatmeal-700 band containing a heading + intro and a horizontally-scrolling
 * track of logo cards that extends off the right edge to signal "more
 * content". Prev/Next buttons below call scrollBy() on the wrap; touch users
 * can swipe natively thanks to scroll-snap.
 *
 * Sizing:
 *   - viewport < 1440px: the band uses alignfull's full-bleed (negative
 *     margins to viewport edges) — no right gap, the slider flows all the
 *     way to the screen edge so off-screen cards are obvious.
 *   - viewport >= 1440px: capped at 1440px wide and centered on the viewport
 *     (see media query at the bottom of the file). Body background shows in
 *     the gutters on either side.
 *
 * `--lfbc-slider-offset` is a single shared length variable that interpolates
 * 32px (390px viewport) → 80px (1440px viewport). Two places consume it so
 * the heading's left edge always aligns with the first logo card's left edge:
 *   - `.lfbc-slider__head` uses it as symmetric `padding-inline` for the
 *     intro block.
 *   - `.lfbc-slider__track-wrap` uses it as `margin-inline-start`, so the
 *     scroll container itself sits at the offset and the flex track inside
 *     starts at x=0 in wrap coords. The wrap's right edge stays at the
 *     section's right edge so logos can flow off-screen on scroll.
 *
 * The variable is `vw`-based rather than `cqi`-based: viewport-relative is
 * universally supported and resolves the same numbers here (the clamp's 80px
 * ceiling pins values above 1440px viewport anyway).
 *
 * Container query lives on the outer `.lfbc-slider` (container-type:
 * inline-size); the `@container (min-width: 1024px)` block handles the
 * mobile → desktop layout shifts. Same approach as icon-grid / hero / lp-hero.
 *
 * Figma reference: node 9163:8508 ("Our Preferred Financial Institutions").
 */

/* Below the 1440px breakpoint we let alignfull's default behavior apply
   (core's `.has-global-padding > .alignfull` rule sets negative left/right
   margins equal to the root padding, breaking the section out to the
   viewport edges). Don't override margins here or the band gets a right
   gap at narrow viewports. */
.lfbc-slider.alignfull,
.lfbc-slider {
	container-type: inline-size;
	padding-block: 40px;
	/* No horizontal padding on the section itself — head/controls and the
	   track each manage their own inline padding so the track can flow past
	   the heading's right edge into the viewport gutter. */
	padding-inline: 0;
	/* Inline offset that lines up the heading's left edge with the first
	   logo card's left edge. Interpolates 32px (390px viewport) → 80px
	   (1440px viewport); clamped at both ends. Uses `vw` so it's resolved
	   off the viewport directly — at >= 1440px viewport the formula would
	   exceed 80px but the upper clamp caps it. */
	--lfbc-slider-offset: clamp(32px, calc(14.17px + 4.57vw), 80px);
}

/* At viewports >= 1440px, cap the band at 1440px wide and center it on the
   viewport. The chained `.alignfull` selector matches core's specificity
   (0,2,0) so our margins override its negative-margin break-out.

   `50%` inside an alignfull child resolves against its containing block
   (.has-global-padding, which spans the viewport), so at viewport 1440 the
   margin evaluates to -40 (matching the original alignfull offset) and grows
   to (viewport/2 − 720 − root-padding) at wider viewports — exactly enough
   to keep the section centered on the viewport. */
@media (min-width: 1440px) {

	.lfbc-slider.alignfull,
	.lfbc-slider {
		width: 1440px;
		max-width: 1440px;
		margin-left: calc(50% - 720px);
		margin-right: calc(50% - 720px);
	}
}

/* WP layout-flow injects `> * + * { margin-block-start: block-gap }` into
   every default-layout group. Reset on our own direct children — flex gap
   handles spacing here. Same pattern as icon-grid / features. */
.lfbc-slider > *,
.lfbc-slider .lfbc-slider__head > *,
.lfbc-slider .lfbc-slider__track-wrap > *,
.lfbc-slider .lfbc-slider__track > *,
.lfbc-slider .lfbc-slider__slide > * {
	margin-block-start: 0;
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Head: heading + intro + (mobile-only) learn-more
 * ------------------------------------------------------------------------- */

.lfbc-slider__head {
	padding-inline: var(--lfbc-slider-offset);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	text-align: left;
	box-sizing: border-box;
}

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

.lfbc-slider__intro {
	margin: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--soft-black-500);
}

.lfbc-slider__learn-more {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Track: horizontally-scrolling row of logo cards
 *
 * The first-slide offset lives on the wrap as `margin-inline-start` — not on
 * the track as padding — so the wrap's own left edge sits at the offset and
 * the track inside starts flush with x=0 in wrap coords. The wrap's right
 * edge stays at the section's right edge so slides can flow off-screen.
 * ------------------------------------------------------------------------- */

.lfbc-slider__track-wrap {
	margin-inline-start: var(--lfbc-slider-offset);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	/* `overflow-x: auto` forces `overflow-y` to clip too (a `visible` value
	   computes to `auto` when the other axis scrolls), so the slides' hover
	   shadow would be cut off at the wrap's top/bottom edges. Pad the wrap
	   vertically to give the shadow room inside the clip box, then pull the
	   padding back with a matching negative margin so the band's visual
	   height and the head/controls spacing stay unchanged. */
	padding-block: 40px;
	margin-block: -40px;
}

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

.lfbc-slider__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	/* `width: max-content` prevents the flex track from collapsing to the
	   wrap's width — slides keep their natural sizes and overflow. */
	width: max-content;
}

.lfbc-slider__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 210px;
	height: 89px;
	background-color: var(--wp--preset--color--white);
	border-radius: 5px;
	padding: 16px 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: box-shadow 200ms ease-out;
}

/* Card-style lift on hover — matches the card patterns' shadow. */
.lfbc-slider__slide:hover,
.lfbc-slider__slide:focus-within {
	box-shadow: 0 3px 29px rgba(0, 0, 0, 0.18);
}

.lfbc-slider__logo {
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lfbc-slider__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
 * Controls
 *
 * Centered row of two circular buttons below the track. Nootka Rose 900
 * background with a white arrow glyph. Disabled state (set by view-js when
 * the track is at start/end) fades to 40% opacity.
 * ------------------------------------------------------------------------- */

.lfbc-slider__controls {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-block-start: 2rem;
}

.lfbc-slider__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	padding: 10px;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--nootka-rose-900);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.lfbc-slider__btn:hover,
.lfbc-slider__btn:focus-visible {
	background-color: var(--wp--preset--color--nootka-rose-500);
}

.lfbc-slider__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--soft-black-500);
	outline-offset: 2px;
}

.lfbc-slider__btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.lfbc-slider__btn svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* -------------------------------------------------------------------------
 * Card-slider nav (JS-injected)
 *
 * `assets/js/card-slider-nav.js` injects this control row beneath the scroll
 * track of the `card-group` and `card-small-group` patterns when the track
 * overflows (i.e. it's in slider mode below its desktop breakpoint). The
 * buttons reuse the `.lfbc-slider__btn` visual above so every slider shares
 * one control style.
 *
 * The script sets the `hidden` attribute when the track fits (few cards) or in
 * the desktop grid/row layout, so `display` is gated on `:not([hidden])` —
 * otherwise an explicit `display` would beat the UA `[hidden] { display:none }`
 * and the row would never hide. The `:not([hidden])` selector (0,0,2,0) also
 * clears the card patterns' `.lfbc-card-*-group > * { margin-block-start: 0 }`
 * flow reset (0,0,1,0), so the top margin sticks.
 * ------------------------------------------------------------------------- */
.lfbc-card-slider-nav:not([hidden]) {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-block-start: 24px;
}

/* -------------------------------------------------------------------------
 * Desktop (>= 1024px container = viewport, since the wrapper is align:full)
 *
 * Head + controls center their text; intro caps width for readability; the
 * Learn More CTA is hidden (the title's arrow-style already signals the
 * link affordance at this size). Logo cards grow slightly to match Figma.
 * ------------------------------------------------------------------------- */

@container (min-width: 1024px) {

	/* Head + track inline padding is driven by `--lfbc-slider-offset` already
	   (interpolates 32 → 80px), so no per-side overrides are needed here.
	   This block only handles the desktop-only layout shifts: centered intro,
	   hidden Learn More, larger logo cards. */

	.lfbc-slider__head {
		align-items: center;
		text-align: center;
		gap: 25px;
	}

	.lfbc-slider__intro {
		max-width: 712px;
		font-size: 18px;
	}

	.lfbc-slider__slide {
		width: 240px;
		height: 113px;
		padding: 32px;
	}

	.lfbc-slider__controls {
		margin-block-start: 2rem;
	}
}