/* ==========================================================================
   CrysMed — Hero v3 (2026-10-09)
   One background image per slide + real HTML text, replacing the layered collage
   (building photo, glow, skyline, phone mock-up, member card, stethoscope).

   Builds on hero-alt.css: the same .hcar box (1216 x 370 inside the 394px band),
   the same .halt__copy text styles and the same arrows/dots. Everything here is
   scoped to .hcar--v3, so the old hero's rules are untouched.

   Images (assets/img/hero/): hero-N-desktop.{webp,jpg} 2432x740, hero-N-mobile.{webp,jpg} 1080x720.
   ========================================================================== */

/* ---------- Desktop & tablet: photo fills the card, copy sits on the left half ---------- */
.hcar--v3 .halt__card {
  display: block;
  background: var(--brand-700); /* shows only while the photo loads */
  isolation: isolate;
}
.hcar--v3 .hv3__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hcar--v3 .hv3__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center; /* narrower screens crop from the left, never the subject */
  display: block;
}
/* Brand-teal shade behind the text, fading out before the subject, so white text is always
   readable whatever the photo's colours are. */
.hcar--v3 .halt__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(1, 101, 125, .94) 0%,
    rgba(7, 121, 148, .86) 30%,
    rgba(7, 121, 148, .55) 46%,
    rgba(7, 121, 148, 0) 62%);
}
/* Same text column as before: the old grid gave the copy 1.02fr of 2.02fr (~50.5%). */
.hcar--v3 .halt__copy {
  height: 100%;
  max-width: 50.5%;
}

/* ---------- Tablet (600-1023px) ----------
   Uses the 1080x720 artwork (people on the right 40%, calm left side), which suits this
   proportion better than the very wide desktop banner. The frame sizes itself to the card,
   so its rounded corners always match. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .hcar--v3 .hcar__viewport,
  .hcar--v3 .hcar__track,
  .hcar--v3 .hcar__slide { height: auto; }
  .hcar--v3 .halt__card { min-height: 340px; }
  .hcar--v3 .hv3__media img { object-position: right 35%; }
  .hcar--v3 .halt__copy { max-width: 56%; padding-block: 28px 56px; }
  .hcar--v3 .halt__card::before {
    background: linear-gradient(90deg,
      rgba(1, 101, 125, .94) 0%,
      rgba(7, 121, 148, .86) 38%,
      rgba(7, 121, 148, .45) 54%,
      rgba(7, 121, 148, 0) 66%);
  }
}

/* ---------- Phones (<600px): swipeable app banners ---------- */
@media (max-width: 599.98px) {
  .hcar--v3 { height: auto; background: transparent; }
  .hcar--v3 > .container { padding-block: 12px 4px; }

  /* Native, momentum scrolling row of banner cards; the next banner peeks in */
  .hcar--v3 .hcar__viewport {
    height: auto;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .hcar--v3 .hcar__viewport::-webkit-scrollbar { display: none; }
  .hcar--v3 .hcar__track {
    transform: none !important; /* the desktop slide transform never applies here */
    transition: none;
    gap: 10px;
  }
  .hcar--v3 .hcar__slide {
    flex: 0 0 92%;
    height: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .hcar--v3 .halt__card {
    aspect-ratio: 3 / 2; /* matches the 1080x720 mobile artwork */
    border-radius: 16px;
  }
  .hcar--v3 .hv3__media img { object-position: right center; }
  .hcar--v3 .halt__card::before {
    background: linear-gradient(90deg,
      rgba(1, 101, 125, .92) 0%,
      rgba(7, 121, 148, .78) 38%,
      rgba(7, 121, 148, .3) 56%,
      rgba(7, 121, 148, 0) 70%);
  }

  /* App-banner copy: eyebrow, headline, two compact buttons. The paragraph and trust badges
     stay on tablet/desktop; on phones the trust strip right below covers that message. */
  .hcar--v3 .halt__copy {
    max-width: 66%;
    height: 100%;
    padding: 14px 0 14px 16px;
    justify-content: center;
  }
  .hcar--v3 .halt__eyebrow { font-size: 10px; line-height: 14px; letter-spacing: .08em; }
  .hcar--v3 .halt__headline { font-size: 22px; line-height: 1.1; margin: 4px 0 12px; }
  .hcar--v3 .halt__sub,
  .hcar--v3 .halt__trust { display: none; }
  .hcar--v3 .halt__cta { flex-wrap: nowrap; gap: 8px; margin: 0; }
  .hcar--v3 .halt__btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* The second (outline) button can land on the photo's subject on a narrow banner:
     a soft translucent teal fill keeps it readable over any part of the image. */
  .hcar--v3 .halt__btn--ghost {
    background: rgba(1, 101, 125, .55);
    border-color: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Progress dots under the banners (arrows hidden; swipe instead) */
  .hcar--v3 .hcar__controls {
    position: static;
    justify-content: center;
    margin-top: 10px;
  }
  .hcar--v3 .hcar__arrow { display: none; }
  .hcar--v3 .hcar__dots { margin: 0; }
  .hcar--v3 .hcar__dot { background: var(--line-strong); }
  .hcar--v3 .hcar__dot.is-active { background: var(--brand-700); }
}

/* Very small phones: the second button would get cramped, keep both on one line by tightening */
@media (max-width: 374.98px) {
  .hcar--v3 .halt__headline { font-size: 20px; }
  .hcar--v3 .halt__btn { padding: 0 10px; font-size: 11.5px; }
}

/* 2026-10-17 client correction: banner descriptions removed, banner size kept exactly. 2026-10-19 (client: "keep
   everything evenly spaced"): the old text's space is split into two invisible halves — one above the eyebrow, one
   below the trust row — so the content sits evenly in the middle instead of leaving a hole under the headline.
   Same font size = same line wrapping; half the line height = exactly half the old text's height. The old text's own
   bottom margin moves to under the headline, so the buttons don't touch it; the total height is unchanged.
   Phones (<600px): display:none above, as before — untouched. */
.hcar--v3 .halt__sub--spacer { visibility: hidden; user-select: none; }
@media (min-width: 600px) {
  .hcar--v3 .halt__sub--spacer { line-height: .725; margin: 0; }
  .hcar--v3 .halt__headline { margin-bottom: calc(var(--sp-1) + var(--sp-2)); }  /* was sp-1, + the text's sp-2 */
}
@media (min-width: 600px) and (max-width: 640px) {
  .hcar--v3 .halt__headline { margin-bottom: calc(6px + var(--sp-3)); }          /* was 6px, + the text's sp-3 */
}

/* 2026-10-19 (client: the hero text "feels odd") — desktop only, banner size unchanged (fixed 1216x370 box).
   Measured: 101px empty above the eyebrow but the arrows 12px off the bottom edge, and the smallest gap in the
   column sat between the headline and the buttons. Now the copy AND the arrows/dots are centred as one group
   (the copy's bottom padding reserves the 30px controls + a 32px gap), the eyebrow pairs tightly with the
   headline, and the headline gets the biggest break before the buttons. The fixed-height box doesn't need the
   invisible spacers here; the tablet layout (600-1023px) still uses them, untouched. */
@media (min-width: 1024px) {
  .hcar--v3 .halt__sub--spacer { display: none; }
  .hcar--v3 .halt__copy { padding-top: var(--sp-5); padding-bottom: calc(var(--sp-5) + 30px + var(--sp-6)); }
  .hcar--v3 .halt__headline { margin-top: 0; margin-bottom: var(--sp-5); }
  .hcar--v3 .halt__cta { margin-bottom: 14px; }
  /* arrows' bottom edge = the group's bottom margin, (370 - 190 copy - 62 controls) / 2 = 59px from the card,
     + the 12px band padding under the card */
  .hcar--v3 .hcar__controls { bottom: 71px; }
}

@media (prefers-reduced-motion: reduce) {
  .hcar--v3 .hcar__viewport { scroll-behavior: auto; }
}