/* ── HYPER RACER — BOTTOM CTA TILES ────────────────────────────────────────
 * The "where to next" block that closes a page. Lifted out of x1.html so every
 * page can end the same way, including the cross-car tile that sends an X1
 * visitor to the D1 and vice versa.
 *
 * Markup:
 *   <section class="cta-tiles"><div class="cta-wrap">
 *     <a class="cta-tile cta-wide">…</a>            full-width row
 *     <div class="cta-duo"><a class="cta-tile">…</a><a class="cta-tile">…</a></div>
 *   </div></section>
 *
 * Inside a tile: .cta-img (background image) + .cta-overlay holding
 * .cta-label / .cta-head / .cta-btn.
 *
 * Relies on the page's shared tokens: --carbon --border --red --text --fd.
 * ------------------------------------------------------------------------- */
.cta-tiles { background:var(--carbon); border-top:1px solid var(--border); padding:90px 48px 110px; }
.cta-wrap { max-width:1350px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.cta-duo { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.cta-tile { position:relative; display:flex; overflow:hidden; background:#090d14; border:1px solid var(--border); text-decoration:none; min-height:320px; transition:border-color .2s; }
.cta-tile:hover { border-color:var(--red); }
.cta-wide { min-height:340px; }
.cta-img { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); transition:transform .6s ease; }
.cta-tile:hover .cta-img:not(.cta-map) { transform:scale(1.11); }
.cta-overlay { position:relative; z-index:2; width:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:14px; padding:40px; background:linear-gradient(to top, rgba(8,8,8,.9) 0%, rgba(8,8,8,.25) 55%, transparent 82%); }
.cta-wide .cta-overlay { align-items:center; text-align:center; }
.cta-label { font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.cta-head { font-family:var(--fd); font-weight:900; font-size:clamp(26px,3vw,44px); line-height:.98; letter-spacing:-.01em; text-transform:uppercase; color:var(--text); }
/* Scoped to .cta-tile on purpose: config.html has its own .cta-btn on the
   pricing band, and this stylesheet loads after every page's inline CSS. */
.cta-tile .cta-btn { font-family:var(--fd); font-weight:800; font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:#fff; background:var(--red); border:2px solid var(--red); padding:14px 28px; margin-top:6px; transition:background .2s; }
.cta-tile:hover .cta-btn { background:#ff8124; }

/* Dealer-network tile. The SVG path is relative to THIS file, hence ../ */
.cta-map { background:#090d14 url('../SVG/dealer-map.svg') center / cover no-repeat; transform:translateX(40px) scale(1.77); }
.cta-map svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
@keyframes maptileglow { 0%,100%{ filter:drop-shadow(0 0 6px rgba(255,106,0,.3)) drop-shadow(0 0 2px rgba(255,106,0,.2)); } 50%{ filter:drop-shadow(0 0 16px rgba(255,106,0,.55)) drop-shadow(0 0 5px rgba(255,106,0,.35)); } }
/* Sea glow on the dark water paths only — path.st0 excludes the background <rect>. */
.cta-map path.st0 { animation:maptileglow 4s ease-in-out infinite; }
/* Open-region pins white (solid dot is .st12). */
.cta-map #pin-cr1 .st12, .cta-map #pin-cr2 .st12, .cta-map #pin-cr3 .st12, .cta-map #pin-cr4 .st12 { fill:#fff; }
.cta-map #pin-cr1 .st4, .cta-map #pin-cr2 .st4, .cta-map #pin-cr3 .st4, .cta-map #pin-cr4 .st4 { stroke:#fff; }
/* Location labels (.st7/.st8). NOTE: .st10/.st11 are land — filling them whitens the map. */
.cta-map .st7, .cta-map .st8 { font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; letter-spacing:.08em; fill:rgba(240,240,240,.85); }

@media (max-width:760px){
  .cta-tiles { padding:60px 22px 80px; }
  .cta-duo { grid-template-columns:1fr; }
  .cta-tile, .cta-wide { min-height:260px; }
  .cta-overlay { padding:28px; }
  /* config.html stretches its own .cta-btn to full width on phones; tile
     buttons must stay hugged to their label. */
  .cta-tile .cta-btn { width:auto; }
  /* NOTE: css/mobile.css also centres .cta-wide .cta-img on phones. */
}