/* ============================================================
   ADW Rating — Utility Classes
   Low-level single-purpose helpers
   ============================================================ */

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

/* ---- Text style ---- */
.text-muted   { color: var(--color-text-secondary); }
.text-light   { color: var(--color-text-tertiary); }
.text-small   { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.text-bold    { font-weight: var(--font-weight-bold); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-upper   { text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.text-nowrap  { white-space: nowrap; }

/* ---- Flexbox ---- */
.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-wrap    { flex-wrap: wrap; }
.flex-col     { flex-direction: column; }
.flex-1       { flex: 1; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* ---- Responsive grid layouts ---- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

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

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

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

/* ---- Spacing: margin top ---- */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* ---- Spacing: margin bottom ---- */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* ---- Spacing: padding ---- */
.p-0   { padding: 0; }
.p-2   { padding: var(--space-2); }
.p-3   { padding: var(--space-3); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ---- Responsive visibility ---- */
@media (max-width: 639px) {
  .hidden-mobile { display: none !important; }
}

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

@media (max-width: 1023px) {
  .hidden-tablet-down { display: none !important; }
}

/* ---- Screen reader only ---- */
.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;
}

/* ---- Misc ---- */
.w-full       { width: 100%; }
.rounded      { border-radius: var(--radius-md); }
.shadow       { box-shadow: var(--shadow-md); }
.overflow-hidden { overflow: hidden; }
.relative     { position: relative; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }