/*
 * Reviews as on the app landing page (app_landing.css "Proof": its cards, rating and loop, 6s a
 * card), for the cookbook and eBook pages (reviews/_marquee.html, reviews_marquee.js). The page
 * picks the colours: .rv--light or .rv--dark here, and its background (--rv-bg) in its own styles.
 */

@font-face {
	font-family: 'Cotoris Bold';
	src: url("../fonts/CotorisB-webfont.da3049b4f4ea.woff2") format("woff2"),
		url("../fonts/CotorisB-webfont.a055ce0afa53.woff") format("woff");
	font-display: swap;
}

.rv {
	--rv-per: 6s;   /* each card's share of the loop, as the app landing page's */
	--rv-gutter: clamp(1rem, 4vw, 2rem);
	--rv-star: #ff912c;   /* the apps' rating stars */
	position: relative;
	padding: clamp(4rem, 8vw, 6rem) 0 clamp(3.5rem, 7vw, 5rem);
	background: var(--rv-bg, #f2efea);
	color: var(--rv-text);
	font-family: 'Hind Vadodara', sans-serif;
	text-align: center;
}

.rv--light {
	--rv-ink: #1A2518;
	--rv-text: #3D4A3A;
	--rv-muted: #667063;
	--rv-card-bg: #FFF;
	--rv-card-line: rgba(26, 37, 24, .08);
	--rv-star-off: rgba(26, 37, 24, .14);
	--rv-toggle-bg: rgba(255, 255, 255, .85);
	--rv-toggle-line: rgba(26, 37, 24, .1);
}

.rv--dark {
	--rv-ink: #F8FFF6;
	--rv-text: rgba(248, 255, 246, .8);
	--rv-muted: rgba(248, 255, 246, .58);
	--rv-card-bg: rgba(248, 255, 246, .07);
	--rv-card-line: rgba(248, 255, 246, .12);
	--rv-star-off: rgba(248, 255, 246, .22);
	--rv-toggle-bg: rgba(248, 255, 246, .08);
	--rv-toggle-line: rgba(248, 255, 246, .18);
}

/* ---------- The heading and the rating ---------- */

.rv-head {
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	padding: 0 var(--rv-gutter);
}

.rv .rv-h {
	margin: 0;
	color: var(--rv-ink);
	font-family: 'Cotoris Bold', 'Hind Vadodara', sans-serif;
	font-size: clamp(2rem, 5vw, 2.7rem);
	font-weight: normal;
	line-height: 1.1;
}

.rv .rv-rating {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .75rem;
	margin: 1rem 0 0;
	color: var(--rv-muted);
}

.rv-rating__value {
	color: var(--rv-ink);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.rv-rating .rv-stars {
	font-size: 1.25rem;
}

/* ---------- Stars, filled to --rv-fill ---------- */

.rv-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: -.1em;
}

.rv-stars__row {
	display: inline-flex;
	gap: .1rem;
}

.rv-stars__row svg {
	width: 1em;
	height: 1em;
	fill: var(--rv-star-off);
}

.rv-stars__row--on {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--rv-fill, 100%);
	overflow: hidden;
}

.rv-stars__row--on svg {
	flex: none;
	fill: var(--rv-star);
}

/* ---------- The loop: a row you scroll, or a slow loop once reviews_marquee.js runs ---------- */

.rv-marquee {
	overflow-x: auto;
	padding: 0 var(--rv-gutter) 1rem;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	text-align: left;
}

.rv-marquee__list {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-marquee__list > li {
	flex: none;
	scroll-snap-align: start;
}

.rv-marquee.is-moving {
	overflow: hidden;
	padding-right: 0;
	padding-left: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.rv-marquee__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: rv-marquee calc(var(--rv-count) * var(--rv-per)) linear infinite;
}

.rv-marquee.is-moving:hover .rv-marquee__track,
.rv-marquee.is-moving:focus-within .rv-marquee__track,
.rv-marquee.is-paused .rv-marquee__track {
	animation-play-state: paused;
}

@keyframes rv-marquee {
	to { transform: translateX(calc(-50% - .5rem)); }
}

/* ---------- A review ---------- */

.rv-card {
	display: flex;
	width: min(21rem, 82vw);
}

.rv-card figure {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 1.5rem 1.5rem 1.35rem;
	border: 1px solid var(--rv-card-line);
	border-radius: 18px;
	background: var(--rv-card-bg);
}

.rv-card .rv-stars {
	align-self: flex-start;
	margin-bottom: .75rem;
	font-size: .95rem;
}

.rv .rv-card__title {
	margin: 0 0 .4rem;
	color: var(--rv-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.rv-card__text {
	flex: 1;
	margin: 0 0 1rem;
}

.rv .rv-card__text p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--rv-text);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
}

.rv .rv-card__name {
	padding: 0;
	color: var(--rv-muted);
	font-family: 'Hind Vadodara', sans-serif;   /* the site's figcaption is a handwriting font */
	font-size: .875rem;
	font-style: normal;
	text-align: left;
}

.rv-card__source::before {
	content: '·';
	margin: 0 .35rem;
}

.rv-card__note {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
}

/* ---------- Pause and play ---------- */

.rv-footer {
	display: flex;
	justify-content: center;
	margin-top: 1.25rem;
}

.rv-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--rv-toggle-line);
	border-radius: 50%;
	background: var(--rv-toggle-bg);
	color: var(--rv-ink);
	cursor: pointer;
	transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.rv-toggle[hidden] {
	display: none;
}

.rv-toggle:hover {
	transform: scale(1.06);
}

.rv-toggle:focus-visible {
	outline: 2px solid var(--rv-star);
	outline-offset: 3px;
}

.rv-toggle svg {
	width: .95rem;
	height: .95rem;
	fill: currentColor;
}

.rv-toggle__play,
.rv-toggle.is-paused .rv-toggle__pause {
	display: none;
}

.rv-toggle.is-paused .rv-toggle__play {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.rv-toggle {
		transition: none;
	}
}