/*
 * Topic Index section — Enviliance ASIA
 * Structure follows docs/handoff-topic-index.md (icon + theme name + count rows, responsive grid).
 * SKIN is matched to the live site (enviliance.com / this OnePress theme), NOT the standalone demo:
 *   - Typography: "Open Sans" (already enqueued by the theme), text #333.
 *   - Accent / links: brand blue #1e73be (hover #083c68), matching a{} and the article list.
 *   - Dividers: the same grey hairline family as .list-article (#a1a1a1 bookends, lighter rows).
 *   - No Spectral serif, no IBM Plex Mono, no teal — those were the demo's look, not the site's.
 *
 * Tokens are scoped to .topic-index so they never collide with the host theme's globals.
 */
.topic-index{
  --ti-text:#333333;        /* body text (matches theme body color) */
  --ti-accent:#1e73be;      /* brand blue (matches a{} / links / buttons) */
  --ti-accent-deep:#083c68; /* darker blue for hover (from theme's header gradient) */
  --ti-muted:#777777;       /* counts / secondary text (matches a:hover grey) */
  --ti-line:#a1a1a1;        /* inner row hairline (kept light for 8–12 dense rows) */
  --ti-line-strong:#a1a1a1; /* section bookend, same as .list-article borders */

  /* Use the theme's own font stack (Open Sans) so the section reads as native. */
  --ti-font:"Open Sans",Helvetica,Arial,sans-serif;

  background:#fff;
  border-top: ;
  padding:16px 0 30px;
  color:var(--ti-text);
  font-family:var(--ti-font);
}

/* Grid: column count comes from data-cols (採用=3 / 補遺A). Bottom hairline closes the list. */
.topic-index__grid{display:grid;}
.topic-index__grid[data-cols="3"]{grid-template-columns:repeat(3,1fr);column-gap:34px}
.topic-index__grid[data-cols="2"]{grid-template-columns:repeat(2,1fr);column-gap:48px}

.topic-index__item{
  display:flex;align-items:center;gap:12px;padding:13px 2px;
  border-bottom:1px solid var(--ti-line);text-decoration:none;color:var(--ti-text);
  transition:padding-left .16s,color .16s
}
.topic-index__item svg{width:20px;height:20px;color:var(--ti-accent);flex:0 0 auto;transition:color .16s}
.topic-index__name{flex:1;font-size:18px;font-weight:800;line-height:1.3}
.topic-index__count{font-size:13px;font-weight:600;color:var(--ti-muted);transition:color .16s}

.topic-index__item:hover{padding-left:6px;color:var(--ti-accent);text-decoration:none}
.topic-index__item:hover .topic-index__name,
.topic-index__item:hover .topic-index__count{color:var(--ti-accent)}
.topic-index__item:hover svg{color:var(--ti-accent-deep)}
.topic-index__item:focus-visible{outline:2px solid var(--ti-accent);outline-offset:3px;border-radius:3px}

/* Mobile: fixed 2 columns for every pattern and count (per request).
   No last-item full-width override — a lone 9th item simply sits in the left column. */
@media (max-width:760px){
  .topic-index{padding:14px 0 24px}
  .topic-index__grid[data-cols]{grid-template-columns:repeat(2,1fr);column-gap:20px}
  .topic-index__item{gap:10px;padding:12px 2px}
  .topic-index__item svg{width:18px;height:18px}
  .topic-index__name{font-size:14px}
}

/* Respect reduced motion. */
@media (prefers-reduced-motion:reduce){
  .topic-index__item,
  .topic-index__item svg,
  .topic-index__count{transition:none}
}