/* ════════════════════════════════════════════════
   PEAK AUTOMATIONS — LAYOUT PRIMITIVES
   Container, section spacing, grid helpers.
   ════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}

/* Alias used in article footers */
.footer-wrap { max-width: 1160px; margin: 0 auto; padding: 0 5%; }

/* Narrow container for article prose */
.page-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 5%;
}

/* ── Section spacing ──────────────────────────── */
.section { padding: 90px 0; }
.section--sm { padding: 60px 0; }
.section--lg { padding: 120px 0; }

/* ── Generic card ────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
  border-color: rgba(29,203,175,0.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* ── Two-column grid ─────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}