/* Route-detail hero layout.
   Photography and copy are deliberately separated so vehicle details stay
   visible on desktop, tablet, and phone. */
body.route-page.route-vehicle-layout .page-hero {
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  background: #080b0e;
  color: #f8f5ee;
}

body.route-page.route-vehicle-layout .page-hero::before,
body.route-page.route-vehicle-layout .page-hero::after,
body.route-page.route-vehicle-layout .page-hero > picture::before,
body.route-page.route-vehicle-layout .page-hero > picture::after {
  display: none !important;
  content: none !important;
}

body.route-page.route-vehicle-layout .page-hero > picture,
body.route-page.route-vehicle-layout .page-hero > picture img {
  margin: 0 !important;
  transform: none !important;
}

body.route-page.route-vehicle-layout .page-hero > picture {
  overflow: hidden;
  background: #11161b;
}

body.route-page.route-vehicle-layout .page-hero > picture img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.route-page.route-vehicle-layout[data-route-id="lax-newport-beach"] .page-hero > picture img {
  object-position: 72% 62% !important;
}

body.route-page.route-vehicle-layout .page-hero .hero-inner {
  box-sizing: border-box;
  color: #f8f5ee;
  background:
    radial-gradient(circle at 100% 0, rgba(214,175,108,.12), transparent 38%),
    linear-gradient(145deg, #12171b 0%, #080b0e 76%);
}

body.route-page.route-vehicle-layout .page-hero :is(.eyebrow, h1, .hero-lede) {
  position: relative;
  z-index: 1;
  text-shadow: none !important;
}

@media (min-width: 901px) {
  body.route-page.route-vehicle-layout .page-hero {
    display: grid !important;
    grid-template-columns: minmax(340px, 42%) minmax(0, 58%) !important;
    grid-template-rows: minmax(590px, auto) !important;
    align-items: stretch !important;
    min-height: 590px !important;
    height: auto !important;
  }

  body.route-page.route-vehicle-layout .page-hero > picture {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 590px !important;
  }

  body.route-page.route-vehicle-layout .page-hero > picture img {
    position: absolute !important;
    inset: 0 !important;
    object-fit: cover !important;
    object-position: center 58% !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-inner {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(52px, 4.4vw, 82px) clamp(34px, 3.7vw, 70px) !important;
  }

  body.route-page.route-vehicle-layout .page-hero h1 {
    max-width: 11.5ch !important;
    margin: 0 0 20px !important;
    font-size: clamp(2.55rem, 3.45vw, 4.2rem) !important;
    line-height: 1 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-lede {
    max-width: 39ch !important;
    margin: 0 0 28px !important;
    font-size: clamp(.96rem, 1.05vw, 1.1rem) !important;
    line-height: 1.55 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: min(100%, 390px) !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions .btn {
    width: 100% !important;
    min-height: 50px;
    padding: 13px 16px;
  }
}

@media (max-width: 900px) {
  /* Keep every route landing page visually consistent on phones. Breadcrumbs
     remain in structured data and desktop navigation, but the extra cream bar
     no longer appears between the mobile header and the vehicle photograph. */
  body.route-page.route-vehicle-layout .route-breadcrumb {
    display: none !important;
  }

  body.route-page.route-vehicle-layout .page-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.route-page.route-vehicle-layout .page-hero > picture,
  body.route-page.route-vehicle-layout.route-photo-portrait .page-hero > picture,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero > picture,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero > picture {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }

  body.route-page.route-vehicle-layout .page-hero > picture img,
  body.route-page.route-vehicle-layout.route-photo-portrait .page-hero > picture img,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero > picture img,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero > picture img {
    position: absolute !important;
    inset: 0 !important;
    object-fit: cover !important;
    object-position: center 62% !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-inner,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero .hero-inner,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero .hero-inner {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 26px 20px 34px !important;
    transform: none !important;
  }

  body.route-page.route-vehicle-layout .page-hero h1,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero h1,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero h1 {
    max-width: none !important;
    margin: 0 0 15px !important;
    font-size: clamp(1.9rem, 8.4vw, 2.42rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-lede,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero .hero-lede,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero .hero-lede {
    max-width: 44ch !important;
    margin: 0 0 22px !important;
    font-size: .96rem !important;
    line-height: 1.52 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero .hero-actions,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 12px !important;
    font-size: .68rem !important;
  }
}

@media (max-width: 420px) {
  body.route-page.route-vehicle-layout .page-hero > picture {
    aspect-ratio: 4 / 3 !important;
  }

  body.route-page.route-vehicle-layout .page-hero h1 {
    font-size: clamp(1.82rem, 8.2vw, 2.18rem) !important;
  }
}

/* Premium route heroes use dedicated 4:5 phone artwork. Preserve the entire
   frame so the roof, bumper, and every wheel remain visible on small screens. */
@media (max-width: 660px) {
  body.route-page.route-vehicle-layout.route-mobile-full-frame .page-hero > picture {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    background: #11161b !important;
  }

  body.route-page.route-vehicle-layout.route-mobile-full-frame .page-hero > picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Route and fare come first on phones. Keep the approved, complete photo
     below the booking choices instead of cropping it to shorten the page.
     Tablet/desktop composition and the picture's fixed ratio are unchanged. */
  body.route-page.route-vehicle-layout .page-hero > picture,
  body.route-page.route-vehicle-layout.route-photo-portrait .page-hero > picture,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero > picture,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero > picture {
    order: 2 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-inner,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero .hero-inner,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero .hero-inner {
    order: 1 !important;
    display: flex !important;
    flex-direction: column;
    padding: 22px max(20px, env(safe-area-inset-right)) 26px max(20px, env(safe-area-inset-left)) !important;
  }

  body.route-page.route-vehicle-layout .page-hero .eyebrow {
    order: 1;
    margin: 0 0 12px !important;
  }

  body.route-page.route-vehicle-layout .page-hero h1 {
    order: 2;
    font-size: clamp(1.82rem, 8.2vw, 2.18rem) !important;
    line-height: 1.08 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions {
    order: 3;
    flex-shrink: 0;
    margin: 0 !important;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-actions .btn {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  body.route-page.route-vehicle-layout .page-hero .hero-lede,
  body.route-page.route-vehicle-layout.lax-santa-monica-page .page-hero .hero-lede,
  body.route-page.route-vehicle-layout.universal-santa-monica-page .page-hero .hero-lede {
    order: 4;
    margin: 16px 0 0 !important;
  }
}