/* style/categories.css */

.page-glow{
  pointer-events:none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 450px at 70% 0%, rgba(245,158,11,.14), transparent 60%),
    radial-gradient(900px 450px at 20% 100%, rgba(245,158,11,.10), transparent 60%);
  z-index: 0;
}
body > *:not(.page-glow){ position: relative; z-index: 1; }

.pad{ padding: 18px; }

.title{ margin: 0; font-size: 26px; font-weight: 900; }
.subtitle{ margin: 8px 0 0; color: rgba(255,255,255,.70); font-size: 14px; line-height: 1.6; }

.grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 760px){
  .grid{ grid-template-columns: 1fr 1fr; }
}

.cat{
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.badge{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.22);
  font-weight: 900;
  color: rgba(252,211,77,.95);
}
.cat h3{ margin: 0; font-size: 16px; font-weight: 850; }
.cat p{ margin: 6px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.5; }

.skeleton{ color: rgba(255,255,255,.65); }

.cta{
  margin-top: 12px;
  padding: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-title{ font-weight: 900; }
.cta-sub{ margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.65); }