/* ============================================================
   Layout — containers, sections, grids, dividers
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-sm  { max-width: var(--container-sm);  margin-inline: auto; padding-inline: var(--gutter); }
.container-md  { max-width: var(--container-md);  margin-inline: auto; padding-inline: var(--gutter); }
.container-lg  { max-width: var(--container-lg);  margin-inline: auto; padding-inline: var(--gutter); }
.container-2xl { max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--gutter); }

/* Section spacing scale */
.section {
  position: relative;
  padding-block: clamp(4rem, 8vw, 8rem);
}
.section-lg { padding-block: clamp(6rem, 12vw, 12rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 5rem); }

.section-head {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.section-head p { color: var(--fg-muted); font-size: var(--fs-md); }

/* Surface tones */
.bg-0 { background: var(--bg-0); }
.bg-1 { background: var(--bg-1); }
.bg-2 { background: var(--bg-2); }
.bg-mesh {
  background: var(--bg-0);
  position: relative;
  isolation: isolate;
}
.bg-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-brand-soft);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* Slanted dividers (Gemini baseline pattern) */
.clip-slant-bottom { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
.clip-slant-top    { clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%); }
.clip-slant-both   { clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }

.divider-gradient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-blue), var(--accent-purple), transparent);
  border: none;
}

.divider-slant {
  width: 100%;
  height: 60px;
  background: var(--gradient-brand);
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 0);
  position: relative;
  z-index: 3;
  pointer-events: none;
}

/* Grid utilities */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

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

/* Stacks */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-xl > * + * { margin-top: var(--space-8); }

/* Sticky/pin scaffolding */
.pin-section { position: relative; min-height: 100vh; }

/* Two-column hero layout */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 1024px) {
  .split-2 { grid-template-columns: 1fr; text-align: center; }
}

/* Aspect helpers */
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-mac { aspect-ratio: 16 / 10; }