/**
 * Site-wide reviews — home-spec.md §8.
 *
 * **Phase 14 measured the card against the frame and added the marquee.**
 *
 *   Card      400 x 283, radius 8, 1px #FBFBCE on white, padding 32
 *   Columns   two at 400, 17px gutter
 *   Viewport  583 — exactly two cards and the gap between them
 *   Stars     #FCB021, sampled from the frame
 *
 * `#FBFBCE` is the border the frame draws: a pale yellow a shade darker than
 * the `#FFFFF3` band it sits on, not the theme's neutral `line`, which reads
 * grey against this tint.
 */

.hermizon-reviews {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.hermizon-reviews.is-grid.has-2-columns {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hermizon-reviews.is-grid.has-3-columns {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hermizon-reviews.is-grid.has-4-columns {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* --------------------------------------------------------------------------
 * The card
 * ----------------------------------------------------------------------- */

.hermizon-review {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px;
	background-color: var(--wp--preset--color--base);
	border: var(--wp--custom--border--width) solid #fbfbce;
	border-radius: var(--wp--custom--radius--md);
}

/* The design's stars are gold. The brand red is the price colour and putting
 * it on a rating would make every card compete with the products. */
.hermizon-review__rating {
	color: #fcb021;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 2px;
	line-height: 1;
}

.hermizon-review__quote {
	margin: 23px 0 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
}

.hermizon-review__quote p {
	margin: 0;
}

.hermizon-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Pinned to the bottom of the card so the author rows line up across cards
	 * whose quotes run to different lengths. */
	margin-block-start: auto;
	padding-block-start: 31px;
}

.hermizon-review__avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--pill);
}

.hermizon-review__meta {
	display: flex;
	flex-direction: column;
}

.hermizon-review__name {
	font-weight: 600;
}

.hermizon-review__product {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
}

.hermizon-review__product:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * The marquee
 *
 * Two columns, the first running down and the second up, continuously and at a
 * constant speed. `linear` is doing real work here: any easing function slows
 * the track at the loop boundary, which is exactly where the seam is, and the
 * eye reads that deceleration as a stutter.
 *
 * There is no JavaScript. A CSS animation runs off the main thread, so it
 * cannot fall behind when something else on the page is busy — which is the
 * failure mode a rAF-driven or scroll-driven marquee has.
 * ----------------------------------------------------------------------- */

.hermizon-reviews.is-marquee {
	grid-template-columns: repeat(2, 400px);
	gap: 17px;
	/* Two cards and one gap: 283 + 17 + 283. */
	height: 583px;
	overflow: hidden;
	/* Cards enter and leave rather than appearing at a hard edge. The design is
	 * a static frame and draws no fade; this is the marquee's own addition and
	 * the smallest one that stops the clip reading as a crop. */
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 48px,
		#000 calc(100% - 48px),
		transparent 100%
	);
}

.hermizon-reviews__column {
	overflow: hidden;
}

.hermizon-reviews__track {
	display: flex;
	flex-direction: column;
	will-change: transform;
	animation: hermizon-marquee var(--hermizon-marquee-duration, 60s) linear infinite;
}

.hermizon-reviews__column.is-reverse .hermizon-reviews__track {
	animation-direction: reverse;
}

/* The gap lives on the card, not on the track — see render.php. With a track
 * `gap` the loop lands half a gap short of the seam on every cycle. */
.hermizon-reviews.is-marquee .hermizon-review {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 283px;
	margin-block-end: 17px;
}

@keyframes hermizon-marquee {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-50%);
	}
}

/* Let a reader finish a quote. Hover covers the mouse, focus-within the
 * keyboard — the product links inside the cards are real tab stops. */
.hermizon-reviews.is-marquee:hover .hermizon-reviews__track,
.hermizon-reviews.is-marquee:focus-within .hermizon-reviews__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.hermizon-reviews__track {
		animation: none;
	}

	/* With the animation gone the column is a plain list, so it gets its own
	 * scrollbar rather than hiding fifteen of its sixteen reviews. */
	.hermizon-reviews.is-marquee {
		height: auto;
		max-height: 583px;
		mask-image: none;
	}

	.hermizon-reviews__column {
		overflow-y: auto;
	}
}

@media (max-width: 781px) {
	.hermizon-reviews.is-marquee {
		grid-template-columns: 1fr;
		height: 500px;
	}

	.hermizon-reviews.is-marquee .hermizon-review {
		height: auto;
	}

	/* One column on a phone, and the second lane would only repeat it. */
	.hermizon-reviews__column.is-reverse {
		display: none;
	}
}