/* =============================================================
   UTILITIES — Small, single-purpose helper classes
   ============================================================= */

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
}

.container--text {
  max-width: var(--max-w-text);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* ---- Flex shortcuts ---- */
.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-sm        { gap: var(--sp-2); }
.gap-md        { gap: var(--sp-4); }
.gap-lg        { gap: var(--sp-8); }

/* ---- Grid shortcuts ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.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 ---- */
.section-gap      { padding-block: var(--sp-24); }
.section-gap--sm  { padding-block: var(--sp-16); }
.mt-auto { margin-top: auto; }

/* ---- Typography helpers ---- */
.label {
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--clr-accent);
}

.text-muted { color: var(--clr-text-muted); }
.text-accent { color: var(--clr-accent); }
.text-center { text-align: center; }

/* ---- Visual helpers ---- */
.divider {
  border: none;
  border-top: 1px solid var(--clr-border);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Visibility ---- */
.hidden { display: none !important; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}