/* Case-study components not covered by the Webflow stylesheet.
   Everything else on the page reuses the site's existing classes
   (.h1, .subtitle, .h3, .body-text, .problem-framing, .word-highlight, ...). */

/* Wide visuals: Figma lays these out at 1193px, wider than the 820px text column. */
.image.cs-wide {
  max-width: 1193px;
}

/* Business impact: two metrics side by side inside a .problem-framing card. */
.cs-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 48px;
  grid-row-gap: 32px;
  padding: 8px 12px 0;
}

.cs-metric-value {
  color: var(--black);
  margin-bottom: 8px;
  font-family: Karla, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 130%;
}

/* User interviews: label column + content column. */
.cs-interviews {
  background-color: var(--white);
  border-radius: 12px;
  margin-top: 48px;
  padding: 24px;
}

.cs-interview-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-column-gap: 16px;
  margin-top: 24px;
}

.cs-interview-label {
  color: var(--black);
  font-family: Karla, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
}

.cs-interview-list {
  color: var(--dark-grey);
  margin: 0;
  padding-left: 20px;
  font-family: Karla, sans-serif;
  font-size: 18px;
  line-height: 150%;
}

.cs-interview-list li + li {
  margin-top: 8px;
}

/* Arrow between a user insight and the decision it led to. */
.cs-arrow {
  display: block;
  width: 40px;
  margin: 4px auto;
}

/* Diagram sitting inside a .word-highlight card, under its text. */
.cs-card-diagram {
  display: block;
  width: 100%;
  max-width: 525px;
  margin: 24px auto 4px;
}

/* Screen recordings: grey card like the Figma media frames, video centered inside. */
.cs-media-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1193px;
  margin: 48px auto 0;
  padding: 48px;
  background-color: var(--grey-background);
  border-radius: 12px;
}

/* The recordings (2794x2070) have a black margin around the app window, which
   sits at x 112-2680, y 116-1969. Crop to 2px inside that box so no black edge
   shows, using percentages so it holds at any width. */
.cs-video-crop {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 2564 / 1849;
  border-radius: 12px;
  box-shadow: 0 2px 6px #0e31631f;
}

.cs-video-crop video {
  position: absolute;
  left: -4.446%;   /* 114 / 2564 */
  top: -6.382%;    /* 118 / 1849 */
  width: 108.97%;  /* 2794 / 2564 */
  height: auto;
  display: block;
}

@media screen and (max-width: 767px) {
  .cs-media-card {
    padding: 16px;
  }
}

@media screen and (max-width: 479px) {
  .cs-metrics,
  .cs-interview-row {
    grid-template-columns: 1fr;
  }

  .cs-interview-row {
    grid-row-gap: 8px;
  }

  .cs-metric-value {
    font-size: 30px;
  }
}