/* The three Tour landing images share one responsive height. */
@media (max-width: 1199px) {
  .trip-carpool-shell,
  .trip-groups-page,
  .tour-routes-page {
    --tour-landing-hero-height: 320px;
  }

  #app .carpool-hero,
  #app .trip-groups-hero > .portal-page-hero,
  #app .tour-hero > .portal-page-hero {
    height: var(--tour-landing-hero-height) !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  #app .carpool-hero > .hp-site-container,
  #app .trip-groups-hero .portal-page-hero-inner,
  #app .tour-hero .portal-page-hero-inner {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  #app .trip-groups-benefits,
  #app .tour-routes-page .tour-hero-benefits {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    margin: 0;
    padding: 8px 4%;
  }

  #app .trip-groups-benefits { background: #122818; }
  #app .tour-routes-page .tour-hero-benefits { background: #e8f2ed; }
  #app .tour-routes-page .tour-hero-art {
    height: var(--tour-landing-hero-height);
    bottom: auto;
  }

  #app .tour-hero .portal-page-hero-inner { padding-bottom: 12px; }
  #app .tour-routes-page .tour-filter-panel { margin-top: 0 !important; }
}

@media (max-width: 899px) {
  .trip-carpool-shell,
  .trip-groups-page,
  .tour-routes-page {
    --tour-landing-hero-height: 285px;
  }
}

@media (max-width: 599px) {
  .trip-carpool-shell,
  .trip-groups-page,
  .tour-routes-page {
    --tour-landing-hero-height: 215px;
  }

  #app .trip-groups-hero .portal-page-hero-inner { padding: 12px 0 !important; }
  #app .trip-groups-hero .portal-page-hero .portal-page-hero-eyebrow { font-size: 24px !important; }
  #app .trip-groups-hero .portal-page-hero-description { font-size: 11px !important; line-height: 1.22 !important; margin-top: 5px; }
  #app .trip-groups-hero .portal-page-hero-actions { margin-top: 8px; }
  #app .trip-groups-hero .portal-page-hero-actions a { padding: 7px 10px; font-size: 12px; }

  #app .tour-hero .portal-page-hero-inner { padding: 10px 0 12px !important; }
  #app .tour-hero .portal-page-hero h1 { font-size: 20px !important; line-height: 1.04; }
  #app .tour-hero .portal-page-hero-description { font-size: 10px !important; line-height: 1.2 !important; margin-top: 5px; }
  #app .tour-hero .portal-page-hero-actions { margin-top: 6px; }
  #app .tour-hero .portal-page-hero-actions a { padding: 7px 10px; font-size: 11px; }
  #app .tour-hero-motto { display: none; }
  #app .tour-hero-stamp { width: 96px; top: 12px; right: 1%; padding: 9px 3px; font-size: 12px; }
  #app .tour-hero-stamp svg { width: 32px; height: 18px; margin-bottom: 3px; }
}

@media (max-width: 767px) {
  /* Fade the mist across the whole photo so its old 76%-wide rectangle
     has no visible top or right edge on phones and compact tablets. */
  #app .tour-routes-page .tour-hero .portal-page-hero-inner::before {
    left: -8%;
    top: 0;
    width: 116%;
    height: 100%;
    background: radial-gradient(
      ellipse 60% 100% at 31% 50%,
      rgb(243 250 247 / 62%) 0%,
      rgb(243 250 247 / 35%) 48%,
      transparent 100%
    );
  }
}

@media (max-width: 359px) {
  .trip-carpool-shell,
  .trip-groups-page,
  .tour-routes-page {
    --tour-landing-hero-height: 250px;
  }
}