/*
 * Design System - AELITA
 * components/single-car-manager.css - single car manager / contact block.
 *
 * Zero-visual ownership migration for the cars single page manager/contact
 * block. 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,* vs 0,1,*) and
 * win at every breakpoint without !important.
 *
 * Scope: .manager_call / .manager_contacts and their span/i/a descendants,
 * .manager_call div, .call-manager_desk. Not included: #manager_call (no
 * legacy CSS), .gen-manager-tel (generator only), feedback forms, gallery,
 * accordion, Bootstrap columns.
 *
 * Responsive order preserved 1:1 with legacy: base, then min-width:768
 * (.call-manager_desk), then max-width:768 (.manager_call). At exactly 768px
 * both media blocks are active, as in legacy.
 *
 * Exact tokens mapped (#1f2030 -> --c-ink-800, #fff -> --c-white,
 * 1px -> --border-w). Token debt kept literal: #000, #ef233b, 18px, 24px,
 * 10px/15px/20px/25px/30px, 10%, 80%, z-index 1029.
 *
 * Loaded on single cars only (see inc/enqueue.php).
 */

.a-car-single .manager_call,
.a-car-single .manager_contacts {
	font-size: 18px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #000;
}

.a-car-single .manager_call span,
.a-car-single .manager_contacts span {
	color: #ef233b;
}

.a-car-single .manager_call i,
.a-car-single .manager_contacts i {
	color: var(--c-ink-800); /* #1f2030 */
	font-size: 24px;
}

.a-car-single .manager_call a,
.a-car-single .manager_contacts a {
	color: #000;
	text-decoration: none;
}

/* Legacy @media (min-width:768px). */
@media (min-width: 768px) {
	.a-car-single .call-manager_desk {
		padding: 20px 30px;
		border: var(--border-w) solid #ef233b; /* 1px */
		display: inline-block;
	}
}

/* Legacy @media (max-width:768px). Declared after min-width:768 on purpose:
 * at exactly 768px both apply and both legacy blocks coexist. */
@media (max-width: 768px) {
	.a-car-single .manager_call {
		text-align: center;
		display: block;
		bottom: 20px;
		margin-left: 10%;
		width: 80%;
		color: var(--c-white); /* #fff */
		z-index: 1029;
		background-color: var(--c-ink-800); /* #1f2030 */
	}

	.a-car-single .manager_call div {
		margin: 0 25px;
		background-color: var(--c-ink-800); /* #1f2030 */
		padding: 15px;
	}

	.a-car-single .manager_call a,
	.a-car-single .manager_call i {
		color: var(--c-white); /* #fff */
	}
}