/* ==========================================================================
   Layout primitives — section rhythm, grid utilities
   Container is handled by Bootstrap 5 + css/base/bootstrap-override.css
   ========================================================================== */

/* .container--wide is a project-specific wide container variant */
.container--wide {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
  box-sizing: border-box;
}

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

.section--tint {
  background-color: var(--bg-lavender-tint);
}

.section--navy {
  background-color: var(--bg-navy);
  color: var(--color-white);
}

/* ---- CSS Grid utilities -------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.125rem;
}

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

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

@media (min-width: 640px) {
  .grid--2x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3up {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Flex utilities ------------------------------------------------------- */

.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  align-items: center;
  justify-content: space-between;
}

/* ---- Accessibility -------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 1000;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: top var(--transition-base);
}

.skip-link:focus {
  top: var(--space-4);
}