/*!
 * All-In-One-Coach — Coach Reviews
 * Pinned-note cards on a horizontally scrolling board.
 */

.aioc-reviews {
	--cr-bg: #f7f1ea;
	--cr-card-bg: #faf5ef;
	--cr-card-w: 320px;
	--cr-card-h: 360px;
	--cr-gap: 24px;
	--cr-radius: 18px;
	--cr-progress: #5e110f;
	/* Breathing room so the first and last cards are never flush to the edge. */
	/* Where the card board and its progress bar sit. Deliberately its own
	   fluid value rather than the shared shell gutter: the board is a
	   horizontally scrolling row, not a column of copy, and it keeps the
	   placement it already had. */
	--cr-edge: clamp(20px, 6vw, 96px);

	position: relative;
	background-color: var(--cr-bg);
	font-family: var(--aioc-font-body);
	overflow: hidden;
}

.aioc-reviews__inner {
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	/* The heading and subheading line up with every other section's copy. */
	padding: 96px var(--aioc-shell-gut) 0;
}

/* ----------------------------------------------------------------- Header */

.cr-eyebrow {
	margin: 0 0 26px;
	color: #2a1f1b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cr-heading {
	margin: 0 0 22px;
	max-width: 16ch;
	color: #171313;
	font-family: var(--aioc-font-display);
	font-size: clamp(2.2rem, 4.6vw, 3.9rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.024em;
}

.cr-em {
	color: #5e110f;
}

.cr-sub {
	margin: 0;
	max-width: 62ch;
	color: #a79187;
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	line-height: 1.6;
}

/* ------------------------------------------------------------------ Board */

.cr-board {
	position: relative;
	margin-top: 68px;
	padding-bottom: 90px;
}

.cr-track {
	display: flex;
	align-items: flex-start;
	gap: var(--cr-gap);
	/* The cards tilt and lift, so the row needs vertical slack. */
	padding: 46px var(--cr-edge) 54px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;

	/* Hidden visually; the element keeps its role, tabindex and key handling. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cr-track::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.cr-track:focus-visible {
	outline: 2px solid var(--cr-progress);
	outline-offset: -4px;
}

.cr-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/* ------------------------------------------------------------------- Card */

.cr-card {
	position: relative;
	flex: 0 0 auto;
	width: var(--cr-card-w);
	min-height: var(--cr-card-h);
	padding: 30px 30px 34px;
	border-radius: var(--cr-radius);
	background-color: var(--cr-card-bg);
	scroll-snap-align: start;
	box-shadow: 0 18px 40px -32px rgba(23, 19, 19, 0.45);
	transform-origin: 50% 50%;
	transition: box-shadow 0.4s var(--aioc-ease-out);
}

.cr-card.is-lifted {
	z-index: 5;
	box-shadow: 0 34px 60px -30px rgba(23, 19, 19, 0.42);
}

.cr-badge {
	display: block;
	margin-bottom: 26px;
	color: #a79187;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.cr-title {
	margin: 0 0 auto;
	color: #171313;
	font-family: var(--aioc-font-display);
	font-size: clamp(1.3rem, 1.7vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.cr-desc {
	margin: 96px 0 0;
	color: #3b3330;
	font-size: 0.92rem;
	line-height: 1.55;
}

/* -------------------------------------------------------------------- Pin */

/* A dot with a short tapered stem, same visual language as the Coach
   Coaching pin: the stem starts at the dot's centre so it reads as one object. */
.cr-pin {
	position: absolute;
	top: 20px;
	right: 26px;
	width: 18px;
	height: 40px;
	pointer-events: none;
	/* Scales from the dot's centre when it drops in. */
	transform-origin: 50% 22%;
}

.cr-pin::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--pin-color, #5e110f);
	box-shadow: 0 2px 6px -1px rgba(23, 19, 19, 0.35);
}

.cr-pin::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 7px;
	width: 4px;
	height: 30px;
	background-color: var(--pin-color, #5e110f);
	/* Tapered to a point, like a real pushpin. */
	clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
	opacity: 0.9;
}

/* --------------------------------------------------------------- Progress */

.cr-progress {
	position: absolute;
	left: var(--cr-edge);
	right: var(--cr-edge);
	bottom: 34px;
	height: 3px;
	border-radius: 999px;
	background-color: rgba(110, 20, 15, 0.12);
	cursor: pointer;
	touch-action: none;
}

.cr-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-color: var(--cr-progress);
	transform: scaleX(var(--cr-p, 0));
	transform-origin: left center;
	will-change: transform;
}

.cr-progress.is-hidden {
	display: none;
}

/* ==========================================================================
   Motion layer — initial states only.
   ========================================================================== */

.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) .cr-eyebrow,
.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) .cr-sub,
.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) .cr-heading {
	opacity: 0;
}

.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) .cr-card {
	opacity: 0;
}

.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) .cr-pin {
	opacity: 0;
	transform: scale(0);
}

.aioc-js .aioc-reviews.aioc-anim:not(.cr-shown) [data-cr-copy] {
	opacity: 0;
}

/* Masks created at runtime around each headline line. */
.aioc-reviews .aioc-mask {
	display: block;
	overflow: hidden;
	/* Descenders (g, y, p) would otherwise be clipped by the mask edge. */
	padding-block-end: 0.15em;
	margin-block-end: -0.15em;
}

.aioc-reviews .aioc-split-line {
	display: block;
	transform-origin: 0 0;
}

/* will-change only while the entrance is running. */
.aioc-reviews.is-animating .cr-card,
.aioc-reviews.is-animating .cr-pin,
.aioc-reviews.is-animating .aioc-split-line,
.aioc-reviews.is-animating [data-cr-copy] {
	will-change: transform, opacity;
}

/* Snapping is a touch idiom. With a mouse it fights every small wheel move,
   pulling the row back towards the nearest card so the thing feels stuck —
   which is the opposite of what a 599px-wide scroll range needs. Pointer
   devices get free scrolling; touch keeps the snap. */
@media (hover: hover) and (pointer: fine) {
	.cr-track {
		scroll-snap-type: none;
	}

	.cr-card {
		scroll-snap-align: none;
	}
}

/* ------------------------------------------------------------ Breakpoints */

@media (max-width: 767px) {
	.aioc-reviews__inner {
		/* Stated in full: the side value used to come from --cr-edge, which is
		   now the card board's own edge rather than the copy's gutter. */
		padding: 10px 10px 0;
	}

	.aioc-reviews {
		/* One shared 10px gutter, so every section's copy starts on the same
		   line as you scroll down the page. */
		--cr-edge: 10px;
	}

	.aioc-reviews {
		/* Narrower than the screen on purpose: a slice of the next card has to
		   be visible, or the row does not read as scrollable. */
		--cr-card-w: min(70vw, 260px);
		--cr-card-h: 300px;
	}

	.cr-swipe-row {
		display: flex;
		justify-content: flex-end;
		padding-inline: var(--cr-edge);
		margin-block-start: 6px;
	}

	.cr-board {
		margin-top: 18px;
		padding-bottom: 74px;
	}

	.cr-track {
		cursor: auto;
		/* Enough headroom for the cards' tilt, and no more. */
		padding-block: 14px 28px;
	}

	.cr-heading {
		max-width: none;
	}

	.cr-desc {
		margin-top: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aioc-js .aioc-reviews .cr-eyebrow,
	.aioc-js .aioc-reviews .cr-sub,
	.aioc-js .aioc-reviews .cr-heading,
	.aioc-js .aioc-reviews .cr-card,
	.aioc-js .aioc-reviews [data-cr-copy] {
		opacity: 1;
	}

	.aioc-js .aioc-reviews .cr-pin {
		opacity: 1;
		transform: none;
	}

	.aioc-reviews .aioc-mask {
		padding-block-end: 0;
		margin-block-end: 0;
	}

	.cr-card {
		transition-duration: 0.01ms !important;
	}
}