/* ReviewsV2 - designed 2x2 review preview beside a full-height photo (Figma node
   13605:19043). Everything else composes from catalog utilities and theme tokens. */

/* Header row wraps below the desktop breakpoint so the CTA never forces overflow. */
@media screen and (max-width: 1279px) {
	.rvw.v2 .mn_wd > .flx.f_sb {
		flex-wrap: wrap;
		row-gap: 1rem;
	}
}

/* Card geometry comes from the shared ReviewsCard treatment (reviews-tools.css). */

/* Static 2x2 preview: grid columns instead of the flex-basis catalog default (which
   keeps mx-2 single-column below a 50rem container - this grid lives in a ~37rem half). */
.rvw.v2 .grd.mx-2 {
	display: grid;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 1280px) {
	.rvw.v2 .grd.mx-2 {
		grid-template-columns: 1fr 1fr;
	}
}

/* The photo half fills the full height of the 2x2 card grid (design). */
@media screen and (min-width: 1280px) {

	.rvw.v2 .flx-at-1280 {
		align-items: stretch;
	}

	.rvw.v2 .half picture {
		display: block;
		height: 100%;
	}

	.rvw.v2 .half picture img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

/* -- Landmark design (Figma 18723:21727) ------------------------------------------------
   Optional dimmed section photo with a #212121 fade at the top and a black fade over the
   lower half; black review cards with a double rule (3px gold at 30% inside, 3px bronze at
   30% outside) and a soft white glow; gold FEATURED tag and "Verified Customer" line;
   40px #212121 square avatar. */

.rvw.v2 {
	--rvw-v2-bg-o: 0.55;              /* photo strength under the fades */
	--rvw-v2-crd-bdr: 3px;
	--rvw-v2-crd-sdw: 0 0.25rem 0.3125rem hsl(from var(--white) h s l / 0.3);

	&.bg-image {
		--img-bg-o: var(--rvw-v2-bg-o);
		position: relative;
		overflow: clip;

		/* Figma crops the photo ~1.75x so its burned-in mark falls outside the section */
		> picture.bg {
			position: absolute;
			inset: 0;
			overflow: hidden;

			img {
				position: absolute;
				left: -12%;
				top: -48%;
				width: 124%;
				height: 174%;
				max-width: none;
				object-fit: cover;
				transform: none; /* the framework centers .bg images with translate(-50%,-50%) */
			}

			&::after {
				content: '';
				position: absolute;
				inset: 0;
				background:
					linear-gradient(180deg, var(--background) 0%, hsl(from var(--background) h s l / 0) 100%),
					linear-gradient(180deg, hsl(from var(--black) h s l / 0) 50%, var(--black) 100%);
			}
		}

		> .mn_wd {
			position: relative;
			z-index: 1;
		}
	}

	.grd.mx-2 {
		gap: 2rem;
	}

	.rvw-crd {
		background-color: var(--black);
		border: var(--rvw-v2-crd-bdr) solid hsl(from var(--accent) h s l / 0.3);
		box-shadow: 0 0 0 var(--rvw-v2-crd-bdr) hsl(from var(--lt-lnk-hov) h s l / 0.3);
		filter: drop-shadow(var(--rvw-v2-crd-sdw));

		.ftr-tag {
			border-color: hsl(from var(--accent) h s l / 0.3);
			color: var(--accent);
			font-weight: 600;
		}

		.avt {
			width: 2.5rem;
			height: 2.5rem;
			background-color: var(--dk-alt-bg);
			color: var(--white);
		}

		.dtl .tag {
			color: var(--accent);
			font-weight: 600;
		}
	}
}

/* Tablet: keep the 2x2 review grid (the base rule stacks it single-file below 1280px). */
@media screen and (700px <= width < 1280px) {
	.rvw.v2 .grd.mx-2 {
		grid-template-columns: 1fr 1fr;
	}
}