/* ==========================================================================
   layout.css — Slide containers, responsive grid, snap scrolling
   Mobile-first. Base = 320px.
   Snap scrolling activates at lg: (1024px) only.
   ========================================================================== */

/* ---------- Main container ---------- */
main {
  width: 100%;
  position: relative;
}

/* ---------- Slide sections ---------- */
.slide {
  position: relative;
  width: 100%;
  height: 100dvh; /* Exact height eliminates snap micro-jump */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  overflow: hidden;
}

/* ---------- Slide content wrapper ---------- */
.slide-content {
  position: relative;
  width: 100%;
  max-width: 90vw;
  z-index: var(--z-content, 1);
}

/* ---------- Background layers ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-bg, -10);
}

.bg-layer svg,
.bg-layer canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Responsive: tablet ---------- */
@media (min-width: 768px) {
  .slide {
    padding: var(--space-8);
  }

  .slide-content {
    max-width: 80vw;
  }
}

/* ---------- Scroll snap — all viewports, browser-native ---------- */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth; /* Smoother snap settling */
}

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always; /* Prevent overshooting multiple slides */
}

/* ---------- Responsive: desktop ---------- */
@media (min-width: 1024px) {
  .slide {
    height: 100dvh;
    min-height: auto;
  }

  .slide-content {
    max-width: 70vw;
  }
}

/* ---------- Responsive: wide desktop ---------- */
@media (min-width: 1440px) {
  .slide-content {
    max-width: 60vw;
    max-width: min(60vw, 1200px);
  }
}

/* ---------- Utility: full-bleed section ---------- */
.slide--bleed {
  padding: 0;
}

/* ---------- Responsive grid (for portfolio, features, etc.) ---------- */
.grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

/* 1 column on mobile (default) */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* ---------- Loading-active body lock ---------- */
body.loading-active {
  overflow: hidden;
  height: 100dvh;
}