/* =====================================================================
   Shared sections — finance (EMI), take the ride, visit
   Used by home, product and compare pages.
   ===================================================================== */

/* 8 Finance */
.finance__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 96px); }
.finance__grid header { display: grid; gap: 18px; align-content: start; }
.emi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; background: #fff; border: 1px solid rgba(17,18,20,.1); }
.emi__inputs { display: grid; gap: 30px; padding: clamp(24px, 3vw, 44px); }
.emi__in { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }
.emi__in label { font: 600 12px var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.emi__in output { font: 400 22px var(--f-display); font-variant-numeric: tabular-nums; }
.emi__in input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.emi__in input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgba(17,18,20,.2); }
.emi__in input[type="range"]::-moz-range-track { height: 2px; background: rgba(17,18,20,.2); }
.emi__in input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--red); }
.emi__in input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--red); }
.emi__out { display: grid; align-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px); background: var(--night); color: #fff; }
.emi__value { font-size: clamp(48px, 4vw + 10px, 84px); line-height: 1; }
.emi__meta { font-size: 14px; color: var(--mist); }
.emi__note { font-size: 12px; color: var(--metal); }
.emi__out .btn { justify-self: start; }
@media (max-width: 1199px) { .finance__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .emi { grid-template-columns: minmax(0, 1fr); } }
.emi__out .btn { white-space: normal; text-align: left; }

/* 10 Take the ride */
.ride-cta { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.ride-cta__media { position: absolute; inset: 0; }
.ride-cta__img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.ride-cta__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.1) 70%), linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,0) 50%); }
.ride-cta__copy { position: relative; z-index: 2; display: grid; gap: 24px; padding-bottom: clamp(56px, 9vh, 120px); }
.ride-cta__copy .h1 { font-size: clamp(40px, 4.2vw + 8px, 84px); max-width: 16ch; }

/* 11 Visit */
.visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 96px); align-items: end; }
.visit__title { font-size: clamp(48px, 5vw + 8px, 104px); }
.visit__info { display: grid; gap: 26px; }
.visit__name { font: 500 24px var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
.visit__dl { display: grid; border-top: 1px solid var(--steel); }
.visit__dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--steel); }
.visit__dl dt { display: flex; align-items: center; gap: 10px; font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.visit__dl dt svg { width: 18px; height: 18px; }
.visit__map { grid-column: 1 / -1; position: relative; aspect-ratio: 21 / 8; border: 1px solid var(--steel); overflow: hidden; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.9); }
.visit__map-btn { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; border: 0; color: #fff;
  background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 48px 48px, var(--carbon);
  font: 600 12px var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.visit__map-btn svg { width: 34px; height: 34px; color: #FF5A5A; }
@media (max-width: 1023px) { .visit__grid { grid-template-columns: minmax(0, 1fr); } .visit__map { aspect-ratio: 4 / 3; } .visit__dl div { grid-template-columns: 110px 1fr; } }

/* Dealer card details (shared): tagline, hours, placeholder tags, CTA hierarchy */
.visit__name span { display: block; margin-top: 6px; font: 500 12px var(--f-display); letter-spacing: .18em; color: var(--metal); }
.visit__dl dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.visit__dl dd .is-dummy { flex: 1 1 auto; min-width: 0; }
.visit__hours { display: grid; grid-template-columns: minmax(84px, auto) 1fr; gap: 12px; width: 100%; }
.visit__hours span:first-child { color: var(--metal); }
.is-dummy { color: var(--mist); display: grid; gap: 4px; }
.ph-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px dashed #6A7076; border-radius: 999px; font: 600 10px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #E0B23A; white-space: nowrap; }
.ph-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E0A100; }
.visit__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Map preview placeholder (drawn, not a real location) */
.vmap { position: relative; min-height: 280px; overflow: hidden; border: 1px solid var(--steel); background:
  linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 40px 40px, var(--carbon); }
.vmap__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.vmap__road { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 9; stroke-linecap: round; }
.vmap__road--a { stroke: rgba(255,255,255,.16); stroke-width: 12; }
.vmap__road--thin { stroke-width: 4; stroke: rgba(255,255,255,.07); }
.vmap__pin { position: absolute; left: 50%; top: 46%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 0 0 10px rgba(204,0,0,.18); }
.vmap__pin svg { width: 24px; height: 24px; }
.vmap__pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(204,0,0,.5); animation: vmapPulse 2.8s var(--ease) infinite; }
@keyframes vmapPulse { 0% { transform: scale(.8); opacity: 1; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.vmap__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; background: rgba(11,11,12,.88); border: 1px solid var(--steel); font-size: 14px; }
.vmap__cap .label { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { .vmap__pin::after { animation: none; } }