/* ==================================================
   Solved problems — Figma "Solved problems" (9077:1492, 1440 x 4669)
   Reuses the home page's archive cards, journal and closing CTA;
   adds the pagination component and this page's spacing.
   ================================================== */

/* The closing CTA carries its own 160px bottom padding, so main adds none */
.page__main {
  padding-bottom: 0;
}

/* --------------------------------------------------
   Page head — 9077:1732 (heading at y156)
   -------------------------------------------------- */

/* This page opens with the archive, so it drops home.css's 164px lead-in */
.archive {
  margin-top: 0;
}

.solved-head {
  padding-top: 55px;
}

.solved-head__lead {
  margin-top: 16px;
  padding-top: 8px;
  max-width: 672px;
}

/* --------------------------------------------------
   Archive spacing for this page
   Toolbar y467 · grid y567 · 5 rows of 275px
   -------------------------------------------------- */

.archive__toolbar,
[data-include*="archive-toolbar"] {
  margin-top: 55px;
}

.archive__grid {
  grid-auto-rows: 275px;
  column-gap: 24px;
  /* 29px keeps the 5 row tops on the Figma pitch (567 → 1783) */
  row-gap: 29px;
  margin-top: 43px;
}

/* --------------------------------------------------
   Pagination — 9077:2651 (centred, y2128)
   -------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 70px;
}

.pagination__step {
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 32px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pagination__step:hover:not([aria-disabled="true"]) {
  border-color: var(--color-accent);
  color: var(--color-text-strong);
}

.pagination__step[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__page {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 32px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.pagination__page:hover {
  border-color: var(--color-accent);
  color: var(--color-text-strong);
}

.pagination__page.is-current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.pagination__ellipsis {
  padding-inline: 8px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 24px;
}

/* --------------------------------------------------
   Spacing for the reused sections
   -------------------------------------------------- */

/* Figma: journal heading at y2289, 121px below the pagination */
.journal {
  margin-top: 121px;
}

/* Figma: the closing CTA starts immediately after the post cards */
.closing {
  margin-top: 0;
}

/* ==================================================
   Responsive
   ================================================== */

@media (max-width: 1100px) {
  .solved-head {
    padding-top: 48px;
  }

  .archive__toolbar {
    margin-top: 32px;
  }

  .archive__grid {
    grid-auto-rows: auto;
    row-gap: 24px;
    margin-top: 32px;
  }

  .journal {
    margin-top: 96px;
  }

  .pagination {
    margin-top: 48px;
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  .pagination__step {
    padding: 9px 12px;
  }

  .pagination__page {
    width: 34px;
    height: 34px;
  }
}