/* Vehicle archive hero (template-parts/archive/vehicle-archive.php). */

.os-ahero {
	position: relative;
	margin-bottom: 1.75rem;
	padding: 2.25rem 0 1.75rem;
	overflow: hidden;
	background:
		radial-gradient(600px 300px at 85% 30%, rgba(239, 68, 68, .22), transparent 70%),
		radial-gradient(500px 260px at 0% 100%, rgba(59, 130, 246, .10), transparent 70%),
		linear-gradient(135deg, #0b1120 0%, #111827 55%, #1e293b 100%);
	color: #fff;
	isolation: isolate;
}
/* Faint dot grid */
.os-ahero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
	mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.os-ahero__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.os-ahero__content { position: relative; z-index: 1; min-width: 0; max-width: 680px; }

.os-ahero__crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #94a3b8; font-size: .82rem; font-weight: 600; }
.os-ahero__crumbs a { color: #cbd5e1; text-decoration: none; transition: color .2s ease; }
.os-ahero__crumbs a:hover { color: #fff; }
.os-ahero__crumbs [aria-current] { color: #f87171; }

.os-ahero__title { margin: 0 0 8px; color: #fff; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.os-ahero__title span { background: linear-gradient(90deg, #f87171, #ef4444); -webkit-background-clip: text; background-clip: text; color: transparent; }
.os-ahero__subtitle { max-width: 60ch; margin: 0 0 16px; color: #94a3b8; font-size: 1rem; line-height: 1.55; }

.os-ahero__stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: #94a3b8; font-size: .88rem; }
.os-ahero__stats li { position: relative; }
.os-ahero__stats li + li::before { content: ""; position: absolute; top: 50%; left: -10px; width: 3px; height: 3px; border-radius: 50%; background: #475569; transform: translateY(-50%); }
.os-ahero__stats strong { color: #fff; font-weight: 700; }

/* Decorative vehicle line art */
.os-ahero__art { position: relative; flex: none; display: grid; place-items: center; width: 220px; height: 220px; margin-right: 1rem; }
.os-ahero__art::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; background: radial-gradient(circle, rgba(239, 68, 68, .18), transparent 65%); }
.os-ahero__art-icon { position: relative; width: 120px; height: 120px; color: rgba(255, 255, 255, .85); stroke-width: 1.1; filter: drop-shadow(0 10px 30px rgba(239, 68, 68, .35)); }

@media (max-width: 860px) {
	.os-ahero__art { display: none; }
}
@media (max-width: 640px) {
	.os-ahero { padding: 1.5rem 0 1.25rem; margin-bottom: 1.25rem; }
	.os-ahero__subtitle { font-size: .92rem; }
}