/* Erika Design System — Copyright (c) 2026 Simon Sanladerer
   The visual design, composition, layout patterns, token values, and
   individual styles in this file are protected creative work.
   Licensed under the Elastic License 2.0 — see LICENSE in this directory. */

/* ================================================================
   Erika Page Scaffold — Shared Page-Level Layout Classes
   ================================================================
   All stage HTML files import this file via:
     <link rel="stylesheet" href="../styles/page.css">

   Import order: layout.css (tokens) -> page.css (this) -> components.css

   This file contains:
     1. Page container  — .page
     2. Page header     — .page__title, .page__subtitle
     3. Sections        — .section, .section__title, .section__description
     4. Dividers        — .divider
     5. State showcase  — .state-group, .state-row, .state-label
     6. Showcase grids  — .component-grid, .input-demo, .card-demo
     7. Inline utilities — extracted from inline styles

   Vertical rhythm: all vertical spacing is a multiple of --baseline (21px).

   Naming convention: BEM (.block__element--modifier)
   ================================================================ */

/* ================================================================
   1. PAGE CONTAINER
   ================================================================ */
.page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--rhythm-2) var(--container-padding);  /* 42px top/bottom */
}

/* ================================================================
   2. PAGE HEADER
   ================================================================ */
.page__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-3xl);    /* 42px — 2 baseline units */
  color: var(--text-primary);
  margin-bottom: 0;              /* subtitle follows immediately */
}

.page__subtitle {
  font-size: var(--text-base);
  line-height: var(--lh-base);   /* 21px */
  color: var(--text-secondary);
  margin-bottom: var(--rhythm-2);  /* 42px before first section */
}

/* ================================================================
   3. SECTIONS
   ================================================================ */
.section {
  margin-bottom: var(--rhythm-2);  /* 42px between sections */
}

.section__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-xl);      /* 21px — 1 baseline unit */
  color: var(--text-primary);
  margin-bottom: calc(var(--rhythm-1) - 1px); /* 20px + 1px border = 21px total below text */
  padding-bottom: 0;
  border-bottom: 1px solid var(--border-default);
}

.section__description {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);      /* 21px */
  color: var(--text-muted);
  margin-bottom: var(--rhythm-1); /* 21px before content */
}

/* Section body text — long-form paragraph within a section */
.section__body-text {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--lh-base);    /* 21px */
  margin-bottom: var(--rhythm-1); /* 21px */
  max-width: var(--breakpoint-sm);
}

/* ================================================================
   4. DIVIDERS
   ================================================================ */
.divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin-block: calc(var(--rhythm-2) - 1px) var(--rhythm-2); /* 41px + 1px border + 42px = 84px total */
}

/* ================================================================
   5. STATE SHOWCASE
   ================================================================ */
.state-group {
  margin-bottom: var(--rhythm-1);  /* 21px between state groups */
}

.state-group__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--lh-xs);      /* 21px */
  margin-bottom: var(--rhythm-1); /* 21px */
}

.state-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--rhythm-1); /* 21px between rows */
}

.state-row--wrap {
  flex-wrap: wrap;
}

.state-row--top {
  align-items: flex-start;
}

.state-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  line-height: var(--lh-xs);      /* 21px */
  flex-shrink: 0;
}

.state-label--wide {
  min-width: 120px;
}

/* ================================================================
   6. SHOWCASE GRIDS
   ================================================================ */
.component-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rhythm-1);           /* 21px grid gap */
}

.component-grid--2col {
  grid-template-columns: 1fr 1fr;
}

.component-grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

.input-demo {
  width: 280px;
}

.card-demo {
  width: 100%;
  max-width: 520px;
}

/* ================================================================
   7. INLINE STYLE EXTRACTIONS
   ================================================================
   Classes extracted from inline style="" attributes in stage files.
   ================================================================ */

/* Card body/value utilities moved to components.css as .card__body--right, .card__body--compact-right, .card__value--break */

/* Flex content area — fills remaining space */
.flex-fill {
  flex: 1;
  min-width: 0;
}

/* Muted text color utility */
.text-muted {
  color: var(--text-muted);
}

/* Subsection title with top spacing (for non-first subsections) */
.subsection-title--spaced {
  margin-top: var(--rhythm-2);    /* 42px */
}

/* Type specimen — larger font-size variant for previews */
.type-specimen--lg {
  font-size: var(--text-lg);
}


/* Inline code highlight — for code mentions inside body text */
.code-highlight {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* ================================================================
   RESPONSIVE — MOBILE
   ================================================================ */
@media (max-width: 767px) {
  .page {
    padding: var(--rhythm-1) var(--space-4);  /* 21px top/bottom on mobile */
  }

  .page__title {
    font-size: var(--text-xl);
    line-height: var(--lh-xl);
  }

  .section__title {
    font-size: var(--text-lg);
    line-height: var(--lh-lg);
  }

  .component-grid--2col,
  .component-grid--3col {
    grid-template-columns: 1fr;
  }

  .state-row {
    flex-wrap: wrap;
  }

  .state-label {
    min-width: 60px;
  }

  .input-demo {
    width: 100%;
    max-width: 100%;
  }
}

/* ================================================================
   RESPONSIVE — WIDE SCREEN (2-column section layout)
   ================================================================
   On viewports >= 1440px the page container widens to hold two
   content columns side-by-side. Each column is --container-max wide
   with a --rhythm-2 (42px) gap between them.

   The page header spans both columns. Dividers are hidden since
   the section__title border-bottom provides sufficient visual
   separation within the 2-column grid.
   ================================================================ */
@media (min-width: 1440px) {
  .page {
    max-width: calc(var(--container-max) * 2 + var(--rhythm-4));
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--rhythm-4);  /* 84px between columns — 4 baseline units */
  }

  /* Page header spans full width */
  .page__title,
  .page__subtitle {
    grid-column: 1 / -1;
  }

  /* Hide dividers — they break the 2-column flow by forcing new rows.
     Section title border-bottom provides enough visual separation. */
  .divider {
    display: none;
  }
}