/* ── Breakpoints (mobile-first)
   768px  — tablet
   1024px — desktop
   1280px — wide
─────────────────────────────────────────────────────────────────────────── */

/* ── Container ────────────────────────────────────────────────────────────── */

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

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-lg);
  }
}

.container--wide {
  max-width: var(--container-max);
}

.container--narrow {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* ── Site main ────────────────────────────────────────────────────────────── */

.site-main {
  min-height: 60vh;
}

/* ── Section spacing ──────────────────────────────────────────────────────── */

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

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-9);
  }
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.page-header {
  padding-block: var(--space-7);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-7);
}

@media (min-width: 1024px) {
  .page-header {
    padding-block: var(--space-8);
  }
}

.page-header__title {
  font-size: var(--text-3xl);
  letter-spacing: 0.05em;
}

.page-header__desc {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  margin-top: var(--space-3);
  max-width: var(--content-width);
}

/* ── Two-column sidebar layout ────────────────────────────────────────────── */

.layout-sidebar {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 1024px) {
  .layout-sidebar {
    grid-template-columns: 1fr var(--sidebar-width);
    align-items: start;
  }
}

.layout-sidebar__main {
  min-width: 0;
}

.layout-sidebar__side {
  min-width: 0;
}

/* ── Post grid ────────────────────────────────────────────────────────────── */

.post-grid {
  display: grid;
  gap: var(--space-6);
}

.post-grid--2 {
  grid-template-columns: 1fr;
}

.post-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .post-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .post-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Episode grid ─────────────────────────────────────────────────────────── */

.episode-grid {
  display: grid;
  gap: var(--space-6);
}

.episode-grid--2 {
  grid-template-columns: 1fr;
}

.episode-grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .episode-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .episode-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Entry content ────────────────────────────────────────────────────────── */

.entry-content {
  max-width: var(--content-width);
}

.entry-content > * + * {
  margin-top: var(--space-5);
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: var(--space-5);
}

.entry-content li + li {
  margin-top: var(--space-2);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-7);
}