/* ==========================================================================
   Certified Bling — build comparison (originally Phase 5/Our Vision,
   promoted to the global design system in Phase 6 when the homepage's
   "One Design. Built Your Way." section reused it as-is — see each page's
   own template-part for why: the same design shown in several real
   material builds, materials only, never a price). A real .cb-grid--*
   reusable component now, same tier as .cb-grid--products/.cb-grid--
   collections: 3-up desktop, 1-up mobile, each item an image/placeholder +
   a small metal/stone spec list.
   ========================================================================== */

.cb-build-compare {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cb-space-m);
}
.cb-build-compare__media {
	aspect-ratio: 4 / 5;
	margin-bottom: var(--cb-space-s);
	background:
		radial-gradient(120% 100% at 15% 0%, color-mix(in srgb, var(--cb-gold) 10%, transparent), transparent 60%),
		linear-gradient(165deg, var(--cb-charcoal) 0%, var(--cb-ink) 100%);
	position: relative;
	overflow: hidden;
}
.cb-build-compare__media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.cb-build-compare__label {
	display: block;
	margin-bottom: var(--cb-space-xs);
	color: var(--cb-gold);
}
.cb-build-compare__specs { display: flex; flex-direction: column; gap: 0.35rem; }
.cb-build-compare__specs > div { display: flex; justify-content: space-between; gap: var(--cb-space-s); border-top: 1px solid var(--cb-line-soft); padding-top: 0.5rem; }
.cb-build-compare__specs dt { flex: 0 0 auto; }
.cb-build-compare__specs dd { margin: 0; text-align: right; }

@media (max-width: 767px) {
	.cb-build-compare { grid-template-columns: 1fr; gap: var(--cb-space-l); }
}