/*
  Shared hero component — the homepage ('/', via questionnaire-v2.html) and
  every location page (lib/render-location-page.js) both use this exact
  markup/CSS, so the two can never visually drift apart.

  Self-contained: every color/font falls back to a hardcoded value so this
  renders correctly even on a host page that hasn't loaded layout.css (e.g.
  questionnaire-v2.html opened standalone), but prefers the --xrt-* tokens
  (layout.css, on .xrt-scope) when they ARE present, so it matches the rest
  of the site's header/footer/blog palette everywhere else.

  Markup contract:
    <div class="xrt-hero">
      <div class="xrt-hero__media">
        <img class="xrt-hero__img" ...>
        <div class="xrt-hero__overlay" aria-hidden="true"></div>
      </div>
      <div class="xrt-hero__content">
        <div class="xrt-hero__eyebrow">...</div>
        <h1 class="xrt-hero__title">...</h1>
        <p class="xrt-hero__coords">...</p>          (optional)
        <p class="xrt-hero__desc">...</p>
        <div class="xrt-hero__actions">
          <a/button class="xrt-hero__btn xrt-hero__btn--primary">...</a>
          <a/button class="xrt-hero__btn xrt-hero__btn--secondary">...</a>
        </div>
      </div>
    </div>

  Mobile-first: below 768px the image container is tall (portrait-ish) and
  the gradient is vertical, anchored to the bottom, with text overlaid
  bottom-anchored so the top of the image stays clear. At 768px+ the
  container flattens to a wide crop and the gradient/text switch to
  horizontal, left-anchored, vertically centered.
*/
.xrt-hero{position:relative;background:var(--xrt-deep,#0d2d25)}
.xrt-hero__media{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--xrt-deep,#0d2d25)}
.xrt-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 22%}
.xrt-hero__overlay{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(to top,var(--xrt-deep,#0d2d25) 0%,rgba(13,45,37,.85) 40%,transparent 70%)}
.xrt-hero__content{position:absolute;inset:auto 0 0 0;z-index:2;padding:0 20px 28px;display:flex;flex-direction:column;font-family:var(--xrt-font-b,'DM Sans',sans-serif)}
.xrt-hero__eyebrow{font-family:var(--xrt-font-h,'Manrope',sans-serif);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--xrt-lime,#c8f36a);margin:0 0 8px}
.xrt-hero__title{font-family:var(--xrt-font-h,'Manrope',sans-serif);font-size:clamp(26px,4.6vw,52px);font-weight:800;line-height:1.06;letter-spacing:-.045em;color:#fff;margin:0}
.xrt-hero__coords{font-size:13px;color:rgba(255,255,255,.72);margin:8px 0 0}
.xrt-hero__desc{font-size:clamp(12.5px,1.4vw,14.5px);line-height:1.6;color:rgba(255,255,255,.78);max-width:42rem;margin:10px 0 0}
.xrt-hero__actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.xrt-hero__btn{display:inline-block;box-sizing:border-box;width:100%;text-align:center;text-decoration:none;font-family:var(--xrt-font-h,'Manrope',sans-serif);font-size:15.5px;font-weight:700;letter-spacing:.02em;border:none;border-radius:var(--xrt-r-md,12px);padding:14px;cursor:pointer;transition:filter .15s,box-shadow .15s;box-shadow:0 2px 8px rgba(11,31,25,.08)}
.xrt-hero__btn:hover{filter:brightness(1.06)}
.xrt-hero__btn--primary{background:var(--xrt-lime,#c8f36a);color:var(--xrt-ink,#14231e)}
.xrt-hero__btn--secondary{background:var(--xrt-deep-d,#0b2c25);color:#fff}
/* Larger phones / small tablets in portrait: a touch less height needed
   since text wraps to fewer lines at this width. */
@media(min-width:480px){
  .xrt-hero__media{aspect-ratio:1/1}
}
@media(min-width:768px){
  /* aspect-ratio:2.667 alone gives a media box only ~288px tall at 768px
     wide — too short for longer content columns (e.g. a location page's
     hero, which adds a coordinates line) to vertically center inside
     without overflowing into the breadcrumb above / map below. The min-height
     floor only bites at narrower desktop/tablet widths; wide viewports
     already clear it via aspect-ratio alone. */
  .xrt-hero__media{aspect-ratio:2.667;min-height:440px}
  .xrt-hero__img{object-position:right center}
  .xrt-hero__overlay{background:linear-gradient(to right,var(--xrt-deep,#0d2d25) 0%,rgba(13,45,37,.85) 40%,transparent 65%)}
  .xrt-hero__content{inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px) clamp(24px,4vw,48px);width:min(48%,620px)}
  .xrt-hero__actions{flex-direction:row;flex-wrap:wrap}
  .xrt-hero__btn{width:auto;padding:13px 24px}
}
/* Tablet: same overlay pattern, but the column is proportionally wider here, so
   narrow the gradient's transparent point (65%→55%) to leave more solid-color
   space behind the text instead of it feeling cramped against the image. */
@media(min-width:768px) and (max-width:1024px){
  .xrt-hero__overlay{background:linear-gradient(to right,var(--xrt-deep,#0d2d25) 0%,rgba(13,45,37,.85) 40%,transparent 55%)}
  .xrt-hero__content{width:min(54%,540px)}
}