/* ═══════════════════════════════════════════════════════════
   LAYOUT — Container, Section, Grid Utilities
   ═══════════════════════════════════════════════════════════ */

/* ─── Container ─── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--page-padding-x);
  padding-right: var(--page-padding-x);
  width: 100%;
}

/* ─── Section ─── */
.section {
  padding-top: var(--section-padding-t);
  padding-bottom: var(--section-padding-b);
}

.section--white { background: var(--white); }
.section--off-white { background: var(--off-white); }
.section--dark { background: var(--sky-mid); }
.section--deep { background: var(--sky-deep); }

/* ─── Section Content ─── */
.section__header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
  margin-bottom: var(--gap-3xl);
}

.section__header--center {
  align-items: center;
  text-align: center;
}

/* ─── Grid Utilities ─── */
.grid {
  display: grid;
  gap: var(--card-grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── 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-between { justify-content: space-between; }
.justify-center { justify-content: center; }

.gap-xs  { gap: var(--gap-xs); }
.gap-sm  { gap: var(--gap-sm); }
.gap-sm2 { gap: var(--gap-sm2); }
.gap-md  { gap: var(--gap-md); }
.gap-lg  { gap: var(--gap-lg); }
.gap-xl  { gap: var(--gap-xl); }
.gap-2xl { gap: var(--gap-2xl); }
.gap-3xl { gap: var(--gap-3xl); }

/* ─── Spacer ─── */
.spacer-sm  { height: var(--gap-sm); }
.spacer-md  { height: var(--gap-md); }
.spacer-lg  { height: var(--gap-lg); }
.spacer-xl  { height: var(--gap-xl); }
.spacer-2xl { height: var(--gap-2xl); }
.spacer-3xl { height: var(--gap-3xl); }

/* ─── Full Bleed (break out of container) ─── */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* ─── Screen Reader Only ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive Grid ─── */
@media (max-width: 1023px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .section {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .section__header {
    margin-bottom: var(--gap-xl);
  }
}