/* Applications overview. Route: /applications/ — 网站规划.md §8 (lines 440–479),
   §13 (lines 766–793) and §7.3 (lines 362–394). Only page-level rules live
   here; the shared classes stay in style.css. */

/* Space guides: a little more air between rows than the shared grid default. */
.applications-grid { gap: 2.5rem 2rem; }

/* The media block inside a card takes the column width, so a 375px screen
   never scrolls sideways (网站规划.md §19, lines 943–960). */
.applications-card .media { width: 100%; }

.applications-card .card__text + .card__meta { margin-top: 0.35rem; }

/* The reverse-query count of §13: the line exists only while at least one
   published model names the space. */
.applications-card__count { margin: 0; font-size: var(--fs-small); }

/* The planned spaces, folded away: a native details element, so the names are
   in the markup and readable with JavaScript switched off. */
.applications-upcoming {
  max-width: var(--read);
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.applications-upcoming > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.applications-upcoming > summary:hover { color: var(--brass); }

.applications-upcoming__note {
  max-width: var(--read);
  margin: 1rem 0 0.9rem;
  font-size: var(--fs-small);
  color: var(--graphite);
}

.applications-upcoming__list {
  max-width: var(--read);
  font-size: var(--fs-small);
}

/* ---------- Selection primer ---------- */

/* The five conditions: a rule above each one, like the numbered steps. */
.applications-primer__points { gap: 2.5rem 2rem; }

.applications-point { padding-top: 1.25rem; border-top: 1px solid var(--stone); }

.applications-point__title { margin: 0 0 0.5em; font-size: 1.1rem; }

.applications-point__text { margin: 0; font-size: var(--fs-small); color: var(--graphite); }

.applications-primer__title {
  margin: 4rem 0 0.7rem;
  font-size: clamp(1.25rem, 1.5vw, 1.6rem);
}

.applications-primer__note {
  max-width: var(--read);
  margin: 0 0 2.5rem;
  font-size: var(--fs-small);
  color: var(--graphite);
}

.applications-primer__power { margin-bottom: 3.5rem; }

.applications-primer__links {
  max-width: var(--read);
  margin: 0;
  font-size: var(--fs-small);
  color: var(--graphite);
}

.applications-primer__links a { text-decoration: underline; }
.applications-primer__links a:hover { color: var(--brass); }

/* ---------- Pagination ---------- */

/* style.css carries none, so the page numbers are styled here, around the
   page-numbers markup paginate_links() returns. A later step could lift these
   rules into the shared layer for every listing page. */
.applications-pagination { margin-top: 3.5rem; }

.applications-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.applications-pagination .page-numbers a,
.applications-pagination .page-numbers span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0.6em 0.75em;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}

.applications-pagination .page-numbers a:hover { border-color: var(--ink); }

.applications-pagination .page-numbers .current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.applications-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
  color: var(--graphite);
}

@media (max-width: 659px) {
  .applications-pagination .page-numbers { gap: 0.35rem; }

  .applications-pagination .page-numbers a,
  .applications-pagination .page-numbers span.page-numbers {
    min-width: 2.4rem;
    padding: 0.5em 0.6em;
  }
}