/* ============================================================
   DLight Media Solution — Main CSS Entry Point
   Import order matters — do not reorder
   ============================================================ */

@import url('./variables.css?v=3');
@import url('./typography.css?v=3');
@import url('./components.css?v=3');
@import url('./animations.css?v=3');
@import url('./responsive.css?v=3');

/* ----------------------------------------------------------
   GLOBAL PAGE UTILITIES
   (small helpers that don't belong in any single file)
---------------------------------------------------------- */

/* Page wrapper — adds top padding for fixed nav */
.page-content {
  padding-top: var(--nav-height);
}

/* Section background alternation */
.bg-void    { background-color: var(--color-bg); }
.bg-surface { background-color: var(--color-surface); }
.bg-elevated { background-color: var(--color-elevated); }

/* Divider lines */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.divider-mid {
  width: 100%;
  height: 1px;
  background: var(--color-border-mid);
}

/* Aspect ratios for project cards */
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-3-2 { aspect-ratio: 3 / 2; }

/* Image cover fill */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient fade bottom (hero strip mask) */
.fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to top, var(--color-bg), transparent);
  pointer-events: none;
}

/* Red accent line (used under hero headings) */
.red-line {
  display: block;
  width: 80px;
  height: 2px;
  background: var(--color-red);
  margin: 24px 0;
}

/* Scroll indicator (vertical arrow + line) */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-indicator__label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-dim);
}

.scroll-indicator__line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-red), transparent);
}

/* Grid gap helpers */
.gap-px { gap: 1px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-12 { gap: 48px; }

/* Overflow hidden on sections */
.overflow-clip {
  overflow: hidden;
}