/* =========================================================
   Layout - Container, Section, Grid
========================================================= */

.ozd-container,
.ozd-container-wide,
.ozd-content-narrow {
  width: min(100% - 32px, var(--ozd-container));
  margin-inline: auto;
}

.ozd-container-wide {
  width: min(100% - 32px, var(--ozd-container-wide));
}

.ozd-content-narrow {
  width: min(100% - 32px, var(--ozd-content));
}

.ozd-site-main {
  min-height: calc(100vh - var(--ozd-header-height));
  padding: 34px 0 calc(var(--ozd-player-height) + 34px);
}

.ozd-section,
.ozd-module {
  margin-block: 0 var(--ozd-space-xl);
}

.ozd-section--compact { margin-bottom: var(--ozd-space-lg); }
.ozd-section--loose { margin-bottom: var(--ozd-space-2xl); }

.ozd-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ozd-space-md);
  margin-bottom: var(--ozd-space-md);
}

.ozd-section__title {
  margin: 0;
  color: var(--ozd-primary);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.ozd-section__desc {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--ozd-muted);
}

.ozd-module:last-child,
.ozd-section:last-child {
  margin-bottom: 0;
}

.ozd-page,
.ozd-single {
  max-width: 920px;
  margin-inline: auto;
}

.ozd-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ozd-sidebar);
  gap: var(--ozd-gap);
  align-items: start;
}

.ozd-grid {
  display: grid;
  gap: var(--ozd-gap);
}

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

.ozd-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.ozd-stack {
  display: grid;
  gap: var(--ozd-space-md);
}

.ozd-stack--sm { gap: var(--ozd-space-sm); }
.ozd-stack--lg { gap: var(--ozd-space-lg); }

.ozd-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ozd-space-sm);
}

.ozd-cluster--between { justify-content: space-between; }
.ozd-cluster--end { justify-content: flex-end; }

@media (max-width: 980px) {
  .ozd-main-grid,
  .ozd-grid--2,
  .ozd-grid--3,
  .ozd-grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ozd-container,
  .ozd-container-wide,
  .ozd-content-narrow {
    width: min(100% - 24px, var(--ozd-container));
  }

  .ozd-site-main {
    padding-top: 24px;
    padding-bottom: calc(var(--ozd-player-height) + 24px);
  }

  .ozd-section__header {
    display: grid;
    align-items: start;
  }
}