/* ==========================================================
   MODERN AUTOMATIC CATEGORY ARCHIVES
   ========================================================== */
.sg-category-page {
  min-height: 70vh;
  padding: 48px 20px 90px;
  background:
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--sg-cat-primary, #00bfff) 12%, transparent), transparent 30%),
    #070b16;
}

.sg-category-hero,
.sg-category-results {
  width: min(100%, 1200px);
  margin-inline: auto;
}

.sg-category-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 7vw, 88px);
  border: 1px solid color-mix(in srgb, var(--sg-cat-primary, #00bfff) 44%, #2d3555);
  border-radius: 28px;
  background:
    linear-gradient(125deg, color-mix(in srgb, var(--sg-cat-deep, #101d42) 82%, #070b16), #090f1d 68%),
    #0b1220;
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
}

.sg-category-hero::before,
.sg-category-hero::after,
.sg-category-hero__glow {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.sg-category-hero::before {
  width: 430px;
  height: 430px;
  right: -120px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sg-cat-primary, #00bfff) 28%, transparent), transparent 68%);
}

.sg-category-hero::after {
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 58%, #000);
}

.sg-category-hero__glow {
  width: 420px;
  height: 420px;
  left: -180px;
  bottom: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sg-cat-secondary, #6366f1) 24%, transparent), transparent 67%);
}

.sg-category-hero__inner {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
}

.sg-category-icon {
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  color: #fff;
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sg-cat-primary, #00bfff) 26%, #101827), rgba(5,10,20,.72));
  border: 1px solid color-mix(in srgb, var(--sg-cat-primary, #00bfff) 68%, #fff 8%);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--sg-cat-primary, #00bfff) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.12);
}

.sg-category-label,
.sg-category-results__kicker {
  margin: 0 0 12px;
  color: var(--sg-cat-primary, #00bfff);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sg-category-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(3.2rem, 8vw, 6.6rem);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.sg-category-copy h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-top: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sg-cat-primary, #00bfff), var(--sg-cat-secondary, #6366f1));
  box-shadow: 0 0 22px color-mix(in srgb, var(--sg-cat-primary, #00bfff) 42%, transparent);
}

.sg-category-desc {
  max-width: 720px;
  margin: 24px 0 0;
  color: #cbd5e1;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.8;
}

.sg-category-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 28px;
  color: #94a3b8;
  font-size: .91rem;
}

.sg-category-meta strong { color: #fff; }

.sg-category-results {
  padding-top: 64px;
}

.sg-category-results__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.sg-category-results__header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
}

.sg-category-results .archive-grid {
  max-width: none;
  padding: 0;
}

.sg-category-results .card {
  background: linear-gradient(180deg, #151c31, #0e1526);
  border-color: rgba(148,163,184,.18);
  border-radius: 18px;
}

.sg-category-results .card:hover {
  border-color: var(--sg-cat-primary, #00bfff);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--sg-cat-primary, #00bfff) 14%, transparent);
}

.sg-empty-state {
  grid-column: 1/-1;
  padding: 56px;
  text-align: center;
  color: #94a3b8;
  background: #111827;
  border: 1px solid #2d3555;
  border-radius: 18px;
}

@media (max-width: 760px) {
  .sg-category-page { padding: 24px 14px 64px; }
  .sg-category-hero { padding: 38px 24px; border-radius: 22px; }
  .sg-category-hero__inner { grid-template-columns: 1fr; }
  .sg-category-icon { width: 88px; height: 88px; border-radius: 22px; font-size: 2.7rem; }
  .sg-category-copy h1 { font-size: clamp(2.8rem, 16vw, 4.6rem); }
  .sg-category-meta span[aria-hidden="true"] { display: none; }
}