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

/* ==========================================================================
   1. Hero
   ========================================================================== */
.case3 .cs-hero__title {
  max-width: 51.6875rem; /* 827px */
  font-size: var(--fs-h2); /* 62px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  color: var(--color-text-bright);
}

/* Inter, and 42 clear of the headline (173 + 186 = 359 → 401) */
.case3 .cs-hero__text {
  margin-block-start: 2.625rem; /* 42px */
  font-family: var(--font-primary);
}

/* The frame starts the fade 30px higher here than on the other two cases */
.case3 .cs-hero__fade {
  inset-block-start: 35.875rem; /* 574px */
}

/* ==========================================================================
   2. Before — four paragraphs, the pivot one called out in lime
   ========================================================================== */

/* 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. */
.case3 .cs-before__grid {
  grid-template-columns: 49.18% 41.99%;
  gap: 1.484%; /* 20 / 1348 */
  justify-content: start;
}

.case3 .cs-before .cs-title {
  max-width: 56.5625rem; /* 905px */
  margin-inline: auto;
}

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

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

/* The phrase the frame sets apart, in the brand lime. Used on a <span> inside
   the copy, so it inherits the paragraph's face, size and leading — only the
   weight and the colour change, exactly as the mockup draws it. */
.case3 .cs-before__pivot {
  font-weight: 700;
  color: var(--color-lime);
}

/* ==========================================================================
   3. The Solution — five cards over two rows: 2 / 3
   ========================================================================== */
.case3 .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;
}

/* Three 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.
   Cards 02 and 03 are the flat translucent black the base rule already sets. */
.case3 .cs-card {
  border-color: rgba(226, 226, 226, 0.15);
  background-image: linear-gradient(
    180deg,
    #000000 0%,
    #1a0c30 50%,
    #30165a 100%
  );
}

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

/* The frame runs 16 between a card's title and its copy, not the 12 case 1 uses */
.case3 .cs-card__body {
  gap: 1rem; /* 16px */
}

/* Each card starts its copy at its own height in the frame — 216, 200 on the
   first row and 137 across the second. Less the 28 of padding, the 40 the
   number occupies and the 12 card gap. */
/* Case 1 gives its *third* row a taller box and a lower copy start. Case 3
   only has two rows, so the second one would inherit those by being
   :last-child — matched at the same specificity here to put it back. */
.case3 .cs-bento__row .cs-card {
  min-height: 21.375rem; /* 342px */
  border-radius: 0.625rem;
}

.case3 .cs-bento__row .cs-card__body {
  margin-block-start: 3.5625rem; /* 57px — the second row */
}

.case3 .cs-bento .cs-bento__row:first-child .cs-card:first-child .cs-card__body {
  margin-block-start: 8.5rem; /* 136px */
}

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

.case3 .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. */
.case3 .cs-card__puzzle--3 {
  inset-block-start: 63%;
  inset-inline-start: 68.4%; /* 303 / 443 */
  width: 18%;
}

/* ==========================================================================
   4. Results — a list of outcomes plus a tracking note, no metric board
   ========================================================================== */
.case3 .cs-results__panel {
  grid-template-columns: 57.88% 39.49%; /* 749 and 511 of the 1294 inside */
  gap: 2.63%; /* 34 / 1294 */
  align-items: start;
}

/* No ratio: the padded box takes its height from the report itself, which is
   what puts the panel at the frame's 642. */
.case3 .cs-results__media {
  aspect-ratio: auto;
  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);
}

.case3 .cs-results__media img {
  height: auto;
  border-radius: 0.625rem;
  object-fit: contain;
}

.case3 .cs-results__side {
  display: flex;
  flex-direction: column;
  gap: 1.875rem; /* 30px */
}

.cs-pills {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* 12px */
}

.cs-pill {
  display: flex;
  align-items: center;
  min-height: 3.125rem; /* 50px */
  padding: 0.75rem 1.25rem; /* 20 inline; the block padding centres the label */
  border-radius: 0.625rem;
  background-color: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  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-note--tracking {
  gap: 0.9375rem; /* 15px */
  min-height: 0;
  padding: 1.25rem; /* 20px */
  background-color: rgba(255, 255, 255, 0.06);
}

.cs-note--tracking .cs-note__title,
.cs-note--tracking .cs-note__text {
  color: var(--color-text-bright);
}

.cs-note--tracking .cs-note__text {
  max-width: none;
}

/* The closing statement is set off by a rule down its left edge. Swap the hex
   for var(--color-lime) if it should follow the brand accent instead. */
.cs-note--tracking .cs-note__text:last-child {
  border-inline-start: 2px solid #e5372a;
  padding-inline-start: 0.875rem; /* 14px */
}

.cs-note__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline-start: 1.5rem; /* the frame indents the bullets by 40 − 16 */
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text-bright);
}

.cs-note__list li {
  position: relative;
}

.cs-note__list li::before {
  content: "•";
  position: absolute;
  inset-inline-start: -1rem;
  color: var(--color-text);
}

/* ==========================================================================
   5. What the Client Gained — three labelled reports, no section heading
   ========================================================================== */
.case3 .cs-slide {
  flex-basis: 53.625rem; /* 858px */
}

.case3 .cs-slide__media {
  aspect-ratio: 858 / 414;
  border-radius: 0.375rem;
}

/* Two 640-wide columns 32 apart, as the frame lays them out */
.case3 .cs-gained__outro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 40rem));
  gap: 2rem; /* 32px */
  max-width: none;
  font-family: "Manrope", var(--font-primary);
  line-height: 1.4;
  letter-spacing: normal;
}

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

/* ==========================================================================
   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) {
  .case3 .cs-results .container {
    --container-gutter: 3.125rem; /* 50px */
  }
}

@media (max-width: 78.75em) {
  .case3 .cs-before__grid,
  .case3 .cs-results__panel {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

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

  .case3 .cs-gained__outro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.9375em) {
  .case3 .cs-hero__title {
    font-size: 2rem; /* 32px */
    letter-spacing: -0.32px;
  }

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

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

  /* The 393 frame clips the copy to 120px and offers "Read more" */
  .case3 .cs-before__copy {
    max-height: 7.5rem; /* 120px */
    padding-block: 0;
    overflow: hidden;
  }

  .case3 .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. */
  .case3 .cs-bento__row .cs-card {
    flex: 0 0 auto;
    min-height: 13.625rem; /* the shortest card in the 393 frame, 218px */
    padding-inline: 1.125rem; /* 18px */
  }

  /* The 393 frame stacks the copy under the number rather than dropping it a
     fixed distance, so the desktop per-card offsets go. */
  .case3 .cs-bento__row .cs-card__body,
  .case3 .cs-bento .cs-bento__row:first-child .cs-card:first-child .cs-card__body,
  .case3 .cs-bento .cs-bento__row:first-child .cs-card:last-child .cs-card__body {
    margin-block-start: auto;
    gap: 0.75rem; /* 12px */
  }

  /* Both puzzles tuck into their card's top-right corner in the 393 frame */
  .case3 .cs-card__puzzle--2,
  .case3 .cs-card__puzzle--3 {
    inset-block-start: 1.4%;
    inset-inline-start: auto;
    inset-inline-end: 1%;
  }

  .case3 .cs-card__puzzle--2 {
    width: 22.9%; /* 82.6 / 361 */
  }

  .case3 .cs-card__puzzle--3 {
    width: 16.6%; /* 59.8 / 361 */
  }

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

  .case3 .cs-results__side {
    gap: var(--space-lg);
  }

  .cs-note--tracking {
    gap: var(--space-lg);
    padding: var(--space-md);
  }

  .case3 .cs-slide {
    flex-basis: 100%;
  }

  .case3 .cs-gained__outro {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem; /* 12px */
  }

  .case3 .cs-gained__col {
    gap: 0.75rem;
    padding-inline-start: 0;
  }
}