/* layout.css — page-level layout primitives */
.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }
.section-loose { padding-block: var(--space-9); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Dark sections (hero, footer, cockpit) */
.dark-surface {
  background: var(--bg);
  color: var(--text-inverse);
}
.dark-surface .muted { color: var(--text-inverse-muted); }

/* Radial glow background helper */
.glow-bg {
  position: relative;
  background:
    radial-gradient(800px 400px at 80% -10%, rgba(0,168,107,0.10), transparent 60%),
    radial-gradient(600px 300px at 10% 20%, rgba(37,99,235,0.06), transparent 60%),
    var(--bg);
}

/* Grid texture overlay */
.grid-texture::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Dot pattern overlay (different from hero grid) */
.pattern-dots {
  position: relative;
}
.pattern-dots::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,168,107,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.pattern-dots > .container { position: relative; z-index: 1; }

/* Diagonal stripe pattern overlay */
.pattern-diagonal {
  position: relative;
}
.pattern-diagonal::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(0,168,107,0.03) 40px,
    rgba(0,168,107,0.03) 41px,
    transparent 41px,
    transparent 80px
  );
  pointer-events: none;
  z-index: 0;
}
.pattern-diagonal > .container { position: relative; z-index: 1; }

/* Two-column hero */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

/* Cockpit shell */
.cockpit-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

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

@media (min-width: 1024px) {
  .cockpit-shell {
    grid-template-columns: 260px 1fr 320px;
  }
}