/* ============================================================
   templates/topics.css
   The /topics/ index: a grid of topic cards. Composition only;
   the card look reuses the site tokens (white surface, 1px
   border, --rfi-radius), so it stays in step with every other
   card when the radius or the border colour moves.
   ============================================================ */
/* Groups (Technology, Markets, Across the industry): a labelled band above each grid.
   The heading is quiet section chrome, not a card. */
.rfi-topics-group + .rfi-topics-group { margin-top: 34px; }
.rfi-topics-group__title {
  margin: 0 0 14px;
  color: var(--rfi-text-3);
}

.rfi-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rfi-gap);
}

/* The whole card is the link: one target, no nested interactive areas. */
.rfi-topics__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--rfi-surface);
  border: 1px solid var(--rfi-border);
  border-radius: var(--rfi-radius);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.rfi-topics__card:hover {
  box-shadow: var(--rfi-shadow-up);
  transform: var(--rfi-lift);
  border-color: var(--rfi-border-soft);
}

.rfi-topics__name {
  font-family: var(--rfi-font-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.rfi-topics__card:hover .rfi-topics__name { color: var(--rfi-teal); }

/* The count is a quiet fact, not a badge. */
.rfi-topics__count {
  font-size: 13.5px;
  color: var(--rfi-text-3);
}

/* Tablet: two columns (same step the listing feed uses). */
@media (max-width: 1000px) {
  .rfi-topics { grid-template-columns: repeat(2, 1fr); }
}

/* 768 and below: one column. mobile.css loads after this file, so the shared
   mobile layer can still override anything here if the page ever needs it. */
@media (max-width: 768px) {
  .rfi-topics { grid-template-columns: 1fr; }
}