/* ============================================================
   OUTGROW — SMART IRRIGATION PLANNER — page-specific styles for
   outgrow.html only.

   Like censa-design-system.html, this case study is a one-off,
   hand-authored deep dive rather than an instance of the generic
   case-study.js template the other case studies (NEOM, Fluxa UI)
   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-role, .cs-decisions, .cs-result, .cs-visual,
   .cs-takeaway, .cs-next, .cs-hero__meta) and sections.css's
   .principle-grid/.principle-card for 3-across challenge cards.

   Only the handful of shapes that don't already exist are added
   below, prefixed .og- for this page (mirrors censa-design-system.css's
   own .cds- prefix — each hand-authored case study keeps its own
   small set of primitives rather than sharing a growing global file):
     - .og-hero__subtitle  — positioning line under the hero title
     - .og-narrative       — the RAW DATA -> ... -> ACT transformation
                             strip, shown once right after the hero
     - .og-callout         — short editorial statement / HMW block
                             (left accent rule, no card/box)
     - .og-flow            — a vertical step sequence joined by ↓
     - .og-flow--wrap      — the same, as wrapping chips joined by
                             → or + (soil states, literacy cues)
     - .og-frame           — a defined visual area for a UI moment
                             with no distinct real screenshot asset
                             (per brief: don't fabricate product UI —
                             leave a clean, clearly-labelled area)
     - .og-principle       — the large "Core Design Principle" quote,
                             the strongest typography moment on the page
     - .og-strip           — the compact supporting-data row under
                             Final Experience
     - .og-compare         — two-column before/after wrapper
     - .og-prev            — the "previous case study" link above
                             the standard .cs-next block
     - .og-back            — the Back to Works link

   No new visual language: colors, spacing and type all come from
   existing tokens/typography classes. Kept editorial per CLAUDE.md —
   flows are typographic sequences, not infographic diagrams; the
   one real project asset (outgrow.avif) is reused rather than
   duplicated as fake per-moment screenshots.

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

/* ---- Hero additions ---- */
.og-hero__subtitle {
  color: var(--color-accent);
  font-weight: 600;
}

.og-hero__description {
  color: var(--color-ink);
  max-width: 640px;
}

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

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

/* ---- Narrative strip (Raw Data -> Understand -> Diagnose -> Recommend -> Act) ---- */
.og-narrative {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

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

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

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

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

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

.og-flow--wrap {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

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

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

/* ---- Defined visual area (no fabricated UI) ---- */
.og-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 24px;
  text-align: center;
}

.og-frame__label {
  color: var(--color-muted);
  max-width: 320px;
}

/* ---- Core design principle — largest typography moment ---- */
.og-principle {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 24px;
  width: 100%;
}

.og-principle__statement {
  color: var(--color-ink);
  max-width: 900px;
}

/* ---- Supporting data strip ---- */
.og-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  padding-block: 24px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.og-strip__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.og-strip__label {
  color: var(--color-muted);
}

.og-strip__value {
  color: var(--color-ink);
  font-weight: 600;
}

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

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

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

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

/* ---- Prev / Next / Back links ---- */
.og-prev {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.og-prev:hover {
  opacity: 0.7;
}

.og-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

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

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

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

  .og-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Laptop/Desktop: 1024px+ */
@media (min-width: 1024px) {
  .og-flow:not(.og-flow--wrap) {
    align-items: stretch;
  }

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