/* ──────────────────────────────────────────────
   CC LAYOUT — locked 8 May 2026
   Container widths, grid system, spacing utilities,
   surface types (action / thinking / secondary).
   Loads after base.css.
   ────────────────────────────────────────────── */

/* ── Containers ──────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
}

.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

@media (min-width: 768px) {
  .container { padding-inline: var(--page-pad-x-md); }
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--page-pad-x-lg); }
}

/* ── Section vertical rhythm ─────────────────── */
.section {
  padding-block: var(--space-9);
}

.section-tight { padding-block: var(--space-7); }
.section-loose { padding-block: var(--space-10); }

/* ── Grid utility ────────────────────────────── */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Flex utilities ──────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ── Surface types (per locked rule set) ─────── */

/* Action surface — cream feature background, dark text, burnt-orange CTA */
.surface-action,
.surface-cream {
  background: var(--cream);
  color: var(--dark-text);
  padding: var(--space-8) var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider-on-cream);
}

/* Plain section on the off-white page (no surface treatment) */
.surface-page {
  background: var(--page-bg);
  color: var(--dark-text);
}

/* Thinking surface — sage background, cream text, dark-red top/bottom accent bars */
.surface-thinking {
  background: var(--sage);
  color: var(--cream);
  padding: var(--space-9) var(--space-8);
  border-top: var(--accent-bar);
  border-bottom: var(--accent-bar);
}

.surface-thinking .eyebrow { color: var(--cream); opacity: 0.9; }
.surface-thinking p { color: var(--cream); opacity: 0.92; }

/* Secondary / editorial card — white on cream-page layout */
.surface-secondary,
.card {
  background: var(--white);
  color: var(--dark-text);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Journal tile (top burnt-orange accent bar) */
.tile-journal {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6);
  border-top: 4px solid var(--burnt-orange);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.tile-journal:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Footer base (dark brown for non-typography-led variants) */
.footer-dark {
  background: var(--dark-text);
  color: var(--cream);
  padding: var(--space-9) var(--space-8) var(--space-6);
  border-top: var(--accent-bar);
}

/* Cover panel (proposal/deck covers — cream with dark-red top/bottom accent bars) */
.cover-panel {
  background: var(--cream);
  padding: var(--space-10) var(--space-8);
  border-top: var(--accent-bar-thick);
  border-bottom: var(--accent-bar-thick);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ── Spacing utilities (margin) ──────────────── */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }

.mb-section { margin-bottom: var(--space-9); }

/* ── Show/hide responsive ────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile-only { display: none !important; }
}

/* ── Print / PDF rules (inherited from tokens.css overrides) ── */
@media print {
  body { background: white; }
  .surface-thinking,
  .surface-action,
  .card,
  .tile-journal,
  .cover-panel { box-shadow: none; }
}