/* ═══════════════════════════════════════════════════════════════
   LAYOUT — layout.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  width: 100%;
}
.container-narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ── Section chrome ─────────────────────────────────────────── */
section { padding: var(--space-2xl) 0; }
section.section-tight { padding: var(--space-xl) 0; }
section.section-flush { padding: 0; }

.section-header { margin-bottom: var(--space-xl); }
.section-header.centered { text-align: center; }
.section-header.centered .section-line { margin: var(--space-sm) auto 0; }

.section-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-transform: uppercase;
  line-height: 0.96;
  color: var(--white);
  letter-spacing: -0.01em;
}
.section-title em { font-style: normal; color: var(--amber); }

.section-sub {
  margin-top: 14px;
  color: var(--steel-300);
  max-width: 58ch;
  font-size: var(--text-base);
  line-height: 1.7;
}
.section-line {
  width: 56px;
  height: 3px;
  background: var(--amber);
  margin-top: 18px;
}

/* ── Section backgrounds ────────────────────────────────────── */
.bg-900  { background: var(--steel-900); }
.bg-800  { background: var(--steel-800); border-top: 1px solid var(--steel-600); border-bottom: 1px solid var(--steel-600); }
.bg-700  { background: var(--steel-700); }
.bg-amber-band {
  background: linear-gradient(135deg, var(--amber-dim) 0%, var(--amber) 100%);
  color: var(--steel-900);
}

/* ── Grid helpers ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--steel-600); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--steel-600); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--steel-600); }
.grid-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-cards-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-cards-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ── Page header (interior pages) ──────────────────────────── */
.page-header {
  background: var(--steel-800);
  border-bottom: 1px solid var(--steel-600);
  padding: var(--space-xl) 0 var(--space-lg);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, var(--amber), transparent);
}
.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.page-header-inner { position: relative; z-index: 2; }
.page-header h1 {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4rem);
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--white);
  letter-spacing: -0.01em;
}
.page-header h1 em { font-style: normal; color: var(--amber); }
.page-header .page-sub {
  margin-top: 14px;
  color: var(--steel-300);
  font-size: var(--text-lg);
  max-width: 55ch;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-cards { grid-template-columns: repeat(2,1fr); }
  .grid-cards-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-cards, .grid-cards-2, .grid-cards-4 { grid-template-columns: 1fr; }
  section { padding: var(--space-xl) 0; }
}