/* =========================================================
   Case study: Hearing Care Hub
   Hero matches Figma node 3047:1420 (1440×481 logical frame).
   ========================================================= */

/* ───────── NDA disclaimer ribbon ─────────
   Same component as Enterprise: fixed under the nav, collapses to an 8px
   strip on scroll, hover/focus restores it. JS toggles `.is-collapsed`. */
.ch-nda {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
  background: #d6e2f5;
  color: #0c2b7b;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 12px 24px;
  /* Expanded height tracks the ribbon's own content height (--nda-h, set by
     JS) so the blue background wraps the text even when it reflows to 3-4
     lines on narrow viewports. 64px is the no-JS fallback. */
  max-height: var(--nda-h, 64px);
  overflow: visible;
  cursor: pointer;
  outline: none;
  transition:
    max-height 280ms cubic-bezier(0.4, 0.2, 0.2, 1),
    padding 280ms cubic-bezier(0.4, 0.2, 0.2, 1);
}
.ch-nda__text {
  display: inline-block;
  transition: opacity 200ms ease;
}
.ch-nda__pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #2c6edf;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 2px 12px;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.ch-nda.is-collapsed {
  max-height: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
.ch-nda.is-collapsed .ch-nda__text { opacity: 0; }
.ch-nda.is-collapsed .ch-nda__pill { opacity: 1; }
.ch-nda.is-collapsed:hover,
.ch-nda.is-collapsed:focus-visible {
  max-height: var(--nda-h, 64px);
  padding-top: 12px;
  padding-bottom: 12px;
}
.ch-nda.is-collapsed:hover .ch-nda__text,
.ch-nda.is-collapsed:focus-visible .ch-nda__text { opacity: 1; }
.ch-nda.is-collapsed:hover .ch-nda__pill,
.ch-nda.is-collapsed:focus-visible .ch-nda__pill { opacity: 0; }

/* ───────── Hero — Figma node 3047:1420 (1440×481 logical frame) ─────────
   Full-bleed white. Phone overflows the top edge per Figma (top: −80px),
   so overflow stays visible — the phone bleeds up into the NDA bar area,
   visually clipped only by the nav stacking on top. */
.ch-hero {
  position: relative;
  width: 100%;
  background: #fff;
  /* Buffer equal to the fixed NDA bar's measured height (--nda-h, set by JS)
     so its expanded height never overlaps hero content. */
  padding-top: var(--nda-h, 64px);
  /* visible so the phone can spill above */
  overflow: visible;
  margin-bottom: 0;
}
.ch-hero__inner {
  position: relative;
  width: 100%;
  /* Same scaling curve as Light / Enterprise: 420→481 between 700–1280vw. */
  height: clamp(420px, 10.5vw + 346px, 481px);
}
.ch-hero__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none; /* the frame is decorative; copy is below it */
}

/* Left-column copy — viewport-relative left alignment, matches the
   `max(60px, (100vw − 1140) / 2)` formula used by every other ce-* / cl-*
   content block, so the title lines up with text and dividers below. */
.ch-hero__title,
.ch-hero__sub,
.ch-hero__role {
  position: absolute;
  left: max(60px, calc((100vw - 1140px) / 2));
  pointer-events: auto;
}
.ch-hero__title {
  top: 97px;
  margin: 0;
  width: 469px;
  max-width: calc(100vw - 120px);
  font-family: var(--font-display);
  font-weight: 900;     /* Black */
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: #171819;
}
.ch-hero__sub {
  top: 239px;
  margin: 0;
  width: 404px;
  max-width: calc(100vw - 120px);
  font-family: var(--font-display);
  font-weight: 500;     /* Medium */
  font-size: 16px;
  line-height: 24px;
  color: #2f3031;
}
.ch-hero__role {
  /* Anchor by bottom so the line stays visible when inner clamps below 481. */
  bottom: 15px; /* 481 − 434(figma top) − 32(line) = 15 */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: #2f3031;
  opacity: 0.5;
}

/* ───────── Phone mockup ─────────
   Figma container 565.601 × 660.486 at (585.49, −79.92). The phone bitmap
   already includes the −6.35° rotation baked in, so we just need to drop
   it into a fixed-size box. Bottom-anchored so it stays grounded when the
   hero height clamps. */
.ch-hero__phone {
  position: absolute;
  left: 585.49px;
  /* Figma top: −79.92 in a 481 frame → bottom = 481 − (−79.92) − 660.486
     = −99.566 (phone bottom extends below the frame by ~100px). To stay
     visually anchored to the bottom of the hero on narrower viewports
     while letting the top extend above, we anchor by bottom. */
  bottom: -99.57px;
  width: 565.601px;
  height: 660.486px;
  /* Image bitmap is 2240×2000 (≈1.12 aspect) — wider than the Figma container
     (≈0.857). cover fills the box vertically, lightly cropping the empty
     transparent sides of the source — keeps the phone glyph at full height
     so the "extends above hero" effect reads properly. */
  object-fit: cover;
  object-position: center;
  pointer-events: auto;
  z-index: 1;
  /* Soft drop shadow under the rotated phone for depth (replaces Figma's
     near-invisible white glow). */
  filter: drop-shadow(0 24px 40px rgba(15, 25, 60, 0.10));
  will-change: transform;
}

/* ───────── Hearing aid (right of phone) ─────────
   Figma 276×276 round mask at (993, 186). Circular crop over the product
   photo via border-radius: 50% + overflow: hidden. */
.ch-hero__hearing-aid {
  position: absolute;
  left: 993px;
  top: 186px;
  width: 276px;
  height: 276px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: auto;
  /* Sits behind the phone in z-stack but in front of background. */
  z-index: 0;
  will-change: transform;
}
.ch-hero__hearing-aid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ───────── Responsive ─────────
   ≤900px — hearing case mobile stack (sized fluidly via clamp).
   ≤700px — extra-narrow tweaks if needed. */
@media (max-width: 900px) {
  /* ───────── Mobile hero ─────────
     Vertical stack: title → sub → visual band (phone front + hearing-aid
     behind/right) → role. */
  .ch-hero {
    padding-top: var(--nda-h, 64px);
  }
  .ch-hero__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 24px 28px;
  }
  /* Drop the 1440-centered absolute frame; phone+aid land in their own
     visual band. */
  .ch-hero__frame {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    transform: none;
    order: 3;
    /* Square band gives the bigger phone room to render at full aspect
       without overflowing into the role line below. */
    aspect-ratio: 1 / 1;
    pointer-events: auto;
  }
  /* Reset formerly-absolute text children to flow naturally in the flex stack */
  .ch-hero__title,
  .ch-hero__sub,
  .ch-hero__role {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    width: auto;
    max-width: 100%;
  }
  .ch-hero__title {
    font-size: clamp(32px, 6.5vw, 48px);
    line-height: 1.1;
    order: 1;
  }
  .ch-hero__sub {
    font-size: clamp(15px, 2.6vw, 18px);
    line-height: 1.4;
    max-width: 520px;
    order: 2;
  }
  .ch-hero__role {
    order: 4;
    font-size: clamp(15px, 2.2vw, 16px);
    margin-top: 8px;
  }

  /* Phone — anchored to the LEFT side of the band, top-aligned.
     Bigger size for stronger mobile presence; bleeds 4% past the left edge
     so the rotated phone still feels visually anchored. */
  .ch-hero__phone {
    left: -4%;
    right: auto;
    top: 0;
    bottom: auto;
    width: 82%;
    height: auto;
    /* Aspect from Figma bounding box (565.601 / 660.486 ≈ 0.857) */
    aspect-ratio: 565.601 / 660.486;
  }
  /* Hearing aid — sits behind the phone's bottom-right corner so the two
     read as one product cluster. */
  .ch-hero__hearing-aid {
    left: auto;
    right: 0;
    top: auto;
    bottom: 10%;
    width: 44%;
    height: auto;
    aspect-ratio: 1 / 1;
    z-index: 0;
  }
}

/* ───────── Section slides — kicker heading + screenshot row ─────────
   Each app-area section is a white .cl-slide (full-bleed) with a gray
   .cl-slide__kicker heading and one wide screenshot strip. */
.ch-shot-wrap {
  margin-top: 36px;
}
.ch-shot {
  display: block;
  width: 100%;
  height: auto;
}
/* Alternative branding has only 4 phones (others have 5) — narrow the strip
   so each phone renders at the same size as in the other sections. */
.ch-shot--narrow {
  width: 79%;
}

/* User Guide — 7 individual phone screenshots laid out as one row.
   On desktop they share the content width evenly; on mobile the row
   scrolls horizontally so each phone stays legible. */
.ch-guide-row {
  margin-top: 36px;
  display: flex;
  gap: 16px;
}
.ch-guide-row img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.19);
  display: block;
}

@media (max-width: 900px) {
  /* Section strips would shrink each phone to an illegible thumbnail if
     squeezed into the viewport — instead let the strip keep a readable
     height and scroll horizontally. */
  .ch-shot-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .ch-shot {
    width: auto;
    max-width: none;
    height: 620px;
  }
  /* The onboarding PNG has a wider native aspect ratio (less vertical chrome)
     than the other section strips. At a fixed 620px height it would render
     ~30% wider on mobile and the in-row phones would look much bigger than
     the next section's. Cap its height so its rendered width matches the
     other strips and the "swipe to see more" affordance reads consistently. */
  .ch-shot[src*="onboarding"] { height: 500px; }
  /* Same treatment for the User Guide phone row. */
  .ch-guide-row {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .ch-guide-row img {
    flex: 0 0 auto;
    width: 225px;
    scroll-snap-align: start;
  }
}