/* ============ cynix-category.css ============
 * Per-category hero treatments + cross-cat shared visual hooks.
 * Loaded AFTER cynix-article.css to override .cat-cover-vis-glow gradient
 * and to provide the SVG motif containers per category. */

.cat-hero-motif {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Reset cover background per category — uses .mag-category[data-dept=...] */
.mag-category[data-dept="domain"] .cat-cover-vis,
.mag-category[data-dept="domain"] .cat-cover { --cat-color: #6B5BCD; --cat-accent: #FFB800; }
.mag-category[data-dept="saas"] .cat-cover-vis,
.mag-category[data-dept="saas"] .cat-cover { --cat-color: #0A2540; --cat-accent: #4FCBA9; }
.mag-category[data-dept="ec"] .cat-cover-vis,
.mag-category[data-dept="ec"] .cat-cover { --cat-color: #FF7A8E; --cat-accent: #FFB800; }
.mag-category[data-dept="ai"] .cat-cover-vis,
.mag-category[data-dept="ai"] .cat-cover { --cat-color: #8A4FFF; --cat-accent: #00D4FF; }
.mag-category[data-dept="rsv"] .cat-cover-vis,
.mag-category[data-dept="rsv"] .cat-cover { --cat-color: #FFA361; --cat-accent: #6FB6E5; }

.mag-category[data-dept] .cat-cover-vis {
  background: linear-gradient(135deg, var(--cat-color, #1A2E80) 0%, #0A0A0A 100%);
}

.mag-category[data-dept] .cat-cover-vis-glow {
  background: radial-gradient(ellipse 70% 60% at 70% 30%, var(--cat-accent, #00D4FF) 0%, transparent 60%);
  opacity: 0.45;
}

/* Subcategory cell hover — per category accent */
.mag-category[data-dept] .subcat-cell:hover {
  background: var(--cat-color, var(--ink));
  color: var(--paper);
}

/* Pillar card lead bar — per category */
.mag-category[data-dept] .pillar-card.lead {
  border-top: 6px solid var(--cat-accent, var(--vermilion));
}

/* Cross-dept nav active state inherits ink, but accent on hover */
.mag-category[data-dept] .deptnav a:hover:not(.on) {
  color: var(--cat-color, var(--ink));
}

/* Cat-bar value highlight per dept */
.mag-category[data-dept="ai"] .cat-bar div .val { font-style: italic; }
.mag-category[data-dept="ec"] .cat-h em { color: #FF7A8E; }
.mag-category[data-dept="saas"] .cat-h em { color: #4FCBA9; }
.mag-category[data-dept="domain"] .cat-h em { color: #6B5BCD; }
.mag-category[data-dept="ai"] .cat-h em { color: #8A4FFF; }
.mag-category[data-dept="rsv"] .cat-h em { color: #FFA361; }

/* Category cover deco kanji color override */
.mag-category[data-dept="server"] .cat-cover-deco { color: #00D4FF; opacity: 0.18; }
.mag-category[data-dept="domain"] .cat-cover-deco { color: #FFB800; opacity: 0.22; }
.mag-category[data-dept="saas"] .cat-cover-deco { color: #4FCBA9; opacity: 0.18; }
.mag-category[data-dept="ec"] .cat-cover-deco { color: #FFB800; opacity: 0.22; }
.mag-category[data-dept="ai"] .cat-cover-deco { color: #00D4FF; opacity: 0.18; }
.mag-category[data-dept="rsv"] .cat-cover-deco { color: #6FB6E5; opacity: 0.22; }

/* Cross-dept nav — refined */
.deptnav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}
.deptnav a {
  padding: 18px 14px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .12s, color .12s;
}
.deptnav a:last-child { border-right: 0; }
.deptnav a .deptnav-num { font-size: 9px; opacity: 0.55; }
.deptnav a .deptnav-en { font-size: 11px; font-weight: 700; }
.deptnav a .deptnav-jp { font-family: "Noto Sans JP", serif; font-weight: 900; font-size: 13px; letter-spacing: 0; text-transform: none; }
.deptnav a.on { background: var(--ink); color: var(--paper); }
.deptnav a:not(.on):hover { background: rgba(10, 10, 10, 0.04); }