/**
 * Container, grid system, and responsive utilities.
 *
 * @package WDO
 */

/* ============================================================
   CONTAINER
   ============================================================ */

.wdo-container {
  max-width: var(--wdo-container-max);
  margin-inline: auto;
  padding-inline: var(--wdo-container-padding);
}

/* ============================================================
   SECTIONS
   ============================================================ */

.wdo-section {
  padding-block: var(--wdo-space-3xl);
  padding-inline: var(--wdo-container-padding);
}

.wdo-section--dark {
  background: var(--wdo-dark);
  color: var(--wdo-text-primary);
}

.wdo-section--light {
  background: var(--wdo-light);
  color: var(--wdo-text-dark);
}

.wdo-section__inner {
  max-width: var(--wdo-container-max);
  margin-inline: auto;
}

/* Section labels (monospace uppercase) */
.wdo-section__label {
  font-family: var(--wdo-font-mono);
  font-size: var(--wdo-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wdo-accent);
  margin-bottom: var(--wdo-space-lg);
}

.wdo-section--light .wdo-section__label {
  color: var(--wdo-accent-muted);
}

/* ============================================================
   GRID
   ============================================================ */

.wdo-grid {
  display: grid;
  gap: 18px;
}

.wdo-grid > * {
  min-width: 0;
}

.wdo-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.wdo-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.wdo-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

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

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