/**
 * Move Forwards — layout utilities.
 * Small, composable helpers; component-specific layout lives in
 * components.css next to the component it belongs to.
 */

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

.container--narrow{ max-width: 860px; }

.section{ padding-block: var(--sp-section); }
.section--alt{ background: var(--c-bg-alt); }
.section--navy{ background: var(--c-bg-navy); color: rgba(255,255,255,.86); }
.section--navy h1, .section--navy h2, .section--navy h3{ color: #fff; }
.section--tight{ padding-block: calc(var(--sp-section) * .6); }

.grid{ display: grid; gap: var(--sp-8); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--auto{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--auto-sm{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 980px){
  .grid--3, .grid--4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
  .grid{ gap: var(--sp-6); }
}

.flex{ display: flex; }
.flex--center{ align-items: center; }
.flex--between{ justify-content: space-between; }
.flex--wrap{ flex-wrap: wrap; }
.flex--gap-2{ gap: var(--sp-2); }
.flex--gap-3{ gap: var(--sp-3); }
.flex--gap-4{ gap: var(--sp-4); }
.flex--col{ flex-direction: column; }

.text-center{ text-align: center; }
.mx-auto{ margin-inline: auto; }

.overflow-x-auto{ overflow-x: auto; }

@media (max-width: 640px){
  .hide-mobile{ display: none !important; }
}
@media (min-width: 641px){
  .show-mobile{ display: none !important; }
}