/* ============================================
   Utility Classes
   ============================================ */

/* ---- Text Alignment ---- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---- Text Color ---- */
.text-gold    { color: var(--accent); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--text-secondary); }
.text-on-dark { color: var(--text-on-dark); }

/* ---- Backgrounds ---- */
.bg-dark   { background-color: var(--bg-dark); }
.bg-cream  { background-color: var(--bg-primary); }
.bg-white  { background-color: var(--color-white); }
.bg-alt    { background-color: var(--bg-section-alt); }

/* ---- Spacing (margin) ---- */
.mt-0  { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0  { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

/* ---- Spacing (padding) ---- */
.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }

/* ---- Display ---- */
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }

/* ---- Max width constrainers ---- */
.max-w-prose { max-width: 65ch; }
.max-w-sm    { max-width: 480px; }
.max-w-md    { max-width: 640px; }
.max-w-lg    { max-width: 800px; }

.mx-auto { margin-inline: auto; }

/* ---- Image ---- */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-rounded {
  border-radius: var(--radius-md);
}

/* ---- Visually Hidden (accessible) ---- */
.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 visibility ---- */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

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

@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}