/* ==========================================================================
   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. The text stays in place invisibly so the banner keeps
   exactly its current size on every screen (on phones it's display:none above, as before). */
.hcar--v3 .halt__sub--spacer { visibility: hidden; user-select: none; }

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