/* ─── Doctors page ──────────────────────────────────
   Builds on top of home.css. Variables / fonts / nav
   are inherited.
   Container width here is 1320px (40px image inset on
   each side of the cards), distinct from the 1496px
   container used elsewhere.
*/

:root {
  --container-doc: 1320px;
}

/* ═══ Hero (aira.app-style responsive header) ════════
   Strategy:
   - Full-bleed <header>, height clamps to viewport with a
     min/max so the image always fills the upper fold.
   - Two background <img> elements (mobile + desktop)
     stacked inside a wrapper, each with object-fit: cover.
     Display switches at 768px so each device gets a crop
     tuned for its aspect ratio.
   - Gradient overlay for text legibility over the image.
   - Content sits in a normal flow column above the image.
*/
.doctors-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Cross-browser full-viewport height — three-tier fallback:
     1. Pixel value via JS-driven --vh custom property.
        Works in every browser back to IE11; avoids the iOS
        Safari toolbar-jump because we recompute on resize.
     2. 100vh — fallback for browsers that don't run the JS yet
        (paint before scripts execute) or when JS is disabled.
     3. 100svh — modern browsers (Safari 15.4+, Chrome 108+,
        Firefox 101+) cleanly account for dynamic toolbars.
     Each line that's understood overrides the prior one. */
  height: calc(var(--vh, 1vh) * 100);
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: #0a2633;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.doctors-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.doctors-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
  user-select: none;
}

/* Show the right asset for the device. Both <img> tags load,
   mirroring aira.app — the swap is handled by display rules
   so the text-overlay layout doesn't shift. */
.doctors-hero__bg-img--mobile { display: block; }
.doctors-hero__bg-img--desktop { display: none; }

@media (min-width: 768px) {
  .doctors-hero__bg-img--mobile { display: none; }
  .doctors-hero__bg-img--desktop { display: block; }
}

/* Gradient veil — same 266° black ramp from Figma, fading from
   the left edge so the text on the left rail stays readable
   over any background. */
.doctors-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(266deg,
      rgba(0, 0, 0, 0) 34%,
      rgba(0, 0, 0, 0.78) 96%),
    linear-gradient(to top,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0) 35%);
  pointer-events: none;
}

.doctors-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-doc);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.doctors-hero__title {
  width: 521px;
  max-width: 100%;
  font-weight: 450;
  font-size: 72px;
  line-height: 76px;
  letter-spacing: 0;
  color: #ffffff;
}
.doctors-hero__title-line { display: block; }
.doctors-hero__title-line--muted { color: #849299; }

.doctors-hero__lede {
  margin-top: 24px;
  width: 461px;
  max-width: 100%;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.4px;
  color: #ffffff;
}

/* Page-specific layout — visual styling comes from
   .btn / .btn--lg / .btn--filled-light in home.css. */
.doctors-hero__cta {
  margin-top: 40px;
  width: 137px;
  padding: 12px 0;
}

/* ═══ Feature card sections (01, 02) ════════════════ */
.feature {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 32px;
}
.feature--01 { margin-top: 166px; }   /* 1190 - 1024 */
.feature--02 { margin-top: 40px; margin-bottom: 80px; }

.feature__card {
  position: relative;
  width: 100%;
  max-width: var(--container-doc);
  height: 660px;
  padding: 40px;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
}

.feature__media {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 600px;
  height: 580px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef2f4;
}
.feature__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature__copy {
  position: absolute;
  /* page coords: right column starts at x=924 (card x=204 → 720 from card left,
     card has 40px padding → 680 from padding edge). Width 528. */
  top: 40px;
  left: 720px;
  right: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.feature__index {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.6px;
  color: #9da8ad;
  margin-bottom: 16px;          /* 1622 - 1586 - 20 */
}

.feature__text {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.6px;
  color: var(--color-ink);
  max-width: 528px;
}
.feature--01 .feature__text { max-width: 512px; }
.feature__text strong {
  font-weight: 600;
  color: var(--color-ink);
}

.feature__cta {
  margin-top: 56px;             /* 1762 - 1622 - 84 */
  width: 120px;
  height: 40px;
  padding: 0;
  justify-content: center;
  font-size: 15px;
  border-radius: 42px;
}

/* ═══ Voice overlay (Section 01)  ════════════════════
   Base styles for .voice-overlay live in home.css; here
   we just position it on the upper-right of the feature
   card and lock its inner-text width / bars width to the
   exact Figma composition. */
.feature__card .voice-overlay {
  /* Card-relative coords from Figma: voice animation x=665, y=1266.
     Card top-left is x=204, y=1190 → overlay sits at (461, 76). */
  top: 76px;
  left: 461px;
  width: 358px;
  height: 208px;
}
.feature__card .voice-overlay__text { width: 311px; }
.feature__card .voice-overlay__bars {
  flex: none;
  width: 257px;
}

/* ═══ Responsive ════════════════════════════════════ */
@media (max-width: 1380px) {
  .feature__copy {
    left: calc(40px + 600px + 80px);   /* still 80px gap from image */
  }
}

@media (max-width: 1100px) {
  .doctors-hero {
    /* Stay full-height on tablet too. */
    height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: 100svh;
  }
  .doctors-hero__inner {
    padding: 0 24px;
  }
  .doctors-hero__title {
    font-size: 56px;
    line-height: 60px;
    width: auto;
  }

  .feature {
    padding: 0;
  }
  .feature--01 { margin-top: 96px; }
  .feature--02 { margin-bottom: 64px; }

  .feature__card {
    height: auto;
    padding: 24px;
  }
  .feature__media {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 580;
    margin-bottom: 32px;
  }
  .feature__copy {
    position: static;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .feature__card .voice-overlay {
    left: auto;
    right: 24px;
    width: min(358px, calc(100% - 48px));
  }
}

@media (max-width: 720px) {
  .doctors-hero {
    height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: 100svh;
  }
  .doctors-hero__inner {
    padding: 0 24px;
    /* Push the text block towards the lower-left like aira.app does on phones */
    justify-content: flex-end;
    padding-bottom: 88px;
  }
  .doctors-hero__title {
    font-size: 40px;
    line-height: 46px;
  }
  .doctors-hero__lede {
    font-size: 16px;
    line-height: 24px;
  }

  .feature__card .voice-overlay {
    display: none;
  }
}