/*
 RBR_GH_VISUAL_OPTION_A_V1_20261026
 Additive visual corrections to the three Getting Here pages only.
 Never writes CMS data, removes photos, or edits attribution metadata.
*/

/* 1. Hero: quiet upper edge and legible editorial text at left.
   CMS photo variable stays the same; the photograph is not replaced. */
body.rbr-gh-v1 .rbr-gh-hero {
  min-height:clamp(420px,38vw,555px);
  padding-top:clamp(98px,8.1vw,125px);
  padding-bottom:clamp(65px,6.4vw,92px);
  background-color:#f6f7f3;
  background-image:
    linear-gradient(180deg,rgba(248,248,244,.30) 0%,rgba(248,248,244,.08) 42%,rgba(248,248,244,0) 74%),
    linear-gradient(90deg,rgba(248,248,244,.95) 0%,rgba(248,248,244,.88) 24%,rgba(248,248,244,.62) 47%,rgba(248,248,244,.14) 76%,rgba(248,248,244,.05) 100%),
    var(--rbr-gh-hero-photo,url('/assets/uploads/overview.jpg')) !important;
  background-position:center,center,center 52%;
  background-size:cover;
}

/* 2. Equal-height route cards and aligned map tops, without cropping maps.
   Row 4 absorbs unequal text lengths; row 5 holds equal-size map frames. */
@media (min-width:901px) {
  body.rbr-gh-v1 .rbr-gh-route-grid { align-items:stretch; }
  body.rbr-gh-v1 .rbr-gh-route-grid > article {
    min-height:700px;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    align-content:stretch;
    align-items:start;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .overline {
    grid-column:1/-1;grid-row:1;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > h2 {
    grid-column:1;grid-row:2;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > p:not(.overline) {
    grid-column:1;grid-row:3;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-route-diagram {
    grid-column:2;grid-row:2/4;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-cms-route-photo {
    grid-column:1/-1;grid-row:5;align-self:end;
    margin-top:20px;
  }
}
body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-cms-route-photo img {
  display:block;
  width:100%;height:auto;
  aspect-ratio:3/2;
  max-height:none;
  object-fit:contain;
  background-color:#f7f8f4;
}

/* 3. Final CTA is a quiet typography-first finish, not a second hero. */
body.rbr-gh-v1 .rbr-gh-end-cta {
  min-height:295px;
  padding-top:clamp(55px,5.5vw,83px);
  padding-bottom:clamp(55px,5.5vw,83px);
  background:#e9eeeb !important;
  border-top:1px solid #d8e0da;
}
body.rbr-gh-v1 .rbr-gh-end-cta .overline { color:#536c62; }
body.rbr-gh-v1 .rbr-gh-end-cta h2 { max-width:20ch; }

/* 4. Credits remain stored/editable in CMS, but are NEVER printed on the
      public Getting Here page, including after async draft/photo loading. */
body.rbr-gh-v1 [data-rbr-gh-credit],
body.rbr-gh-v1 .rbr-gh-cms-credit {
  display:none !important;
}
/* No photo is shown behind the CTA now; its old decorative image label
   should not be announced by assistive technology either. */
body.rbr-gh-v1 .rbr-gh-end-cta [data-rbr-gh-a11y="endCta"] {
  display:none !important;
}

/* Tablet: route cards stack; do not force extra vertical space. */
@media(max-width:900px) {
  body.rbr-gh-v1 .rbr-gh-route-grid > article { min-height:0; }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-cms-route-photo {
    grid-column:1/-1;grid-row:auto;
  }
}
@media(max-width:640px) {
  body.rbr-gh-v1 .rbr-gh-hero {
    min-height:420px;
    padding:105px 25px 62px;
    background-image:
      linear-gradient(180deg,rgba(248,248,244,.91) 0%,rgba(248,248,244,.81) 48%,rgba(248,248,244,.38) 100%),
      var(--rbr-gh-hero-photo,url('/assets/uploads/overview.jpg')) !important;
    background-position:center,center 55%;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article {
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .overline,
  body.rbr-gh-v1 .rbr-gh-route-grid > article > h2,
  body.rbr-gh-v1 .rbr-gh-route-grid > article > p:not(.overline),
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-route-diagram,
  body.rbr-gh-v1 .rbr-gh-route-grid > article > .rbr-gh-cms-route-photo {
    grid-column:1;
    grid-row:auto;
  }
  body.rbr-gh-v1 .rbr-gh-end-cta {
    min-height:265px;
    padding:52px 25px;
    background:#e9eeeb !important;
  }
}
