/* ==========================================================================
   layout.css — container, sections, grid system, responsive breakpoints
   Memetics · memetics.pro
   Breakpoints: 480 / 768 / 1024 / 1280 — mobile first
   ========================================================================== */

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

.container-narrow {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

section {
  padding-block: var(--space-lg);
}

.section-tight { padding-block: var(--space-md); }
.section-flush-top { padding-top: 0; }

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-md);
}

.section-head p { margin-top: 1rem; }

.section-head-center {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-md);
  text-align: center;
}

.section-head-center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Grid system — mobile first, everything single column by default
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.grid-gap-lg { gap: 1.5rem; }

.stack { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: 0.5rem; }
.stack-lg { display: grid; gap: 2rem; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.split {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  align-items: start;
}

.flow-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.flow-arrow {
  display: none;
  align-self: center;
  justify-self: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: calc(var(--space-lg) + 2rem) var(--space-lg);
}

.hero h1 { margin-bottom: 1.25rem; }
.hero .lead { margin-bottom: 1.75rem; }

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.hero-meta b { color: var(--text-secondary); font-weight: 500; }

/* --------------------------------------------------------------------------
   480px+
   -------------------------------------------------------------------------- */

@media (min-width: 480px) {
  .container,
  .container-narrow { padding-inline: 1.5rem; }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

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

/* --------------------------------------------------------------------------
   768px+
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  section { padding-block: var(--space-xl); }
  .section-tight { padding-block: var(--space-lg); }
  .section-flush-top { padding-top: 0; }

  .hero { padding-block: calc(var(--space-xl) + 1rem) var(--space-xl); }

  .grid { gap: 1.25rem; }
  .grid-gap-lg { gap: 2rem; }

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

  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .split-6-5 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .split-5-6 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  .flow-row {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0.75rem;
  }

  .flow-arrow { display: block; }
}

/* --------------------------------------------------------------------------
   1024px+
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .container,
  .container-narrow { padding-inline: 2rem; }

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

  .split { gap: var(--space-lg); }

  .sticky-side {
    position: sticky;
    top: 110px;
  }
}

/* --------------------------------------------------------------------------
   1280px+
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  section { padding-block: var(--space-xl); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
}