/* =============================================================================
   A case study

   Every class here is new. Nothing redefines one the site already owns —
   StylesheetIsolationTests enforces that, and now also enforces that no class
   dresses both a form control and a container.

   The page is ordered as an argument rather than as a brochure: who and what,
   then the measured results, then how it was done. A reader who stops after the
   numbers has still had the claim and the method.
   ========================================================================== */

.preview-flag {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: var(--space-3) var(--shell-pad);
  background: var(--warn-400);
  color: #1a1206;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.preview-flag:empty { display: none; }

/*
  Two spacing bugs lived in this one declaration.

  The top reserved 3rem under a fixed header that is 4.75rem tall, so the
  client's name sat twelve pixels *underneath* it. That is the exact mistake
  HeaderClearanceTests exists to catch, and it slipped through because `.case`
  was never added to that test's list — which it is now.

  The bottom added a section gap that base.css already adds to the last child of
  any `main.page`, so the space above the footer was 288px of padding plus the
  content's own. Nothing here needs to say it twice.
*/
.case {
  padding-block-start: calc(var(--header-h) + var(--space-12));
}

.case__body {
  max-inline-size: 52rem;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

/*
  Two parts on a wide screen: what it was, and what it became. The result sits
  beside the title rather than under three paragraphs, because a case study is
  read by people deciding whether to have the same conversation and the number
  is what they came for.
*/
.case__head {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-4) var(--space-8);
}

@media (min-width: 56rem) {
  .case__head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}

.case__intro { min-inline-size: 0; }

.case__client {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--brand-300);
  font-size: var(--text-sm);
  font-weight: 600;
}

.case__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.case__summary {
  margin: 0 0 var(--space-6);
  max-inline-size: 42rem;
  color: var(--text-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

/* A rule under the whole header, not under half of it. */
.case__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}

.case__fact dt {
  margin-block-end: 0.15rem;
  color: var(--text-dim);
  font-size: var(--text-2xs);
}

.case__fact dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   The evidence

   Ahead of the prose deliberately. This is the part a sceptical reader came
   for, and burying it under three paragraphs of narrative is how a case study
   turns into an advertisement.
   -------------------------------------------------------------------------- */

.case__results {
  margin-block: var(--space-8);
}

.case__section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
}

.results {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .results {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.result {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.result__label {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.result__change {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

/* Quantities read left-to-right even in Persian digits, and the arrow points
   the way the reading goes. */
.result__before,
.result__after {
  direction: ltr;
  unicode-bidi: isolate;
  font-weight: 700;
}

.result__before {
  color: var(--text-dim);
  font-size: var(--text-base);
  text-decoration: line-through;
}

.result__after {
  color: var(--ok-400);
  font-size: var(--text-xl);
}

.result__arrow { color: var(--text-dim); }

/*
  The method, under every number. Small, but present — a figure whose
  provenance is only on hover is a figure nobody checks, and the readers who
  would check are the ones worth convincing.
*/
.result__source {
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}

.case__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   The story
   -------------------------------------------------------------------------- */

.case__section {
  margin-block: var(--space-8);
}

.case__prose {
  margin: 0;
  max-inline-size: 42rem;
  color: var(--text-soft);
  line-height: var(--leading-normal);
  white-space: pre-line;
}

.case__stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -----------------------------------------------------------------------------
   Their words
   -------------------------------------------------------------------------- */

.case__quote {
  margin: var(--space-10) 0;
  padding: var(--space-6);
  border-inline-start: 2px solid var(--brand-400);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.case__quote-text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.case__quote-by {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
}

.case__quote-author { font-weight: 600; }
.case__quote-role { color: var(--text-muted); }

/* -----------------------------------------------------------------------------
   Foot
   -------------------------------------------------------------------------- */

.case__foot {
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--line);
}

.case__consent {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-xs);
}

/* =============================================================================
   The graphics

   Generated from the study, not commissioned for it. Nothing here needs an
   asset, a photographer or a designer, which is the only way a case study gets
   published the week it is written.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   The headline figure

   One measurement, at a size that survives being glanced at. The number leads
   and the label follows, because a reader scanning the page stops on the
   quantity and only then asks what it counts.
   -------------------------------------------------------------------------- */

.case__headline {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-6);
  border: 1px solid var(--line-brand);
  border-radius: var(--r-lg);

  /* The only gradient on the page, and it is a wash rather than a picture. */
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(30 133 230 / 14%), transparent 70%),
    var(--surface-2);
}

.headline__figure {
  margin: 0;

  /* A quantity reads left-to-right even in Persian digits. */
  direction: ltr;
  unicode-bidi: isolate;

  color: var(--text);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.headline__delta {
  margin: 0;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: rgb(52 211 153 / 12%);
  color: var(--ok-400);
  font-size: var(--text-sm);
  font-weight: 600;
}

.headline__label {
  margin: 0;
  max-inline-size: 28rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* -----------------------------------------------------------------------------
   Metric bars

   Geometry lives in SVG attributes, not in a style attribute: the CSP has no
   'unsafe-inline', so a bar whose width was a style would be dropped and every
   chart would draw empty. Colour is CSS, because colour is not geometry.
   -------------------------------------------------------------------------- */

.result__chart {
  display: block;
  inline-size: 100%;
  block-size: 2.4rem;
  margin-block-end: var(--space-3);
}

.result__bar--before { fill: var(--surface-4); }
.result__bar--after { fill: var(--accent-500); }

.result__delta {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgb(34 211 238 / 12%);
  color: var(--accent-300);
  font-size: var(--text-2xs);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   Sector glyph
   -------------------------------------------------------------------------- */

.case__fact--icon dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.case__sector-icon {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--brand-300);
}

/* =============================================================================
   The listing

   A card leads with the same measurement the study's own header leads with, so
   a reader who only scans and a reader who opens one are told the same thing
   first. Nothing here is a picture: the number is the picture.
   ========================================================================== */

/*
  The listing sets no page padding at all.

  `.page-hero` already reserves the header's height at the top, and base.css
  already spaces the last child at the bottom — both of which every other page
  on the site relies on. The first version of this rule added a section gap to
  the bottom, which doubled it to 356px, and 1rem to the top, which left this
  the only page clearing the header by 80px where the rest clear by 64.
*/

.cases__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cases__empty {
  margin: 0;
  color: var(--text-muted);
}

.case-card__link {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 160ms var(--ease-out),
    background 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

@media (min-width: 52rem) {
  .case-card__link {
    /* Story on the reading side, result on the other — the same split the
       study's own header uses, so the listing reads as its index. */
    grid-template-columns: minmax(0, 1fr) 14rem;
    align-items: center;
    gap: var(--space-8);
  }
}

.case-card__link:hover,
.case-card__link:focus-visible {
  border-color: var(--line-brand);
  background: var(--surface-3);
  transform: translateX(-2px);
}

.case-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  grid-column: 1;
}

.case-card__client {
  color: var(--brand-300);
  font-size: var(--text-sm);
  font-weight: 600;
}

.case-card__sector {
  color: var(--text-dim);
  font-size: var(--text-xs);
}

.case-card__title {
  grid-column: 1;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.case-card__summary {
  grid-column: 1;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* -----------------------------------------------------------------------------
   The result, on the card
   -------------------------------------------------------------------------- */

.case-card__result {
  display: grid;
  justify-items: start;
  gap: 0.15rem;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 52rem) {
  .case-card__result {
    grid-row: 1 / span 3;
    grid-column: 2;
    justify-items: end;
    padding-block-start: 0;
    padding-inline-start: var(--space-6);
    border-block-start: 0;
    border-inline-start: 1px solid var(--line);
    text-align: end;
  }
}

.case-card__figure {
  margin: 0;

  /* A quantity is left-to-right even in Persian digits. */
  direction: ltr;
  unicode-bidi: isolate;

  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.case-card__delta {
  margin: 0;
  color: var(--ok-400);
  font-size: var(--text-xs);
  font-weight: 600;
}

.case-card__measure {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
}

@media (prefers-reduced-motion: reduce) {
  .case-card__link { transition: none; }

  .case-card__link:hover,
  .case-card__link:focus-visible { transform: none; }
}