/* =====================================================================
   04. layout.css — konteyner, grid, bo'lim ritmi
   design.md: bo'limlar rang almashinishi bilan ajraladi (oq ↔ parchment ↔ qora)
   ===================================================================== */

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

/* ---------- Bo'limlar ---------- */
.section       { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(32px, 4vw, 48px); }
.section-sunk  { background: var(--parchment); }
.section-elev  { background: var(--canvas); }
.section-dark  { background: var(--tile-1); color: var(--body-on-dark); }

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--body-on-dark); }
.section-dark .text-muted,
.section-dark .text-subtle { color: var(--body-muted-dark); }

/* ---------- Bo'lim sarlavhasi ---------- */
.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(24px, 3.5vw, 40px);
  max-width: 68ch;
}
.section-head.is-center {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.grid-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 940px) {
  .grid-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-7);
    align-items: start;
  }
  .grid-sidebar > aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- Stack / row ---------- */
.stack   { display: grid; gap: var(--sp-4); }
.stack-2 { display: grid; gap: var(--sp-2); }
.stack-3 { display: grid; gap: var(--sp-3); }
.stack-6 { display: grid; gap: var(--sp-6); }

.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row-between { justify-content: space-between; }

.divider {
  height: 1px;
  background: var(--hairline);
  border: 0;
  margin-block: var(--sp-6);
}

/* =====================================================================
   Vertikal ritm — konteynerning bevosita bolalari boʻlgan bloklar orasida
   kamida 32px joy. (Stack/grid ichidagilarni gap boshqaradi — bu qoida
   ularga tegmaydi, chunki faqat `.container > *` ga qaraydi.)
   ===================================================================== */

.container
  > :where(.grid, .stack, .stack-2, .stack-3, .stack-6, .split, .card, .spec, .callout,
           .accordion, .table-wrap, .stages, .arch, .stat-grid, .quiz, .form-card,
           .empty, .acts, .dg-card, .dg-actions, .maprow, .cta, .timeline, .aims,
           .steam-grid, .lesson-nav, .badge-grid, .filter-bar, .row)
  + :where(.grid, .stack, .stack-2, .stack-3, .stack-6, .split, .card, .spec, .callout,
           .accordion, .table-wrap, .stages, .arch, .stat-grid, .quiz, .form-card,
           .empty, .acts, .dg-card, .maprow, .cta, .timeline, .aims, .steam-grid,
           .lesson-nav, .badge-grid, .section-head, .section-head-row, h2, h3) {
  margin-top: var(--sp-6);
}

/* Boʻlim sarlavhasidan keyingi h3 (masalan, loyiha.php dagi «Frontend») */
.container > .section-head + h3 { margin-top: 0; }

/* Filtr/qidiruv qatoridan keyingi roʻyxat — sal yaqinroq */
.container > :where(.filter-bar, .row) + :where(.grid, .stack-3, .stack-6) { margin-top: var(--sp-5); }