/* =============================================
   VEDICA LABS — Utilities & Helpers
   ============================================= */

/* ---- Spacing Helpers ---- */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--space-sm, 8px); }
.mb-sm { margin-bottom: var(--space-sm, 8px); }
.mt-md { margin-top: var(--space-md, 16px); }
.mb-md { margin-bottom: var(--space-md, 16px); }
.mt-lg { margin-top: var(--space-lg, 24px); }
.mb-lg { margin-bottom: var(--space-lg, 24px); }
.mt-xl { margin-top: var(--space-xl, 40px); }
.mb-xl { margin-bottom: var(--space-xl, 40px); }

.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm, 8px); }
.p-md { padding: var(--space-md, 16px); }
.p-lg { padding: var(--space-lg, 24px); }
.p-xl { padding: var(--space-xl, 40px); }

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

/* ---- Visibility ---- */
.hidden { display: none !important; }
.visible { display: block; }
.invisible { visibility: hidden; }

@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}

/* ---- Width ---- */
.w-full { width: 100%; }
.w-auto { width: auto; }

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

/* ---- Position ---- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

/* ---- Z-Index ---- */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }

/* ---- Border ---- */
.rounded-sm { border-radius: var(--radius-sm, 6px); }
.rounded-md { border-radius: var(--radius-md, 12px); }
.rounded-lg { border-radius: var(--radius-lg, 20px); }
.rounded-full { border-radius: var(--radius-full, 9999px); }

/* ---- Background ---- */
.bg-surface { background: var(--surface, #161D2F); }
.bg-surface-2 { background: var(--surface-2, #1E2740); }
.bg-accent-glow { background: var(--accent-glow, rgba(79,142,247,0.25)); }

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

@supports not (aspect-ratio: 1 / 1) {
  .aspect-square::before,
  .aspect-video::before,
  .aspect-portrait::before {
    content: '';
    display: block;
  }
  .aspect-square::before { padding-top: 100%; }
  .aspect-video::before { padding-top: 56.25%; }
  .aspect-portrait::before { padding-top: 133.33%; }
}

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

/* ---- Line Clamp ---- */
.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;
}

/* ---- Focus Ring (for custom focus styles) ---- */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent, #4F8EF7);
  outline-offset: 2px;
}

/* ---- Glass Effect ---- */
.glass {
  background: var(--nav-bg, rgba(10, 15, 30, 0.8));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border, rgba(255,255,255,0.07));
}

/* ---- No Select ---- */
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Hover Lift ---- */
.hover-lift {
  transition: transform var(--transition-base, 0.25s), box-shadow var(--transition-base, 0.25s);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 8px 40px rgba(0,0,0,0.6));
}

/* ---- Content Visibility for Performance ---- */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* ---- Scroll Margin for Anchor Links ---- */
.scroll-margin {
  scroll-margin-top: calc(var(--nav-height, 72px) + 24px);
}

/* ---- Skip Link (Accessibility) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--accent, #4F8EF7);
  color: #fff;
  border-radius: var(--radius-md, 12px);
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast, 0.15s);
}
.skip-link:focus {
  top: 16px;
}