/* Online Showroom — Car Models grid
   Matches the model tiles on the homepage prototype.
   Safe to edit: colours are the two variables at the top. */

.osm-wrap {
	--osm-ink: #111230;
	--osm-line: #e4e7f2;
	--osm-dark: #0a0b3d;
	--osm-cols: 5;
	--osm-ratio: 4/3;
	margin: 0 auto;
}

.osm-heading {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	color: var(--osm-ink);
	margin: 0 0 28px;
}

.osm-grid {
	display: grid;
	grid-template-columns: repeat(var(--osm-cols), minmax(0, 1fr));
	gap: 16px;
}

.osm-tile {
	position: relative;
	display: block;
	aspect-ratio: var(--osm-ratio);
	border-radius: 14px;
	overflow: hidden;
	background: var(--osm-dark);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.osm-tile:hover,
.osm-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(10, 11, 61, .20);
}

.osm-tile:focus-visible {
	outline: 3px solid #2b54f0;
	outline-offset: 2px;
}

/* The photo. object-fit means any shape of image still fills the tile
   neatly, so a mixed set of photos still reads as one grid. */
.osm-tile .osm-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.02);
	transition: transform .4s ease;
	margin: 0;
	border-radius: 0;
}

.osm-tile:hover .osm-img {
	transform: scale(1.05);
}

.osm-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: #7e86be;
	background: linear-gradient(135deg, #1b2280, #0a0b3d);
}

/* The dark fade. This is what makes photos from different sources
   look like a matched set. */
.osm-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(5, 6, 32, .90) 0%,
		rgba(5, 6, 32, .55) 38%,
		rgba(5, 6, 32, .12) 68%,
		rgba(5, 6, 32, .02) 100%);
}

.osm-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px;
	color: #fff;
}

.osm-text b {
	display: block;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: #fff;
}

.osm-text span {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: #c2c7ea;
}

@media (max-width: 980px) {
	.osm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.osm-grid { grid-template-columns: 1fr; }
	.osm-tile { aspect-ratio: 16/9; }
}