/* Onyx — theme-side fixes & polish on top of the design CSS.
   Kept separate so the designer's stylesheets can be re-synced cleanly. */

/* Fix: on mobile the stone/project detail grid blew out to a single track
   wider than the viewport (1fr won't shrink below children's min-content),
   clipping the info column. minmax(0,1fr) + min-width:0 lets it fit. */
@media (max-width: 900px) {
	.detail-grid,
	.wd-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.detail-grid > *,
	.wd-grid > * {
		min-width: 0;
	}
}

/* Fix: stones-used link — show the stone name above its category (the
   design markup uses inline spans, which ran together on one line). */
.stone-link .info .n { display: block; }

/* Fix: on mobile the filter bar stacks tall (chips + search + 2 selects) and,
   being position:sticky, behaved like a second header — cards scrolled under it.
   Let it scroll away with the page on small screens. */
@media (max-width: 768px) {
	.filterbar {
		position: static !important;
		top: auto !important;
		backdrop-filter: none;
		background: transparent;
	}
}

/* Mobile home hero (per client request): show the "200+ designers & architects
   build with us" stat as one flowing line, then center "See designer work"
   below it. Achieved by dissolving the .hero-cta / .hero-stats boxes
   (display:contents) so their children reorder inside .hero-left. Desktop
   is untouched (rules live inside the mobile media query). */
@media (max-width: 768px) {
	.hero-left .hero-cta,
	.hero-left .hero-stats { display: contents; }
	.hero-left .hero-cta .btn-primary { order: 1; }
	.hero-left .hero-stats .stat {
		order: 2; margin-top: 30px; gap: 6px; align-items: baseline;
	}
	.hero-left .hero-stats .stat .n {
		font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.55;
	}
	.hero-left .hero-stats .stat .t { font-size: 14px; line-height: 1.55; }
	.hero-left .hero-cta .btn-ghost { order: 3; align-self: center; margin-top: 20px; }
	.hero-left .hero-stats .scrollcue-h { order: 4; align-self: center; margin-top: 16px; }
}

/* Fix: stone detail CTAs wrap on narrow screens (Add to moodboard was clipped). */
@media (max-width: 600px) {
	.info .ctas { flex-wrap: wrap; }
	.info .ctas .btn { flex: 1 1 auto; }
}