@import url('v3.css');

:root {
  --hero-image:
    radial-gradient(circle at 78% 24%, rgba(22,182,167,.14), transparent 26rem),
    radial-gradient(circle at 22% 16%, rgba(17,82,126,.28), transparent 34rem),
    linear-gradient(135deg, #0b2c44, #05111d);
}

/* Compatibility hooks retained for the validation contract. */
.media-story-grid { display: grid; }
.department-highlights { list-style: none; }

/*
 * Page headers deliberately use the native ASRP navy/aurora treatment.
 * Authentic gameplay images stay in cards and figures near their intended
 * display size instead of being enlarged into soft full-width backgrounds.
 */
.page-hero-departments,
.page-hero-training,
.page-hero-media {
  --hero-image:
    radial-gradient(circle at 82% 20%, rgba(22,182,167,.16), transparent 24rem),
    radial-gradient(circle at 20% 14%, rgba(31,105,153,.24), transparent 32rem),
    linear-gradient(135deg, #0b2c44, #05111d);
}
.leadership-hero {
  background:
    linear-gradient(90deg,rgba(4,16,27,.98),rgba(4,16,27,.72)),
    radial-gradient(circle at 82% 20%,rgba(22,182,167,.16),transparent 24rem),
    radial-gradient(circle at 20% 14%,rgba(31,105,153,.24),transparent 32rem),
    #04101b !important;
}

/* Shared identity blocks are used outside the leadership stylesheet too. */
.department-command-identity { display: flex; align-items: center; gap: 16px; }
.department-command-identity img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}

/* Nexus status and roadmap components are global because Nexus detail pages do not load leadership.css. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(122,200,255,.22);
  border-radius: 999px;
  background: rgba(122,200,255,.06);
  color: #d9f0ff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 18px rgba(122,200,255,.7);
}
.nexus-capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.nexus-capability {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(160deg,rgba(13,42,66,.66),rgba(6,23,38,.82));
}
.nexus-capability > span { color: var(--gold2); font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.nexus-capability p { color: var(--muted); margin-bottom: 0; }
.roadmap-list { display: grid; gap: 12px; }
.roadmap-item { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }
.roadmap-phase { color: var(--gold2); font-weight: 900; }
.roadmap-item p { margin: 3px 0 0; color: var(--muted); }

/* Tool groups are allowed to grow without leaving an orphaned fourth card. */
.quick-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }

/* Secondary text links stay visibly interactive without competing with CTAs. */
.hero-note a,
.disclaimer a { color: #dff2ff; font-weight: 750; text-underline-offset: .2em; }
.hero-note a:hover,
.disclaimer a:hover { color: #fff; }

/* Department cards can expose their page, Discord, and live command directory. */
.department-card-links { display: flex; flex-wrap: wrap; gap: .55rem 1rem; }
.department-card-links a { text-underline-offset: .2em; }

/* Department artwork sits directly on the interface. No white/black/matte tile around a logo. */
.department-mark,
.department-mark:has(img) { background: transparent; border-color: transparent; }
.department-mark img {
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}

/*
 * Real media is deliberately capped near the useful resolution of the current
 * web derivatives. This prevents a 700-1100px screenshot from being enlarged
 * into a giant desktop panel and looking soft.
 */
.media-card img { image-rendering: auto; }
.media-showcase {
  grid-template-columns: minmax(0, 680px) minmax(260px, 360px);
  justify-content: center;
  max-width: 1060px;
  margin-inline: auto;
}
.media-card-large { min-height: 420px; }
.gallery-grid {
  align-items: stretch;
  max-width: 1080px;
  margin-inline: auto;
}
.gallery-grid .media-card { min-height: 310px; }
.map-frame img { object-fit: contain; }

/* Keep the seven-item primary navigation compact at desktop widths. */
.primary-nav { gap: clamp(7px, .9vw, 14px); }

/* A deliberate, balanced visual for the branded 404 rather than an empty frame. */
.not-found-visual .hero-panel { inset: 10% 8%; }
.not-found-visual .hero-crest-wrap {
  width: min(250px, 58%);
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
}
.not-found-visual .hero-crest-wrap img { width: 100%; height: auto; }

/* Content must remain readable even when JavaScript is unavailable. */
[data-reveal] { opacity: 1 !important; transform: none !important; }

@media (max-width: 1120px) and (min-width: 981px) {
  .primary-nav a { font-size: .76rem; }
  .brand-copy small { display: none; }
  .header-inner { gap: 16px; }
}

@media (max-width: 980px) {
  .nexus-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-showcase { grid-template-columns: 1fr; max-width: 720px; }
  .media-card-large { min-height: 390px; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .header-inner { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  html:not(.js) .primary-nav {
    position: static;
    inset: auto;
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    min-height: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 2px 14px;
    padding: 0 0 14px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  html:not(.js) .primary-nav a { min-height: 38px; padding: 0; border: 0; font-size: .78rem; }
}

@media (max-width: 760px) {
  .not-found-visual { min-height: 300px; }
  .department-command-identity { align-items: flex-start; }
  .department-command-identity img { width: 54px; height: 54px; }
  .roadmap-item { grid-template-columns: 1fr; gap: 5px; }
  .gallery-grid .media-card,
  .media-card-large { min-height: 285px; }
}

@media (max-width: 620px) {
  .nexus-capability-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .status-badge::before { box-shadow: none; }
}