/* PK2 AI Advisors · case studies
   The index and the two entry pages. Nothing here is a new visual language:
   the cards are the week grid's card frame, the rules are the grid's hairline,
   and the before column of a comparison table is struck through the same way a
   found task is. Tables and struck text are the whole illustration kit.

   This sheet declares no colour and no system size of its own. Every value
   resolves through a custom property from tokens.css.

   Load order:
     css/tokens.css
     css/site.css
     css/week-grid.css
     css/case-studies.css
*/

/* ------------------------------------------------------------ the index -- */

/* Two cards, side by side, each half the row. The page is built to read
   complete at two: there is no third column standing empty and no placeholder
   card. When a third entry lands, this becomes three columns or two rows. */
.case-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--space-5);
}

.case-cards .grid-card-body + .grid-card-body { margin-top: var(--space-2); }

@media (max-width: 860px) {
  .case-cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }
}

/* -------------------------------------------------------- the honesty label */

/* "Reference implementation · sample data". A boxed mono label, deliberately
   plain, sitting under the title on the entry page and inside the card on the
   index. It is a statement of fact, not a badge: hairline, no fill, no radius. */
.case-flag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}
.ground-ink .case-flag {
  border-color: var(--hairline-inv);
  color: var(--gold);
}

/* ------------------------------------------------------------- the hero -- */

/* The opening, stacked and full width: the eyebrow, the title and the honesty
   flag across the whole container, the intro under them across the whole
   container too, then the facts strip. The title does not share a row with the
   intro. A display headline in half a row wraps to a paragraph shape, and the
   intro set beside it reads as a caption on the headline rather than as the
   opening of the piece.

   The intro takes the standfirst device the index already opens with, so the
   two pages speak the same grammar. Run across the full 1200px container it
   passes the ~75-char reading measure, near 105 characters at the 24px
   ceiling: that is the fenced exception tokens.css names for this device,
   taken here on the owner's explicit instruction that both the header and the
   body copy go all the way across. It stops with the hero. Nothing else on
   these pages runs body copy past the measure.

   The facts strip is the last row and spans the container under both blocks,
   so its hairlines cover the section they are evidence for, the same way the
   About page's credentials strip does. Every block is full width already, so
   there is no narrow-width case to answer: the stack is the stack. */
.case-hero-row { row-gap: var(--space-heading); align-items: start; }
.case-hero      { grid-column: 1 / -1; }
.case-hero-copy { grid-column: 1 / -1; }

.case-hero > * + * { margin-top: var(--space-3); }
.case-hero > .label + h1 { margin-top: var(--space-eyebrow); }
/* The intro's paragraphs lead at 1.4 and set as large as 24px, so the body
   step between them would close up against the line spacing. They take the
   step above it. */
.case-hero-copy > * + * { margin-top: var(--space-4); }

/* --------------------------------------------------------- the facts strip */

/* The header numbers, ruled like the week grid: label left, value right, a
   hairline under each row. Tabular figures so the column lines up. It is the
   last row of the hero grid and spans it, so the gap above comes from the
   row gap and the width from the container. */
.case-facts {
  margin: 0;
  grid-column: 1 / -1;
  border-top: var(--hair) solid var(--hairline);
}
.case-facts-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--hair) solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.case-facts-row dt { color: var(--text-muted); }
.case-facts-row dd {
  margin: 0;
  text-align: right;
  color: var(--ink);
}

/* Narrow: the label takes its own line rather than wrapping against a
   right-aligned value, which reads as two ragged columns. */
@media (max-width: 640px) {
  .case-facts-row {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }
  .case-facts-row dt { flex: 1 0 100%; }
  .case-facts-row dd { text-align: left; }
}

/* The divider fragment needs air under it before the next ground starts,
   otherwise it sits welded to the slate section below. It runs at the measure
   already, from .week-grid-divider, which is the same column the body copy and
   the cards above and below it run at, so it needs no width of its own.

   The label over it names the two struck lines. It identifies them; it does not
   narrate them, and a divider without one is a graphic that divides nothing. */
.case-divider { padding-bottom: var(--section-bottom); }
.case-divider > .label { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------- the body -- */

/* A body section, set beside its head rather than under it, on the site's
   .section-split grammar. The row holds the pair, so the step between sections
   moves onto the row and the body column gives it up: a top margin on the
   second column would only drop the copy off the heading's first line. Every
   other rule below still addresses .case-section, which is now the body
   column, so the copy's internal rhythm is unchanged by the split. */
.case-row { margin-top: var(--space-7); }
.case-row > .section-split-body { margin-top: 0; }

.case-section { margin-top: var(--space-7); }
.case-section > * + * { margin-top: var(--space-4); }
.case-section > .h4 + p { margin-top: var(--space-2); }
.case-section p + p { margin-top: var(--space-3); }

/* A finding inside a section: the subhead and the paragraphs under it. */
.case-finding { margin-top: var(--space-5); }
.case-finding > * + * { margin-top: var(--space-2); }

/* Bulleted list. The marker is a short gold rule, borrowed from the grid,
   rather than a disc. */
.case-list {
  list-style: none;
  max-width: var(--measure);
}
.case-list li {
  position: relative;
  padding-left: var(--space-4);
}
.case-list li + li { margin-top: var(--space-2); }
.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: var(--space-2);
  height: var(--strike);
  background: var(--gold);
}
.ground-ink .case-list li::before { background: var(--gold); }

/* An unresolved fact, marked so it cannot be published by accident. It is
   deliberately loud on the page and it is not a design element: if one of
   these is still here at launch, the page is not finished. */
.case-todo {
  background: var(--gold-soft);
  outline: var(--hair) solid var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: 0.04em;
}
.ground-ink .case-todo { color: var(--text-inv); }

/* ------------------------------------------------------------- the table -- */

/* Before and after, ruled. The before column is struck through, which is the
   same sentence the week grid makes: this line of the week is gone. */
.cs-table {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  font-size: var(--size-small);
  line-height: 1.5;
  text-align: left;
}
.cs-table th,
.cs-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: var(--hair) solid var(--hairline);
  vertical-align: top;
}
.cs-table th:last-child,
.cs-table td:last-child { padding-right: 0; }

.cs-table thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-label);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.cs-table tbody th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
}

/* A figures column. A before-and-after table reads left to left, but a costs
   table reads down a column of money, so the figures hang on the right and set
   in tabular numerals, the same way the facts strip sets its values. */
.cs-table .is-figure {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.cs-table .is-before {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: var(--hair);
}
.cs-table .is-after { color: var(--ink); }

@media (max-width: 640px) {
  .cs-table { font-size: var(--size-label); }
  .cs-table th,
  .cs-table td { padding-right: var(--space-2); }
}

/* ------------------------------------------------------------ the limits -- */

/* What the page does not claim has no component of its own. It was a framed
   box in small type at the end of the body, and a frame around the honest part
   of a page reads as fine print no matter what it says. It now runs as an
   ordinary section: the label in the rail, the copy in the body column at the
   body treatment, on .case-section like every section above it. Nothing to
   declare here. */

/* --------------------------------------------------------- the small door -- */

/* The free tool, offered on the case study page before the $999 door. It is
   the card frame already used on the index, held to the same measure as the
   body copy above it so it sits in the same column rather than running the
   full width of the container. */
.case-tool { max-width: var(--measure); }

/* The divider fragment above already carries the section's bottom air, so this
   block only adds the space beneath itself and the rhythm stays even on both
   sides of the card. */
.case-tool-block { padding-bottom: var(--section-bottom); }

/* --------------------------------------------------------- the way back -- */

/* The link back to the index rides at the foot of the block above the closer,
   not inside it, so the last thing on a case study is the assessment. It sits
   inside a block that already carries its own bottom air, so it only needs
   the gap above it. */
.case-back { margin-top: var(--space-5); }

/* ------------------------------------------------------------ the closer -- */

/* Every case study ends at the assessment. One button, one line under it. */
.case-close-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.case-close-actions + .small { margin-top: var(--space-3); }