/**
 * Section — Homepage testimonials, "Loved by our players" (homepage final
 * pass, 6 Oct 2026; finishing pass + review round 7 Oct 2026; NOT
 * design-locked)
 *
 * Markup: views/sections/home-proof.php; behaviour: home-reviews.js.
 * Dark cards with the V2 teal → pearl-pink edge; stars in the same pearl
 * tones. Deliberately not a review-widget look.
 *
 * A carousel over every homepage review (no cap):
 * - 1024px and up: three cards in view; it slides one card per step and
 *   loops.
 * - Below 1024px: ONE featured card, cross-fading, with a control bar
 *   (prev · position · next · pause). No peeking neighbour cards, so it
 *   doesn't read as a third swipe rail between Recent winners and How it
 *   works — and it stays one card tall however many reviews there are.
 * - Excerpts are clamped (4 lines; 3 on phones); "Read full review" opens
 *   .ec-review-dialog.
 * - Without JavaScript (.is-ready absent) the row simply scrolls.
 */

.ec-home-reviews-carousel {
	--ec-reviews-per-view: 3;
	--ec-reviews-gap: var(--ec-space-4);
}

.ec-home-reviews__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.ec-home-reviews-carousel.is-ready .ec-home-reviews__viewport {
	overflow: hidden;
	scroll-snap-type: none;
}

.ec-home-reviews {
	display: flex;
	gap: var(--ec-reviews-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.ec-home-reviews > .ec-home-review {
	flex: 0 0 calc((100% - (var(--ec-reviews-per-view) - 1) * var(--ec-reviews-gap)) / var(--ec-reviews-per-view));
	scroll-snap-align: start;
}

.ec-home-reviews.is-fading {
	opacity: 0;
}

.ec-home-reviews.is-animating {
	transition: transform 600ms var(--ec-ease-standard, ease);
}

.ec-home-reviews.is-fade-mode {
	transition: opacity 220ms ease;
}

.ec-home-review {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-3);
	min-width: 0;
	padding: var(--ec-space-5);
	border: 1px solid transparent;
	border-radius: var(--ec-radius-lg);
	background:
		linear-gradient(180deg, rgba(16, 32, 56, 0.92), rgba(10, 22, 38, 0.92)) padding-box,
		linear-gradient(140deg, rgba(124, 236, 243, 0.35), rgba(249, 194, 236, 0.22) 55%, rgba(124, 236, 243, 0.08)) border-box;
	box-sizing: border-box;
}

.ec-home-review__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-1) var(--ec-space-3);
}

.ec-home-review__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--ec-space-2);
	margin: 0;
	color: var(--ec-color-text-tertiary);
	font-size: var(--ec-font-size-caption);
}

.ec-home-review__source + .ec-home-review__date::before {
	content: "·";
	margin-right: var(--ec-space-2);
}

.ec-home-review__stars {
	margin: 0;
	font-size: 1.125rem;
	letter-spacing: 0.12em;
	line-height: 1;
}

.ec-home-review__stars > span:first-child {
	background: linear-gradient(120deg, #5fe3ee, #f2fbff 55%, #f4c9e6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ec-home-review__stars-off {
	color: rgba(237, 245, 251, 0.18);
}

.ec-home-review__quote {
	flex: 1;
	margin: 0;
}

.ec-home-review__quote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin: 0;
	color: var(--ec-color-text-primary);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-relaxed);
	overflow-wrap: anywhere;
}

.ec-home-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-2) var(--ec-space-3);
}

.ec-home-review__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.125rem 0.25rem;
	margin: 0 -0.25rem;
	border: 0;
	border-radius: var(--ec-radius-sm);
	background: none;
	color: var(--ec-color-accent-strong);
	font: inherit;
	font-size: var(--ec-font-size-body-sm);
	font-weight: var(--ec-font-weight-semibold);
	cursor: pointer;
}

.ec-home-review__more[hidden] {
	display: none;
}

.ec-home-review__more::after {
	/* A full 44px tap target without a tall visible box. */
	content: "";
	position: absolute;
	inset: -0.75rem -0.25rem;
}

.ec-home-review__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Keyboard focus: a 2px underline and a soft teal tint behind the text
   (no hard box), in the link's own language.
   Pointer focus shows nothing — and a review opened by mouse / touch
   hands focus back without a ring (.is-pointer-focus, home-reviews.js). */
.ec-home-review__more:focus {
	outline: none;
}

.ec-home-review__more:focus-visible:not(.is-pointer-focus) {
	background-color: rgba(124, 236, 243, 0.14);
	color: #9ff1f6;
	text-decoration: underline 2px;
	text-underline-offset: 4px;
}

.ec-home-reviews__button:focus {
	outline: none;
}

.ec-home-reviews__button:focus-visible,
.ec-review-dialog__close:focus-visible {
	outline: 2px solid rgba(124, 236, 243, 0.85);
	outline-offset: 2px;
}

.ec-review-dialog__close:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------- Controls */

.ec-home-reviews__controls {
	display: flex;
	align-items: center;
	gap: var(--ec-space-2);
	margin-top: var(--ec-space-4);
}

.ec-home-reviews__controls[hidden] {
	display: none;
}

.ec-home-reviews__progress {
	flex: 1 1 auto;
	height: 2px;
	margin-right: var(--ec-space-3);
	border-radius: 2px;
	background: rgba(124, 236, 243, 0.12);
	overflow: hidden;
}

.ec-home-reviews__progress > span {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #5fe3ee, #f4c9e6);
	transform: scaleX(0);
	transform-origin: left center;
}

.ec-home-reviews__progress > span.is-running {
	animation: ec-reviews-progress var(--ec-reviews-interval, 7000ms) linear forwards;
}

@keyframes ec-reviews-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.ec-home-reviews__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(124, 236, 243, 0.28);
	border-radius: 999px;
	background: rgba(16, 32, 56, 0.9);
	color: var(--ec-color-text-primary);
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.ec-home-reviews__button:hover {
	border-color: rgba(124, 236, 243, 0.6);
	background: rgba(124, 236, 243, 0.1);
}

.ec-home-reviews__button--prev svg {
	transform: rotate(180deg);
}

.ec-home-reviews__button--toggle {
	margin-left: var(--ec-space-2);
}

.ec-home-reviews__icon-play,
.ec-home-reviews-carousel.is-paused .ec-home-reviews__icon-pause {
	display: none;
}

.ec-home-reviews-carousel.is-paused .ec-home-reviews__icon-play {
	display: inline-flex;
}

.ec-home-reviews__icon-pause {
	display: inline-flex;
}

.ec-home-reviews__position {
	min-width: 4.5ch;
	margin: 0;
	color: var(--ec-color-text-secondary);
	font-size: var(--ec-font-size-body-sm);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.ec-home-review__who {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ec-space-1) var(--ec-space-3);
	min-width: 0;
	margin: 0;
	font-size: var(--ec-font-size-body-sm);
}

.ec-home-review__name {
	color: var(--ec-color-text-primary);
	font-weight: var(--ec-font-weight-semibold);
	overflow-wrap: anywhere;
}

.ec-home-review__prize {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--ec-color-accent-strong);
}


/* Below 1024px: one featured card at a time (cross-fade), 4-line excerpt;
   3 lines on phones. */
@media (max-width: 1023px) {
	.ec-home-reviews-carousel.is-ready {
		--ec-reviews-per-view: 1;
	}

	.ec-home-reviews-carousel {
		--ec-reviews-gap: var(--ec-space-3);
	}

	.ec-home-reviews-carousel:not(.is-ready) .ec-home-reviews > .ec-home-review {
		flex-basis: 85%;
	}

	.ec-home-review {
		gap: var(--ec-space-2);
		padding: var(--ec-space-4) var(--ec-space-5);
	}

	.ec-home-reviews__controls {
		margin-top: var(--ec-space-3);
	}
}

@media (max-width: 639px) {
	.ec-home-review {
		padding: var(--ec-space-4);
	}

	.ec-home-review__quote p {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.ec-home-reviews__progress {
		margin-right: var(--ec-space-1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-home-reviews.is-animating,
	.ec-home-reviews.is-fade-mode {
		transition: none;
	}

	.ec-home-reviews__progress {
		visibility: hidden;
	}
}

/* ---------------------------------------------------- Full review dialog */

.ec-review-dialog {
	box-sizing: border-box;
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(44rem, calc(100dvh - 2rem));
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ec-radius-lg);
	background:
		linear-gradient(180deg, rgb(16, 32, 56), rgb(10, 22, 38)) padding-box,
		linear-gradient(140deg, rgba(124, 236, 243, 0.45), rgba(249, 194, 236, 0.3) 55%, rgba(124, 236, 243, 0.12)) border-box;
	color: var(--ec-color-text-primary);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	overscroll-behavior: contain;
}

.ec-review-dialog[open] {
	display: flex;
	flex-direction: column;
}

.ec-review-dialog__inner {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1 1 auto;
	outline: none;
}

.ec-review-dialog::backdrop {
	background-color: rgba(3, 8, 16, 0.78);
}

html:has(.ec-review-dialog[open]) {
	overflow: hidden;
}

.ec-review-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ec-space-3);
	padding: var(--ec-space-5) var(--ec-space-5) var(--ec-space-3);
	border-bottom: 1px solid rgba(124, 236, 243, 0.12);
}

.ec-review-dialog__heading {
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-2);
	min-width: 0;
}

.ec-review-dialog__title {
	margin: 0;
	font-size: var(--ec-font-size-h4);
	line-height: var(--ec-line-height-tight);
	overflow-wrap: anywhere;
}

.ec-review-dialog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ec-space-1) var(--ec-space-3);
	margin: 0;
	color: var(--ec-color-text-tertiary);
	font-size: var(--ec-font-size-body-sm);
}

.ec-review-dialog__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: calc(var(--ec-space-2) * -1) calc(var(--ec-space-2) * -1) 0 0;
	border: 1px solid rgba(124, 236, 243, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--ec-color-text-primary);
	cursor: pointer;
}

.ec-review-dialog__close:hover {
	background: rgba(124, 236, 243, 0.12);
}

.ec-review-dialog__body {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: var(--ec-space-4) var(--ec-space-5) var(--ec-space-5);
	overflow-y: auto;
}

.ec-review-dialog__body p {
	margin: 0 0 var(--ec-space-3);
	font-size: var(--ec-font-size-body);
	line-height: var(--ec-line-height-relaxed);
	overflow-wrap: anywhere;
}

.ec-review-dialog__body p:last-child {
	margin-bottom: 0;
}

.ec-review-dialog__foot {
	margin: 0;
	padding: var(--ec-space-3) var(--ec-space-5) var(--ec-space-4);
	border-top: 1px solid rgba(124, 236, 243, 0.12);
	font-size: var(--ec-font-size-body-sm);
}

@media (max-width: 639px) {
	.ec-review-dialog__head {
		padding: var(--ec-space-4) var(--ec-space-4) var(--ec-space-3);
	}

	.ec-review-dialog__body {
		padding: var(--ec-space-3) var(--ec-space-4) var(--ec-space-4);
	}

	.ec-review-dialog__foot {
		padding: var(--ec-space-3) var(--ec-space-4);
	}
}