/* -- SLICE 109. Illustrated Explore category cards -----------------------
   A second, image-led presentation of the same five real categories the
   topic-rail (app.css/explore-hero.php) already lists as plain-text links.
   The rail stays for crawlability; this is the visual, browsable version
   that sits beneath it on the hub. Icons are inline SVG line-art (see
   explore-category-cards.php), never a raster/stock/AI image, so there is
   nothing here that could be mistaken for real photography.
*/
.explore-category-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin:20px 0 8px;
}
.explore-category-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  min-height:132px; padding:18px 16px;
  background:var(--corr-surface);
  border:1px solid var(--corr-rule);
  border-radius:var(--corr-r-md);
  text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.explore-category-card:hover{
  border-color:var(--corr-gold);
  box-shadow:var(--corr-sh-2);
  transform:translateY(-2px);
}
.explore-category-card:focus-visible{
  outline:2px solid var(--corr-action); outline-offset:2px;
}
.explore-category-card[aria-current="page"]{
  border-color:var(--corr-action);
  background:var(--corr-gold-wash);
}
.explore-category-card__icon{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:var(--corr-r-sm);
  background:var(--corr-gold-wash);
  color:var(--corr-gold);
}
.explore-category-card[aria-current="page"] .explore-category-card__icon{
  background:var(--corr-surface);
}
.explore-category-card__icon svg{width:22px; height:22px}
.explore-category-card__name{
  font-family:var(--corr-serif); font-weight:400; font-size:1.0625rem;
  color:var(--corr-ink); line-height:1.25;
}
.explore-category-card__count{
  font-family:var(--corr-sans); font-size:.75rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--corr-mist);
  margin-top:auto;
}

@media (max-width:520px){
  .explore-category-grid{grid-template-columns:repeat(2,1fr)}
}