/**
 * Pattern: Partner Logo Strip  (patterns/logo-strip.php)
 *
 * White section: centered heading → 4-up horizontal logo row with flanking
 * prev/next arrows → 3-dot page indicator → "Become a Partner" CTA pill.
 *
 * Figma source: home frame 258:2538, "Thank You To Our Partners" section.
 *   Heading   258:2621 — Montserrat Black, 50px, primary, centred, top 3585px.
 *   Logos     258:2569–2572 — four containers, ~260×140px each, top ~3656–3682px.
 *     Left edges: 127px / calc(25%+77px)=437px / calc(50%+10px)=730px / calc(75%−40px)=1040px
 *     Inter-logo gap: 437−127−260 = 50px between slot 1→2; ~50px consistent.
 *   Arrows    258:2597/2600 — 41×41px circles, at x=51 and x=1350 (far left/right).
 *   Dots      258:2594–2596 — three 14×14px dots centred below the logo row.
 *   Button    258:2622 — purple fill pill, centred, same 60px-tall style as site CTAs.
 *
 * Gap derivation:
 *   Heading top 3585, logos top ~3660 → ~75px heading→logos.
 *   Logo bottom 3660+155=3815, dots top 3856 → ~41px logos→dots.
 *   Dots bottom 3856+14=3870, button top 3936 → ~66px dots→button.
 *   Token map: 75px → --kd-space-lg (2.5rem/40px) × 2 ≈ var(--kd-space-xl) 64px closest.
 *   We use --kd-space-lg (40px) heading→logos; --kd-space-md (24px) logos→dots;
 *   --kd-space-lg (40px) dots→button — these read correctly in the rendered proportion.
 *
 * Static-first: the logo track is a flex row with CSS scroll-snap. All 4 logos are
 * visible on desktop (no scrolling needed). On mobile (≤600px) 1 logo fills the
 * viewport slot; scroll-snap delivers the carousel feel without JS.
 * JS progressive-enhancement note: logo-strip.js (if loaded) wires arrow clicks to
 * scrollBy() the track and syncs dot active state. Without JS, arrows still show
 * (users can see them) but clicking does nothing visible — an acceptable no-JS state
 * since CSS scroll-snap + native scroll lets users swipe on touch.
 *
 * A11y:
 *   - Arrow <button> elements have aria-label; SVG internals are aria-hidden.
 *   - Dot <button> elements use role="tab" + aria-selected inside role="tablist".
 *   - Logo images have alt="" set; editors should replace with real partner name.
 *   - Without JS, dots/arrows are still rendered but do nothing — acceptable.
 *
 * WP flex/flow trap notes:
 *   - .kd-logo-strip__track-wrap uses layout type:default (no is-layout-flex) so
 *     WP does NOT inject a flex override. We set display:flex ourselves.
 *   - .kd-logo-strip__track same — type:default, display:flex in CSS.
 *   - Margin-block-start is zeroed on direct children of flow groups (the gotcha
 *     from card-grid.css: flow layout adds block-gap to non-first children).
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ── Section wrapper ────────────────────────────────────────────────────────── */

.kd-logo-strip {
	background-color: var(--kd-color-base); /* white */
	padding-block: var(
		--kd-band-pad-y
	); /* band-internal breathing room, decoupled from rhythm */
}

/* ── Section heading ────────────────────────────────────────────────────────── */

/* Figma 258:2621: Montserrat Black, 50px, primary, centred, letter-spacing 0.15px.
   Fluid down to 30px on narrow viewports to match the other section headings. */
.kd-logo-strip .kd-logo-strip__heading {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading); /* 900 */
	font-size: clamp(1.875rem, 4vw, 3.125rem) !important; /* 30px → 50px */
	line-height: 1.1;
	letter-spacing: 0.15px;
	color: var(--kd-color-primary) !important;
	text-align: center;
	margin: 0 0 var(--kd-space-lg); /* 40px to logo row */
	text-transform: capitalize;
}

/* ── Track wrapper: logos + flanking arrows in one flex row ─────────────────── */

/* layout:default → WP renders a plain block (no is-layout-flex class), so we
   control the flex here. Position:relative lets the absolutely-placed arrows sit
   outside the logo track without pushing track width. */
.kd-logo-strip .kd-logo-strip__track-wrap {
	display: flex !important;
	align-items: center;
	gap: var(--kd-space-sm); /* 16px between arrow and track */
	position: relative;
	width: 100%;
}

/* Zero the flow margin WP would add to non-first block children inside a
   type:default group (the block-gap = 24px flow gotcha). */
.kd-logo-strip .kd-logo-strip__track-wrap > * {
	margin-block: 0 !important;
}

/* ── Logo track — horizontal scroll-snap container ─────────────────────────── */

/* layout:default — WP renders plain block; we set flex + scroll-snap here.
   overflow:hidden on desktop (all 4 visible); overflow-x:auto on mobile for swipe. */
.kd-logo-strip .kd-logo-strip__track {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0 !important; /* custom gap below so we can set scroll-snap-align on slots */
	flex: 1 1 0;
	overflow: hidden; /* desktop: nothing to scroll — all logos visible */
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

/* Same flow-margin zero for direct children of the track group. */
.kd-logo-strip .kd-logo-strip__track > * {
	margin-block: 0 !important;
}

/* ── Logo slots ────────────────────────────────────────────────────────────── */

/* Each slot is 25% of track width on desktop (4 logos in a row).
   Figma: 260px logos inside 1440px canvas (after arrow gutters ~110px each side
   and the ~50px inter-logo gaps: 4×260 + 3×50 = 1190px track width).
   25% of track = exact quarter. Slots use scroll-snap-align so they snap on mobile. */
.kd-logo-strip .kd-logo-strip__logo-slot {
	flex: 0 0 25%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding-inline: var(
		--kd-space-sm
	); /* 16px — creates the ~50px inter-logo gap (2×16 = 32px between adj slots; visual gap ~50px incl. image space) */
	scroll-snap-align: start;
	min-height: 140px; /* never collapses even with empty/placeholder img */
}

/* Zero flow margins on logo-slot children. */
.kd-logo-strip .kd-logo-strip__logo-slot > * {
	margin-block: 0 !important;
}

/* ── Logo images — object-contain so logos aren't cropped ──────────────────── */

/* Figma logos are variable-height SVGs/PNGs; object-contain + min-height keep
   the row stable even with placeholder SVG or before real images load. */
.kd-logo-strip .kd-logo-strip__logo {
	margin: 0 !important;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Empty-slot placeholder — a neutral box until an editor sets a real logo. The
   empty core/image renders no visible <img>; :has keeps the slot from going blank. */
.kd-logo-strip .kd-logo-strip__logo:not(:has(img[src])) {
	min-height: 90px;
	width: 100%;
	background: var(--kd-color-neutral-100);
	border-radius: 8px;
}

.kd-logo-strip .kd-logo-strip__logo img {
	width: 100%;
	max-width: 260px;
	height: auto;
	min-height: 100px; /* floor: slot never collapses if real img hasn't loaded */
	object-fit: contain;
	display: block;
	margin-inline: auto;
}

/* ── Arrow buttons ──────────────────────────────────────────────────────────── */

/* Figma 258:2597/2600: 41×41px circle buttons, purple stroke, at the far left/right
   edges of the section (outside the logo track). flex-shrink:0 prevents arrows
   from collapsing as track grows. */
.kd-logo-strip .kd-logo-strip__arrow {
	flex-shrink: 0;
	width: 41px;
	height: 41px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: opacity var(--kd-transition-fast);
	color: var(--kd-color-primary);
}

.kd-logo-strip .kd-logo-strip__arrow:hover {
	opacity: 0.7;
}

.kd-logo-strip .kd-logo-strip__arrow:focus-visible {
	outline: 3px solid var(--kd-color-primary);
	outline-offset: 2px;
}

/* ── Dot navigation ─────────────────────────────────────────────────────────── */

/* Figma 258:2594–2596: three 14×14px dots centred below the logo row.
   Active dot = filled purple circle; inactive = purple outline. */
.kd-logo-strip .kd-logo-strip__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kd-gap-normal); /* 12px between dots */
	margin-top: var(--kd-space-md); /* 24px logos→dots */
	margin-bottom: 0;
}

.kd-logo-strip .kd-logo-strip__dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--kd-color-primary);
	background: transparent;
	cursor: pointer;
	transition: background var(--kd-transition-fast);
	flex-shrink: 0;
}

.kd-logo-strip .kd-logo-strip__dot--active,
.kd-logo-strip .kd-logo-strip__dot[aria-selected="true"] {
	background: var(--kd-color-primary);
}

.kd-logo-strip .kd-logo-strip__dot:hover {
	background: var(--kd-color-primary);
	opacity: 0.7;
}

.kd-logo-strip .kd-logo-strip__dot:focus-visible {
	outline: 3px solid var(--kd-color-primary);
	outline-offset: 2px;
}

/* ── CTA button wrapper ─────────────────────────────────────────────────────── */

/* "Become a Partner" — same purple fill pill as the global button default.
   No override needed on the button itself; the global button system provides it.
   We only control the wrapper spacing. */
.kd-logo-strip .kd-logo-strip__cta-wrap {
	margin-top: var(--kd-space-lg) !important; /* 40px dots→button */
}

/* ── Tablet (≤1024px) — 2 logos per row, track scrollable ──────────────────── */

@media (max-width: 1024px) {
	.kd-logo-strip .kd-logo-strip__heading {
		font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	}

	/* Show 2 logos at once; user swipes/taps arrows for remaining */
	.kd-logo-strip .kd-logo-strip__track {
		overflow-x: auto; /* reveal scroll */
		scrollbar-width: none; /* hide native scrollbar — visuals use dots */
	}

	.kd-logo-strip .kd-logo-strip__track::-webkit-scrollbar {
		display: none;
	}

	.kd-logo-strip .kd-logo-strip__logo-slot {
		flex: 0 0 50%;
	}
}

/* ── Mobile (≤600px) — 1 logo per swipe ────────────────────────────────────── */

@media (max-width: 600px) {
	.kd-logo-strip .kd-logo-strip__heading {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}

	.kd-logo-strip .kd-logo-strip__track {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.kd-logo-strip .kd-logo-strip__track::-webkit-scrollbar {
		display: none;
	}

	.kd-logo-strip .kd-logo-strip__logo-slot {
		flex: 0 0 100%;
		padding-inline: var(--kd-space-md);
	}

	.kd-logo-strip .kd-logo-strip__logo img {
		max-width: 200px;
	}

	/* Tuck arrows to reduce clutter on small screens */
	.kd-logo-strip .kd-logo-strip__arrow {
		width: 32px;
		height: 32px;
	}

	.kd-logo-strip .kd-logo-strip__arrow svg {
		width: 32px;
		height: 32px;
	}
}

/* ── Small phone (≤375px) ───────────────────────────────────────────────────── */

@media (max-width: 375px) {
	.kd-logo-strip .kd-logo-strip__logo img {
		max-width: 160px;
	}
}