/*
  Case Study Detail — Key Problem panel + Stats row.
  Source: Figma 772:2407 (Frame 97671, 1196×350 at 1600 viewport).

  Structure:
    - Light-teal rounded panel (bg #F4FDFC, border #D7D7D7, 8px radius),
      2px teal left rule inside, "Key Problem" heading + body paragraph.
    - 48px gap.
    - Horizontal 1px divider line spanning the content width.
    - 4-column stats row: large green number/label + small gray sublabel.

  This lives inside a shared `.case-study-body` narrow-column container
  (matches Figma's 1196px x 80px left inset). The container is defined in
  case-study-article.css so all narrow-body sections share it.
*/

.case-study-key-problem {
  padding-inline: var(--space-inline);
}

.case-study-key-problem__inner {
  max-width: 1196px;
  margin-inline: auto;
  /* The section itself carries no vertical padding, so the panel would butt
     straight up against the hero above it. 40px matches the flat section
     rhythm used by the other non-hero sections. */
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 80px);
}

/* --- Key Problem panel --- */
.case-study-key-problem__panel {
  background: #F4FDFC;
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  padding: var(--space-6);
}

.case-study-key-problem__panel-inner {
  border-left: 2px solid var(--color-teal);
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study-key-problem__heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: #171717;
  margin: 0;
}

.case-study-key-problem__body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-body-copy);
  margin: 0;
}

/* --- Divider + stats row --- */
.case-study-key-problem__divider {
  height: 1px;
  border: 0;
  /* Figma 772:2415 — not a flat rule: a 1px line that fades out to nothing at
     both ends, solid --color-border (#B2B2B2) at the 49% midpoint. */
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-border) 49%,
    transparent 100%
  );
  margin: 0;
}

.case-study-key-problem__stats {
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-study-key-problem__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 98px;
  flex: 1 1 180px;
}

.case-study-key-problem__stat-value {
  font-family: var(--font-family-display);
  font-size: clamp(24px, 20px + 0.6vw, 30px);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  color: var(--color-green-2);
  margin: 0;
}

.case-study-key-problem__stat-label {
  font-family: var(--font-family-display);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-body-copy);
  margin: 0;
}

@media (max-width: 900px) {
  .case-study-key-problem__inner {
    gap: 40px;
  }

  .case-study-key-problem__stats {
    gap: var(--space-6);
  }
}

@media (max-width: 600px) {
  .case-study-key-problem__stat {
    flex-basis: 45%;
  }
}

/* ---------------------------------------------------------------
   Wide-screen pass (≥1600px). The base max-width caps at 1196px
   which leaves large gutters inside the 2500 frame. Scale up to
   ~8/12 of the 2500 container (1667px) at the top of the range,
   smooth handoff at 1600 (the clamp resolves to exactly 1196).
   Applies to both the Key Problem panel and the stats row since
   they share __inner.

   slope     = (1667 - 1196) / (2500 - 1600) = 471 / 900
             = 0.5233 per px = 52.333vw / 100
   intercept = 1196 - 0.5233 × 1600 = 358.667
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  .case-study-key-problem__inner {
    max-width: clamp(1196px, 358.667px + 52.333vw, 1667px);
  }
}