/*
 * Design System - AELITA
 * components/single-car-media-shell.css - single car media/gallery shell.
 *
 * Zero-visual ownership migration for the cars single page media row shell:
 * the gallery wrapper and Slick root plus the media-row spacing. Scoped to
 * .a-car-single (already on .carinfo), which exists only on single-cars.php.
 * The legacy rules in main.css/media.css stay in place and are not removed;
 * design-system CSS loads before legacy main.css, so the scoped selectors add
 * exactly one class of specificity (0,2,0 vs 0,1,0) and win without
 * !important, regardless of source order.
 *
 * Scope: .cars_images, .carslider (shell only), .car-info_md, and
 * .nopadding-mobile under @media (max-width:768px). Not included: Slick internals
 * (.slick-*), shared JS-generated slider arrows (.mainslider-arrow/-prev/-next),
 * thumbnail nav (.carslider-nav), data-dependent overlays (.aelita-*),
 * video (.flexible-container), accordion, feedback forms, Bootstrap grid.
 *
 * Token debt kept literal: 5px, 100%, 30px, 0. No tokens used by this package.
 *
 * Loaded on single cars only (see inc/enqueue.php).
 */

.a-car-single .cars_images {
	position: relative;
	width: 100%;
	margin-bottom: 5px;
}

.a-car-single .carslider {
	max-width: 100%;
}

/* Uniform media box so every Slick slide has the same height, regardless of
 * the source photo's orientation. Without this, a single portrait photo makes
 * the track taller than the landscape ones, leaving empty space under the main
 * photo (and under the thumbnails). Crop overflow to keep the box filled. */
.a-car-single .carslider .slick-slide {
	height: auto;
}

.a-car-single .carslider .slick-slide > a {
	display: block;
}

.a-car-single .carslider .slick-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1140 / 843;
	object-fit: cover;
}

/* Thumbnails: the <img> elements are themselves the Slick slides. */
.a-car-single .carslider-nav .slick-slide {
	height: auto;
}

.a-car-single .carslider-nav img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 285 / 210;
	object-fit: cover;
}

/* Legacy @media only screen and (min-width : 992px). */
@media (min-width: 992px) {
	.a-car-single .car-info_md {
		margin-bottom: 30px;
	}
}

/* Legacy @media only screen and (max-width : 768px). */
@media (max-width: 768px) {
	.a-car-single .nopadding-mobile {
		padding: 0;
	}
}

/* <picture> wrapper: keep the gallery media box identical to the plain <img> layout. */
.carslider picture,
.carslider-nav picture {
	display: block;
	width: 100%;
}