/*
 * Design System - AELITA
 * components/single-car-tech.css - single car tech icons / primary tech info.
 *
 * Zero-visual ownership migration for the cars single page tech block.
 * Scoped to .a-car-single (already on .carinfo). The legacy rules in
 * main.css/media.css stay in place; design-system CSS loads before legacy
 * main.css, so the scoped selectors add exactly one class of specificity and
 * win without !important.
 *
 * Scope: .car_icons_row, .car_icons_row > div, .car-tech_icon,
 * .car-tech_title, .filter_icon. Not included: .call-manager_desk,
 * .car-tech_pricetext, .moto_icons_row, .tech-icons, gallery/specs/summary.
 *
 * Token used only where exact: --fw-bold (700). Token debt kept literal:
 * 1.6em / 1.5em, #000, 30px, 150px, 10px, 40px.
 *
 * Loaded on single cars only (see inc/enqueue.php).
 */

.a-car-single .car_icons_row {
	margin-bottom: 30px;
	margin-top: 30px;
}

.a-car-single .filter_icon {
	display: inline;
	margin-bottom: 10px;
}

/* Legacy @media (max-width:992px). */
@media (max-width: 992px) {
	.a-car-single .car-tech_title {
		font-size: 1.6em;
		color: #000;
		overflow: hidden;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* 700 */
		text-align: center;
	}
}

/* Legacy @media (min-width:992px). Declared after max-width:992 on purpose:
 * at exactly 992px both apply and this one must win for font-size /
 * max-height (as in legacy). */
@media (min-width: 992px) {
	.a-car-single .car_icons_row > div {
		margin-bottom: 30px;
	}

	.a-car-single .car-tech_icon {
		height: 150px;
	}

	.a-car-single .car-tech_title {
		font-size: 1.5em;
		color: #000;
		max-height: 40px;
		overflow: hidden;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* 700 */
		text-align: center;
	}
}