/* ==========================================================================
 * Real player reviews — the photo wall and the review lightbox.
 *
 * Laid out to the reference's own numbers, which are readable straight off
 * its Judge.me widget: three columns by three rows on a desktop, two by six
 * on a phone, a "medium" 16px gap, soft 8px corners, near-white type over a
 * black overlay, and a body capped at 1100px.
 *
 * The one number that is not copied literally is that cap. A homepage
 * section here has to keep growing when the visitor zooms out instead of
 * sitting boxed with dead space either side, so the cap is written as
 * `max(1100px, 76vw)`: at a 1440 window that is 1100px to the pixel, which
 * is the reference exactly, and above it the row keeps opening out.
 * ========================================================================== */

.ff-rvw {
	/* Tight on a phone, where two big squares 16px apart read as two separate
	   panels rather than one wall; the reference's 16px is kept from tablet
	   width up, where the cards are smaller relative to the row. */
	--rvw-gap: 8px;
	--rvw-ink: #f9f9f9;
	--rvw-veil: #000;
	margin: 0 0 clamp(36px, 6vw, 64px);
}

/* On the product page the wall had NO gap above it at all — measured at 0px
   against the drawers it follows. The shorthand above sets margin-top to 0,
   and it lands after pdp-2026.css, so it was quietly beating that file's
   `.pdp-ugc { margin-top: 56px }`. The homepage is left alone: that section
   sets its own rhythm and does not want a second opinion from here. */
.ff-rvw:not(.ff-rvw--home) {
	margin-top: clamp(46px, 7vw, 92px);
}

/* A size down from the page's other section headings. This one sits directly
   over a dense grid of photographs and does not need to shout over them the
   way a heading above a sparse product row does. Scoped, so `.pdp-h2`
   everywhere else on the page is untouched. */
.ff-rvw .pdp-h2 {
	font-size: clamp(19px, 2vw, 26px);
	margin-bottom: 14px;
}

.ff-rvw-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rvw-gap);
}

/* Only the homepage copy sets its own width. On the product page the section
   sits inside a container that has already placed the page's margins, and a
   second set of gutters here would just inset the wall from the blocks above
   and below it. */
.ff-rvw--home .ff-rvw-grid {
	width: min(100% - 36px, max(1100px, 76vw));
	margin-inline: auto;
}

/* ---- one card ---------------------------------------------------------- */

.ff-rvw-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;          /* the reference's "soft" corner */
	overflow: hidden;
	background: #e9edf1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ff-rvw-shot {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.22,.9,.3,1);
}

/* The overlay does two jobs from one box. At rest it is a scrim along the
   bottom edge holding the score and the name; on hover it fills the card and
   the review's own words appear above them. Because it is the same element
   in both states the type does not jump between them, it slides. */
.ff-rvw-veil {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	padding: 14px 12px;
	color: var(--rvw-ink);
	text-align: center;
	background: linear-gradient(to top,
		rgba(0, 0, 0, .62) 0%,
		rgba(0, 0, 0, .30) 26%,
		rgba(0, 0, 0, 0) 58%);
	transition: background .3s ease, justify-content 0s;
}

.ff-rvw-stars {
	display: flex;
	gap: 2px;
	line-height: 0;
}
.ff-rvw-stars svg {
	width: 15px; height: 15px;
	fill: rgba(255, 255, 255, .34);
}
.ff-rvw-stars svg.is-on { fill: var(--rvw-ink); }

.ff-rvw-by {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--ff-font-body, system-ui), sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--rvw-ink);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ff-rvw-tick {
	flex: 0 0 auto;
	width: 14px; height: 14px;
	color: var(--rvw-ink);
}

/* The review's words. Out of the flow until the pointer arrives, so a phone
   — which has no hover — never reserves room for text it will not show. */
.ff-rvw-quote {
	display: none;
	font-family: var(--ff-font-body, system-ui), sans-serif;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--rvw-ink);
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
	max-width: 88%;
}

@media (hover: hover) {
	.ff-rvw-card:hover .ff-rvw-veil {
		justify-content: center;
		background: rgba(0, 0, 0, .74);
	}
	.ff-rvw-card:hover .ff-rvw-quote { display: -webkit-box; }
	.ff-rvw-card:hover .ff-rvw-shot { transform: scale(1.04); }
}
.ff-rvw-card:focus-visible {
	outline: 2px solid var(--ff-ink, #0b0f14);
	outline-offset: 3px;
}

/* ---- a clip on the wall ------------------------------------------------ */

.ff-rvw-flag {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: var(--ff-font-body, system-ui), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ff-rvw-disc {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .55);
	background: rgba(0, 0, 0, .34);
	backdrop-filter: blur(3px);
	color: #fff;
}
.ff-rvw-disc svg { width: 22px; height: 22px; }

/* ---- breakpoints ------------------------------------------------------- */

/* Three across from tablet width, and the grid stops at nine: the reference
   asks for 3x3 up here and 2x6 down there, and this is the one set of cards
   answering both. */
@media (min-width: 768px) {
	.ff-rvw { --rvw-gap: 16px; }
	.ff-rvw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ff-rvw-card:nth-child(n + 10) { display: none; }
	.ff-rvw-stars svg { width: 17px; height: 17px; }
	.ff-rvw-by { font-size: 15px; }
	.ff-rvw-quote { font-size: 14.5px; }
}

/* ==========================================================================
 * The lightbox — one whole review.
 *
 * Same order the reference reads in: the picture, then the rest of that
 * review's pictures as a strip on black, then the score, who left it and
 * when, and last the words themselves.
 * ========================================================================== */

.ff-rvm[hidden] { display: none !important; }

.ff-rvm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: clamp(12px, 3vw, 40px);
}
.ff-rvm-scrim {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 15, .74);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.ff-rvm-box {
	position: relative;
	width: min(430px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	overscroll-behavior: contain;
}

/* --- the picture --- */

.ff-rvm-stage {
	position: relative;
	background: #000;
	flex: 0 0 auto;
}
/* The frame is the picture's own shape, so there are no black bars above and
   below a landscape photo. `height: auto` lets the box take the media's
   ratio; the cap only bites on a very tall portrait, and `cover` is what
   makes that case crop a little instead of squashing the picture. */
.ff-rvm-stage img,
.ff-rvm-stage video {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(68vh, 620px);
	object-fit: cover;
	background: #000;
}

.ff-rvm-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(70, 74, 80, .62);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.ff-rvm-nav:hover { background: rgba(70, 74, 80, .85); }
.ff-rvm-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ff-rvm-nav.is-prev { left: 10px; }
.ff-rvm-nav.is-next { right: 10px; }
.ff-rvm-nav[disabled] { opacity: .3; cursor: default; }

.ff-rvm-x {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 23, 28, .72);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
}
.ff-rvm-x:hover { background: rgba(20, 23, 28, .92); }

/* --- the rest of this review's pictures --- */

.ff-rvm-thumbs {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	background: #000;
	flex: 0 0 auto;
}
.ff-rvm-thumbs[hidden] { display: none; }
.ff-rvm-thumb {
	width: 46px; height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	overflow: hidden;
	background: #111;
	cursor: pointer;
	opacity: .62;
	transition: opacity .2s ease, border-color .2s ease;
}
.ff-rvm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-rvm-thumb.is-on { opacity: 1; border-color: #fff; }

/* --- who said it, and what --- */

.ff-rvm-body {
	padding: 18px 20px 24px;
	font-family: var(--ff-font-body, system-ui), sans-serif;
	color: var(--ff-ink, #0b0f14);
}
.ff-rvm-body .ff-rvw-stars { justify-content: flex-start; gap: 3px; }
.ff-rvm-body .ff-rvw-stars svg { width: 19px; height: 19px; fill: #d7dbe0; }
.ff-rvm-body .ff-rvw-stars svg.is-on { fill: var(--ff-brand, #0ea45e); }

.ff-rvm-who {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 14px 0 12px;
}
.ff-rvm-avatar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: #eceff2;
	color: #4a5058;
	font-size: 15px;
	font-weight: 700;
}
.ff-rvm-name {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}
.ff-rvm-name .ff-rvw-tick { color: var(--ff-brand, #0ea45e); width: 15px; height: 15px; }
.ff-rvm-date {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #6b7280;
}
.ff-rvm-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}
.ff-rvm-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-line;
}
.ff-rvm-text:empty, .ff-rvm-title:empty { display: none; }

@media (min-width: 768px) {
	.ff-rvm-box { width: min(470px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
	.ff-rvw-shot, .ff-rvw-veil, .ff-rvm-nav, .ff-rvm-thumb { transition-duration: .01ms !important; }
}