/* ==========================================================================
   KOBIL — Industry Healthcare — Section: Overview (Aug 2026 redesign).
   Figma: D-Industries/Healthcare → overview, node 5882:46827 (desktop),
   5882:50349 (mobile).
   Eyebrow tag + a 2-column row: serif H2 (576px, TWO separate gradient
   spans around a plain "and") and a 1-paragraph body (488px), gap 91px,
   items-end (unlike the other 3 pages' items-center — Figma has this
   row's cross-axis alignment set to the bottom). Same pattern as
   css/industries/_shared/overview.css.
   ========================================================================== */

/* Per-page themed background wash accent, consumed by
   .page-surface--seamless::before in css/base.css — green (Secondary/Green #1DAC76) */
.page-surface--seamless {
  --surface-accent: #1dac76;
}

.sec-healthcare-overview {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: 100%;
  padding: var(--w80) var(--w80) 0;
}

.sec-healthcare-overview__tag {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-healthcare-overview__row {
  display: flex;
  gap: var(--w91);
  align-items: flex-end;
}

.sec-healthcare-overview__title {
  flex: 1 1 var(--w576);
  min-width: 0;
  max-width: var(--w576);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

.sec-healthcare-overview__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-overview__desc {
  flex: 1 1 var(--w488);
  min-width: 0;
  max-width: var(--w488);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

@media (max-width: 768px) {
  .sec-healthcare-overview {
    padding: var(--w64) var(--w40) 0;
  }

  .sec-healthcare-overview__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--w24);
  }

  .sec-healthcare-overview__title,
  .sec-healthcare-overview__desc {
    width: 100%;
    /* lift the desktop column caps — stacked, both run the full width */
    max-width: none;
    flex: 0 0 auto;
  }

  .sec-healthcare-overview__title {
    font-size: var(--w44);
  }
}

@media (max-width: 768px) {
  .sec-healthcare-overview {
    padding: var(--m48) var(--m24) 0;
  }

  .sec-healthcare-overview__title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .sec-healthcare-overview__desc {
    font-size: var(--m14);
    line-height: var(--m20);
  }
}