/* ── Case studies ──────────────────────────────────────────────────────────
   The case-studies landing page reuses the blog grid + card (css/blog.css) and
   the individual story pages reuse the .post* article styles (also css/blog.css).
   This file only adds the case-study-specific extras layered on top of those:
   a company eyebrow + headline metric on the cards, and a metrics strip + a
   customer pull-quote on the individual story pages. Keeping it separate leaves
   blog.css untouched.                                                          */

/* ── Hero featured stories ──────────────────────────────────────────────────
   Same treatment as the blog hero (see css/blog.css `.hero--blog`): split the
   full-height hero top→bottom so the h1 pins near the top and three featured
   stories sit just above the fold. The card shell + responsive grid come from
   `.blog-featured*` (css/blog.css); these rules only add the case-study extras
   (company eyebrow already defined below + a dark-card metric variant) and the
   hero split, scoped to .hero--case-studies so the blog hero is untouched. */
@media (min-width: 1301px) {
  /* Split top→bottom and tighten the vertical padding a touch: the case-study
     featured cards carry an extra metric line, so the slightly smaller padding
     keeps all three cards above the fold on a typical laptop height. */
  .hero--case-studies {
    justify-content: space-between;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* The case-study card carries an extra metric line vs the blog card, so use a
   shorter (banner) image to keep the overall card height close to the blog's
   and the row above the fold. */
.cs-featured .blog-featured__img { aspect-ratio: auto; height: 124px; }

/* Push the metric to the bottom of the (stretched) card so the three numbers
   line up across cards regardless of title length. */
.cs-featured .blog-featured__body { flex: 1; }
.cs-featured .cs-card__metric { margin-top: auto; padding-top: 4px; }
/* The shared metric label is dark (for the white grid cards); on the dark
   featured card it needs to be light. The number is already orange. */
.cs-featured .cs-card__metric-num { font-size: 26px; }
.cs-featured .cs-card__metric-label { color: rgba(255, 255, 255, 0.55); }

/* ── Landing-page card extras ─────────────────────────────────────────────── */

/* Company + industry eyebrow, sits above the card title. */
.cs-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}

/* Headline metric — the single number that sells the story. */
.cs-card__metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.cs-card__metric-num {
  font-family: var(--font-pixel);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.01em;
}
.cs-card__metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

/* ── Individual story page: metrics strip ───────────────────────────────────
   A row of headline numbers between the featured-image hero and the article
   body. Sits on the dark page background, so text is light. Aligned to the
   reading column so it lines up with the prose below it. */
.cs-metrics {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 56px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 56px;
}
.cs-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-metric__num {
  font-family: var(--font-pixel);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.02em;
}
.cs-metric__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* ── Individual story page: customer pull-quote ─────────────────────────────
   Lives inside the .post-body reading column. Orange left rule, large quote,
   mono attribution. */
.cs-quote {
  margin: 2.4em 0;
  padding: 6px 0 6px 28px;
  border-left: 3px solid var(--orange);
}
.cs-quote__text {
  font-family: var(--font-pixel);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.cs-quote__cite {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.cs-quote__cite span {
  color: rgba(255, 255, 255, 0.55);
}

/* ── Responsive ─────────────────────────────────────────────────────────────*/
@media (max-width: 720px) {
  .cs-metrics {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
    margin-top: 40px;
  }
  .cs-metric__num { font-size: 38px; }
  .cs-quote__text { font-size: 22px; }
}