/**
 * Pattern: About — Split with Image Carousel  (patterns/about-carousel.php)
 *
 * Figma source: node 5:2412 (About page split with image carousel)
 * (nodes 23:6417-23:6422). Wireframe-tier — fidelity is apply-system.
 *
 * Structure mirrors the site's existing split-with-media convention (see
 * split-text-image.css) for the 46/54 column proportions,
 * heading/body typography, and the `:not(:has(img))` placeholder trick — the
 * ONLY genuinely new piece is the carousel-specific slide sizing (100% width,
 * one photo per view) and the arrow treatment, which is intentionally NOT the
 * filled-circle-in-the-gutter style used by the other .kd-carousel
 * instances (card-carousel.css's base rules) — Figma 5:2412 shows small
 * rounded-square buttons OVERLAID on the image itself. Chrome shared with every
 * other carousel (.kd-carousel__track base flex/scroll-snap, .kd-carousel__dots)
 * comes from card-carousel.css; only the differences are overridden here, scoped
 * under .kd-about-carousel so nothing bleeds into the other carousel usages.
 *
 * One pattern = one CSS partial. Auto-enqueued by the glob in inc/enqueue.php.
 * Prefix: --kd-* / .kd-* only — no hardcoded hex (color-mix for tints).
 */

/* ── Two-column split ─────────────────────────────────────────────────────── */

.kd-about-carousel .kd-about-carousel__inner {
	display: flex !important;
	align-items: center;
	gap: 2.5rem;
	margin-block: 0 !important;
	/* Same composition cap as .kd-split__inner — this is a split whose media
	   happens to be a carousel, so it shares the split's bounds rather than
	   inheriting whatever the band is. WP's constrained layout centers any
	   child narrower than its container, so no margin rule is needed. */
	max-width: var(--kd-measure-split);
}

.kd-about-carousel .kd-about-carousel__inner > .wp-block-column {
	width: auto !important;
	margin-right: 0 !important;
	min-width: 0;
}

.kd-about-carousel__media-col,
.kd-about-carousel__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Media frame — image-only rounding + clip + arrow anchor ─────────────────
   Figma media box: 555x500px, radius 20px, rounded on ALL FOUR corners of the
   PHOTO — the dots row sits BELOW it, outside the rounded frame (Figma
   23:6417/23:6420).

   This styling lives on `.kd-about-carousel__frame` — a wrapper around ONLY
   the arrows + track — NOT on `.kd-about-carousel__carousel` (the outer
   group, which also contains `.kd-carousel__dots` as its last child). Putting
   it on the outer wrapper was the bug: the shared `.kd-carousel__arrow {
   top: calc(50% - 20px) }` rule resolved 50% against carousel+gap+dots
   height instead of the image, and the rounded/clipped box included the
   dots' row height too, so the image's own bottom corners never actually hit
   the rounded edge.

   - border-radius + overflow:hidden -> clips the image to 20px on all 4
     corners, nothing else in its box.
   - position:relative -> the containing block for the absolutely-positioned
     arrows, so `top:50%` centers on the IMAGE. (`.kd-carousel`'s own
     position:relative, from the shared base rule in card-carousel.css, no
     longer matters for the arrows since the frame is the nearer positioned
     ancestor.)

   aspect-ratio stays on `.kd-about-carousel__track` (scales the frame with
   the column instead of pinning a fixed height — overflows on tablet
   otherwise). The frame has no size rules of its own — arrows are
   position:absolute so they don't add to its flow height — so it auto-sizes
   to exactly the track's rendered box; that's what makes clipping on the
   frame equivalent to clipping the photo itself.                            */

.kd-about-carousel__frame {
	position: relative;
	border-radius: var(--kd-radius-card); /* 20px — Figma media box radius */
	overflow: hidden;
}

.kd-about-carousel__track {
	aspect-ratio: 555 / 500;
}

/* Neutralise WP core's default flow block-gap (`:root :where(.is-layout-flow)
   > * { margin-block: 24px 0px; }`, zero specificity via :where()) between
   the frame's own children (2 wp:html arrow buttons + the track group).
   Confirmed via computed styles: it pushed `.kd-about-carousel__track` down
   24px from the frame's top edge — breaking the frame-clips-exactly-the-photo
   assumption the corner-rounding fix depends on — AND gave the next-arrow
   (2nd child) 24px of margin-top the prev-arrow (1st child, exempt) doesn't
   get, so the two arrows sat 24px apart from each other vertically instead of
   level. Both selectors below are 2 classes (0,2,0) so they win over the core
   rule's effective (0,1,0) regardless of stylesheet load order — no
   !important needed. */
.kd-about-carousel__frame .kd-carousel__arrow,
.kd-about-carousel__frame .kd-about-carousel__track {
	margin-block-start: 0;
}

/* Zero two shared base-rule side effects that only make sense for the OTHER
   (multi-per-view) .kd-carousel instances:
   1. `gap: 1.25rem` (card-carousel.css) — a single full-width "page" has no
      adjacent slide that should ever be visible next to it, so any gap here
      is pure bug surface, not a design choice.
   2. `padding-inline-end: 2.5rem` at <=768px (card-carousel.css's "peek next
      card" mobile rule) — deliberately teases the next card for the
      multi-per-view carousels; for us it just shrinks the visible slide by
      40px and reveals a 40px sliver of slide 2 (measured: 595.8px slides in a
      636px track — exactly 636 minus that padding). Confirmed by diffing
      computed styles: track had `padding: 8px 40px 8px 0` inherited from that
      rule; zeroing it renders slides at the full 636px, no peek.
   Extra specificity (2 classes vs. the base rules' 1) wins both without
   `!important`. */
.kd-about-carousel .kd-about-carousel__track {
	gap: 0;
	padding-inline-end: 0;
}

/* One slide = one photo; sized to 100% of the track so exactly one is visible
   per "page" — card-carousel.js's paged mode then generates one dot per photo
   (5 photos -> 5 dots, matching the Figma dot row) with zero JS changes. */
.kd-about-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
}

.kd-about-carousel__slide .wp-block-image {
	margin: 0;
	height: 100%;
}

.kd-about-carousel__slide .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder — the `:not(:has(img))` convention: a flat
   neutral tint, no icon glyph. core/image renders nothing on the front end
   without an attachment, so :not(:has(img)) reliably catches the empty state. */
.kd-about-carousel__slide:not(:has(img)) {
	width: 100%;
	height: 100%;
	background-color: var(--kd-color-neutral-100);
}

/* …and the same tint on the FRAME, the container that survives when
   inc/about-carousel.php drops every empty slide: otherwise an all-empty
   carousel leaves an invisible ~489px void. The frame already carries the media
   radius and overflow:hidden, so this lands as the same rounded box. */
.kd-about-carousel__frame:not(:has(img)) {
	background-color: var(--kd-color-neutral-100);
}

/* ── Arrows — OVERLAID on the image (Figma 119:2378/2381), NOT the filled
   circle the other .kd-carousel instances use in the outer gutter.
   Small rounded-square buttons, light tint fill, primary glyph,
   pinned to the image's left/right edges, vertically centred, sitting above
   the slide (z-index from the shared base rule). Scoped under
   `.kd-about-carousel__frame` (their actual positioning-context parent, see
   above) rather than `__carousel` — same specificity (2 classes vs. the base
   rule's 1), still wins on selector specificity alone, no !important needed
   for position/colour/shape. */
.kd-about-carousel__frame .kd-carousel__arrow {
	width: 2.5rem; /* 40px — close to the Figma 41px asset */
	height: 2.5rem;
	border-radius: var(--kd-radius-md); /* 12px — rounded-square, not a pill */
	background-color: color-mix(
		in srgb,
		var(--kd-color-primary) 12%,
		var(--kd-color-base)
	); /* light tint */
	color: var(--kd-color-primary); /* primary glyph */
}

.kd-about-carousel__frame .kd-carousel__arrow:hover {
	background-color: color-mix(
		in srgb,
		var(--kd-color-primary) 22%,
		var(--kd-color-base)
	);
	color: var(--kd-color-secondary);
}

.kd-about-carousel__frame .kd-carousel__arrow--prev {
	left: 0.75rem;
}

.kd-about-carousel__frame .kd-carousel__arrow--next {
	right: 0.75rem;
}

/* The shared card-carousel.css hides ALL .kd-carousel__arrow at <=768px
   (arrows live in the outer gutter there, which disappears on mobile). This
   carousel's arrows are overlaid ON the image itself, so they stay visible +
   tappable at every width — Figma has no "hide on mobile" cue, and there is no
   gutter dependency to lose. Higher specificity alone can't win over that rule
   (it's `!important`); matching `!important` here is the only way to override
   it, same technique the base rule itself documents ("also hides them if JS
   already un-hidden them"). */
@media (max-width: 768px) {
	.kd-about-carousel__frame .kd-carousel__arrow {
		display: flex !important;
	}
}

/* Dots — sit below the rounded photo via normal flow: `.kd-carousel__dots` is
   `.kd-about-carousel__frame`'s next sibling, both INSIDE
   `.kd-about-carousel__carousel` (the outer wrapper card-carousel.js queries
   with `carousel.querySelector('.kd-carousel__dots')` — a descendant query,
   unaffected by the extra frame nesting level; see inc/about-carousel.php).
   They are NOT clipped because `overflow:hidden` now lives only on
   `.kd-about-carousel__frame` (wraps just the arrows + track) — the outer
   carousel wrapper has no overflow/radius of its own. The shared base rule
   already centers + spaces the dots row; no override needed here. */

/* ── Text column ──────────────────────────────────────────────────────────── */

.kd-about-carousel__text-col {
	gap: 0;
}

.kd-about-carousel .kd-about-carousel__heading {
	/* Size + line-height follow the global h2 section scale (theme.json). */
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-md); /* 24px heading -> first para */
	font-family: var(--kd-font-heading);
	font-weight: 700;
}

.kd-about-carousel .kd-about-carousel__body {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	line-height: 1.55;
	color: var(--kd-color-body);
	margin: 0 0 var(--kd-space-sm) !important; /* 16px between paragraphs */
}

.kd-about-carousel .kd-about-carousel__body:last-child {
	margin-bottom: 0 !important;
}

/* ── Tablet (<=1100px) — equalise columns so the carousel scales with the
   text instead of holding 46% and crushing the copy.                         */
/* NOTE: 1100, deliberately NOT the split's 1239.98. This carousel's columns are
   proportional (flex-basis 46/54), so it has no "media holds 500 and crushes the
   text" failure mode to hand off — the rule here mainly adjusts the gap. Known
   consequence: on a page carrying both, between 1100 and 1240 the split runs
   equalised columns while this stays 46/54, so their media edges do not align in
   that band. Accepted; revisit if a page ever places them adjacent. */
@media (max-width: 1100px) {
	.kd-about-carousel .kd-about-carousel__inner {
		gap: var(--kd-space-lg) !important; /* 40px */
	}

	.kd-about-carousel__media-col,
	.kd-about-carousel__text-col {
		flex: 1 1 0 !important;
		max-width: none !important;
	}
}

/* ── Mobile (<=768px) — stack, full width ───────────────────────────────────── */
@media (max-width: 768px) {
	.kd-about-carousel .kd-about-carousel__inner {
		flex-direction: column !important;
		gap: var(--kd-space-lg) !important; /* 40px */
	}

	/* Specificity note: must match (or beat) the (0,3,0) desktop rule
	   `.kd-about-carousel .kd-about-carousel__inner > .wp-block-column` (both
	   !important) that sets `width: auto` to cancel WP's inline flex-basis —
	   a plain `.kd-about-carousel__media-col { width:100% !important }` (0,1,0)
	   loses that tie-break and the column never actually reaches full width
	   once flex-direction flips to column (width is the cross-axis there, so
	   "auto" under the default align-items:center just shrinks to content). */
	.kd-about-carousel .kd-about-carousel__inner > .wp-block-column {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.kd-about-carousel__track {
		aspect-ratio: 4 / 3; /* a touch taller than the desktop landscape ratio */
	}

	.kd-about-carousel__frame .kd-carousel__arrow {
		width: 2.25rem;
		height: 2.25rem;
		/* Shared base rule hardcodes `top: calc(50% - 20px)` — half of the
		   desktop 41px arrow. At this smaller 36px (2.25rem) size that leaves
		   a ~2px vertical offset from the image's true centre; re-centre for
		   the actual box half-height (18px). */
		top: calc(50% - 18px);
	}

	.kd-about-carousel__frame .kd-carousel__arrow--prev {
		left: 0.5rem;
	}

	.kd-about-carousel__frame .kd-carousel__arrow--next {
		right: 0.5rem;
	}
}