/**
 * StrideCore — Utilities (Brand-Aware)
 * =====================================
 * Pure layout helpers. No hard-coded brand values.
 * Three breakpoints: desktop (default), tablet (1024px), mobile (768px).
 */

/* --------------------------------------------------------
   TEXT
   -------------------------------------------------------- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-muted   { color: var(--grey-600); }
.text-white   { color: var(--white); }
.text-brand   { color: var(--brand-primary); }

/* --------------------------------------------------------
   GRID LAYOUTS — desktop default
   -------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

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

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}

/* Tablet: 4-col → 2-col, 3-col → 2-col */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: everything → 1-col */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------
   FLEX UTILITIES
   -------------------------------------------------------- */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8     { gap: var(--space-8); }
.gap-16    { gap: var(--space-16); }
.gap-24    { gap: var(--space-24); }
.gap-32    { gap: var(--space-32); }

/* --------------------------------------------------------
   SPACING HELPERS — margin
   -------------------------------------------------------- */
.mt-8  { margin-top: var(--space-8); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }

.mb-8  { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-48 { margin-bottom: var(--space-48); }
.mb-64 { margin-bottom: var(--space-64); }

/* --------------------------------------------------------
   SPACING HELPERS — padding
   -------------------------------------------------------- */
.pt-32 { padding-top: var(--space-32); }
.pt-48 { padding-top: var(--space-48); }
.pt-64 { padding-top: var(--space-64); }

.pb-32 { padding-bottom: var(--space-32); }
.pb-48 { padding-bottom: var(--space-48); }
.pb-64 { padding-bottom: var(--space-64); }

.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }

.py-32 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
.py-48 { padding-top: var(--space-48); padding-bottom: var(--space-48); }
.py-64 { padding-top: var(--space-64); padding-bottom: var(--space-64); }

/* --------------------------------------------------------
   RESPONSIVE SPACING — reduce on mobile
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .mt-64 { margin-top: var(--space-32); }
  .mb-64 { margin-bottom: var(--space-32); }
  .pt-64 { padding-top: var(--space-32); }
  .pb-64 { padding-bottom: var(--space-32); }
  .py-64 { padding-top: var(--space-32); padding-bottom: var(--space-32); }
}

/* --------------------------------------------------------
   WIDTH CONSTRAINTS
   -------------------------------------------------------- */
.max-w-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.max-w-content { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
.max-w-wide   { max-width: var(--content-width-wide); margin-left: auto; margin-right: auto; }
.w-full { width: 100%; }

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

/* Hide on mobile / show on mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* --------------------------------------------------------
   SCREEN READER
   -------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------
   ASPECT RATIOS
   -------------------------------------------------------- */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* --------------------------------------------------------
   OVERFLOW
   -------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}