/* ========================================================
   LOVECOLOUR — Knowledge hub (/knowledge/)
   Page-specific rules only. The type system, section shell, buttons, hairline
   mosaic, link list and closing CTA band come from templates/inner.css; the
   page header comes from the shared banner (templates/banner.css).

   Two blocks are defined here, both in the language the rest of the site
   already uses: structure from 1px hairlines rather than boxes, one orange
   accent, no shadows.
     1. The topic entries that open the page (网站规划.md §11.2).
     2. The guide archive — nine per page, 3 × 3, newest first — with its pager
        and the state the hub is in before the first guide is published
        (网站规划.md §11.1).
   ======================================================== */

/* ---------- 1. Topic entries ----------
   Four tiles on the hairline mosaic. The padding lives on the <li> (from
   .lc-mosaic), so the anchor fills the whole tile and the entire cell is
   clickable rather than just the heading. */
.lc-page .lc-kn-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lc-page .lc-kn-topics > li { display: flex; }
.lc-page .lc-kn-topic {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: var(--lc-ink);
  text-decoration: none;
}
.lc-page .lc-kn-topic .lc-h3 { margin-bottom: 10px; }
.lc-page .lc-kn-topic .lc-tile-meta { margin: 0; }
.lc-page .lc-kn-topic-go {
  margin-top: auto;
  padding-top: 24px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-page .lc-kn-topic:hover .lc-h3,
.lc-page .lc-kn-topic:hover .lc-kn-topic-go { color: var(--lc-accent); }

/* ---------- 2. Guide archive ----------
   Same hairline construction as the mosaic: a 1px gap lets the line colour
   show through, so the grid stays perfect at every breakpoint without edge
   borders. A card is a whole-tile link, and the "Read guide" line is pinned
   to the bottom so cards of unequal copy still line up. */
.lc-page .lc-kn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--lc-line);
}
.lc-page .lc-kn-grid > li { display: flex; background-color: var(--lc-bg); }
.lc-page .lc-sec--white .lc-kn-grid > li { background-color: var(--lc-surface); }
.lc-page .lc-kn-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  padding: 26px 30px 30px;
  color: var(--lc-ink);
  text-decoration: none;
}
.lc-page .lc-kn-card-plate { margin-bottom: 22px; }
.lc-page .lc-kn-card:hover .lc-aspect img { transform: scale(1.035); }

/* Topic on the left, date on the right — the caption row of 设计参考.html
   (L56–L60). Keeping the date in this row is what stops it becoming the
   headline of the card (DESIGN.md §45). */
.lc-page .lc-kn-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-page .lc-kn-card-meta time { white-space: nowrap; }
.lc-page .lc-kn-card .lc-tile-meta { margin: 14px 0 0; }
.lc-page .lc-kn-card-go {
  margin-top: auto;
  padding-top: 22px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-page .lc-kn-card:hover .lc-kn-card-title,
.lc-page .lc-kn-card:hover .lc-kn-card-go { color: var(--lc-accent); }

/* ---------- 3. Pager ----------
   A hairline row of cells, so the archive's page numbers read as part of the
   grid above them instead of as a separate widget. */
.lc-page .lc-kn-pager-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  width: fit-content;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--lc-line);
  border: 1px solid var(--lc-line);
}
.lc-page .lc-kn-pager-list > li { display: flex; background-color: var(--lc-bg); }
.lc-page .lc-sec--white .lc-kn-pager-list > li { background-color: var(--lc-surface); }
.lc-page .lc-kn-pager-list a,
.lc-page .lc-kn-pager-list > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 15px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lc-ink);
  text-decoration: none;
}
.lc-page .lc-kn-pager-list a:hover { color: var(--lc-accent); }
.lc-page .lc-kn-pager-list > li.is-current { background-color: var(--lc-ink); }
.lc-page .lc-kn-pager-list > li.is-current > span { color: #FFF; }
.lc-page .lc-kn-pager-list > li.is-disabled > span { color: var(--lc-muted); opacity: 0.5; }
.lc-page .lc-kn-pager-gap > span { color: var(--lc-muted); }

/* ---------- 4. Before the first guide is published ----------
   The hub is a real page from day one: topics and the pages that already
   answer buyer questions, rather than an empty list. */
.lc-page .lc-kn-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 40px;
  border-top: 1px solid var(--lc-line);
}
/* One-column form, for the "past the last page" note which has no second
   column to sit beside. */
.lc-page .lc-kn-empty--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
.lc-page .lc-kn-empty .lc-lead { margin: 24px 0 0; }
.lc-page .lc-kn-empty .lc-label { margin-bottom: 16px; }
.lc-page .lc-kn-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ---------- 5. Responsive ---------- */
@media (max-width: 1080px) {
  .lc-page .lc-kn-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-page .lc-kn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-page .lc-kn-empty { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 700px) {
  .lc-page .lc-kn-topics,
  .lc-page .lc-kn-grid { grid-template-columns: 1fr; }
  .lc-page .lc-kn-card { padding: 24px 22px 28px; }
  .lc-page .lc-kn-pager-list { width: 100%; }
  .lc-page .lc-kn-pager-list a,
  .lc-page .lc-kn-pager-list > li > span {
    min-width: 42px;
    min-height: 42px;
    padding: 0 12px;
  }
}