/* ============================================================
   App Not Another Wellness App — #59acf8 split section
   Figma node 55:917
   ============================================================ */

/* ── Section ── */
.bs-not-wellness {
  background-color: #59acf8;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 96px);
}

.bs-not-wellness__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Left column ── */
.bs-not-wellness__left {
  flex: 0 0 566px;
  max-width: 566px;
  position: relative; /* anchor for decorative vector */
}

.bs-not-wellness__heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.3;
  color: #21254a;
  margin: 0 0 25px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bs-not-wellness__heading .accent {
  color: #b0f288;
}

/* Decorative swoosh arrow — absolutely positioned over heading/body seam.
   Figma: left: 96px, top: 285.33px from section (section-pad-top = 100px)
   → relative to left col top: 285.33 - 100 = 185.33px */
.bs-not-wellness__vector {
  position: absolute;
  top: 185px;
  left: 0;
  width: clamp(220px, 30vw, 391px);
  pointer-events: none;
  z-index: 1;
}

.bs-not-wellness__vector img {
  display: block;
  width: 100%;
  height: auto;
}

.bs-not-wellness__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.55;
  color: #21254a;
  margin: 0;
  letter-spacing: 0;
}

/* ── Right column — card stack ── */
.bs-not-wellness__cards {
  flex: 0 0 557px;
  max-width: 557px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bs-not-wellness__card {
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Icon sprite container ──
   Figma uses a single 1086×1448 sprite sheet.
   Container is 100×96px with overflow:hidden.
   Each img is positioned absolutely at 339.38%×470.13% of the container,
   with per-card top offset to reveal the correct icon row. */
.bs-not-wellness__icon-wrap {
  width: 100px;
  height: 96px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.bs-not-wellness__icon-wrap img {
  position: absolute;
  width: 339.38%;
  height: 470.13%;
  max-width: none;
  display: block;
}

/* Per-card offsets — derived directly from Figma node geometry */
.bs-not-wellness__icon-wrap--1 img { left: -9.37%; top: -18.18%; }
.bs-not-wellness__icon-wrap--2 img { left: -9.37%; top: -135.71%; }
.bs-not-wellness__icon-wrap--3 img { left: -8.87%; top: -251.3%; }
.bs-not-wellness__icon-wrap--4 img { left: -9.37%; top: -358.77%; }

.bs-not-wellness__card-text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  color: #21254a;
  flex: 1;
  margin: 0;
  letter-spacing: 0;
  min-width: 0;
}

/* ── Responsive: 1024px — flex columns start shrinking ── */
@media (max-width: 1024px) {
  .bs-not-wellness__left {
    flex: 1 1 45%;
    max-width: none;
  }

  .bs-not-wellness__cards {
    flex: 1 1 45%;
    max-width: none;
  }

  .bs-not-wellness__inner {
    gap: 28px;
  }
}

/* ── Responsive: 599px — stack columns ── */
@media (max-width: 599px) {
  .bs-not-wellness__inner {
    flex-direction: column;
    gap: 32px;
  }

  .bs-not-wellness__left,
  .bs-not-wellness__cards {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Hide decorative vector on mobile — position would be off */
  .bs-not-wellness__vector {
    display: none;
  }

  .bs-not-wellness__card {
    padding: 20px;
    gap: 20px;
  }

  /* Scale icon container down proportionally */
  .bs-not-wellness__icon-wrap {
    width: 72px;
    height: 69px;
  }
}