/* =========================================================================
   Interview Prep GPT Library — case study page

   Page-scoped styles. Loaded AFTER styles/design-system.css and built from
   its tokens; nothing here redefines an --ag-* token.

   Layout is preserved verbatim from the page's original stylesheet — the
   same reading column, the same five-cell workflow grid, the same hairline
   card stacks. Only the visual language changed: dark palette and DM
   Serif/Mono/Inter out, site tokens and Momo Trust in.
   ========================================================================= */

:root {
  /* The one thing the design system does not carry. The case study leans on
     monospace to mark genuinely code-like strings — I/O labels, defense
     names, step descriptions — so it stays local to this page rather than
     adding a third family site-wide. System stack, no extra webfont. */
  --gpt-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* The reading column. Narrower than --ag-page-max on purpose: this page is
     prose, not a layout grid. */
  --gpt-measure: 50rem;   /* 800px */
}

html { scroll-behavior: smooth; }

/* --- <ReadingColumn> --------------------------------------------------- */
.page {
  max-width: var(--gpt-measure);
  margin-inline: auto;
  padding-block: var(--ag-space-16) var(--ag-space-20);
  padding-inline: var(--ag-space-10);
}

/* --- <CaseHeader> ------------------------------------------------------ */
.project-header {
  margin-block-end: var(--ag-space-12);
  padding-block-end: var(--ag-space-12);
  border-block-end: var(--ag-hairline) solid var(--ag-color-rule);
}
.project-eyebrow {
  margin-block-end: var(--ag-space-4);
  font-size: var(--ag-text-xs);
  font-weight: var(--ag-weight-semibold);
  letter-spacing: var(--ag-tracking-wider);
  text-transform: uppercase;
  color: var(--ag-color-accent-text);
}
.project-title {
  margin-block-end: var(--ag-space-5);
  font-family: var(--ag-font-display);
  font-weight: var(--ag-weight-regular);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: var(--ag-leading-hero);
  letter-spacing: var(--ag-tracking-hero);
  color: var(--ag-color-ink);
}
.project-summary {
  margin-block-end: var(--ag-space-7);
  max-width: 50ch;
  font-size: var(--ag-text-lg);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-body);
}
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ag-space-2);
}
.meta-tag {
  padding: var(--ag-space-1) var(--ag-space-3);
  border-radius: var(--ag-radius-pill);
  background: var(--ag-color-panel);
  font-size: var(--ag-text-2xs);
  font-weight: var(--ag-weight-medium);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-body);
}

/* --- <CaseSection> ----------------------------------------------------- */
.case-section { margin-block-end: var(--ag-space-12); }
.case-section:last-child { margin-block-end: 0; }

/* Section headings, in the site's display face. A step down from
   .ag-section__heading (34px): these sit under a page title that already
   runs to 48px, six times over, inside an 800px column. */
.section-label {
  margin-block-end: var(--ag-space-6);
  font-family: var(--ag-font-display);
  font-weight: var(--ag-weight-regular);
  font-size: var(--ag-text-xl);
  line-height: var(--ag-leading-tight);
  letter-spacing: var(--ag-tracking-tight);
  color: var(--ag-color-ink);
}

.body-text {
  margin-block-end: var(--ag-space-4);
  max-width: var(--ag-measure);
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-body);
}
.body-text:last-child { margin-block-end: 0; }

/* --- <Workflow> — three steps separated by arrow cells ----------------- */
.workflow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  margin-block: var(--ag-space-8);
  overflow: hidden;
  border: var(--ag-hairline) solid var(--ag-color-rule);
  border-radius: var(--ag-radius-md);
  background: var(--ag-color-panel);
}
.workflow-step { padding: var(--ag-space-5) var(--ag-space-6); }
.workflow-arrow {
  display: flex;
  align-items: center;
  padding-inline: var(--ag-space-3);
  border-inline: var(--ag-hairline) solid var(--ag-color-rule);
  /* --faint is calibrated against white; on --panel it drops below the
     text floor, so arrows sit a step darker. */
  color: var(--ag-color-soft);
}
.step-name {
  margin-block-end: var(--ag-space-1);
  font-size: var(--ag-text-md);
  font-weight: var(--ag-weight-semibold);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-ink);
}
.step-desc {
  font-family: var(--gpt-mono);
  font-size: var(--ag-text-2xs);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-soft);
}

/* --- <GptCardStack> — 1px gaps over a rule-coloured bed give hairlines
       between cards without doubling borders at the seams. -------------- */
.gpt-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ag-hairline);
  margin-block: var(--ag-space-6);
  overflow: hidden;
  border: var(--ag-hairline) solid var(--ag-color-rule);
  border-radius: var(--ag-radius-md);
  background: var(--ag-color-rule);
}
.gpt-card {
  padding: var(--ag-space-5) var(--ag-space-6);
  background: var(--ag-color-surface);
}
.gpt-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ag-space-4);
  margin-block-end: var(--ag-space-2);
}
.gpt-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ag-space-4);
}
.gpt-name {
  font-size: var(--ag-text-md);
  font-weight: var(--ag-weight-semibold);
  color: var(--ag-color-ink);
}
.gpt-label {
  font-family: var(--gpt-mono);
  font-size: var(--ag-text-2xs);
  color: var(--ag-color-faint);
}
.gpt-role {
  margin-block-end: var(--ag-space-3);
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-body);
}
.gpt-link {
  display: inline-block;
  font-size: var(--ag-text-sm);
  color: var(--ag-color-accent-text);
  transition: transform var(--ag-duration) var(--ag-ease);
}
.gpt-link:hover { transform: translate(2px, -2px); }

.gpt-io {
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-1);
}
.io-row {
  display: flex;
  gap: var(--ag-space-3);
  font-size: var(--ag-text-sm);
}
.io-label {
  flex-shrink: 0;
  min-width: 3.5rem;
  font-family: var(--gpt-mono);
  font-size: var(--ag-text-2xs);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-faint);
}
.io-val {
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-ink);
}

/* --- <ChallengeBlock> — a failed attempt, set off by a left rule ------- */
.challenge-block {
  margin-block: var(--ag-space-6);
  padding-inline-start: var(--ag-space-5);
  border-inline-start: 2px solid var(--ag-color-faint);
}
.challenge-outcome {
  display: inline-block;
  margin-block-end: var(--ag-space-1);
  font-size: var(--ag-text-2xs);
  font-weight: var(--ag-weight-semibold);
  letter-spacing: var(--ag-tracking-wide);
  text-transform: uppercase;
  color: var(--ag-color-faint);
}
.challenge-title {
  margin-block-end: var(--ag-space-2);
  font-size: var(--ag-text-md);
  font-weight: var(--ag-weight-semibold);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-ink);
}

/* --- <ResultCallout> — what worked, after the two failures ------------- */
.result-callout {
  margin-block: var(--ag-space-6);
  padding: var(--ag-space-4) var(--ag-space-5);
  border: var(--ag-hairline) solid var(--ag-color-rule);
  border-inline-start: 3px solid var(--ag-color-accent);
  border-radius: var(--ag-radius-md);
  background: var(--ag-color-panel);
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-body);
}
.result-callout strong {
  font-weight: var(--ag-weight-semibold);
  color: var(--ag-color-ink);
}

/* --- <DefenseList> — name / description table ------------------------- */
.defense-list {
  display: flex;
  flex-direction: column;
  margin-block: var(--ag-space-6);
  overflow: hidden;
  border: var(--ag-hairline) solid var(--ag-color-rule);
  border-radius: var(--ag-radius-md);
}
.defense-row {
  display: flex;
  border-block-end: var(--ag-hairline) solid var(--ag-color-rule);
}
.defense-row:last-child { border-block-end: none; }
.defense-name {
  flex-shrink: 0;
  min-width: 11.5rem;
  padding: var(--ag-space-3) var(--ag-space-4);
  border-inline-end: var(--ag-hairline) solid var(--ag-color-rule);
  background: var(--ag-color-panel);
  font-family: var(--gpt-mono);
  font-size: var(--ag-text-2xs);
  line-height: var(--ag-leading-normal);
  color: var(--ag-color-accent-text);
}
.defense-desc {
  padding: var(--ag-space-3) var(--ag-space-4);
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-color-body);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   Aligned to the design system's single 45em breakpoint. The original page
   broke at 600px, which left the five-cell workflow intact between 600 and
   720px while every .ag-row elsewhere had already collapsed.
   ---------------------------------------------------------------------- */

@media (max-width: 45em) {   /* 720px */
  .page {
    padding-block: var(--ag-space-12) var(--ag-space-16);
    padding-inline: var(--ag-space-5);
  }
  .project-header {
    margin-block-end: var(--ag-space-10);
    padding-block-end: var(--ag-space-8);
  }
  .case-section { margin-block-end: var(--ag-space-10); }

  .workflow { grid-template-columns: 1fr; }
  .workflow-step { border-block-end: var(--ag-hairline) solid var(--ag-color-rule); }
  .workflow-step:last-child { border-block-end: none; }
  .workflow-arrow { display: none; }

  .gpt-card-header { flex-direction: column; align-items: flex-start; gap: var(--ag-space-1); }

  .defense-row { flex-direction: column; }
  .defense-name {
    min-width: 0;
    border-inline-end: none;
    border-block-end: var(--ag-hairline) solid var(--ag-color-rule);
  }
}