/**
 * Pattern: Card Carousel — Recognition & Milestones  (patterns/card-carousel.php)
 *
 * Horizontal scroll-snap carousel of cover cards. CSS scroll-snap is the no-JS
 * baseline; prev/next arrows and dot pagination are wired by
 * assets/js/card-carousel.js (progressive enhancement — arrows start hidden,
 * JS removes the `hidden` attribute once it initialises).
 *
 * Figma source: node 226:2311 (About Us frame), Recognition section.
 *   Section heading (226:2513): Montserrat Black, 50px, (donor purple), centered.
 *   Cards (276:5376/78/79): 392x251px each, radius 24px.
 *     Full-bleed background-image + rgba(97,51,149,0.4) purple overlay.
 *     White text, bottom-left aligned.
 *   Card heading (226:2518): Montserrat Black, 26px, white, leading 38px.
 *   Card body   (226:2519): Inter Medium, 16px, white, leading 26px.
 *   Card gap (derived):  ~20px / 1.25rem.
 *   Arrows (226:2527/2530): 41x41px, purple circle, white chevron.
 *     Sit outside the card track, vertically centred on it.
 *   Dots (226:2538): 14px circles, purple outline = inactive, filled = active.
 *
 * Architecture: the carousel chrome lives in a single wp:html block so WP's
 * constrained / flex layout never fights the CSS flex row or the
 * absolute-positioned arrows.
 *
 * WP flow margin trap: .kd-carousel__track is a plain <div> (not a WP layout
 * group), so no is-layout-* classes are injected. No margin reset needed
 * beyond normal browser defaults.
 *
 * One pattern = one CSS partial. Auto-enqueued by the glob in inc/enqueue.php.
 * JS enqueue: flagged for central wiring in inc/enqueue.php — NOT done here.
 * Responsive: derived from desktop Figma + token spec (no mobile frame exists).
 */

/* ── Section band ──────────────────────────────────────────────────────────── */

.kd-carousel-section {
	padding-block: var(--blg-space-xl); /* 64px — matches other section bands */
}

/* ── Section heading — Montserrat Black, 50px, primary purple ───────────────
   Figma 226:2513. Override the default h2 colour (contrast ink) to primary
   purple — this heading is on a white background, coloured by brand choice. */

.kd-carousel-section .kd-carousel-section__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading); /* 900 */
	font-size: var(--blg-size-h2-section); /* shared section scale */
	line-height: 1.15;
	color: var(--blg-color-primary) !important; /* purple — NOT contrast ink */
	text-align: center;
	text-transform: capitalize;
	letter-spacing: 0.15px;
	margin: 0 0 var(--blg-space-lg); /* 40px gap heading -> carousel */
}

/* ── Carousel wrapper — anchor for absolute-positioned arrows ───────────────
   width:100% so it fills the constrained content column.                    */

.kd-carousel {
	position: relative;
	width: 100%;
}

/* ── Arrow buttons ───────────────────────────────────────────────────────────
   Figma: 41x41px purple-filled circle ((donor purple)), white SVG chevron.
   Position: absolute, vertically centred on the track (.kd-carousel is the
   anchor). Left arrow at the left edge of the gutter; right at the right.
   On desktop the constrained column gutter is ~110px so there is room;
   the arrows are 41px + 8px clearance = 49px from the card edge.
   Arrows start with `hidden` in HTML (progressive enhancement); JS removes
   `hidden` once it initialises so no-JS users never see them.              */

.kd-carousel__arrow {
	position: absolute;
	top: calc(50% - 20px); /* vertically centred — 41px / 2 = 20.5px */
	z-index: var(--blg-z-base);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	background-color: var(--blg-color-primary);
	color: var(--blg-color-base); /* white icon */
	border: none;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color var(--blg-transition-fast);
	/* Remove default button styling */
	-webkit-appearance: none;
	appearance: none;
}

/* Respect `hidden` attribute — arrows are hidden until JS init */
.kd-carousel__arrow[hidden] {
	display: none;
}

.kd-carousel__arrow--prev {
	left: -3rem; /* into the gutter, left of the track */
}

.kd-carousel__arrow--next {
	right: -3rem; /* into the gutter, right of the track */
}

.kd-carousel__arrow:hover {
	background-color: var(--blg-color-secondary); /* indigo on hover */
}

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

/* ── Track — horizontal flex + scroll-snap ───────────────────────────────────
   scroll-snap-type: x mandatory — snaps to each card on native/keyboard scroll.
   overscroll-behavior-x: contain — prevents body scroll bleed on mobile.
   scrollbar-width: none / ::-webkit-scrollbar — hides the decorative scrollbar.
   tabindex="0" on the track allows keyboard users to focus it and use
   arrow keys to scroll (standard browser behaviour for overflow:auto).      */

.kd-carousel__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1.25rem; /* 20px — derived from Figma card positions */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
	scrollbar-width: none; /* Firefox */
	/* Vertical padding so card box-shadows aren't clipped */
	padding-block: var(--blg-space-xs); /* 8px */
}

.kd-carousel__track::-webkit-scrollbar {
	display: none;
}

/* prefers-reduced-motion: drop smooth scroll — JS also checks this flag. */
@media (prefers-reduced-motion: reduce) {
	.kd-carousel__track {
		scroll-behavior: auto;
	}
}

/* ── Recognition card ────────────────────────────────────────────────────────
   Figma: 392x251px, radius 24px, full-bleed background-image, purple overlay.
   flex-shrink:0 — cards never compress.
   scroll-snap-align:start — each card is a snap target.
   min-height prevents collapse when no background-image is set (placeholder
   state in the editor or when images have not yet been assigned).           */

.kd-rec-card {
	position: relative;
	flex-shrink: 0;
	width: clamp(
		18rem,
		28vw,
		25rem
	); /* 288px -> ~28vw -> 400px (~392px Figma) */
	min-height: 251px; /* Figma card height */
	border-radius: var(--blg-radius-lg); /* 24px */
	overflow: hidden;
	background-color: var(--blg-color-primary); /* fallback when no image */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* content anchors to bottom (Figma: bottom-left) */
}

/* Purple colour overlay — rgba(97,51,149,0.4) matches Figma spec exactly.
   Uses a pseudo-element so it sits above the background-image but below text. */
.kd-rec-card__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(97, 51, 149, 0.4);
	border-radius: inherit;
	pointer-events: none;
}

/* ── Card body — white text, bottom-left ────────────────────────────────────
   position:relative + z-index so it sits above the overlay pseudo-element.  */

.kd-rec-card__body {
	position: relative;
	z-index: 1;
	padding: var(--blg-space-md); /* 24px all sides */
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Card year heading — Montserrat Black, 26px, white ──────────────────────
   Figma 226:2518: 26px, leading 38px (1.46), white, Black weight.          */

.kd-rec-card__year {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading); /* 900 */
	font-size: 1.625rem; /* 26px */
	line-height: 1.46; /* 38 / 26 */
	color: var(--blg-color-base); /* white */
	margin: 0 0 var(--blg-gap-tight); /* 8px gap to body text */
	letter-spacing: 0.15px;
}

/* ── Card body text — Inter Medium, 16px, white ─────────────────────────────
   Figma 226:2519: Medium (500), 16px, leading 26px (1.625), white.         */

.kd-rec-card__text {
	font-family: var(--blg-font-body);
	font-weight: 500; /* Inter Medium — Figma weight */
	font-size: var(--blg-size-body); /* 1rem / 16px */
	line-height: 1.625; /* 26 / 16 */
	color: var(--blg-color-base); /* white */
	margin: 0;
}

/* ── Dots — progress indicator below the track ──────────────────────────────
   Figma 226:2538: 66x14px, 3 circles, 14px diameter.
   aria-hidden on the container — purely decorative; a11y state is conveyed
   via the aria-label on each card ("Slide N of 5").                        */

.kd-carousel__dots {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.625rem; /* 10px — positions 3 dots across 66px: 3x14 + 2x12 = 66 */
	margin-top: var(--blg-space-md); /* 24px gap track -> dots */
}

.kd-carousel__dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 100px;
	border: 2px solid var(--blg-color-primary);
	background-color: transparent;
	transition: background-color var(--blg-transition-fast);
	cursor: pointer;
	padding: 0;
}

/* JS sets .is-active on the current dot */
.kd-carousel__dot.is-active {
	background-color: var(--blg-color-primary);
}

/* ── Tablet (<=1024px) — slightly narrower cards, arrows closer in ──────────
   At 1024px the gutter is smaller; pull arrows in to -2rem to stay visible. */

@media (max-width: 1024px) {
	.kd-carousel-section .kd-carousel-section__heading {
		font-size: clamp(1.75rem, 3vw, 2.5rem);
	}

	.kd-carousel__arrow--prev {
		left: -2.25rem;
	}

	.kd-carousel__arrow--next {
		right: -2.25rem;
	}

	.kd-rec-card {
		/* ~2 cards visible at 1024px */
		width: clamp(16rem, 44vw, 25rem);
	}
}

/* ── Mobile (<=768px) — hide arrows; native swipe + snap handles navigation
   Keyboard users can still Tab into each card's heading/body and read it.
   A small inline-end padding peeks the next card to signal scrollability.  */

@media (max-width: 768px) {
	.kd-carousel__arrow {
		display: none !important; /* also hides them if JS already un-hidden them */
	}

	.kd-carousel-section .kd-carousel-section__heading {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}

	.kd-rec-card {
		/* ~1.2 cards visible — teases the next card */
		width: clamp(14rem, 78vw, 22rem);
	}

	.kd-carousel__track {
		padding-inline-end: 2.5rem; /* peek next card edge */
	}

	.kd-rec-card__body {
		padding: var(--blg-space-sm); /* 16px — tighter on mobile */
	}
}

/* ── Small phone (<=375px) ──────────────────────────────────────────────────── */

@media (max-width: 375px) {
	.kd-rec-card {
		width: clamp(13rem, 85vw, 16rem);
	}

	.kd-rec-card__year {
		font-size: 1.375rem; /* 22px */
	}
}