/**
 * Cards pin section — layout + composition.
 *
 * Markup contract (authored in GenerateBlocks; GB may inject extra wrappers
 * between these levels, which is fine — nothing below assumes direct
 * parent > child nesting):
 *
 *   .trms-cards-pin-section    full-width section, clips overflow (intended)
 *   .trms-cards-pin-header     heading + paragraph, scrolls away, JS-untouched
 *   .trms-cards-pin-viewport   the pinned element AND the 1400px visual frame
 *   .trms-cards-pin-track      flex row, translated on x by GSAP (desktop only)
 *   .trms-cards-pin-card       exactly 3 of these
 *   .trms-card-deco            absolute overlay per card, JS-untouched for now
 *   .trms-cards-pin-nav       prev / progress / next strip — NOT authored: injected by
 *                             cards-pin.js as the viewport's last child (pinned with it)
 *
 * Sizing model: `.trms-cards-pin-viewport` is a size container capped at
 * var(--cards-frame-max). Card width, gap, and edge peek are in `cqw`
 * (container-query units of the frame), NOT `vw` — below 1400px the
 * composition scales with the viewport, above it the container stops
 * growing so the composition freezes and ultrawide screens just see more
 * background either side.
 *
 * Resting state = first card centered (track edge padding does the
 * centering), transform: none. The desktop scrub starts from exactly this
 * state, so JS init causes no visual jump (no FOUC/CLS, no gsap.set).
 *
 * Mode switching: the media query below mirrors the JS matchMedia
 * condition exactly. ≤768px OR prefers-reduced-motion (any width) gets the
 * CSS scroll-snap carousel and no ScrollTrigger is ever created.
 */

.trms-cards-pin-section {
	--cards-frame-max: 1400px;
	--card-w: 45cqw; /* card width, relative to the frame (design: active card ≈ 45% of frame) */

	/* The card's design height: the 3 / 4 ratio plus 50px of breathing room
	   for the content text below the collage (the 4 / 3 here is the inverse
	   of --card-aspect — keep them in sync). */
	--card-h: calc(var(--card-w) * 4 / 3 + 50px);

	/* Fit-to-window scale for the pinned (desktop) mode — see the
	   "Fit the pinned frame" block below for where it is applied.
	   Available height = window, minus the sticky header, minus the nav
	   strip under the cards (gap + 40px buttons + 16px clearance from the
	   window's bottom edge). tan(atan2(a, b)) is a / b with the units
	   stripped — CSS cannot divide one length by another directly.
	   This formula is the no-JS fallback: Safari resolves atan2() of
	   relative lengths (svh, cqw) to 0, so while the pin is live
	   cards-pin.js measures both lengths and sets --cards-scale on the
	   section as a plain number. */
	--cards-header-offset: 90px; /* sticky header height — keep in sync with HEADER_OFFSET_PX in cards-pin.js */
	--cards-nav-gap: clamp(16px, 3.5vh, 32px); /* cards → nav strip; tightens in short windows */
	--cards-nav-space: calc(var(--cards-nav-gap) + 56px);
	--cards-avail-h: calc(100vh - var(--cards-header-offset) - var(--cards-nav-space));
	--cards-scale-min: 0.6; /* below this the card text gets too small; the strip may then sit below the fold */
	--cards-scale: clamp(var(--cards-scale-min), tan(atan2(var(--cards-avail-h), var(--card-h))), 1);
	--card-shrink: calc(var(--card-w) * (1 - var(--cards-scale))); /* width a scaled card no longer covers */
	--card-gap: 14cqw; /* gap between cards — the design breathes; neighbours peek ~13.5cqw at the frame edges */
	--card-aspect: 3 / 4; /* portrait cards; height grows past this if content needs it */

	/* Edge padding that rests card 1 (and lands card 3) dead center.
	   It also sets the peek: neighbours show (100cqw - --card-w)/2
	   minus the gap at each frame edge. */
	--track-pad: calc((100cqw - var(--card-w)) / 2);

	overflow: hidden; /* intended — clips at the section edge; safe because the pinned element is a descendant, never an ancestor */
	overflow-anchor: none; /* keep Chrome scroll anchoring out of the pin-spacer's layout changes — anchoring fights the pin and yanks the scroll position around release */
	width: 100%;
}

/* Tablets wide enough for the pin have collapsing browser chrome: measure
   against the small viewport so the strip clears the toolbar too. */
@supports (height: 100svh) {

	.trms-cards-pin-section {
		--cards-nav-gap: clamp(16px, 3.5svh, 32px);
		--cards-avail-h: calc(100svh - var(--cards-header-offset) - var(--cards-nav-space));
	}
}

.trms-cards-pin-header {
	margin-inline: auto;
	max-width: var(--cards-frame-max);
}

.trms-cards-pin-viewport {
	container-type: inline-size; /* on the pinned element itself — harmless for pinning; only ANCESTOR containment breaks position: fixed */
	margin-inline: auto;
	max-width: var(--cards-frame-max);
	overflow-x: clip; /* clip (not hidden): clips peeking cards at the frame edge without creating a scroll container */
	width: 100%;
}

/*
 * Smooth edge — opt-in via the site's .trms-section-smooth-edge utility
 * class on an ancestor section. Fades the peeking cards into the page
 * background at the frame edges instead of hard-clipping them.
 *
 * Mask (not overlay gradients) on purpose: nothing in the composition
 * paints outside the frame vertically and the cards have no hover
 * shadow. If either changes, switch to ::before/::after overlay fades —
 * a mask clips everything painted outside the frame's border box, which
 * is how the testimonials wall's hover lift got cut (see 006 progress).
 */
.trms-section-smooth-edge .trms-cards-pin-viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 min(120px, 8vw), #000 calc(100% - min(120px, 8vw)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 min(120px, 8vw), #000 calc(100% - min(120px, 8vw)), transparent 100%);
}

.trms-cards-pin-track {
	display: flex;
	gap: var(--card-gap);
	padding-inline: var(--track-pad);
}

.trms-cards-pin-card {

	/* aspect-ratio gives the card its design height even while the content
	   column is sparse — .trms-card-deco is absolutely positioned and adds
	   no height of its own. Content taller than the ratio wins. */
	aspect-ratio: var(--card-aspect);
	border-radius: 24px;
	display: flex;
	flex: 0 0 var(--card-w);
	flex-direction: column;
	justify-content: flex-end; /* content column sits at the card's bottom; the deco collage owns the top */

	min-height: var(--card-h);
	min-width: 0;
	padding: 24px;
	position: relative; /* positioning context for .trms-card-deco */
}

/*
 * Decorative overlay scaffold. Sticky notes / coins / avatars inside are
 * positioned absolutely against this layer, which spans the whole card.
 * The JS never selects .trms-card-deco today; per-decoration parallax can later
 * target `.trms-cards-pin-card .trms-card-deco > *` without any markup change.
 */
.trms-cards-pin-card .trms-card-deco {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* The collage deliberately spills past the card edges (circle avatar, man
   tile, comment card). Compound selector so it out-ranks any single-class
   overflow: hidden coming from GenerateBlocks global-class styles. */
.trms-cards-pin-track .trms-cards-pin-card {
	overflow: visible;
}

/*
 * Collage composition. Percent offsets/widths are relative to the card, so
 * the arrangement scales with the frame. Descendant selectors (0,2,0)
 * deliberately out-rank GenerateBlocks' per-media .gb-media-* rules (0,1,0).
 * Edge overflows (negative offsets) are intentional — they clip only at the
 * frame edge, not the card.
 */
.trms-card-deco .trms-deco-avatar-f {
	left: -9%;
	position: absolute;
	top: 5%;
	width: 45%;
}

.trms-card-deco .trms-card-title {
	margin: 0;
	position: absolute;
	right: 4%;
	text-align: right;
	top: 4%;
	width: 45%;
}

.trms-card-deco .trms-deco-roadmap {
	left: 3%;
	position: absolute;
	top: 34%;
	width: 75%;
}

.trms-card-deco .trms-deco-note {
	position: absolute;
	right: 26%;
	rotate: -8deg;
	top: 27%;
	width: 27%;
}

.trms-card-deco .trms-deco-comment {
	left: -6%;
	position: absolute;
	rotate: 10deg;
	top: 57%;
	width: 26%;
}

.trms-card-deco .trms-deco-avatar-m {
	position: absolute;
	right: -4%;
	top: 40%;
	width: 28%;
}

/*
 * Fit the pinned frame to the window. While pinned, the cards AND the nav
 * strip under them must fit between the sticky header and the window's
 * bottom edge. Where the design-size card is too tall for that, the whole
 * card is scaled down — collage, title and text together, so the
 * composition stays exactly as designed — instead of being made narrower
 * (the text does not shrink with the box and would run over the collage).
 *
 * `scale` leaves the layout box at design size, so the space the card no
 * longer covers is handed back with negative margins: the block margin
 * pulls the nav strip up under the scaled card, the inline margins pull the
 * neighbours in so the visible gap stays --card-gap. The track padding
 * grows by the same half-shrink, which keeps card 1's box — and so its
 * center — exactly where it rests at scale 1. The script measures card
 * offsets from the laid-out boxes, so the scrub distance follows by itself.
 *
 * Desktop pin mode only — mirrors the script's matchMedia condition. The
 * swipe carousel is not pinned, so nothing has to fit there. Windows tall
 * enough for the design-size card resolve to scale 1 and are untouched.
 */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {

	.trms-cards-pin-track {
		padding-inline: calc(var(--track-pad) + var(--card-shrink) / 2);
	}

	.trms-cards-pin-track .trms-cards-pin-card {
		margin-bottom: calc(var(--card-h) * (var(--cards-scale) - 1));
		margin-inline: calc(var(--card-shrink) / -2);
		scale: var(--cards-scale);
		transform-origin: 50% 0;
	}

	/* No pinning in the block editor, so nothing to fit. */
	.editor-styles-wrapper .trms-cards-pin-track {
		padding-inline: var(--track-pad);
	}

	.editor-styles-wrapper .trms-cards-pin-track .trms-cards-pin-card {
		margin-bottom: 0;
		margin-inline: 0;
		scale: none;
	}
}

/*
 * Nav strip: previous arrow · one segment per card · next arrow. Built by
 * cards-pin.js (never authored in GenerateBlocks) and appended to the
 * viewport, so it is pinned together with the cards on desktop and sits
 * under the swipe track in carousel mode.
 *
 *   .trms-cards-pin-nav         flex row, centered under the cards
 *   .trms-cards-pin-nav-btn     40px square arrow button (-prev / -next)
 *   .trms-cards-pin-nav-dots    fixed-size indicator box
 *   .trms-cards-pin-nav-dot     one button per card (small grey segment)
 *   .trms-cards-pin-nav-pill    the red active marker, painted over the dots
 *
 * The script only ever writes two custom properties: --trms-cards-pin-nav-i
 * on each segment (its index) and --trms-cards-pin-nav-active /
 * --trms-cards-pin-nav-count on the strip. Every position below derives
 * from them, and everything moves with transform only: segments after the
 * active one shift right by the pill's extra width, the pill slides over
 * the active segment — no layout work while the section scrubs.
 *
 * Two-class selectors throughout so the theme's bare `button` /
 * `button:hover` rules never reach these controls.
 */
.trms-cards-pin-nav {

	/* Theme palette first, hex fallbacks for anywhere the palette is absent. */
	--trms-cards-pin-nav-accent: var(--red, #e8533b);
	--trms-cards-pin-nav-dot: rgba(41, 41, 37, 0.1);
	--trms-cards-pin-nav-btn-bg: var(--base-white, #fff);
	--trms-cards-pin-nav-btn-color: var(--black, #292925);
	--trms-cards-pin-nav-dot-w: 20px;
	--trms-cards-pin-nav-pill-w: 72px;
	--trms-cards-pin-nav-dot-gap: 4px;
	--trms-cards-pin-nav-count: 3; /* overwritten by the script */
	--trms-cards-pin-nav-active: 0; /* overwritten by the script */
	--trms-cards-pin-nav-step: calc(var(--trms-cards-pin-nav-dot-w) + var(--trms-cards-pin-nav-dot-gap));
	--trms-cards-pin-nav-grow: calc(var(--trms-cards-pin-nav-pill-w) - var(--trms-cards-pin-nav-dot-w));

	align-items: center;
	display: flex;
	gap: 22px;
	justify-content: center;
	margin-top: var(--cards-nav-gap, 32px);
}

.trms-cards-pin-nav .trms-cards-pin-nav-btn {
	align-items: center;
	appearance: none;
	background: var(--trms-cards-pin-nav-btn-bg);
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	color: var(--trms-cards-pin-nav-btn-color);
	cursor: pointer;
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 0;
	padding: 0;
	transition: color 0.2s ease, opacity 0.2s ease;
	width: 40px;
}

.trms-cards-pin-nav .trms-cards-pin-nav-btn:hover,
.trms-cards-pin-nav .trms-cards-pin-nav-btn:focus {
	background: var(--trms-cards-pin-nav-btn-bg);
	color: var(--trms-cards-pin-nav-accent);
}

.trms-cards-pin-nav .trms-cards-pin-nav-btn[aria-disabled="true"] {
	color: var(--trms-cards-pin-nav-btn-color);
	cursor: default;
	opacity: 0.4;
}

.trms-cards-pin-nav .trms-cards-pin-nav-btn svg {
	display: block;
	height: 22px;
	pointer-events: none;
	width: 22px;
}

.trms-cards-pin-nav-dots {
	flex: none;
	height: 16px;
	position: relative;

	/* One pill plus a small segment for every other card. */
	width: calc(var(--trms-cards-pin-nav-pill-w) + (var(--trms-cards-pin-nav-count) - 1) * var(--trms-cards-pin-nav-step));
}

.trms-cards-pin-nav .trms-cards-pin-nav-dot {
	appearance: none;
	background: var(--trms-cards-pin-nav-dot);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	height: 100%;
	left: 0;
	margin: 0;
	min-height: 0;
	padding: 0;
	position: absolute;
	top: 0;

	/* Own slot, plus the pill's extra width once past the active card:
	   clamp() turns "index minus active" into 0 (at or before) or 1 (after). */
	--trms-cards-pin-nav-past: clamp(0, var(--trms-cards-pin-nav-i) - var(--trms-cards-pin-nav-active), 1);

	transform: translateX(calc(var(--trms-cards-pin-nav-i) * var(--trms-cards-pin-nav-step) + var(--trms-cards-pin-nav-past) * var(--trms-cards-pin-nav-grow)));
	transition: transform 0.35s ease;
	width: var(--trms-cards-pin-nav-dot-w);
}

.trms-cards-pin-nav .trms-cards-pin-nav-dot:hover,
.trms-cards-pin-nav .trms-cards-pin-nav-dot:focus {
	background: var(--trms-cards-pin-nav-dot);
}

/* 24 × 32px hit area around each 20 × 16px segment. */
.trms-cards-pin-nav .trms-cards-pin-nav-dot::before {
	content: "";
	inset: -8px -2px;
	position: absolute;
}

.trms-cards-pin-nav-pill {
	background: var(--trms-cards-pin-nav-accent);
	border-radius: 4px;
	height: 100%;
	left: 0;
	pointer-events: none; /* the active segment underneath stays the click / focus target */
	position: absolute;
	top: 0;
	transform: translateX(calc(var(--trms-cards-pin-nav-active) * var(--trms-cards-pin-nav-step)));
	transition: transform 0.35s ease;
	width: var(--trms-cards-pin-nav-pill-w);
}

.trms-cards-pin-nav .trms-cards-pin-nav-btn:focus-visible,
.trms-cards-pin-nav .trms-cards-pin-nav-dot:focus-visible {
	outline: 2px solid var(--trms-cards-pin-nav-btn-color);
	outline-offset: 2px;
}

/* The active segment hides under the pill, so the pill carries its ring. */
.trms-cards-pin-nav .trms-cards-pin-nav-dot[aria-current="true"]:focus-visible {
	outline: none;
}

.trms-cards-pin-nav .trms-cards-pin-nav-dot[aria-current="true"]:focus-visible ~ .trms-cards-pin-nav-pill {
	outline: 2px solid var(--trms-cards-pin-nav-btn-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.trms-cards-pin-nav .trms-cards-pin-nav-btn,
	.trms-cards-pin-nav .trms-cards-pin-nav-dot,
	.trms-cards-pin-nav-pill {
		transition: none;
	}
}

/*
 * Swipe-carousel mode: mobile, and reduced-motion at ANY width (the chosen
 * reduced-motion treatment — same composition, user-driven swipe, no pin).
 * Mirrors the JS condition `(min-width: 769px) and
 * (prefers-reduced-motion: no-preference)` — every state outside that runs
 * this block and only this block.
 */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {

	.trms-cards-pin-track {
		-webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none; /* hidden, but the element still scrolls via swipe/keyboard — give the track tabindex="0" in the GB markup */
	}

	.trms-cards-pin-track::-webkit-scrollbar {
		display: none;
	}

	.trms-cards-pin-track:focus-visible {
		outline: 2px solid currentcolor;
		outline-offset: 2px;
	}

	.trms-cards-pin-card {
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
}

@media (max-width: 768px) {

	.trms-cards-pin-section {
		--card-w: 85cqw;
		--card-gap: 4cqw;
	}

	.trms-cards-pin-nav {
		margin-top: 24px;
	}
}

/*
 * Rotating background icon. Markup contract (GenerateBlocks, three nested
 * Containers/Media as the FIRST child of the host section — the big
 * "Empower your recruitment" wrapper):
 *
 *   .trms-bg-icon-wrap   zero-height in-flow anchor; the icon's offset is
 *                        measured from this point (= the host's top)
 *   └─ .trms-bg-icon-clip  full-bleed clip window — kills the horizontal
 *                          overflow a rotated square would otherwise create
 *      └─ .trms-bg-icon     the image; GSAP scrubs rotation (+ y drift)
 *
 * Layering: the host's isolation creates a stacking context, so the
 * clip's z-index -1 paints above everything BEHIND the host — including
 * opaque backgrounds on ancestor wrappers (GeneratePress's content
 * wrapper carries the cream page background) — while staying below all
 * of the host's own content. No content container needs touching.
 */

/* Add this class to the section the icon belongs to (the big wrapper) —
   it is the containing block the clip window's height/offset measure
   against. position: relative and isolation are both pin-safe (neither
   is a fixed-position containing-block trigger). */
.trms-bg-icon-host {
	isolation: isolate;
	position: relative;
}

.trms-bg-icon-wrap {
	height: 0; /* pure anchor — contributes nothing to layout */
	position: relative;
}

.trms-bg-icon-clip {

	/* The shape is DELIBERATELY wider than any viewport — its sides clip at
	   the screen edges and only the top/bottom vertices taper into view,
	   per the design. Calibrated so the SVG's donut hole (~35% of the
	   shape, centered at 57% of its height) lands behind the stats band. */
	--trms-bg-icon-size: 3000px;
	--trms-bg-icon-offset: 300px; /* shape top, measured from the host section's top — vertex rises behind the intro cards row; tune freely */
	--trms-bg-icon-bleed: 280px; /* headroom so rotated corners don't hard-clip at the window's top/bottom */

	height: calc(var(--trms-bg-icon-size) + var(--trms-bg-icon-bleed) * 2);
	left: calc(50% - 50vw); /* full-bleed window centered on the viewport */
	overflow: clip;
	pointer-events: none;
	position: absolute;
	top: calc(var(--trms-bg-icon-offset) - var(--trms-bg-icon-bleed));
	width: 100vw;
	z-index: -1;
}

/* Compound selector: out-ranks GenerateBlocks' per-media .gb-media-* rule,
   whose max-width: 100% would cap the shape at the clip's width. */
.trms-bg-icon-clip .trms-bg-icon {
	height: auto;

	/* left + negative margin centers an element WIDER than its parent;
	   auto margins left-align when the free space is negative, and
	   transforms stay entirely owned by GSAP. */
	left: 50%;
	margin-left: calc(var(--trms-bg-icon-size) / -2);
	max-width: none;
	position: absolute;
	top: var(--trms-bg-icon-bleed);
	width: var(--trms-bg-icon-size);
	will-change: transform;
}

/*
 * Block editor canvas (this stylesheet is also enqueued for the editor by
 * Cards_Pin::enqueue_editor_assets). Same composition as the front end,
 * but the track scrolls horizontally so cards 2-3 stay reachable while
 * editing — there is deliberately no pinning inside the editor.
 */
.editor-styles-wrapper .trms-cards-pin-track {
	overflow-x: auto;
}