/* ==========================================================================
   MRIYA Marketing — case-2.css
   Only what case 2 does differently from case 1. Everything else comes from
   case-study.css, which is loaded first.
   ========================================================================== */

/* ==========================================================================
   1. Hero — one light headline, no bold segment
   ========================================================================== */
.case2 .cs-hero__title {
  max-width: 58.125rem; /* 930px */
  font-size: var(--fs-h2); /* 62px */
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
}

/* Only the opening words carry weight; the rest of the line stays at 200 */
.case2 .cs-hero__strong {
  font-weight: 600;
}

/* Inter, not the display face — and the frame leaves 42 between it and the
   headline (173 + 186 = 359 → 401), not the 20 case 1 uses. */
.case2 .cs-hero__text {
  margin-block-start: 2.625rem; /* 42px */
  font-family: var(--font-primary);
}

/* ==========================================================================
   2. Before — two paragraphs beside the photo, no numbered list
   ========================================================================== */

/* 663 + 20 + 566 of the 1348 content box; the frame leaves the remaining 99
   empty on the right rather than stretching the copy into it. */
.case2 .cs-before__grid {
  grid-template-columns: 49.18% 41.99%;
  gap: 1.484%; /* 20 / 1348 */
  justify-content: start;
}

.case2 .cs-before__media {
  aspect-ratio: 663 / 429;
}

.case2 .cs-before__copy {
  gap: 0.9rem; /* 14.4px — the second paragraph's own margin in the frame */
  padding-block: 2rem; /* 32px */
}

.case2 .cs-before__lede {
  font-family: "Manrope", var(--font-primary);
  line-height: 1.4;
  letter-spacing: normal;
  color: #ffffff;
}

/* ==========================================================================
   3. The Solution — 7 cards over three rows: 2 / 3 / 2, all equal within a row
   ========================================================================== */
.case2 .cs-solution .cs-title {
  max-width: 49.9375rem; /* 799px — breaks after "LSA," as the frame does */
  margin-inline: auto;
}

.case2 .cs-card {
  flex: 1 1 0;
  min-height: 21.375rem; /* 342px */
  padding-inline: 1.75rem; /* the number and the copy both start at x=28 */
  border-radius: 0.625rem;
}

.case2 .cs-bento__row:last-child .cs-card {
  min-height: 21.375rem;
  border-radius: 0.75rem; /* the last row is 12 in the frame */
}

/* Four cards carry the violet wash — a black-to-#371866 ramp under two dark
   fades and a second pass of itself at 80%, which nets out to these stops.
   The other three are the flat translucent black the base rule already sets. */
.case2 .cs-card {
  border-color: rgba(226, 226, 226, 0.15);
  background-image: linear-gradient(
    180deg,
    #000000 0%,
    #1a0c30 50%,
    #30165a 100%
  );
}

.case2 .cs-card--dark {
  border-color: rgba(255, 255, 255, 0.15);
  background-image: none;
}

/* Each card starts its copy at its own height in the frame — 215, 200, 137,
   137, 137, 171 and 117 from the card's top. Subtracting the 28 of padding,
   the 40 the number occupies and the 12 card gap leaves these. */
.case2 .cs-card__body,
.case2 .cs-bento__row:last-child .cs-card__body {
  margin-block-start: 3.5625rem; /* 57px — rows 2's three cards */
}

.case2 .cs-bento__row:first-child .cs-card:first-child .cs-card__body {
  margin-block-start: 8.4375rem; /* 135px */
}

.case2 .cs-bento__row:first-child .cs-card:last-child .cs-card__body {
  margin-block-start: 7.5rem; /* 120px */
}

.case2 .cs-bento__row:last-child .cs-card:first-child .cs-card__body {
  margin-block-start: 5.6875rem; /* 91px */
}

.case2 .cs-bento__row:last-child .cs-card:last-child .cs-card__body {
  margin-block-start: 2.3125rem; /* 37px */
}

.case2 .cs-card__puzzle--2 {
  inset-block-start: 21%;
  inset-inline-start: 53%;
  width: 33%;
}

/* The frame clips this one inside a 112×84 box; sized to what that leaves
   visible so the piece sits whole above the card's bottom edge. */
.case2 .cs-card__puzzle--4 {
  inset-block-start: 63%;
  inset-inline-start: 68.4%; /* 303 / 443 */
  width: 18%;
}

.case2 .cs-card__puzzle--6 {
  inset-block-start: 17%;
  inset-inline-start: 32%;
  width: 22%;
}

/* ==========================================================================
   4. Results — the metric board replaces case 1's checklist
   ========================================================================== */
.case2 .cs-results__panel {
  grid-template-columns: 749fr 461fr;
  gap: 2.125rem; /* 34px */
}

.case2 .cs-results__media {
  aspect-ratio: 689 / 335;
  padding: 1.875rem; /* 30px */
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.case2 .cs-results__media img {
  border-radius: 0.375rem;
}

.cs-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 30 + the 10 the frame hangs under the heading */
  padding: 0.5625rem 1.3125rem; /* 9 / 21 — what's left of the 461×379 box */
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.cs-scoreboard__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-normal); /* 2 lines → 78, the frame's 77.2 */
  color: var(--color-text);
}

.cs-scoreboard__list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem; /* 15px */
}

.cs-scoreboard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg); /* 20px */
  min-height: 3.1rem; /* 49.6px */
  padding: 0.3125rem 1rem;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.cs-scoreboard__row dt {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.cs-scoreboard__row dd {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

/* ==========================================================================
   5. What the Client Gained — four labelled report slides, no summary column
   ========================================================================== */
.case2 .cs-slide__media {
  aspect-ratio: 1120 / 635;
  border-radius: 0.375rem;
}

/* Two 640-wide columns 32 apart, as the frame lays them out — three
   paragraphs on the left, two on the right. */
.case2 .cs-gained__outro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 40rem));
  gap: 2rem; /* 32px */
  max-width: none;
  line-height: 1.4;
}

.case2 .cs-gained__col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
  padding-inline-start: 0.625rem; /* 10px */
}

.case2 .cs-gained__col strong {
  font-weight: 600;
}

.case2 .cs-gained__cta {
  color: var(--color-lime);
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
/* Results is the one section the frame insets by 50 rather than 48. Scoped
   above the mobile breakpoint so it can't shadow the 16px mobile gutter. */
@media (min-width: 48em) {
  .case2 .cs-results .container {
    --container-gutter: 3.125rem; /* 50px */
  }
}

@media (max-width: 78.75em) {
  .case2 .cs-gained__outro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case2 .cs-before__grid,
  .case2 .cs-results__panel {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .case2 .cs-before__grid {
    gap: var(--space-2xl);
  }
}

@media (max-width: 47.9375em) {
  .case2 .cs-hero__title {
    font-size: 2rem; /* 32px */
    font-weight: 600; /* the 393 frame sets it solid, unlike the desktop 200 */
    letter-spacing: -0.32px;
  }

  .case2 .cs-before__grid {
    gap: var(--space-lg); /* 20px */
  }

  /* The 393 frame clips the two paragraphs to 108px and offers "Read more" */
  .case2 .cs-before__copy {
    max-height: 6.75rem; /* 108px — a little over five lines */
    padding-block: 0;
    overflow: hidden;
  }

  .case2 .cs-before__copy.is-expanded {
    max-height: none;
  }

  /* `flex: 1 1 0` gives a zero main-axis basis — once the row stacks that is
     the card's height, so the basis has to go back to the content. */
  .case2 .cs-card,
  .case2 .cs-bento__row:last-child .cs-card {
    flex: 0 0 auto;
    min-height: 14rem; /* the shortest card in the 393 frame, 224px */
    padding-inline: 1.125rem; /* 18px in the 393 frame */
  }

  /* The 393 frame stacks the copy right under the number, so the desktop
     per-card drops are dropped and the copy settles to the card's bottom. */
  .case2 .cs-card__body,
  .case2 .cs-bento__row:first-child .cs-card:first-child .cs-card__body,
  .case2 .cs-bento__row:first-child .cs-card:last-child .cs-card__body,
  .case2 .cs-bento__row:last-child .cs-card:first-child .cs-card__body,
  .case2 .cs-bento__row:last-child .cs-card:last-child .cs-card__body {
    margin-block-start: auto;
  }

  /* The 393 frame crops the Before photo shorter than the desktop one */
  .case2 .cs-before__media {
    aspect-ratio: 361 / 193;
  }

  /* The 393 frame parks each puzzle in its own spot; the cards are all 361
     wide there, so the horizontal insets stay proportional and the tops,
     being a few pixels, are given outright. */
  .case2 .cs-card__puzzle--2,
  .case2 .cs-card__puzzle--4,
  .case2 .cs-card__puzzle--6 {
    inset-inline-start: auto;
  }

  .case2 .cs-card__puzzle--2 {
    inset-block-start: 0.1875rem; /* 3px */
    inset-inline-end: 1%; /* 3.6 / 361 */
    width: 25.3%; /* 91.4 / 361 */
  }

  .case2 .cs-card__puzzle--4 {
    inset-block-start: 0.3125rem; /* 5px */
    inset-inline-end: 0.2%;
    width: 21%; /* 75.9 / 361 */
  }

  .case2 .cs-card__puzzle--6 {
    inset-block-start: 1.25rem; /* 20px */
    inset-inline-end: 18.6%; /* 67 / 361 */
    width: 20.7%; /* 74.8 / 361 */
  }

  .case2 .cs-gained__outro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .case2 .cs-gained__col {
    gap: var(--space-sm);
    padding-inline-start: 0;
  }

  .case2 .cs-results__media {
    padding: 0.5rem;
  }

  .cs-scoreboard {
    gap: 0.75rem; /* 12px in the 393 frame */
    padding: var(--space-md);
  }

  .cs-scoreboard__title {
    font-size: var(--fs-h4); /* 24px */
  }

  .cs-scoreboard__row dd {
    font-size: var(--fs-base);
  }
}