/* ============================================================
   games.css — games.shawtechlab.com specific sections
   Extends the shared ShawTechLab system (tokens/reset/global/
   components) which is copied verbatim from the portfolio repo.
   Only additions live here; nothing above is overridden.
   ============================================================ */

/* NAV — the brand lockup carries a "GAMES" sublabel so the
   subdomain is legible, and the mark itself links to the apex. */
.nav-brand-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.nav-brand-name {
  font-family:var(--font-display); font-weight:900; font-size:1.05rem;
  letter-spacing:0.06em; color:var(--text); line-height:1.1;
}
.nav-brand-sub {
  font-family:var(--font-body); font-size:0.6rem; letter-spacing:0.24em;
  color:var(--accent); text-transform:uppercase;
}
.nav-brand-mark { flex-shrink:0; }

/* HERO — mirrors the portfolio hero but the right panel holds static
   SVG art rather than the particle canvas (no JS dependency). */
.hero { display:flex; align-items:center; overflow:hidden; position:relative; background:var(--hero-bg); }
.hero-left { flex:1 1 auto; max-width:640px; padding:5.5rem 2.5rem 4.5rem; position:relative; z-index:2; }
.hero-kicker {
  font-family:var(--font-body); font-size:0.72rem; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1.5rem; display:flex; align-items:center; gap:0.6rem;
}
.hero-kicker::before { content:''; display:block; width:28px; height:2px; background:var(--accent); }
.hero h1 {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.6rem,4.6vw,4.2rem); line-height:1.04;
  letter-spacing:-0.01em; color:var(--text); margin-bottom:1.4rem;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.hero-sub {
  font-family:'Barlow',sans-serif; font-size:1rem; color:var(--text-muted);
  max-width:460px; line-height:1.75; margin-bottom:2.5rem;
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-art {
  flex:0 0 38%; align-self:stretch; min-height:340px; position:relative;
  border:1px solid var(--border); border-radius:var(--card-radius);
  background:var(--bg-feat); overflow:hidden; margin-right:2.5rem;
}
.hero-art svg { display:block; width:100%; height:100%; }

/* FEATURE STRIP — 3-up variant of the portfolio's 4-up .features */
.features.features-3 { grid-template-columns:repeat(3,1fr); }

/* CARD — featured treatment. The portfolio's .card::before accent bar is
   hover-only; a featured card pins it on to mark the lead item. */
.card.featured { border-color:var(--border-hover); }
.card.featured::before { opacity:1; }
.card.featured .card-arrow { color:var(--accent); }

/* Card icon sits above the domain line on category cards. */
.card-icon { color:var(--accent); margin-bottom:0.9rem; line-height:0; }
.card-icon svg { display:block; }

/* Category titles vary in length ("Game Design" vs "Healthcare Education").
   Reserving two lines keeps every card body starting at the same height so
   the row reads as a row. Only applies where a .card-icon is present, i.e.
   the category cards, not the plain game cards below them. */
.card-icon ~ .card-title { min-height:calc(2 * 1.1rem * 1.7); align-items:flex-start; }

/* Dimmed treatment for unannounced/placeholder entries. */
.card.pending { opacity:0.6; }
.card.pending .card-title { color:var(--text-muted); }

/* BREADCRUMB */
.breadcrumb {
  font-family:var(--font-body); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:2rem;
}
.breadcrumb a { color:var(--accent2); text-decoration:none; }
.breadcrumb a:hover { color:var(--accent); }

/* FEATURED GAME — the split panel used for the lead title on a
   category page: copy on the left, themed art on the right. */
.feature-game {
  background:var(--bg-card); border:1px solid var(--border-hover);
  border-radius:var(--card-radius); position:relative; overflow:hidden;
  display:flex; flex-wrap:nowrap;
}
.feature-game::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--accent);
}
.feature-game-body { flex:1 1 auto; padding:2rem 2.25rem; }
.feature-game-art {
  flex:0 0 300px; background:var(--bg-feat);
  border-left:1px solid var(--border); position:relative; overflow:hidden;
}
.feature-game-art svg { display:block; width:100%; height:100%; }
.feature-game-art { display:flex; align-items:center; }
.feature-game-title {
  font-family:var(--font-display); font-weight:900; font-size:2rem;
  color:var(--text); letter-spacing:0.01em; margin-bottom:0.75rem;
}
.feature-game-desc {
  font-family:var(--font-body); font-size:0.86rem; color:var(--text-muted);
  line-height:1.8; margin-bottom:1.25rem; max-width:560px;
}
.feature-game-cta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.feature-game-note { font-family:'Barlow',sans-serif; font-size:0.8rem; color:var(--text-muted); }

/* STEP CARDS — numbered "how it works" row */
.step-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.step-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--card-radius); padding:1.4rem 1.6rem;
}
.step-label {
  font-family:var(--font-body); font-size:0.62rem; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:0.5rem;
}
.step-desc { font-family:var(--font-body); font-size:0.84rem; color:var(--text-muted); line-height:1.7; }
.step-desc strong { color:var(--text); font-weight:500; }

/* RESPONSIVE — mirrors the portfolio's ≤768px behavior. */
@media(max-width:768px){
  /* Stack the hero. align-items:center on the flex parent would otherwise
     leave the children at their intrinsic width and overflow the viewport,
     so both are explicitly stretched and clamped. */
  .hero { flex-direction:column; align-items:stretch; }
  .hero-left { flex:none; width:100%; max-width:100%; padding:3rem 1.5rem 2rem; }
  .hero-sub { max-width:100%; }
  .hero-btns > * { flex:1 1 auto; text-align:center; }
  .hero-art {
    flex:none; align-self:stretch; width:auto; height:200px;
    min-height:0; margin:0 1.5rem 2rem;
  }
  .features.features-3 { grid-template-columns:1fr; }
  .features.features-3 .feature { border-right:none; border-bottom:1px solid var(--border); }
  .features.features-3 .feature:last-child { border-bottom:none; }
  .step-grid { grid-template-columns:1fr; }

  /* The featured-game split stacks; the art becomes a banner. */
  .feature-game { flex-direction:column; }
  .feature-game-body { padding:1.5rem 1.6rem; }
  .feature-game-art { flex:none; width:100%; height:180px; border-left:none; border-top:1px solid var(--border); }
  .feature-game-title { font-size:1.6rem; }

  nav { padding:0 1.25rem; }
  .nav-brand { min-width:0; flex-shrink:1; overflow:hidden; }
  .nav-toggle { display:inline-flex; }
  .nav-links {
    display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--nav-bg); border-bottom:1px solid var(--border);
    padding:.5rem 1.5rem 1rem;
  }
  .nav-links.open { display:flex; }
  .nav-links a { width:100%; padding:.85rem 0; font-size:.9rem; }
  .nav-links a.active::after { display:none; }
}

@media(max-width:600px){
  .proj-grid { grid-template-columns:1fr; }
}

/* CATEGORY PAGE — the page-level heading used on a category landing
   page (smaller than the hub hero h1, and not inside a .hero flex row). */
.page-head { padding-top:3rem; }
.page-h1 {
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1.06;
  letter-spacing:-0.01em; color:var(--text);
  margin-bottom:1.4rem; max-width:900px;
}
.page-h1 em { font-style:normal; color:var(--accent); }
.page-sub { max-width:620px; }

/* Utility: the one spacing nudge used between stacked prose blocks,
   matching the portfolio's inline `margin-top:.9rem` convention. */
.stack-sm { margin-top:.9rem; }
.feature-game-tags { margin-bottom:1.5rem; }