/* Hallmark · macrostructure: Directory/Launcher · tone: utilitarian-technical · anchor hue: blue 262
 * theme: existing exam-player system (light · Space Grotesk · #2f6fed anchor)
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 * Hub styles for the top-level index. Reuses exam-player.css tokens + base
 * (.card .chip .btn .eyebrow .hero .stat). Load exam-player.css FIRST.
 */

/* mobile safety: never scroll horizontally (gate 34) */
html, body { overflow-x: clip; }

/* the hub is landing content, not the quiz app — a touch more room than 880 */
.wrap.hub { max-width: 960px; }

/* ---------- masthead ---------- */
.hub-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:6px 0 2px; flex-wrap:wrap;
}
.hub-mark{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:-.01em;
  color:var(--ink);
}
.hub-mark .glyph{
  width:22px; height:22px; border-radius:7px; flex:none;
  background:var(--accent);
  /* two overlapping nodes → a "connected banks" mark, drawn in CSS (no asset) */
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, white),
             6px 6px 0 -6px var(--accent);
  position:relative;
}
.hub-mark .glyph::after{
  content:""; position:absolute; inset:5px; border-radius:3px;
  background:color-mix(in srgb, var(--accent) 22%, white);
}
.hub-badge{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line); background:var(--panel);
  border-radius:999px; padding:5px 12px;
}

/* ---------- hero tweaks (extends header.hero) ---------- */
.hub header.hero{ padding:26px 0 20px; }
.hub .stats{ margin-top:22px; }

/* ---------- trainer grid ---------- */
.section-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); margin:30px 0 2px;
}
.exam-grid{
  display:grid; gap:16px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

/* a whole card that is a link. Reuses .card visuals, adds accent + lift. */
.exam-card{
  --card-accent:var(--accent);
  display:flex; flex-direction:column; gap:14px;
  margin-top:0;                       /* override .card default margin */
  text-decoration:none; color:inherit;
  position:relative; overflow:hidden;
  transition:transform .16s var(--ease-out, ease), border-color .16s var(--ease-out, ease),
             box-shadow .16s var(--ease-out, ease);
  min-width:0;
}
/* accent spine down the left edge, tinted per exam */
.exam-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--card-accent);
}
.exam-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--card-accent) 55%, var(--line));
  box-shadow:0 10px 28px -18px color-mix(in srgb, var(--card-accent) 70%, transparent);
}
.exam-card:focus-visible{
  outline:2px solid var(--card-accent); outline-offset:3px;
}

.exam-head{ display:flex; align-items:flex-start; gap:12px; padding-left:8px; }
.exam-dot{
  width:11px; height:11px; border-radius:4px; flex:none; margin-top:6px;
  background:var(--card-accent);
}
.exam-title{
  font-family:var(--disp); font-weight:700; font-size:20px; line-height:1.15;
  letter-spacing:-.01em; color:var(--ink);
  overflow-wrap:anywhere; min-width:0;
}
.exam-title .sub{
  display:block; font-family:var(--mono); font-weight:400; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--card-accent); margin-top:6px;
}
.exam-blurb{ color:var(--ink-dim); font-size:14px; line-height:1.5; padding-left:8px; }

.exam-meta{
  display:flex; gap:20px; flex-wrap:wrap; padding:14px 8px; margin-top:2px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.exam-meta .m{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.exam-meta .m b{ display:block; font-family:var(--disp); font-weight:700; font-size:19px; color:var(--ink); }

.exam-chips{ display:flex; flex-wrap:wrap; gap:7px; padding-left:8px; }
.chip.static{ cursor:default; }
.chip.static:hover{ border-color:var(--line); }   /* neutralize .chip hover */
.chip.more{ background:transparent; border-style:dashed; }

.exam-go{
  margin-top:auto; padding-top:4px; padding-left:8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.exam-go .cta{
  font-family:var(--disp); font-weight:700; font-size:14.5px; color:var(--card-accent);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.exam-go .cta .arrow{ transition:transform .16s var(--ease-out, ease); }
.exam-card:hover .exam-go .cta .arrow{ transform:translateX(3px); }
.exam-go .pass{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); white-space:nowrap;
}

/* ---------- how it works ---------- */
.how{ margin-top:20px; }
.how-grid{
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.how-item{ padding:2px 2px 2px 0; }
.how-item .n{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:.12em;
}
.how-item h4{
  font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--ink);
  margin:8px 0 5px; letter-spacing:-.01em;
}
.how-item p{ color:var(--ink-dim); font-size:13.5px; line-height:1.5; }

@media (prefers-reduced-motion:reduce){
  .exam-card, .exam-go .cta .arrow{ transition:none; }
  .exam-card:hover{ transform:none; }
}
@media (max-width:560px){
  .exam-meta{ gap:16px; }
}