/* ═══════════════════════════════════════════════════════════════
   layout.css — KB Brand Layout
   Grid, containers, responsive breakpoints
   Dependencies: brand-tokens.css (widths, gaps, spacing)
   Used by: all pages via base.njk <link>
   ═══════════════════════════════════════════════════════════════ */

/* ══ Page Container ══ */
.page {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* ══ Narrow Container (reading width) ══ */
.page-narrow {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* ══ Three-Column Homepage Grid ══ */
.project-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
  justify-content: center;
}
.project-grid__card {
  flex: 0 1 var(--grid-card-min);
  min-width: var(--grid-card-min);
}

/* ══ Full-Width Content ══ */
.content-full {
  width: 100%;
  max-width: var(--width-max);
  margin: 0 auto;
}

/* ══ Dark Viz Section (full-width) ══ */
.viz-section {
  background-color: var(--dark-bg);
  padding: var(--space-section) 0;
  width: 100%;
}
.viz-section .section-inner {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 var(--space-page);
}

/* Gradient transition into dark sections */
.viz-section::before {
  content: '';
  display: block;
  height: var(--gradient-fade-height);
  background: linear-gradient(to bottom, var(--color-bg, #FFFFFF), var(--dark-bg, #1A1A1A));
  margin-bottom: var(--space-xl);
  margin-top: calc(-1 * var(--space-section));
}
/* Gradient transition back to light */
.viz-section::after {
  content: '';
  display: block;
  height: var(--gradient-fade-height);
  background: linear-gradient(to bottom, var(--dark-bg, #1A1A1A), var(--color-bg, #FFFFFF));
  margin-top: var(--space-xl);
}

/* ══ Layout Diagrams (for brand packet) ══ */
.layout-dia {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.layout-box {
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg);
}
.layout-2col {
  display: flex;
  gap: 5.7%;
  margin-top: var(--space-md);
}
.layout-left {
  width: 24.3%;
  min-height: 72px;
  background: var(--purple-overlay-15);
  border: 1px dashed var(--purple-400);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  color: var(--purple-300);
}
.layout-right {
  width: 70%;
  min-height: 72px;
  background: var(--teal-overlay-10);
  border: 1px dashed var(--teal-400);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  color: var(--teal-400);
}
.layout-3col {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.layout-card {
  flex: 1;
  aspect-ratio: 1.3;
  background: var(--teal-overlay-06);
  border: 1px dashed var(--teal-overlay-30);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  color: var(--teal-400);
  opacity: 0.7;
}

/* ══ Responsive ══ */
@media (max-width: 768px) {
  .layout-2col { flex-direction: column; }
  .layout-left, .layout-right { width: 100%; }
}