/* ============================================================
   THE NATEWORK GROUP — Layout
   Containers, grids, sections, page-level spacing
   ============================================================ */

/* ── Container ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-8);
}
.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }

@media (max-width: 768px) {
  .container { padding-inline: var(--space-5); }
}
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
}

/* ── Section Spacing ─────────────────────────────────────────── */
.section        { padding-block: var(--space-20); }
.section--sm    { padding-block: var(--space-12); }
.section--lg    { padding-block: var(--space-32); }

@media (max-width: 768px) {
  .section    { padding-block: var(--space-12); }
  .section--lg { padding-block: var(--space-20); }
}

/* ── Section Backgrounds ─────────────────────────────────────── */
.section--white { background-color: var(--color-white); }
.section--bg    { background-color: var(--color-bg); }
.section--navy  { background-color: var(--color-navy); color: var(--color-white); }
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--color-white); }

/* ── Grid System ─────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

/* Auto-fit grids — naturally responsive */
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.grid-auto-md {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}
.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-8);
}

/* ── Flex Utilities ──────────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Content + Sidebar ───────────────────────────────────────── */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-12);
  align-items: start;
}

/* ── Landing Page Split ──────────────────────────────────────── */
.layout-lp {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: var(--space-12);
  align-items: start;
}

/* ── Two-Column even ─────────────────────────────────────────── */
.layout-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* ── Responsive Breakdowns ───────────────────────────────────── */
@media (max-width: 1280px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .grid-4    { grid-template-columns: repeat(2, 1fr); }
  .grid-5    { grid-template-columns: repeat(2, 1fr); }
  .layout-sidebar { grid-template-columns: 1fr; }
  .layout-lp { grid-template-columns: 1fr; }
  .layout-halves { gap: var(--space-8); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .layout-halves { grid-template-columns: 1fr; }
}

/* ── Page Content Body ───────────────────────────────────────── */
.page-body { padding-top: var(--nav-height); }

/* ── Max Width Wrappers ──────────────────────────────────────── */
.prose {
  max-width: 72ch;
}
.prose-wide {
  max-width: 88ch;
}

/* ── Centering Helper ────────────────────────────────────────── */
.mx-auto { margin-inline: auto; }
.text-block-center {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}