/* ============================================================
   The Problem Section
   Figma node: 1:21 | Canvas: 1440×995px
   Navy bg, left image with green offset card, right headline+body
   Full-width bold tagline at bottom
   ============================================================ */

.bs-problem {
  background: #21254a;
  overflow: hidden;
}

/* ── Upper: two-column layout ── */
.bs-problem__inner {
  display: flex;
  align-items: flex-start;
  /* Figma: content starts at x=119 on 1440px = 8.3vw */
  padding: clamp(50px, 9vw, 130px) clamp(30px, 8.3vw, 119px) clamp(30px, 3.5vw, 50px);
  max-width: 1440px;
  margin: 0 auto;
  /* Figma: gap between image end (482px) and content start (542px) = 60px */
  gap: clamp(24px, 4.2vw, 60px);
}

/* ── Left: layered image ── */
.bs-problem__image-col {
  position: relative;
  flex-shrink: 0;
  /* Accommodate both the card and the offset photo */
  width: clamp(220px, 29vw, 420px);
  height: clamp(300px, 34vw, 490px);
  /* Figma: image col starts at y=147, card and photo overlap */
  margin-top: clamp(0px, -1vw, 0px);
}

/* Green offset card behind the photo — Figma: bg #b0f288, rounded 20px, shadow */
.bs-problem__image-card {
  position: absolute;
  top: 0;
  left: 0;
  /* Figma card: 354×410px; photo offset is 28px right, 25px down */
  width: clamp(195px, 24.6vw, 354px);
  height: 94%;
  background: #b0f288;
  border-radius: clamp(10px, 1.4vw, 20px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Photo — overlaid, offset right and down from the green card */
.bs-problem__image-wrap {
  position: absolute;
  /* Figma offset: +28px right, +25px down vs card */
  top: clamp(12px, 1.7vw, 25px);
  left: clamp(14px, 1.9vw, 28px);
  /* Figma photo: 363×433px */
  width: clamp(200px, 25.2vw, 363px);
  height: clamp(260px, 30.1vw, 433px);
  border-radius: clamp(10px, 1.4vw, 20px);
  overflow: hidden;
}

.bs-problem__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Right: content ── */
.bs-problem__content {
  flex: 1;
  min-width: 0;
}

/* Headline — mixed weights, all uppercase */
/* "MEDICINE" (black 900, 55px) + "TRAINS YOU…" (semibold 600, 46px) + "THE PROBLEM." (black 900, 55px) */
.bs-problem__headline {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 clamp(14px, 1.4vw, 20px) 0;
  line-height: 1.2;
}

.bs-problem__headline-strong {
  font-weight: 900;
  font-size: clamp(28px, 3.8vw, 55px);
}

.bs-problem__headline-body {
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 46px);
}

/* Body paragraphs — Inter Regular 400, 27px */
.bs-problem__body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.9vw, 27px);
  line-height: 1.65;
  color: #ffffff;
}

.bs-problem__body p {
  margin: 0 0 0.9em 0;
}

.bs-problem__body p:last-child {
  margin-bottom: 0;
}

/* ── Bottom: full-width tagline ── */
/* Figma: x=100, y=660, w=1287, font-extrabold 800, 55px, white */
.bs-problem__tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.8vw, 55px);
  color: #ffffff;
  line-height: 1.25;
  padding: clamp(30px, 2.8vw, 40px) clamp(30px, 6.9vw, 100px) clamp(50px, 6.9vw, 100px);
  max-width: 1440px;
  margin: 0 auto;
}

/* ── Tablet: 768px – 1023px ── */
@media (max-width: 1023px) {
  .bs-problem__inner {
    flex-direction: column;
    align-items: center;
    padding: 60px 32px 36px;
    gap: 40px;
  }

  .bs-problem__image-col {
    width: clamp(220px, 55vw, 380px);
    height: clamp(280px, 68vw, 460px);
  }

  .bs-problem__image-card {
    width: 85%;
  }

  .bs-problem__image-wrap {
    width: 90%;
    height: 96%;
  }

  .bs-problem__tagline {
    padding: 24px 32px 56px;
  }
}

/* ── Mobile: < 600px ── */
@media (max-width: 599px) {
  .bs-problem__inner {
    padding: 40px 20px 28px;
  }

  .bs-problem__image-col {
    width: clamp(200px, 70vw, 320px);
    height: clamp(250px, 86vw, 400px);
    align-self: center;
  }

  .bs-problem__headline-strong {
    font-size: clamp(24px, 6.5vw, 36px);
  }

  .bs-problem__headline-body {
    font-size: clamp(20px, 5.5vw, 28px);
  }

  .bs-problem__body {
    font-size: clamp(14px, 4vw, 18px);
  }

  .bs-problem__tagline {
    font-size: clamp(18px, 5.5vw, 28px);
    padding: 24px 20px 48px;
  }
}