/* ============================================================
   topics.css — grid de 8 tarjetas de temas (un planeta cada
   una), con glow por --planet-color.
   ============================================================ */

.topics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.topic{
  --planet-color:#e8673a;
  position:relative;padding:26px 22px 30px;border-radius:16px;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;cursor:default;
}
.topic::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--planet-color) 26%,transparent), transparent 70%);
}
.topic:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--planet-color) 55%,transparent);
  box-shadow:0 20px 50px -20px color-mix(in srgb,var(--planet-color) 60%,transparent)}
.topic:hover::before{opacity:1}
.topic .sym{font-size:30px;color:var(--planet-color);line-height:1;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--planet-color) 60%,transparent))}
.topic .idx{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:11px;color:var(--t-35);letter-spacing:.1em}
.topic h3{font-size:21px;margin:22px 0 8px}
.topic p{font-size:13.5px;color:var(--t-50);line-height:1.5;position:relative}
.topic .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--planet-color);margin-top:16px;text-transform:uppercase;opacity:.85}