/*
 * NEXA POINT GROUP — Utilities
 * Atomic helpers for spacing, typography, colour, display, and visibility
 */

/* ─── Display ─── */
.block         { display: block; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }

/* Responsive hide */
@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; } }

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

/* ─── Text sizes ─── */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }

/* ─── Font weights ─── */
.font-regular   { font-weight: var(--weight-regular); }
.font-medium    { font-weight: var(--weight-medium); }
.font-semibold  { font-weight: var(--weight-semibold); }
.font-bold      { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

/* ─── Font families ─── */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* ─── Text colours ─── */
.text-default  { color: var(--color-text); }
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-accent   { color: var(--color-accent); }
.text-white    { color: #fff; }
.text-success  { color: var(--color-success); }
.text-error    { color: var(--color-error); }

/* ─── Gradient text ─── */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Letter spacing ─── */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* ─── Line heights ─── */
.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* ─── Uppercase label ─── */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ─── Backgrounds ─── */
.bg-base     { background: var(--color-bg); }
.bg-surface  { background: var(--color-surface); }
.bg-alt      { background: var(--color-bg-alt); }
.bg-accent   { background: var(--color-accent); }
.bg-gradient { background: var(--gradient-brand); }

/* ─── Border radius ─── */
.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-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ─── Shadows ─── */
.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); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* ─── Borders ─── */
.border         { border: 1px solid var(--color-border); }
.border-strong  { border: 1px solid var(--color-border-strong); }
.border-accent  { border: 1px solid var(--color-accent); }
.border-top     { border-top: 1px solid var(--color-border); }
.border-bottom  { border-bottom: 1px solid var(--color-border); }

/* ─── Width / Max-width ─── */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.max-w-sm { max-width: var(--container-sm); }
.max-w-md { max-width: var(--container-md); }
.max-w-lg { max-width: var(--container-max); }

/* ─── Margin utilities ─── */
.m-auto     { margin: auto; }
.mx-auto    { margin-inline: auto; }
.mt-0       { margin-top: 0; }
.mb-0       { margin-bottom: 0; }
.mt-4       { margin-top: var(--space-4); }
.mb-4       { margin-bottom: var(--space-4); }
.mt-6       { margin-top: var(--space-6); }
.mb-6       { margin-bottom: var(--space-6); }
.mt-8       { margin-top: var(--space-8); }
.mb-8       { margin-bottom: var(--space-8); }
.mt-12      { margin-top: var(--space-12); }
.mb-12      { margin-bottom: var(--space-12); }
.mt-16      { margin-top: var(--space-16); }
.mb-16      { margin-bottom: var(--space-16); }

/* ─── Padding utilities ─── */
.p-0  { padding: 0; }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-12{ padding-block: var(--space-12); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }

/* ─── Position ─── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }

/* ─── Overflow ─── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ─── Opacity ─── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ─── Pointer events ─── */
.pointer-none { pointer-events: none; }
.pointer-auto { pointer-events: auto; }

/* ─── Object fit ─── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center  { object-position: center; }

/* ─── Aspect ratios ─── */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-4-3    { aspect-ratio: 4 / 3; }

/* ─── Z-index ─── */
.z-0   { z-index: var(--z-base); }
.z-10  { z-index: var(--z-raised); }
.z-nav { z-index: var(--z-nav); }

/* ─── 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;
}