/* ============================================================
   Bedrok Labs — Layout
   Containers, sections, grids, split layouts.
   ============================================================ */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--inset) * 2);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.container-narrow {
  width: 100%;
  max-width: calc(var(--container-narrow) + var(--inset) * 2);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.section {
  padding-block: var(--section-pad);
}

.section-tight {
  padding-block: calc(var(--section-pad) * 0.6);
}

/* Alternate surface band */
.section-surface {
  background-color: var(--color-surface);
}

/* Section header block (eyebrow + heading + lead) */
.section-header {
  max-width: 760px;
  margin-bottom: var(--space-12);
}

.section-header.is-centered {
  margin-inline: auto;
  text-align: center;
}

.section-header > .lead {
  margin-top: var(--space-5);
}

@media (min-width: 1024px) {
  .section-header {
    margin-bottom: var(--space-16);
  }
}

/* ---- Grids ---- */
.grid-3,
.grid-2,
.grid-4 {
  display: grid;
  gap: var(--space-6);
}

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

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

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

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

  .grid-2 {
    gap: var(--space-8);
  }
}

/* ---- Split (two-column asymmetric) ---- */
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.split.is-start {
  align-items: start;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }

  .split.is-wide-media {
    grid-template-columns: 5fr 7fr;
  }

  .split.is-wide-copy {
    grid-template-columns: 7fr 5fr;
  }

  /* Flip visual order on desktop while keeping copy-first DOM order */
  .split.is-reversed > :first-child {
    order: 2;
  }

  .split.is-reversed > :last-child {
    order: 1;
  }
}

/* ---- Cluster / stack helpers ---- */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack-tight > * + * {
  margin-top: var(--space-2);
}

/* Spacing utilities */
.mt-5 {
  margin-top: var(--space-5);
}

.mt-8 {
  margin-top: var(--space-8);
}

.stack-lg > * + * {
  margin-top: var(--space-8);
}

/* ---- Topographic contour texture (decorative) ----
   Pure CSS: layered radial rings, very low contrast.
   Apply to a positioned section; content sits above it. */
.has-topo {
  position: relative;
  overflow: hidden;
}

.has-topo::before {
  content: "";
  position: absolute;
  top: -280px;
  right: -280px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0 64px,
    currentColor 64px 66px
  );
  opacity: 0.045;
  pointer-events: none;
}

.has-topo > * {
  position: relative;
}