/* MathPert layout.css — containers, sections, grids */

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}
.container.narrow,
.narrow { max-width: 760px; }

.section { padding-block: clamp(3rem, 6vw, 6rem); }

.section-muted { background: var(--color-surface-muted); }
.section-footnote { padding-block: var(--space-6); }
.section-footnote p { font-size: var(--text-sm); opacity: 0.6; max-width: 60ch; }

.section-dark {
  background: var(--color-surface-dark);
  color: var(--color-bone);
  position: relative;
  z-index: 2; /* sits above the body margin line */
}
.section-dark::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(62, 84, 140, 0.3) 0%, transparent 65%);
}
.section-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section-dark > .container { position: relative; z-index: 3; }
.section-dark .section-title,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--color-bone); }
.section-dark p,
.section-dark .subheadline { color: var(--color-bone-dim); }
.section-dark .eyebrow { color: var(--color-brand-primary); }

.card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.split-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .split-grid { grid-template-columns: 1fr 1fr; }
}
/* grid items may shrink below their content (tables, nowrap rows), so a wide
 * child scrolls inside its own box instead of widening the page (audit U-05) */
.split-grid > *,
.hero-grid > * { min-width: 0; }

.cta-row,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

.stats-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.hero-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr); }
}