/* ── CONTAINER ── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

@media (max-width: 1024px) {
  .container {
    padding-inline: 40px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--pad-x-mobile);
  }
}

/* ── PAGE STRUCTURE ── */

#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main {
  flex: 1;
}

/* ── SECTION DEFAULTS ── */

.section {
  width: 100%;
}

.section--padded {
  padding-block: var(--section-margin);
}

.section--padded-sm {
  padding-block: var(--section-gap);
}

.section--dark {
  background-color: var(--color-darkblue);
  color: var(--color-white);
}

.section--light {
  background-color: var(--color-off-white);
}

/* ── GRID ── */

.grid {
  display: grid;
  gap: var(--col-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); }

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

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

/* ── FLEX UTILS ── */

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.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-10       { gap: var(--space-10); }

/* ── HEADING GROUP (eyebrow + h2) ── */

.heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.heading-group--center {
  align-items: center;
  text-align: center;
}

/* ── GLASSMORPHISM CARD ── */

.glass-card {
  background: var(--grad-footer-card);
  border: 1px solid var(--color-white-12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: var(--radius-md);
}

/* ── DIVIDER ── */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-rule);
}

.divider--dark {
  background: var(--color-white-20);
  opacity: 0.2;
}