/*
 * utilities.css
 * Biharibuilder Design System — Utility Classes
 * Version: 1.0
 *
 * Single-purpose utility classes. No !important used.
 * Display, spacing, width, color, visibility, and misc helpers.
 */

/* =========================================================
   DISPLAY
   ========================================================= */

.d-none    { display: none;         }
.d-block   { display: block;        }
.d-flex    { display: flex;         }
.d-grid    { display: grid;         }
.d-inline  { display: inline;       }
.d-inline-block { display: inline-block; }
.d-inline-flex  { display: inline-flex;  }

/* Responsive show/hide */
.hide-mobile  { display: none; }

@media (min-width: 768px) {
  .hide-mobile  { display: revert; }
  .hide-desktop { display: none;   }
}

/* =========================================================
   SPACING — Margin
   ========================================================= */

.m-0  { margin: 0; }

.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); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }

.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); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }

.ml-auto { margin-left: auto;  }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

/* =========================================================
   SPACING — Padding
   ========================================================= */

.p-0  { padding: 0; }
.p-4  { padding: var(--space-4);  }
.p-6  { padding: var(--space-6);  }
.p-8  { padding: var(--space-8);  }

.pt-4  { padding-top: var(--space-4);  }
.pt-6  { padding-top: var(--space-6);  }
.pt-8  { padding-top: var(--space-8);  }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-24 { padding-top: var(--space-24); }

.pb-4  { padding-bottom: var(--space-4);  }
.pb-6  { padding-bottom: var(--space-6);  }
.pb-8  { padding-bottom: var(--space-8);  }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-24 { padding-bottom: var(--space-24); }

/* =========================================================
   GAP UTILITIES
   ========================================================= */

.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);  }
.gap-12 { gap: var(--space-12); }

/* =========================================================
   WIDTH UTILITIES
   ========================================================= */

.w-full  { width: 100%;    }
.w-auto  { width: auto;    }
.h-full  { height: 100%;   }
.h-auto  { height: auto;   }

.max-720  { max-width: var(--container-reading); }
.max-900  { max-width: var(--container-cta);     }
.max-1280 { max-width: var(--container-max);     }

/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.bg-white    { background-color: var(--color-white);     }
.bg-offwhite { background-color: var(--color-offwhite);  }
.bg-sand     { background-color: var(--color-sand);      }
.bg-dark     { background-color: var(--color-anthracite);}
.bg-footer   { background-color: var(--bg-footer);       }
.bg-copper   { background-color: var(--color-copper);    }

/* =========================================================
   TEXT COLOR UTILITIES
   ========================================================= */

.text-white   { color: var(--color-white);     }
.text-dark    { color: var(--color-anthracite);}
.text-muted   { color: var(--text-muted);      }
.text-copper  { color: var(--color-copper);    }
.text-body    { color: var(--text-body);       }

/* =========================================================
   BORDER UTILITIES
   ========================================================= */

.border-light  { border: 1px solid var(--border-light);  }
.border-medium { border: 1px solid var(--border-medium); }
.border-copper { border: 1px solid var(--color-copper);  }
.border-none   { border: none; }

.border-top    { border-top: 1px solid var(--border-light);    }
.border-bottom { border-bottom: 1px solid var(--border-light); }

/* =========================================================
   BORDER RADIUS UTILITIES
   ========================================================= */

.rounded-sm   { border-radius: var(--radius-sm);    }
.rounded-md   { border-radius: var(--radius-md);    }
.rounded-lg   { border-radius: var(--radius-lg);    }
.rounded-xl   { border-radius: var(--radius-xl);    }
.rounded-full { border-radius: var(--radius-round); }

/* =========================================================
   SHADOW UTILITIES
   ========================================================= */

.shadow-none  { box-shadow: none;            }
.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }

/* =========================================================
   OPACITY
   ========================================================= */

.opacity-0   { opacity: 0;   }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75;}
.opacity-100 { opacity: 1;   }

/* =========================================================
   OVERFLOW
   ========================================================= */

.overflow-hidden   { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* =========================================================
   POSITION
   ========================================================= */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }
.sticky   { position: sticky;   }

/* =========================================================
   OBJECT FIT
   ========================================================= */

.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; }

/* =========================================================
   IMAGE UTILITIES
   ========================================================= */

.img-fluid   { width: 100%; height: auto; }
.img-cover   { object-fit: cover;   width: 100%; height: 100%; }
.img-contain { object-fit: contain; width: 100%; height: 100%; }
.img-rounded { border-radius: var(--radius-image); }
.img-shadow  { box-shadow: var(--shadow-md); }

/* =========================================================
   ICON SIZE HELPERS
   ========================================================= */

.icon-sm  { width: var(--icon-size-sm);  height: var(--icon-size-sm);  }
.icon-md  { width: var(--icon-size-md);  height: var(--icon-size-md);  }
.icon-lg  { width: var(--icon-size-lg);  height: var(--icon-size-lg);  }
.icon-xl  { width: var(--icon-size-xl);  height: var(--icon-size-xl);  }

/* =========================================================
   CURSOR
   ========================================================= */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* =========================================================
   TRANSITION HELPERS
   ========================================================= */

.transition-fast   { transition: all var(--transition-fast);   }
.transition-normal { transition: all var(--transition-normal);  }
.transition-slow   { transition: all var(--transition-slow);   }

/* =========================================================
   DIVIDER
   ========================================================= */

.divider {
  width: 48px;
  height: 3px;
  background: var(--color-copper);
  border-radius: var(--radius-round);
  margin-block: var(--space-4);
}

.divider--center { margin-inline: auto; }

/* =========================================================
   BADGE / PILL
   ========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-round);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
}

.badge--copper {
  background: rgba(180, 100, 60, 0.1);
  color: var(--color-copper);
}

.badge--success {
  background: rgba(60, 122, 74, 0.1);
  color: var(--color-success);
}

.badge--concrete {
  background: var(--neutral-200);
  color: var(--text-muted);
}

/* Status badge for project cards */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  border-radius: var(--radius-round);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  backdrop-filter: blur(8px);
}

.status-badge--coming-soon {
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-copper);
}

.status-badge--completed {
  background: rgba(60, 122, 74, 0.9);
  color: var(--color-white);
}

.status-badge--in-progress {
  background: rgba(199, 138, 29, 0.9);
  color: var(--color-white);
}

/* =========================================================
   VISUALLY HIDDEN — 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-width: 0;
}

/* =========================================================
   TRUNCATE
   ========================================================= */

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

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}