/* ==========================================================================
   KOBIL — Industry Healthcare — Section: Hero (Aug 2026 redesign)
   Figma: D-Industries/Healthcare → hero, node 5882:46789 (desktop),
   5882:50316 (mobile, 393x732).
   Full-bleed gradient background, a gradient-accented serif headline, and
   a bespoke "consultation" chat-style card (status pill + prompt + two
   selectable option rows) layered over a mirrored, custom-cropped photo.
   Same architecture as css/industries/financial-services/hero.css. The
   card has no explicit Figma width/height (auto-layout "hug contents") —
   reproduced with width:max-content instead of a hardcoded px guess.
   ========================================================================== */

.sec-healthcare-hero {
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w754);
  background-color: #ffffff;
  background-image: url("/assets/industries/healthcare/hero/hero-bg-new.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-healthcare-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--page-max);
  min-height: var(--w754);
  margin: 0 auto;
  padding: 0 var(--w90);
}

.sec-healthcare-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  max-width: var(--w583);
}

.sec-healthcare-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-healthcare-hero__eyebrow-dot {
  display: inline-block;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: var(--navy);
}

.sec-healthcare-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
}

.sec-healthcare-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
}

.sec-healthcare-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.3;
  color: var(--navy);
}

/* Figma's headline opens with a 5-stop gradient run ("Redefining
   Security") before switching to plain navy for the rest of the
   sentence — the only Aug-2026 industry hero with a gradient accent. */
.sec-healthcare-hero__title-accent {
  background-image: linear-gradient(
    90deg,
    #3ebffc 3.4632%,
    #1046cf 13.161%,
    #696ef5 41.167%,
    #ca80f4 63.622%,
    #ffc4a0 99.443%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sec-healthcare-hero__desc {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

.sec-healthcare-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--white);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-healthcare-hero__cta:hover {
  background: var(--navy-20);
}

.sec-healthcare-hero__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-healthcare-hero__cta:hover img {
  transform: translateX(3px);
}

/* ---- Photo — Figma 5882:46820: left:calc(50%+279px) w/ -translate-x-1/2,
   bottom:~0, 668x526 -> left 665px (46.18%), width 46.39%, height 69.76%.
   Mirrored (scaleY(-1)+rotate(180deg) = scaleX(-1)) with a custom
   zoom+pan crop rather than plain object-fit:cover. ---- */

.sec-healthcare-hero__media {
  position: absolute;
  z-index: 5;
  left: 46.18%;
  bottom: 0;
  width: var(--w668);
  height: var(--w526);
  overflow: hidden;
}

/* Figma mirrors the whole box-sized crop (scaleY(-1)+rotate(180deg) =
   net scaleX(-1)) around the box's OWN center, THEN positions the
   asymmetric crop inset inside that already-mirrored box — not the
   other way round. Applying scaleX(-1) directly to the (offset,
   oversized) img instead flips it around the img's own off-center
   box, landing the crop ~8% too far right (confirmed against the Figma
   screenshot). This wrapper mirrors first, matching Figma's structure,
   so the inset percentages below can stay identical to Figma's own
   (pre-mirror) numbers. */
.sec-healthcare-hero__photo-flip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scaleX(-1);
}

.sec-healthcare-hero__photo {
  position: absolute;
  left: -11.4%;
  top: -0.07%;
  width: 114.92%;
  height: 109.37%;
  max-width: none;
  object-fit: cover;
}

/* ---- Bespoke "consultation" card — Figma 5882:46804: center-anchored at
   calc(50%+224.68px)/calc(50%+75.82px). No explicit width/height in Figma
   (auto-layout "hug contents") -> width:max-content lets the card shrink
   to its widest row (the status pill) exactly like Figma's auto-layout,
   instead of a hand-measured px guess. ---- */

.sec-healthcare-hero__card {
  position: absolute;
  z-index: 4;
  left: 65.6%;
  top: 60.05%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--w24);
  width: var(--w281);
  height: var(--w235);
  padding: var(--w24);
  background: var(--white);
  border-radius: var(--w16);
  box-shadow: 0 5px 16px rgba(17, 36, 74, 0.12);
}

.sec-healthcare-hero__hc-status {
  display: flex;
  align-items: center;
  gap: var(--w10);
  padding: var(--w11) var(--w11);
  background: #eff2f8;
  border: 0.811px solid var(--blue);
  border-radius: var(--w8);
}

.sec-healthcare-hero__hc-status img {
  flex: none;
  width: var(--w19);
  height: var(--w19);
}

.sec-healthcare-hero__hc-status span {
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: var(--w19);
  color: var(--blue);
  white-space: nowrap;
}

.sec-healthcare-hero__hc-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--w18);
}

.sec-healthcare-hero__hc-prompt {
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 400;
  line-height: var(--w19);
  color: var(--navy);
}

.sec-healthcare-hero__hc-options {
  display: flex;
  flex-direction: column;
  gap: var(--w9);
}

.sec-healthcare-hero__hc-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--w8) 0;
  background: #eff2f8;
  border-radius: var(--w8);
  box-shadow: 0 0.811px 1.621px rgba(5, 26, 48, 0.04);
  font-family: var(--font-ui);
  font-size: var(--w13);
  font-weight: 600;
  line-height: var(--w19);
  color: var(--navy);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .sec-healthcare-hero {
    min-height: var(--m732);
    padding: 0;
    background-image: url("/assets/industries/healthcare/hero/hero-bg-mobile-new.webp");
    --phone-canvas-left: calc((100% - var(--m393)) / 2);
    margin-top: calc(-1 * var(--m68));
  }

  .sec-healthcare-hero__inner {
    min-height: var(--m732);
    padding: 0;
    display: block;
  }

  .sec-healthcare-hero__content {
    position: absolute;
    left: 50%;
    top: var(--m151);
    transform: translateX(-50%);
    width: var(--m329);
    max-width: 84%;
    align-items: center;
    text-align: center;
  }

  .sec-healthcare-hero__eyebrow {
    justify-content: center;
    font-size: var(--m11);
    letter-spacing: 1.5px;
  }

  .sec-healthcare-hero__body {
    align-items: center;
    gap: var(--m32);
  }

  .sec-healthcare-hero__text {
    align-items: center;
    gap: var(--m12);
  }

  .sec-healthcare-hero__title {
    font-size: var(--m36);
    line-height: 1.2;
    text-align: center;
  }

  .sec-healthcare-hero__desc {
    text-align: center;
  }

  .sec-healthcare-hero__cta {
    align-self: center;
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
  }

  /* Photo — NOT mirrored at this breakpoint (Figma's mobile frame has no
     scaleY/rotate wrapper here, unlike desktop). */
  .sec-healthcare-hero__media {
    z-index: 5;
    left: calc(var(--phone-canvas-left) + var(--m13));
    bottom: 0;
    top: auto;
    width: var(--m311);
    max-width: none;
    height: var(--m275);
    max-height: none;
    border-radius: 0;
  }

  .sec-healthcare-hero__photo-flip {
    transform: none;
  }

  .sec-healthcare-hero__photo {
    left: -19.08%;
    top: 3.64%;
    width: 117.9%;
    height: 100%;
  }

  /* Mobile card — its own auto-layout numbers (get_design_context
     5882:50331), not a scale of the desktop card. */
  .sec-healthcare-hero__card {
    z-index: 2;
    left: calc(var(--phone-canvas-left) + var(--m157));
    top: auto;
    bottom: var(--m79);
    transform: none;
    gap: var(--m15);
    /* Figma 5882:50331: the phone card is its own 168x140 box. */
    width: var(--m168);
    height: var(--m140);
    padding: var(--m11);
    border-radius: var(--m8);
    box-shadow: 0 3.155px 10.095px rgba(17, 36, 74, 0.12);
  }

  .sec-healthcare-hero__hc-status {
    gap: var(--m6);
    padding: var(--m7) var(--m7);
    border-width: 0.511px;
    border-radius: var(--m5);
  }

  .sec-healthcare-hero__hc-status img {
    width: var(--m12);
    height: var(--m12);
  }

  .sec-healthcare-hero__hc-status span {
    font-size: var(--m8);
    line-height: var(--m12);
  }

  .sec-healthcare-hero__hc-body {
    gap: var(--m11);
  }

  .sec-healthcare-hero__hc-prompt {
    font-size: var(--m8);
    line-height: var(--m12);
  }

  .sec-healthcare-hero__hc-options {
    gap: var(--m6);
  }

  .sec-healthcare-hero__hc-option {
    padding: var(--m5) 0;
    border-radius: var(--m5);
    box-shadow: 0 0.511px 1.023px rgba(5, 26, 48, 0.04);
    font-size: var(--m8);
    line-height: var(--m12);
  }
}