/* Auto Elite — vanilla hero (replaces Slider Revolution).
   Single-slide: static bg + overlay + content.
   Multi-slide: cross-fade carousel via hero.js. */

.ae-hero {
  position: relative;
  width: 100%;
  /* AE FIX 2026-05-08: detail pages are the common case (~30 of them),
     category pages are 5. Default to 578px (the source's measured detail-page
     height) and opt-in to .ae-hero--tall for category pages. Previously the
     default was 904px and detail pages were supposed to add --short, but no
     detail page ever did, so every model page rendered with a 904-tall hero. */
  min-height: 578px;
  max-height: none;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  /* Default justify-content is flex-start so content sits at left side
     matching source's left-anchored hero text. Home uses center. */
  justify-content: flex-start;
  color: #fff;
  font-family: 'Lato', 'Roboto', system-ui, sans-serif;
}
body.home .ae-hero {
  justify-content: center;
}
/* Home page hero — full viewport tall (matches source) */
body.home .ae-hero {
  min-height: 100vh;
}
/* Short hero variant — alias for default (kept for backwards compat with any
   pages still emitting --short). Default was changed to 578px above. */
.ae-hero.ae-hero--short {
  min-height: 578px;
}
/* Tall hero variant — for category pages (rv-vans, luxury-vans, lsvc-parent).
   Source measured: 904px on those pages. */
.ae-hero.ae-hero--tall {
  min-height: 904px;
}
@media (max-width: 1023px) {
  .ae-hero, body.home .ae-hero, .ae-hero.ae-hero--short { min-height: 600px; }
}
@media (max-width: 768px) {
  .ae-hero, body.home .ae-hero, .ae-hero.ae-hero--short { min-height: 540px; }
}
@media (max-width: 480px) {
  .ae-hero, body.home .ae-hero, .ae-hero.ae-hero--short { min-height: 420px; }
}

.ae-hero-slides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ae-hero-slide {
  position: absolute;
  inset: 0;
  background-size: 100% auto;        /* render image at natural ratio, full container width */
  background-position: left top;     /* anchor at top so mountains/scene visible */
  background-repeat: no-repeat;
  background-color: #000;            /* fill any uncovered area */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  will-change: opacity;
}
/* Home hero — cover crop (image is wider than tall) */
body.home .ae-hero-slide {
  background-size: cover;
  background-position: 50% 50%;
}
.ae-hero-slide.is-active { opacity: 1; }

/* Single-slide hero — just show the bg always */
.ae-hero--single .ae-hero-slide { opacity: 1; }

/* Multi-slide hero — per-slide bg + overlay + content all live inside .ae-hero-slide */
.ae-hero--multi .ae-hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
}
.ae-hero--multi .ae-hero-slide .ae-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(60deg, rgba(12,12,12,1) 0%, rgba(12,12,12,1) 15%, rgba(12,12,12,0.5) 60%, rgba(12,12,12,1) 100%);
  pointer-events: none;
}
.ae-hero--multi .ae-hero-slide .ae-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
  pointer-events: auto;
}

.ae-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(60deg, rgba(12,12,12,1) 0%, rgba(12,12,12,1) 15%, rgba(12,12,12,0.5) 60%, rgba(12,12,12,1) 100%);
  pointer-events: none;
}

/* Hero content layout — matches source two-column structure:
   Source measurements at 1920×1080: title left at x=440, body block right at x=736.
   Container max-width 1240, centered with auto margin, left padding 220 from edge.
   Non-home pages have content closer to the left edge (source eyebrow at x=160). */
.ae-hero-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 60px 0 160px;
  text-align: left;
  display: grid;
  /* Default: single-column stack for category/detail pages.
     Home page overrides to a 2-col grid (Explore Models | body). */
  grid-template-columns: 1fr;
  grid-template-areas:
    "eyebrow"
    "title"
    "subt"
    "body"
    "explore"
    "btn";
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  justify-content: start;
}
/* Home page hero — centered 1480-wide container with 2-column grid
   (title block left, body block right). Padding-left 220 to put title
   at viewport x=440 to match source. col2 widened to 595 so subtitle
   ("LUXURY SPRINTER VAN CONVERSIONS AND CUSTOM EXECUTIVE VANS FOR SALE")
   wraps to 2 lines like source instead of 3. */
body.home .ae-hero-content {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 60px 0 220px;
  grid-template-columns: 296px minmax(0, 595px);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   title"
    "subt    subt"
    "explore body"
    "btn     btn";
}
@media (max-width: 1240px) {
  .ae-hero-content { padding: 0 40px; text-align: center; justify-items: center; }
  body.home .ae-hero-content {
    /* AE FIX 2026-05-14: match symmetric mobile padding for home page too.
       Previously the body.home rule's 220px left-pad (line 148) kept winning on
       specificity at ≤1240, shoving the hero off the right edge on mobile. */
    padding: 0 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "subt"
      "explore"
      "body"
      "btn";
  }
}
@media (max-width: 768px) {
  .ae-hero-content { padding: 40px 20px; }
  body.home .ae-hero-content { padding: 40px 20px; }
}
@media (max-width: 480px) {
  .ae-hero-content { padding: 32px 16px; }
  body.home .ae-hero-content { padding: 32px 16px; }
}

.ae-hero-content,
.ae-hero-content > *:not(.ae-hero-title):not(.ae-hero-eyebrow) { color: #fff; }
.ae-hero-content a.ae-hero-btn { color: inherit; }

/* Hero title — solid white default (used on all internal pages).
   Source SR7 layer-3: s:40,52,36,26 → 40px desktop, weight 700, white, Lato uppercase.
   Outlined effect (transparent fill + stroke) is scoped to home only. */
.ae-hero-title,
.ae-hero-content .ae-hero-title {
  grid-area: title;
  font-family: 'Lato', 'Roboto', system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 20px !important;
  color: #ffffff !important;
  font-size: 40px;
  line-height: 54px;
  letter-spacing: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .ae-hero-title { font-size: 36px; line-height: 44px; }
}
@media (max-width: 768px) {
  .ae-hero-title { font-size: 26px; line-height: 32px; }
}
/* Home page hero gets the outlined effect */
body.home .ae-hero-title,
body.home .ae-hero-content .ae-hero-title {
  font-weight: 400 !important;
  color: transparent !important;
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff;
  font-size: 120px;
  line-height: 140px;
  letter-spacing: -5px;
}
/* Eyebrow — LARGE uppercase cyan title above the white title.
   Source SR7 layer-0: s:66,52,36,26; fw:900; data-color #00a9ff (desktop, white below).
   In source the eyebrow is BIGGER than the title — it's effectively the dominant headline. */
.ae-hero-eyebrow,
.ae-hero-content .ae-hero-eyebrow {
  grid-area: eyebrow;
  font-family: 'Lato', 'Roboto', system-ui, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #00a9ff !important;
  font-size: 66px !important;
  line-height: 82px !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px !important;
  text-align: left !important;
  white-space: nowrap;
}
@media (max-width: 1023px) {
  .ae-hero-eyebrow,
  .ae-hero-content .ae-hero-eyebrow { font-size: 52px !important; line-height: 60px !important; color: #ffffff !important; }
}
@media (max-width: 768px) {
  .ae-hero-eyebrow,
  .ae-hero-content .ae-hero-eyebrow { font-size: 36px !important; line-height: 44px !important; color: #ffffff !important; }
}
@media (max-width: 480px) {
  .ae-hero-eyebrow,
  .ae-hero-content .ae-hero-eyebrow { font-size: 26px !important; line-height: 32px !important; }
}
@media (max-width: 1240px) {
  .ae-hero-eyebrow,
  .ae-hero-content .ae-hero-eyebrow { text-align: center !important; }
}
@media (max-width: 1240px) {
  .ae-hero-title { text-align: center; }
}
@media (max-width: 1239px) {
  body.home .ae-hero-title {
    font-size: 90px;
    line-height: 115px;
    letter-spacing: -4px;
  }
}
@media (max-width: 1023px) {
  body.home .ae-hero-title {
    font-size: 80px;
    line-height: 101px;
    letter-spacing: -3px;
  }
}
@media (max-width: 767px) {
  body.home .ae-hero-title {
    font-size: 60px;
    line-height: 80px;
    letter-spacing: -1px;
  }
}
/* AE FIX 2026-05-14: at narrow phone widths (≤480px) the 60px outlined
   "AUTO ELITE" wordmark overflowed the viewport. Use a clamp so the title
   scales smoothly down to fit ~360px-wide screens without clipping. */
@media (max-width: 480px) {
  body.home .ae-hero-title {
    font-size: clamp(38px, 13vw, 60px);
    line-height: 1.15;
    letter-spacing: 0;
    word-break: break-word;
  }
}

.ae-hero-subtitle {
  grid-area: subt;
  /* AE FIX 2026-05-08: match prod — Montserrat 37px / weight 300 / mixed case
     (prod uses no text-transform; the source text is already in title case). */
  font-family: 'Montserrat', 'Lato', system-ui, sans-serif !important;
  font-size: clamp(18px, 2.4vw, 37px) !important;
  font-weight: 300 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  margin: 0 0 24px !important;
  color: #fff !important;
  text-align: left;
  max-width: 1000px;
}
/* Home subtitle wider so it wraps to 2 lines like source ("...CONVERSIONS / AND...SALE") */
body.home .ae-hero-subtitle {
  max-width: none;
  width: 100%;
  white-space: normal;
}
@media (max-width: 1240px) {
  .ae-hero-subtitle { text-align: center; }
}

.ae-hero-body {
  grid-area: body;
  font-family: 'Montserrat', 'Lato', 'Roboto', system-ui, sans-serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 720px;
  text-align: left;
  align-self: start;
}
/* Home page body is the smaller right-column variant */
body.home .ae-hero-body {
  font-family: 'Lato', 'Roboto', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: 540px;
  padding-top: 8px;     /* line up with Explore Models row */
}
@media (max-width: 1023px) {
  .ae-hero-body { font-size: 18px; }
}
@media (max-width: 768px) {
  .ae-hero-body { font-size: 16px; }
}
@media (max-width: 1240px) {
  .ae-hero-body { text-align: center; max-width: 880px; margin: 0 auto 32px; }
}

.ae-hero-buttons {
  grid-area: btn;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
  justify-content: flex-start;
  margin-top: 8px;
}
@media (max-width: 1240px) {
  .ae-hero-buttons { justify-content: center; }
}

/* 2026-05-15 Zach final round: restore the Vehicle Recommendation Survey
   CTA from the prior site, positioned right under View Inventory.
   Two-line panel — bold eyebrow line + supporting copy — anchor-linked
   to the existing #discover-your-sprinter form section.
   2026-05-16 Mike: static state now matches what was the hover (solid
   black panel + full white border + bright body text). Hover is a
   subtle lift + slight border glow — not a full inversion.
   2026-05-16 (later) specificity bump: combined selector
   `.ae-hero-btn.ae-hero-btn--survey` beats the generic `.ae-hero-btn`
   rule that lives further down in the file. With single-class
   selectors both blocks used `!important` so source order decided and
   the generic rule clobbered the survey rule's dark background. */
.ae-hero-btn.ae-hero-btn--survey {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-transform: none !important;
  text-align: left;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  background: rgba(20, 20, 20, 0.92) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 14px 22px !important;
  max-width: 460px;
}
.ae-hero-btn.ae-hero-btn--survey::before {
  content: "▤";
  position: absolute;
  /* No absolute positioning needed — kept as a hint glyph in flow. */
  display: none;
}
.ae-hero-btn.ae-hero-btn--survey .ae-hero-btn--survey-eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
}
.ae-hero-btn.ae-hero-btn--survey .ae-hero-btn--survey-body {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  color: #ffffff;
  line-height: 1.45;
  max-width: 420px;
}
.ae-hero-btn.ae-hero-btn--survey:hover {
  background: rgba(0, 0, 0, 0.96) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
@media (max-width: 540px) {
  .ae-hero-btn.ae-hero-btn--survey { padding: 12px 16px !important; max-width: 100%; }
  .ae-hero-btn.ae-hero-btn--survey .ae-hero-btn--survey-eyebrow { font-size: 13px; }
  .ae-hero-btn.ae-hero-btn--survey .ae-hero-btn--survey-body { font-size: 11.5px; }
}
/* Make the Hero buttons stack vertically so the Survey panel sits
   directly below the View Inventory pill (Zach: "right underneath"). */
.ae-hero-buttons {
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 1240px) {
  .ae-hero-buttons { align-items: center; }
}

.ae-hero-btn {
  display: inline-block !important;
  /* AE FIX 2026-05-08: match prod button — light-gray bg, dark text, subtle
     dark border, weight 900, 13px. Prod is a RevSlider button styled as
     `.rev-btn` with bg #dbdbdb / color #222 / border 2px rgba(34,34,34,0.35). */
  padding: 18px 27px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 2px solid rgba(34, 34, 34, 0.35) !important;
  border-radius: 0 !important;
  background: #dbdbdb !important;
  color: #222 !important;
  transition: background 0.25s, color 0.25s, transform 0.2s;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.ae-hero-btn:hover {
  background: #fff;
  color: #222;
  border-color: #fff !important;
  transform: translateY(-1px);
}
.ae-hero-btn--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.ae-hero-btn--ghost:hover {
  background: #fff;
  color: #000;
}

/* Cyan primary button (rv-vans, luxury-vans) — matches SR7 source layer-9.
   bg: #007ca5, white text, weight 900, 3px border-radius, 2px border rgba(0,124,165,0.35). */
.ae-hero-btn--cyan {
  background: #007ca5 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-family: 'Montserrat', 'Lato', sans-serif !important;
  letter-spacing: 3px !important;
  border: 2px solid rgba(0, 124, 165, 0.35) !important;
  border-radius: 3px !important;
  padding: 18px 30px !important;
  min-width: 215px;
  text-align: center;
}
.ae-hero-btn--cyan:hover {
  background: #ffffff !important;
  color: #007ca5 !important;
  border-color: #ffffff !important;
}
/* Match the ghost variant on these pages — rounded corners, Montserrat */
body:not(.home) .ae-hero-btn--ghost {
  font-family: 'Montserrat', 'Lato', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
  border-radius: 3px !important;
  padding: 18px 30px !important;
  min-width: 215px;
  text-align: center;
}
body:not(.home) .ae-hero-btn--ghost:hover {
  background: #ffffff !important;
  color: #007ca5 !important;
  border-color: #ffffff !important;
}

/* Explore Models scroll-down link — matches SR7 layer-6 source.
   Source: text 'Explore Models' + downward chevron, 25px desktop / 18px mobile,
   click action scrolls to next section. */
.ae-hero-explore {
  grid-area: explore;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-family: 'Lato', 'Roboto', system-ui, sans-serif;
  font-size: clamp(18px, 1.4vw, 25px);
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  color: #fff !important;
  letter-spacing: 0.5px;
  margin: 0 0 28px;
  cursor: pointer;
  transition: transform 0.2s ease;
  align-self: start;
}
@media (max-width: 1240px) {
  .ae-hero-explore { justify-content: center; }
}
.ae-hero-explore:hover {
  transform: scale(0.95);
}
.ae-hero-explore-chevron {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transform: translateY(1px);
}

/* Multi-slide nav */
.ae-hero-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.ae-hero-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.ae-hero-dot:hover { background: rgba(255,255,255,0.7); }
.ae-hero-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.ae-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px; height: 48px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ae-hero-arrow:hover { background: rgba(0,0,0,0.7); }
.ae-hero-arrow--prev { left: 20px; }
.ae-hero-arrow--next { right: 20px; }
@media (max-width: 768px) {
  .ae-hero-arrow { width: 36px; height: 36px; font-size: 18px; }
}

/* Two-column hero layout when feature_image/video present.
   AE FIX 2026-05-08: bumped max-width 1240 -> 1440 so the video iframe in
   the right column can hit 650px wide (matches prod). 1440 - 80 padding -
   40 gap = 1320 / 2 = 660px per col.
   AE FIX 2026-05-11: added margin: 0 auto so the 1440-wide container is
   centered in the viewport. Without it the block stuck to the left edge,
   making model-page heroes look "too far left" vs prod. */
.ae-hero-content:has(.ae-hero-feature) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px;
  align-items: center;
  text-align: left;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px;
}
.ae-hero-feature {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ae-hero-feature img {
  max-width: 100% !important;
  max-height: 500px !important;
  height: auto !important;
  width: auto !important;
  border-radius: 4px;
  display: block;
}
/* AE FIX 2026-05-08: hero YouTube iframe (right column on detail pages).
   16:9 aspect-ratio box; max-width to leave the title column space. */
.ae-hero-feature iframe.ae-hero-video {
  display: block;
  width: 100%;
  /* AE FIX 2026-05-08: bumped from 560 to 650 to match prod's iframe (650x366),
     which keeps the YouTube title overlay from truncating. */
  max-width: 650px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 4px;
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .ae-hero-feature iframe.ae-hero-video { max-width: 100%; }
}
.ae-hero-text { text-align: left; }
@media (max-width: 768px) {
  .ae-hero-content:has(.ae-hero-feature) {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 30px 20px;
    text-align: center;
  }
  .ae-hero-text { text-align: center; }
  .ae-hero-feature img { max-height: 300px !important; }
}

.ae-hero--multi .ae-hero-slide .ae-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ae-hero--multi .ae-hero-slide .ae-hero-content:has(.ae-hero-feature) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px;
  align-items: center;
  position: absolute;
  inset: 0;
  padding: 60px 40px;
}