/* hub-pages.css — Product pages + hub additions for gamerzlanding.com
 *
 * Loads AFTER forge-tokens.css and forge-landing.css on the apex hub and on
 * every product page (void, forge, anchor, rulezero, void-io, sprite-editor).
 * Reuses the editorial ink+gold system; adds: product-page hero, status
 * badges, alternating split sections, screenshot slots, cross-link rail,
 * homepage announcement strip, and the SCOPED .void-neon accent treatment
 * (the one place cyan/violet neon is allowed — echoes VOID's procedural
 * neon-vector look without leaking into the rest of the site).
 */

/* ── PRODUCT PAGE HERO ───────────────────────────────────────────────── */
.page-hero {
  text-align: center;
  padding: var(--sp-9) 0 var(--sp-8);
  max-width: 880px;
  margin: 0 auto;
}
.page-hero .display { font-size: clamp(44px, 5vw, 68px); }
.page-hero .lede { margin-left: auto; margin-right: auto; }
.page-hero .cta-row { justify-content: center; }

.cta-fineprint {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  letter-spacing: 0.02em;
  text-align: center;
  margin: var(--sp-3) auto 0;
}

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.hero-meta .platform-tags { margin: 0; }

/* ── STATUS BADGES ───────────────────────────────────────────────────── */
.status-badge {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.status-live {
  color: var(--sage-soft);
  border: 1px solid var(--sage-dim);
  background: var(--sage-glow);
}
.status-soon {
  color: var(--copper-soft);
  border: 1px solid var(--copper-dim);
  background: var(--copper-glow);
}

/* ── BACK LINK ───────────────────────────────────────────────────────── */
.back-link {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-mute);
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease);
}
.back-link:hover { color: var(--gold); }

/* ── ALTERNATING SPLIT SECTIONS ──────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-7) 0;
}
.split-rev > :first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .split-rev > :first-child { order: unset; }
}
.split h2 {
  font-family: var(--serif-display);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  color: var(--text);
  margin: 0 0 var(--sp-3);
}
.split p { color: var(--text-dim); line-height: var(--lh-loose); margin: 0 0 var(--sp-3); }
.split ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.split li {
  padding-left: 22px;
  position: relative;
  color: var(--text-dim);
  line-height: var(--lh-snug);
}
.split li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: var(--fs-sm);
}
.split li strong { color: var(--text); font-weight: 500; font-family: var(--serif-display); }

/* ── SCREENSHOT SLOTS ────────────────────────────────────────────────────
 * <figure class="shot-slot"><img src="/img/<slug>/shot-1.png" alt="…"
 *   onerror="this.closest('.shot-slot').classList.add('empty');this.remove()">
 *   <figcaption>Caption</figcaption></figure>
 * Until screenshots are dropped into C:\inetpub\wwwroot\gamerzlanding\img\,
 * the img 404s, the slot gets .empty, and the placeholder treatment shows. */
.shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 720px) { .shot-grid { grid-template-columns: 1fr; } }

.shot-slot {
  margin: 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-1);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot-slot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: linear-gradient(180deg, transparent 0%, rgba(13,10,7,0.85) 60%);
}
.shot-slot.empty {
  border-style: dashed;
  border-color: var(--ink-line-bright);
}
.shot-slot.empty::before {
  content: "Screenshot coming soon";
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--text-mute);
}
.shot-slot.empty figcaption { background: transparent; }

/* ── CROSS-LINK RAIL ("More from Gamerz Landing") ────────────────────── */
.crosslink-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 880px) { .crosslink-grid { grid-template-columns: 1fr; } }

/* ── HOMEPAGE ANNOUNCEMENT STRIP ─────────────────────────────────────── */
.announce-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--copper-dim);
  border-radius: var(--r-lg);
  background:
    linear-gradient(90deg, rgba(77,232,232,0.05) 0%, transparent 35%, transparent 65%, rgba(168,108,232,0.05) 100%),
    var(--ink-1);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-bottom: var(--sp-6);
}
.announce-strip .announce-tag {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--copper-soft);
  border: 1px solid var(--copper-dim);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  background: var(--copper-glow);
}
.announce-strip a { color: var(--gold); transition: color var(--dur-fast) var(--ease); }
.announce-strip a:hover { color: var(--gold-hot); }

/* ── VOID NEON (SCOPED) ──────────────────────────────────────────────────
 * Only inside .void-neon. Restrained: neon lives in glows, borders, and
 * keyword highlights — body copy stays parchment, buttons stay gold. */
.void-neon {
  --neon-cyan:        #4de0e8;
  --neon-violet:      #a86ce8;
  --neon-cyan-glow:   rgba(77, 224, 232, 0.14);
  --neon-violet-glow: rgba(168, 108, 232, 0.14);
  position: relative;
  border: 1px solid var(--ink-line-bright);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  background:
    radial-gradient(ellipse 70% 50% at 18% 0%, var(--neon-cyan-glow) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 100%, var(--neon-violet-glow) 0%, transparent 55%),
    var(--ink-1);
  overflow: hidden;
}
.void-neon .section-title,
.void-neon h2 {
  text-shadow: 0 0 24px var(--neon-cyan-glow);
}
.void-neon .neon-kw { color: var(--neon-cyan); font-style: normal; }
.void-neon .neon-kw-v { color: var(--neon-violet); font-style: normal; }
.void-neon .shot-slot { border-color: rgba(77, 224, 232, 0.25); }
.void-neon .shot-slot.empty::before { color: var(--neon-cyan); opacity: 0.7; }
.void-neon .feature { background: rgba(13, 10, 7, 0.55); }
.void-neon .feature h3 { color: var(--neon-cyan); }
.void-neon .feature-icon { filter: drop-shadow(0 0 8px var(--neon-cyan-glow)); }

/* VOID page hero variant — full-bleed neon wash behind the standard hero */
.void-hero-wash {
  background:
    radial-gradient(ellipse 60% 45% at 30% 10%, rgba(77,224,232,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 75% 30%, rgba(168,108,232,0.10) 0%, transparent 60%);
  border-radius: var(--r-xl);
}

/* ── LIVE BESTIARY (void.html + teaser slot fallbacks) ───────────────────
 * Populated by void-bestiary.js. Canvases render the game's procedural
 * vector enemies live; everything here is scoped to bestiary classes. */
.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.bestiary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(6, 10, 18, 0.55);
  border: 1px solid rgba(77, 224, 232, 0.12);
  border-radius: var(--r-lg);
}
.bestiary-card canvas,
.lifeform-cell canvas {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.bestiary-name {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
}
.bestiary-tag {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  text-align: center;
  line-height: var(--lh-snug);
  max-width: 30ch;
}
.bestiary-subhead {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: center;
  margin: var(--sp-7) 0 var(--sp-2);
}
.lifeform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.lifeform-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: rgba(6, 10, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--r-md);
}
.bestiary-note {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-align: center;
  margin-top: var(--sp-5);
}
/* Inline entity canvas (ship-class cards on void.html) */
.bestiary-inline {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
}
.bestiary-inline canvas {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
  max-width: 100%;
}

/* Screenshot slot taken over by a live canvas (until a real screenshot ships) */
.shot-slot.bestiary-live { border-style: solid; border-color: rgba(77, 224, 232, 0.25); }
.shot-slot.bestiary-live::before { display: none; }
.shot-slot.bestiary-live .bestiary-slot-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shot-slot.bestiary-live figcaption {
  background: linear-gradient(180deg, transparent 0%, rgba(13, 10, 7, 0.85) 60%);
}

/* ── FOOTER PRODUCT LINK ROW ─────────────────────────────────────────── */
.footer-products {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}