/*
 * Design System - AELITA
 * components/single-car-summary.css - single car summary (title + price).
 *
 * Zero-visual ownership migration for the cars single page summary 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-title (h1 + availability .car-title-img), .car-price.
 * Not included: .car-title a / .car-price a and .car-price .btn-primary
 * (legacy !important), .car-price .price (dead), .car-price .action-present and
 * inline availability/price spans (data-dependent inline styles), global h1.
 *
 * Token used only where exact: --fw-bold (700). Token debt kept literal:
 * 1.6em / 1.7em, #000, 10px, 30px, 20px, 100px.
 *
 * Loaded on single cars only (see inc/enqueue.php).
 */

.a-car-single .car-title img {
	display: block;
	width: 100px;
}

.a-car-single .car-title i {
	font-size: 20px;
}

.a-car-single .car-price {
	text-align: center;
}

/* Legacy @media (max-width:992px) contract. */
@media (max-width: 992px) {
	.a-car-single .car-title-img {
		text-align: center;
	}

	.a-car-single .car-title-img img {
		display: inline;
		max-width: auto;
	}

	.a-car-single .car-title,
	.a-car-single .car-price {
		font-size: 1.6em;
		color: #000;
		text-align: center;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* 700 */
	}

	.a-car-single .car-price,
	.a-car-single .car-title {
		margin-bottom: 10px;
	}
}

/* Legacy @media (max-width:768px) contract. */
@media (max-width: 768px) {
	.a-car-single .car-title {
		text-align: center;
	}
}

/* Legacy @media (min-width:992px) contract. Declared after the max-width:992
 * block on purpose: at exactly 992px both apply and this one must win for
 * font-size / margin-bottom, while text-align:center from max-width:992
 * persists (as in legacy). */
@media (min-width: 992px) {
	.a-car-single .car-price,
	.a-car-single .car-title {
		margin-bottom: 30px;
	}

	.a-car-single .car-title,
	.a-car-single .car-price {
		font-size: 1.7em;
		color: #000;
		text-transform: uppercase;
		font-weight: var(--fw-bold); /* 700 */
	}
}