/* =========================================================
   NORTHSTAR SELECTED — Layout
   ========================================================= */

/* ── Container ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide {
  max-width: var(--container-max);
}

.container--narrow {
  max-width: var(--container-text);
}

/* ── Section Spacing ────────────────────────────────────── */
.section {
  padding-block: clamp(var(--sp-16), 10vw, var(--sp-40));
}

.section--sm {
  padding-block: clamp(var(--sp-12), 6vw, var(--sp-24));
}

.section--lg {
  padding-block: clamp(var(--sp-24), 14vw, 12rem);
}

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

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

/* ── Spacing Utilities ──────────────────────────────────── */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }

/* ── Dividers ───────────────────────────────────────────── */
.divider {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  flex-shrink: 0;
}

.divider--wide {
  width: 100%;
  background: rgba(0,0,0,0.08);
}

.divider--center {
  margin-inline: auto;
}

/* ── Overflow helpers ───────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.relative        { position: relative; }
.absolute        { position: absolute; }
.inset-0         { inset: 0; }
.w-full          { width: 100%; }
.h-full          { height: 100%; }