/* grid.css — container, section rhythm, layout primitives */

/* ─── CONTAINER ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1440px;
}

/* ─── SECTION SHELL ─────────────────────────────────────── */
.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section--full {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── DARK SECTION VARIANT ───────────────────────────────── */
[data-dark] {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

[data-dark] p {
  color: var(--color-text-muted);
}

[data-dark] .text-eyebrow {
  color: var(--color-text-muted);
}

/* ─── SPOTLIGHT LAYER (cursor effect on dark sections) ───── */
[data-dark] .spotlight-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-above);
  background: radial-gradient(
    400px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    var(--color-spotlight),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-feedback) var(--ease-feedback);
}

/* ─── GRID PRIMITIVES ────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

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

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

/* ─── FLEX UTILITIES ─────────────────────────────────────── */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* ─── SECTION DIVIDER ────────────────────────────────────── */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

[data-dark] .section-divider {
  background: var(--color-border-dark);
}

/* ─── SCROLL REVEAL BASE STATES ──────────────────────────── */
/* Set by IntersectionObserver in animations.js — not driven by JS rendering */
[data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity var(--dur-entrance) var(--ease-entrance),
    transform var(--dur-entrance) var(--ease-entrance);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay via CSS custom property set from data-stagger-index in HTML */
[data-stagger-index] {
  transition-delay: calc(var(--i, 0) * 197ms); /* +35% on prior 146ms — restrained cascade */
}