/* 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);
}

.case-hero > * + * { margin-top: var(--space-3); }
.case-hero > .case-flag + .measure { 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. */
.case-facts {
  margin: var(--space-6) 0 0;
  border-top: var(--hair) solid var(--hairline);
  max-width: var(--measure);
}
.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 -- */

.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);
}
.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. Four hairlines, no fill, sitting at the end of
   the body so it is read as part of the argument rather than as fine print. */
.case-limits {
  margin-top: var(--space-7);
  padding: var(--space-4);
  border: var(--hair) solid var(--hairline);
  max-width: var(--measure);
}
.case-limits > * + * { margin-top: var(--space-2); }
.ground-ink .case-limits { border-color: var(--hairline-inv); }

/* --------------------------------------------------------- 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); }