/* ==========================================================================
   Utilities -- Small, single-purpose helper classes
   Loaded last so these can override component defaults when needed.
   ========================================================================== */

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

/* ---- Text color ---- */
.mg-text-primary   { color: var(--mg-color-primary); }
.mg-text-secondary { color: var(--mg-color-secondary); }
.mg-text-white     { color: var(--mg-color-white); }
.mg-text-muted     { color: var(--mg-color-gray-mid); }

/* ---- Font weight ---- */
.mg-fw-regular  { font-weight: var(--mg-font-weight-regular); }
.mg-fw-semibold { font-weight: var(--mg-font-weight-semibold); }
.mg-fw-bold     { font-weight: var(--mg-font-weight-bold); }

/* ---- Display / Flex ---- */
.mg-flex        { display: flex; }
.mg-flex-col    { display: flex; flex-direction: column; }
.mg-flex-wrap   { flex-wrap: wrap; }
.mg-items-center{ align-items: center; }
.mg-justify-center  { justify-content: center; }
.mg-justify-between { justify-content: space-between; }
.mg-gap-xs { gap: var(--mg-space-xs); }
.mg-gap-sm { gap: var(--mg-space-sm); }
.mg-gap-md { gap: var(--mg-space-md); }
.mg-gap-lg { gap: var(--mg-space-lg); }

/* ---- Grid ---- */
.mg-grid {
  display: grid;
  gap: var(--mg-space-lg);
}
.mg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mg-grid-4 { grid-template-columns: repeat(4, 1fr); }

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

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

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

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

/* ---- Spacing: padding ---- */
.mg-p-0  { padding: 0; }
.mg-p-sm { padding: var(--mg-space-sm); }
.mg-p-md { padding: var(--mg-space-md); }
.mg-p-lg { padding: var(--mg-space-lg); }

/* ---- Width helpers ---- */
.mg-w-full { width: 100%; }
.mg-max-w-sm { max-width: 480px; margin-inline: auto; }
.mg-max-w-md { max-width: 720px; margin-inline: auto; }
.mg-max-w-lg { max-width: 960px; margin-inline: auto; }

/* ---- Visibility ---- */
.mg-hide-mobile { display: block; }
.mg-hide-desktop { display: none; }

@media (max-width: 768px) {
  .mg-hide-mobile { display: none; }
  .mg-hide-desktop { display: block; }
}

/* ---- Rounded corners / shadow shortcuts ---- */
.mg-rounded-sm { border-radius: var(--mg-radius-sm); }
.mg-rounded-md { border-radius: var(--mg-radius-md); }
.mg-shadow     { box-shadow: var(--mg-shadow-sm); }