/* ============================================================
   Layout — containers, grid, section wrappers
   ============================================================ */

body {
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  color: var(--text-primary);
}

.gemba-wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* 2-col grid: main + sidebar */
.gemba-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-8);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* Card grid (auto-fill) */
.gemba-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* Category grid (fixed 4-col → responsive) */
.gemba-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* Section spacing */
.gemba-section {
  padding-block: var(--sp-10);
}
.gemba-section + .gemba-section {
  padding-top: 0;
}

/* Section title */
.gemba-section-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-h3);
  color: var(--text-primary);
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--color-accent);
  line-height: 1.4;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  .gemba-grid {
    grid-template-columns: 1fr;
  }
  .gemba-cat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .gemba-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gemba-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .gemba-cat-grid {
    gap: var(--sp-2);
  }
}