/* ==========================================================================
   Guest Rating — the big score, quick facts and the scrolling strip of short quotes.
   ========================================================================== */

.mro-rating {
	background: var(--wp--preset--color--mint);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

.mro-rating__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	align-items: center;
}

.mro-rating__score-wrap {
	position: relative;
	padding: var(--wp--preset--spacing--60) clamp(var(--wp--preset--spacing--30), 4vw, var(--wp--preset--spacing--70)) var(--wp--preset--spacing--50);
	text-align: center;
}

.mro-rating__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* undo the theme's heading style: only the number uses the display font */
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: var(--wp--custom--leading--body);
	text-transform: none;
	letter-spacing: normal;
}

.mro-rating__score {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--giant);
	line-height: 0.85;
	color: var(--wp--preset--color--contrast);
}

.mro-rating__label {
	margin-top: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--bold);
}

/* Circles the number only, so the label underneath stays clear */
.mro-rating__scribble {
	position: absolute;
	top: calc(var(--wp--preset--spacing--40) * -1);
	left: 50%;
	width: calc(var(--wp--preset--font-size--giant) * 1.7);
	height: calc(var(--wp--preset--font-size--giant) * 1.08 + var(--wp--preset--spacing--50));
	transform: translateX(-50%);
	pointer-events: none;
}

.mro-rating__scribble path {
	fill: none;
	stroke: var(--wp--preset--color--accent-stronger);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.mro-js .mro-rating__scribble path {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	transition: stroke-dashoffset 2.6s var(--wp--custom--ease--gentle);
}

.mro-js .is-visible .mro-rating__scribble path {
	stroke-dashoffset: 0;
}

.mro-rating__stars {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--30);
}

.mro-rating__stars .mro-icon {
	color: var(--wp--preset--color--accent);
}

.mro-rating__intro {
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--medium);
}

.mro-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--60);
}

.mro-facts__item {
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--stroke--hand) solid var(--wp--preset--color--contrast);
}

.mro-facts dt {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
}

.mro-facts dd {
	font-size: var(--wp--preset--font-size--sm);
}

.mro-facts__big {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.05;
	color: var(--wp--preset--color--contrast);
}

/* slow marquee of real quotes */
.mro-marquee {
	margin-top: var(--wp--preset--spacing--70);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mro-marquee__track {
	display: flex;
	width: max-content;
	animation: mro-marquee var(--wp--custom--duration--marquee) linear infinite;
}

.mro-marquee:hover .mro-marquee__track {
	animation-play-state: paused;
}

.mro-marquee__list {
	display: flex;
	flex: none;
}

.mro-marquee__list li {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--60);
	white-space: nowrap;
	position: relative;
}

.mro-marquee__list li::after {
	content: "";
	position: absolute;
	right: -0.3rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: var(--wp--custom--radius--blob--a);
	background: var(--wp--preset--color--accent-stronger);
}

.mro-marquee q {
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	quotes: "\201C" "\201D";
}

.mro-marquee cite {
	font-style: normal;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
}

@media (max-width: 1024px) {
	.mro-rating__inner {
		gap: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 860px) {
	.mro-rating__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.mro-rating__score-wrap {
		justify-self: center;
	}

	.mro-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.mro-facts__item {
		display: grid;
		grid-template-columns: 6rem minmax(0, 1fr);
		gap: 0 var(--wp--preset--spacing--40);
		align-items: baseline;
	}

	.mro-facts__item dt {
		grid-column: 2;
		grid-row: 1;
	}

	.mro-facts__item dd {
		display: contents;
	}

	.mro-facts__big {
		grid-column: 1;
		grid-row: 1 / 3;
	}
}

@media (max-width: 640px) {
	.mro-marquee q {
		font-size: var(--wp--preset--font-size--md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mro-js .mro-rating__scribble path {
		stroke-dashoffset: 0;
	}

	.mro-marquee {
		overflow-x: auto;
	}
}