/* ============================================================
   CENSA DESIGN SYSTEM — page-specific styles for
   censa-design-system.html only.

   This case study is a one-off, hand-authored deep dive (14 named
   sections) rather than an instance of the generic case-study.js
   template the other case studies share — so this page loads
   case-study.css first and reuses its classes wherever the shape
   already matches (.cs-hero, .cs-eyebrow, .cs-situation,
   .cs-challenges, .cs-role, .cs-decisions, .cs-result, .cs-visual,
   .cs-takeaway, .cs-next, .cs-hero__meta for the dt/dd summary
   block). Everything below is only the handful of shapes that
   don't already exist there:
     - .cds-flow          — a vertical step sequence joined by ↓
                             (pipelines: before-system, tokens,
                             design→code, strategy architecture)
     - .cds-flow--wrap     — the same idea as wrapping pill chips
                             joined by → (governance/adoption loops,
                             Design Tokens' category chip row)
     - .cds-flow--plain    — bordered boxes with no connecting arrow,
                             more gap (Design Tokens' pipeline example)
     - .cds-compare        — two-column before/after wrapper
     - .cds-plain-list     — short dash-prefixed phrases inside a
                             .principle-card (Real Impact groups)
     - .cds-callout        — a short standalone editorial statement
                             (left accent rule, no card/box)
     - .cds-callout--box   — same callout, boxed: full border +
                             thicker left accent (Situation/Task
                             pull-quotes, per Figma)
     - .cds-stack          — a bare vertical list, no bullet/border/
                             arrow (Situation's "before" list)
     - .cds-split          — text column + supporting visual, stacked
                             on mobile, side-by-side at desktop
                             (Task section's real UI screenshot)
     - .cds-token-diagrams — stacked pair of real token diagram
                             exports, sits beside the pipeline list
                             inside a .cds-compare column
   No new visual language: colors, spacing and type all come from
   existing tokens/typography classes. Kept editorial per CLAUDE.md
   — pipelines are typographic sequences, not infographic diagrams.

   Mobile-first; tablet/desktop overrides at the project's
   established 768/1024 widths.
   ============================================================ */

.header__link[aria-current="page"],
.header__drawer-link[aria-current="page"] {
  color: var(--color-accent);
}

/* case-study.css colors .cs-role__title orange by default (correct for
   the generic case-study template); this page's Figma shows both its
   .cs-role__title headings (Task, Adoption) in the same ink color as
   every other section heading, not accented. */
.cs-role__title {
  color: var(--color-ink);
}

/* ---- Hero additions ---- */
.cds-hero__supporting {
  color: var(--color-ink);
  max-width: 640px;
}

.cds-hero__metrics.cs-result__grid {
  gap: 32px;
  padding-top: 8px;
}

.cds-hero__metrics .cs-result__value {
  font-size: var(--fs-display-sm);
}

/* ---- Callout ---- */
.cds-callout {
  max-width: 1080px;
  padding-left: 24px;
  border-left: 2px solid var(--color-accent);
  color: var(--color-ink);
}

.cds-callout p + p {
  margin-top: 8px;
}

.cds-callout > .cds-flow--wrap {
  margin-top: 24px;
}

.cds-callout--box {
  max-width: none;
  padding: 24px 32px;
  border: 1px solid var(--color-border);
  border-left: 8px solid var(--color-accent);
  background: var(--color-surface);
}

/* ---- Bare stacked list (no bullet, border or arrow) ---- */
.cds-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--color-ink);
}

/* ---- Flow / pipeline sequence ---- */
.cds-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.cds-flow__step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  width: 100%;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
}

.cds-flow__step-label {
  font-weight: 600;
  text-transform: uppercase;
}

.cds-flow__step-desc {
  color: var(--color-muted);
}

.cds-flow__arrow {
  align-self: center;
  color: var(--color-accent);
  line-height: 1;
  padding-block: 2px;
}

/* Plain variant — bordered boxes with no connecting arrow, more
   breathing room between items (Design Tokens' pipeline example). */
.cds-flow--plain {
  gap: 20px;
}

.cds-flow--plain .cds-flow__step {
  background: var(--color-surface);
}

/* Wrapping chip variant — governance/adoption loops with many short
   steps read better as pills that wrap than as a tall single column. */
.cds-flow--wrap {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

.cds-flow--wrap .cds-flow__step {
  width: auto;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
}

.cds-flow--wrap .cds-flow__arrow {
  align-self: center;
}

/* ---- Before / After comparison ---- */
.cds-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  width: 100%;
}

.cds-compare__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cds-compare__heading {
  color: var(--color-muted);
}

.cds-compare__col--after .cds-compare__heading {
  color: var(--color-accent);
}

/* ---- Short phrase list inside a principle-card (Real Impact) ---- */
.cds-plain-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cds-plain-list li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-ink);
}

.cds-plain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

/* ---- Text + supporting visual split (Task section) ---- */
.cds-split {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  margin-top: 16px;
}

.cds-split__text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 1 auto;
}

.cds-split__media {
  flex: 0 0 auto;
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}

.cds-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Token naming/mapping diagrams (Design Tokens section) ---- */
.cds-token-diagrams {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.cds-token-diagrams .cds-split__media {
  aspect-ratio: auto;
}

.cds-token-diagrams .cds-split__media img {
  object-fit: contain;
  padding: 24px;
}

/* ---- Result grid, 4-up variant (hero metrics + section 11 Result) ---- */
.cs-result__grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Back-to-works link ---- */
.cds-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.cds-back:hover {
  opacity: 0.7;
}

/* ---- Strategy's decision list — Figma shows these 5 items as a
   grid of white cards, not the shared .cs-decisions__list vertical
   row layout (that shape still applies to Component Architecture's
   own "Design Principles" list and Learnings, further down this
   page, so this is scoped to #strategy only). ---- */
#strategy .cs-decisions__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

#strategy .cs-decisions__item {
  border-top: none;
  padding: 32px;
  background: var(--color-surface);
}

/* ---- Responsive ---- */

/* Tablet: 768–1023px */
@media (min-width: 768px) {
  #strategy .cs-decisions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cds-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-result__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Laptop/Desktop: 1024px+ */
@media (min-width: 1024px) {
  #strategy .cs-decisions__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cds-flow:not(.cds-flow--wrap) {
    align-items: stretch;
  }

  .cds-flow:not(.cds-flow--wrap) .cds-flow__step {
    max-width: 560px;
  }

  .cds-split {
    flex-direction: row;
    align-items: stretch;
    gap: 80px;
  }

  .cds-split__text {
    max-width: 640px;
    gap: 80px;
  }

  .cds-split__media {
    width: 560px;
    aspect-ratio: 560 / 586;
  }
}