/*
  Case study page (CASE-STAFF-1, #194; Views/caseStudy.cshtml; module page umbraco/modules/case-studies.md).
  The figures, steps, quote and people use the Stats, Steps, Quote and Team sections' own CSS; this file adds the key facts
  row and the problem, and the one rule that makes the outcome figures display size on case study pages only (the Stats
  section is unchanged; on phones the tiles stack as Stats' do). Mobile first. Tokens only.
  Site hooks: --case-study-figure-fs (outcome figures), --case-study-text-max (the problem's measure).
*/
.case-study__title { margin: var(--space-8) 0 0; }

/* The outcome figures: display size, here only (#194); the Stats section itself is unchanged. */
.case-study__outcomes .stats__value { display: block; font-size: var(--case-study-figure-fs, var(--fs-display)); line-height: var(--lh-display); }
.case-study__outcomes .stats__label { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-heading); }

/* Key facts: label over value, two to a row on phones, one row from 768 px. */
.case-study__facts { padding: var(--section-space) var(--section-pad-inline, 0) var(--space-6); border-bottom: var(--border-width, 1px) solid var(--color-hairline); }
.case-study__facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: 0; }
.case-study__fact { min-width: 0; overflow-wrap: break-word; }
.case-study__fact dt { margin: 0; color: var(--color-eyebrow); font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); line-height: var(--lh-label); text-transform: uppercase; }
.case-study__fact dd { margin: var(--space-1) 0 0; color: var(--color-heading); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }

/* The problem: a readable column. */
.case-study__problem { max-width: var(--case-study-text-max, 44rem); margin: 0 auto; padding: var(--section-space) var(--section-pad-inline, 0); }
.case-study__eyebrow { margin: 0; }
.case-study__problem-heading { margin: var(--space-3) 0 0; font-size: var(--fs-h2); line-height: var(--lh-heading); overflow-wrap: break-word; }
.case-study__problem-text { margin-top: var(--space-5); line-height: var(--lh-body); }
.case-study__problem-text > :first-child { margin-top: 0; }
.case-study__problem-text > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .case-study__outcomes.stats--count-1 .stats__stat { grid-column: 1 / -1; }
  .case-study__facts-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .case-study__outcomes.stats--count-1 .stats__list { grid-template-rows: auto; }
}