/* ============================================================
   NEXORA · Sections / Explore (public page)
   Page-specific layout for /explore — a public discovery
   gateway. Visual language is 100% inherited from the shared
   design system (cards.css, hero.css, audience.css, cta.css);
   this file only arranges the Explore grid + hero preview panel.

   Loaded by nexora/explore/index.html AFTER the shared cascade.
   ============================================================ */

/* ---------- Destinations grid ------------------------------
   Shares the .audience-grid responsive contract (2-col ≤1120px
   via responsive.css, 2-col tablet / 1-col mobile via the
   device sheets, which win with !important). Three columns at
   desktop width give the six entries a balanced 2×3 layout. */
.explore-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Cards live inside <li> grid items — stretch links to equal heights */
.explore-grid > li {
  display: grid;
}

/* <a> entry cards keep card typography, not link typography */
a.explore-entry {
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.explore-entry .icon-tile .icon {
  color: var(--accent);
}

.explore-entry-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* "Preview" entries that have no destination yet — honest state,
   same card chrome, muted pointer. */
.explore-entry.is-soon {
  cursor: default;
}

.explore-entry.is-soon:hover {
  transform: none;
}

.explore-entry.is-soon .icon-tile .icon {
  color: var(--warning);
}

/* ---------- Hero preview panel ------------------------------
   Right-hand visual in the hero: a compact index of the same
   destinations, built from .card / .icon-tile primitives.
   .hero-stage keeps its inherited min-heights (520/500/420px);
   centering keeps the panel balanced inside it. */
.hero-stage {
  display: grid;
  align-content: center;
}

.explore-map {
  display: grid;
  gap: 1.1rem;
  padding: 1.5rem;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.explore-map-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.explore-map-head strong {
  display: block;
  font-size: 1rem;
}

.explore-map-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--text-3);
}

.explore-map-head .badge {
  margin-left: auto;
}

.explore-map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.explore-map-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 500;
}

/* Linked rows (home destination index) — the anchor owns the row */
.explore-map-list li > a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: -0.6rem -0.75rem;
  padding: 0.6rem 0.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}

.explore-map-list li > a:hover .go {
  color: var(--accent);
}

.explore-map-list .icon {
  color: var(--accent);
  width: 1rem;
  height: 1rem;
}

.explore-map-list .go {
  margin-left: auto;
  color: var(--text-3);
  width: 0.85rem;
  height: 0.85rem;
  transition: color var(--motion-fast, 0.15s) var(--ease-out, ease-out);
}

/* ---------- Sub-route panels -------------------------------- */
/* Fixed floating dock needs breathing room above the first head. */
.explore-panel {
  padding-top: clamp(7.5rem, 5.5rem + 6vw, 10.5rem);
  padding-bottom: clamp(4rem, 3rem + 4vw, 7rem);
}

.explore-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--motion-fast, 0.15s) var(--ease-out, ease-out);
}

.explore-back:hover { color: var(--text-1); }

.explore-back .icon {
  width: 0.85rem;
  height: 0.85rem;
  transform: rotate(180deg);
}

.explore-panel .explore-note {
  margin-top: 2rem;
  max-width: 52rem;
}

/* Subject chips on the Learn preview */
.explore-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

/* Drawer active state (desktop .nav-link.is-active is shared) */
.m-link.is-active {
  color: var(--text-1);
  background: var(--surface-2);
}

[data-theme="dark"] .m-link.is-active { background: var(--surface); }

.explore-map-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  color: var(--text-3);
}

/* ---------- Note strip under the grid ----------------------- */
.explore-note {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  font-size: 0.86rem;
  color: var(--text-2);
}

.explore-note .icon {
  color: var(--accent);
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

/* ---------- Feature trio (Code Lab / Robotic Lab / Community) */
.explore-features {
  display: grid;
  /* min(100%, …) so the track can never be wider than its container
     on a narrow phone (a hard 280px floor overflows below ~320px). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.2rem;
  list-style: none;
  padding: 0;
}

.explore-features > li {
  display: grid;
}

.explore-feature {
  display: grid;
  gap: 0.95rem;
  align-content: start;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.explore-feature .icon-tile .icon {
  color: var(--accent);
  width: 22px;
  height: 22px;
}

.explore-feature h3 {
  margin: 0;
  font-size: 1.3rem;
}

.explore-feature p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--text-2);
}

.explore-feature .explore-feature-cta {
  margin-top: auto;
  align-self: start;
  pointer-events: none;
}

/* ---------- Honest empty states (showcase / leaderboard) ----- */
.explore-empty {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: 3.4rem 2rem;
  text-align: center;
}

.explore-empty h3 {
  margin: 0;
  font-size: 1.45rem;
}

.explore-empty p {
  margin: 0;
  max-width: 33rem;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.explore-empty .hero-actions {
  margin-top: 0.4rem;
}

.explore-empty .badge .icon {
  width: 0.95em;
  height: 0.95em;
}

/* ---------- Hero facts (what exploring costs: nothing) ------- */
.explore-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin: var(--spacing-lg) 0 0;
  padding: 0;
  list-style: none;
}

.explore-hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-2);
}

.explore-hero-facts .icon {
  width: 0.95em;
  height: 0.95em;
  color: var(--text-1);
}

/* ---------- Unlock list (final CTA) --------------------------
   A readable two-column list rather than a wall of chips, so the
   value of an account reads as a promise, not decoration. */
.explore-unlock-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2.2rem;
  width: min(100%, 52rem);
  margin: 1.9rem auto 0.4rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.explore-unlock-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
}

/* Odd count: the last item spans both tracks and centers itself. */
.explore-unlock-list > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 26rem;
}

.explore-unlock-list .icon-tile {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

.explore-unlock-list .icon-tile .icon {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.explore-unlock-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.explore-unlock-list span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* ---------- Subject tiles inherit .explore-entry link reset --- */
.explore-grid .explore-entry-meta .icon {
  width: 0.9em;
  height: 0.9em;
}

/* ---------- Public browsing controls (community / projects) ---
   Category chips + project search. These drive PUBLIC filtering
   only — no account, no request — so they carry no lock styling. */
.explore-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.explore-chip {
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.explore-chip:hover {
  color: var(--text-1);
  border-color: var(--border-strong);
}

.explore-chip.is-active {
  color: var(--text-1);
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.explore-project-tools {
  display: grid;
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.explore-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 30rem;
}

.explore-search .icon {
  position: absolute;
  left: 0.95rem;
  width: 1.05em;
  height: 1.05em;
  color: var(--text-3);
  pointer-events: none;
}

.explore-search .input {
  width: 100%;
  padding-left: 2.7rem;
}

.explore-project-tools .explore-filters {
  margin-bottom: 0;
}

/* ---------- Public result lists ------------------------------
   Only ever populated from real public API rows (see
   shell/explore-public-data.js) — never seeded in markup. */
.explore-feed-list {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.explore-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
}

.explore-post {
  display: grid;
  gap: 0.75rem;
}

.explore-post-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.explore-post-head > div {
  display: grid;
  gap: 0.1rem;
  margin-right: auto;
}

.explore-post-head strong {
  font-size: 0.92rem;
  color: var(--text-1);
}

.explore-post h3 {
  margin: 0;
  font-size: 1.1rem;
}

.explore-post p,
.explore-project p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-2);
}

.explore-project {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.explore-project h3 {
  margin: 0;
  font-size: 1.12rem;
}

.explore-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ---------- Locked action list -------------------------------
   Restricted features stay VISIBLE so visitors can see what an
   account unlocks; the access guard blocks the operation itself
   (data-requires → NXExploreAccess.require). Styled as clearly
   unavailable rather than hidden. */
.explore-locked-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.9rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.explore-locked-btn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.15rem;
  text-align: left;
  color: inherit;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.explore-locked-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--text-3);
}

.explore-locked-btn .icon-tile {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

.explore-locked-btn .icon-tile .icon {
  width: 17px;
  height: 17px;
  color: var(--text-2);
}

.ela-text {
  display: grid;
  gap: 0.15rem;
  margin-right: auto;
  min-width: 0;
}

.ela-text strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
}

.ela-text span {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-2);
}

.ela-lock {
  width: 1.05em;
  height: 1.05em;
  color: var(--text-3);
  flex: none;
}

/* ---------- Course cards (real curriculum registry) ----------
   Public course info only: title, blurb, level, category and the
   true module/lesson counts. Never progress or enrolment. */
.explore-course {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  height: 100%;
}

.explore-course h3 {
  margin: 0;
  font-size: 1.15rem;
}

.explore-course .badge {
  justify-self: start;
}

.explore-course p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-2);
}

.explore-course-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.explore-course-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.explore-course-facts li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
  margin-right: 0.5rem;
}

.explore-course-cta {
  margin-top: auto;
  align-self: start;
}

/* ---------- Public leaderboard standings ---------------------
   Public fields only — display name, avatar, rank, public score
   and public badge. Never email, id or private statistics. */
.explore-rank-list {
  display: grid;
  gap: 0.2rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0.9rem;
  list-style: none;
}

.explore-rank-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.6rem;
  border-radius: var(--radius-sm);
}

.explore-rank-row + .explore-rank-row {
  border-top: 1px solid var(--border);
}

.explore-rank-no {
  min-width: 2rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-3);
  text-align: right;
}

.explore-rank-name {
  margin-right: auto;
  font-size: 0.95rem;
  color: var(--text-1);
}

.explore-rank-score {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-1);
}

/* ---------- Updates / announcements (read-only) --------------
   Deliberately lightweight — a short list, not a news portal. */
.explore-update-list {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
}

.explore-update {
  display: grid;
  gap: 0.55rem;
}

.explore-update-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.explore-update h3 {
  margin: 0;
  font-size: 1.05rem;
}

.explore-update p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- Live lab stage (real app in public mode) --------- */
.explore-lab-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: clamp(6.5rem, 5rem + 5vw, 9rem);
  padding-bottom: 1.5rem;
}

.explore-lab-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.explore-lab-id {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.explore-lab-id .icon-tile {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.explore-lab-id .icon-tile .icon {
  color: var(--accent);
}

.explore-lab-id h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
}

.explore-lab-bar .explore-back {
  margin-bottom: 0;
}

.explore-lab-badge {
  margin-left: auto;
}

.explore-lab-stage {
  height: calc(100vh - 17rem);
  height: calc(100dvh - 17rem);
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--n-1000);
  overflow: hidden;
  box-shadow: var(--elev-2, 0 24px 48px -24px rgba(0, 0, 0, 0.5));
}

.explore-lab-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--n-1000);
}

.explore-lab-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-3);
}

.explore-lab-note a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.explore-lab-note a:hover {
  color: var(--accent-strong, var(--accent));
}

/* ---------- Guest access gate (restricted actions) ----------- */
/* Reuses the landing modal component (forms.css); only layout extras. */
.explore-gate-card {
  width: min(100% - 2rem, 26rem);
  text-align: center;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  padding: 2.4rem 1.8rem 1.8rem;
}

.explore-gate .modal-head {
  margin: 0;
  justify-items: center;
  text-align: center;
}

.explore-gate .modal-head h3 {
  margin: 0;
  font-size: 1.3rem;
}

.explore-gate-msg {
  margin: 0;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 22rem;
}

.explore-gate-icon .icon {
  color: var(--warning);
}

.explore-gate-actions {
  display: grid;
  gap: 0.6rem;
  width: 100%;
}

.explore-gate-actions .btn {
  justify-content: center;
}

/* ---------- Responsive (inherit device sheets; fill gaps) --- */
@media (max-width: 1120px) {
  .explore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .explore-map {
    padding: 1.15rem;
  }

  .explore-note {
    align-items: flex-start;
  }

  .explore-features {
    grid-template-columns: 1fr;
  }

  .explore-empty {
    padding: 2.4rem 1.4rem;
  }

  .explore-unlock-list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .explore-unlock-list > li:last-child:nth-child(odd) {
    justify-self: stretch;
    max-width: none;
  }

  .explore-lab-wrap {
    padding-top: 6rem;
    gap: 0.8rem;
  }

  .explore-lab-stage {
    height: calc(100vh - 14rem);
    height: calc(100dvh - 14rem);
    min-height: 420px;
    border-radius: var(--radius-sm);
  }

  .explore-lab-badge {
    display: none;
  }
}

/* ============================================================
   EXPLORE NAVIGATION · polish
   Explore-only overrides. The authenticated shell never loads
   this file, and every rule below is scoped to an explore-*
   class or the explore document, so the landing/dashboard
   navigation is untouched.
   ============================================================ */

/* ---------- Visitor identity -------------------------------- */

/* "Explore" badge beside the wordmark: the public shell must never
   be mistaken for the authenticated student dashboard. */
.explore-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.explore-badge {
  flex: none;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

[data-theme="dark"] .explore-badge { background: var(--surface); }

/* Plain-language mode statement in the header. */
.explore-visitor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

[data-theme="dark"] .explore-visitor-tag { background: var(--surface); }
.explore-visitor-tag .icon { width: 14px; height: 14px; flex: none; }

/* Same statement, stated once at the top of the mobile drawer. */
.explore-visitor-note {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.5;
}

[data-theme="dark"] .explore-visitor-note { background: var(--surface); }

/* ---------- Current item + focus states --------------------- */

/* The active route is carried by .is-active AND aria-current="page"
   (set by explore-router.js) — indicate it with weight and a rail so
   it does not rely on colour alone. */
.explore-nav .nav-link.is-active,
.explore-nav .nav-link[aria-current="page"] {
  color: var(--text-1);
  font-weight: 600;
  background: var(--hover-fill);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.m-link.is-active,
.m-link[aria-current="page"] {
  color: var(--text-1);
  font-weight: 600;
  border-color: var(--accent);
}

/* Visible keyboard focus on every interactive Explore control.
   :focus-visible keeps pointer clicks clean. */
.explore-nav .nav-link:focus-visible,
.explore-brand:focus-visible,
.m-link:focus-visible,
.explore-gate .btn:focus-visible,
.explore-gate .modal-close:focus-visible,
.explore-course-cta:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Nav fit ------------------------------------------
   Explore carries eight destinations plus brand and CTAs — far more
   than the landing nav, so the one-line row only fits when the
   least-critical chrome is shed as width drops. Rules that keep it
   clean:
     • links NEVER wrap or shrink: nav + brand + actions are
       non-shrinking flex items and every link stays on one line;
     • the visitor tag and Create Account CTA always live in the
       drawer / page CTAs (the row is too tight for them at any
       width while all eight links + Sign In are visible);
     • ≤1280 the Explore badge hides (still shown in the drawer);
       while scrolled the badge hides too, because the condensed
       dock is ~96px narrower;
     • ≤1120 Sign In moves into the drawer as well (theme toggle
       remains);
     • ≤1023 the whole link row collapses to the burger drawer.
   Measured 2026-09-03: natural widths brand 127/207, links ~674,
   Sign In+theme ~150, theme ~38, dock budget ~875–1099. */
.site-header .explore-nav .nav-link {
  padding: 0.5rem 0.6rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.explore-nav ul { flex-wrap: nowrap; }
.explore-nav ul li { flex: none; }

/* Brand / links / actions must never be crushed by flex shrink. */
.site-header .nav > .explore-brand,
.site-header .nav > .explore-nav,
.site-header .nav > .nav-actions { flex: none; }

.explore-visitor-tag { display: none; }
.site-header .nav-actions .btn-primary.nav-cta-desktop { display: none; }

@media (max-width: 1280px) {
  .explore-brand .explore-badge { display: none; }
}

.site-header.is-scrolled .explore-badge { display: none; }

@media (max-width: 1120px) {
  .site-header .nav-actions .btn-signin.nav-cta-desktop { display: none; }
}

@media (max-width: 1023px) {
  .explore-nav { display: none; }
  .site-header .nav-burger { display: grid; }
}

/* ============================================================
   EXPLORE RESPONSIVE AUDIT
   Desktop → laptop → tablet → mobile portrait → mobile landscape.
   Fixes only: overflow, clipping, broken grids, text legibility,
   buttons escaping containers, nav collisions, modal overflow,
   desktop-only layouts and touch targets. No visual redesign.
   ============================================================ */

/* ---------- Global overflow guards --------------------------
   Long unbroken strings (URLs, handles, code) are the usual
   cause of horizontal scroll on narrow screens. */
.explore-view {
  overflow-x: clip;
}

.explore-course h3,
.explore-course p,
.explore-update h3,
.explore-update p,
.explore-rank-name,
.explore-entry-meta,
.explore-note span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Buttons must wrap inside their card rather than escape it. */
.explore-gate-actions .btn,
.explore-course-cta,
.explore-locked-actions .btn {
  max-width: 100%;
  white-space: normal;
}

/* NOTE: .explore-locked-actions keeps the auto-fit GRID declared with the
   component (above). It is a <ul> of equal-weight cards, and a flex row
   would size each <li> to its own text — giving ragged, uneven cards. */

/* ---------- Tablet (≤1023px) -------------------------------- */
@media (max-width: 1023px) {
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile portrait (≤767px) ------------------------ */
@media (max-width: 767px) {
  .explore-grid { grid-template-columns: 1fr; }

  /* Two-column value list becomes unreadable at phone widths. */
  .explore-unlock-list { grid-template-columns: 1fr; }

  /* Chip rows scroll horizontally instead of wrapping into a wall
     and pushing the layout wide. Covers both chip containers:
     .explore-filters (community/projects) and .explore-chips (learn). */
  .explore-filters,
  .explore-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .explore-filters::-webkit-scrollbar,
  .explore-chips::-webkit-scrollbar { display: none; }
  .explore-chip { flex: none; }

  /* The project search field must not be dragged off-screen by the
     scrolling chip row beside it. */
  .explore-project-tools { display: grid; gap: 0.75rem; }
  .explore-project-tools .explore-search { width: 100%; }

  /* Rank rows: keep the score on the row, let the name shrink. */
  .explore-rank-list { padding: 0.5rem; }
  .explore-rank-row { gap: 0.6rem; padding: 0.7rem 0.4rem; }
  .explore-rank-no { min-width: 1.6rem; font-size: 0.8rem; }
  .explore-rank-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Course facts read as a wrapped list, not a clipped single line. */
  .explore-course-facts { flex-wrap: wrap; row-gap: 0.3rem; }

  /* Full-width CTAs are easier to hit than centred pills. */
  .explore-course-cta,
  .explore-locked-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Small phones (≤380px) --------------------------- */
@media (max-width: 380px) {
  /* Never let the wordmark + badge + burger collide. */
  .explore-brand .explore-badge { display: none; }
  .explore-update-head { flex-wrap: wrap; }
}

/* ---------- Modal / sign-in prompt overflow -----------------
   The gate must stay fully readable and scrollable on short
   viewports (notably mobile landscape) instead of clipping its
   actions off-screen. */
.explore-gate .explore-gate-card {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-height: 520px) {
  .explore-gate .explore-gate-card { padding-block: 1.4rem; }
  .explore-gate .explore-gate-icon { display: none; }
}

/* ---------- Mobile landscape --------------------------------
   Short, wide viewports: the lab stage sized against vh leaves
   almost nothing visible, and the drawer needs to scroll. */
@media (max-height: 560px) and (orientation: landscape) {
  .explore-lab-wrap { padding-top: 4.5rem; }
  .explore-lab-stage { height: auto; min-height: 320px; }
  .mobile-menu-panel { overflow-y: auto; }
}

/* ---------- Touch targets -----------------------------------
   Coarse pointers get a comfortable minimum hit area without
   changing how anything looks on desktop. */
@media (pointer: coarse) {
  .explore-nav .nav-link,
  .m-link,
  .explore-chip,
  .explore-course-cta,
  .explore-gate-actions .btn,
  .explore-gate .modal-close {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .explore-chip { padding-block: 0.6rem; }
  .explore-gate .modal-close { min-width: 44px; justify-content: center; }
}

/* ============================================================
   EXPLORE · LAYOUT STABILIZATION
   Structural corrections found by auditing the resolved cascade
   across 10 viewports. Scoped to Explore only — the landing page
   and the authenticated shell keep their existing behaviour.
   ============================================================ */

/* ---------- Button rows -------------------------------------
   .hero-actions is the shared button-row component. Its
   `margin-bottom: var(--space-10)` (2.5rem) exists to separate the
   HERO's buttons from the trust strip beneath them. Explore reuses
   the component 12 more times as a plain CTA row, where that
   trailing margin becomes dead space — most visibly on the 9 rows
   that end their section. Neutralize it outside the hero and let
   the section's own padding own the rhythm. */
.explore-view .hero-actions {
  margin-bottom: 0;
}

/* Inside the hero the original spacing is preserved. */
.explore-view .hero .hero-actions {
  margin-bottom: var(--spacing-2xl);
}

/* A button row that follows content gets one consistent gap
   instead of the ad-hoc inline margins previously used. */
.explore-view .section-head + .hero-actions,
.explore-view .explore-grid + .hero-actions,
.explore-view .explore-features + .hero-actions,
.explore-view .explore-chips + .hero-actions,
.explore-view [data-explore-courses] + .hero-actions,
.explore-view [data-explore-updates] + .hero-actions,
.explore-view [data-explore-leaderboard] + .hero-actions {
  margin-top: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
}

/* ---------- Card row alignment -------------------------------
   Grid items must stretch so sibling cards share a row height and
   their CTAs line up, whatever the copy length. */
.explore-grid > li,
.explore-features > li,
.explore-locked-actions > li,
.explore-update-list > li,
[data-explore-courses] > * {
  display: grid;
  align-content: stretch;
}

.explore-grid > li > *,
.explore-features > li > *,
.explore-locked-actions > li > * {
  height: 100%;
}

/* Push a card's action to the bottom so CTAs align across a row,
   whatever the blurb length. The facts list absorbs the slack, so
   this holds regardless of how many optional parts (badge, blurb,
   minutes) a given course actually has. */
/* (.explore-course already declares display:grid / align-content:start /
   height:100% with the component — only the bottom alignment is added
   here so CTAs line up across a row of uneven blurbs.) */
.explore-course .explore-course-facts {
  margin-top: auto;
}

.explore-course .explore-course-cta {
  justify-self: start;
}

/* ---------- Text containment ---------------------------------
   Headings and copy must wrap rather than punch out of their card
   at narrow widths; long tokens (URLs, handles) break. */
.explore-view h1,
.explore-view h2,
.explore-view h3,
.explore-view p,
.explore-view li {
  min-width: 0;
  overflow-wrap: break-word;
}

/* Flex/grid children need min-width:0 or they refuse to shrink and
   push their parent wider than the viewport. */
.explore-note > *,
.explore-locked-btn > *,
.explore-rank-row > *,
.explore-update-head > * {
  min-width: 0;
}

/* Icons never shrink, and never stretch to fill a flex row. */
.explore-view .icon,
.explore-view .icon-tile {
  flex: none;
}

/* ---------- Page-level overflow guard ------------------------
   Belt and braces: nothing in Explore may create horizontal scroll.
   Applied on the shell rather than <body> so the authenticated app
   is unaffected. */
.explore-view,
.explore-view .container {
  max-width: 100%;
  min-width: 0;
}

/* ---------- Sub-section breaks -------------------------------
   A second heading inside one section (e.g. "What you can do with
   an account") needs a clear break from the block above it. These
   replace ad-hoc inline margins so the rhythm is defined once. */
.explore-view .explore-subhead {
  margin-top: clamp(2.6rem, 2rem + 2vw, 3.5rem);
}

.explore-view .explore-subblock {
  margin-top: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
}

/* ============================================================
   EXPLORE · PAGE STRUCTURE
   The layout contract for the public shell:

     main#main
       └── section.explore-view            (one per route)
            ├── section.section            (a content band)
            │    └── div.container         (the ONE width authority)
            ├── section.section
            └── section.final-cta

   Every band is full-bleed; every band's inner .container supplies
   the shared max-width and horizontal padding. No section sets its
   own width, so the left/right edge of all content aligns exactly
   down the page at every breakpoint.

   Widths and gutters come from the design tokens, not from Explore:
     --container      76rem     shared max content width
     --container-pad  clamp(1.25rem, 0.7rem + 2vw, 2rem)
     --section-pad    clamp(3rem, 2rem + 4vw, 5rem)
   ============================================================ */

/* A band never constrains width itself — that is the container's job.
   This also stops a future section from introducing an arbitrary width. */
.explore-view > .section,
.explore-view > .hero,
.explore-view > .final-cta {
  width: 100%;
  max-width: 100%;
  /* Bands are ordinary flow blocks: no absolute positioning, no
     negative margins, so two bands can never overlap. */
  position: relative;
  margin-inline: 0;
}

/* The single width authority, restated for Explore so the rule is
   discoverable here rather than only in base/global.css. */
.explore-view .container {
  width: min(100% - (var(--container-pad) * 2), var(--container));
  margin-inline: auto;
}

/* ---------- Vertical rhythm ----------------------------------
   Bands own their spacing through padding (never margins), so
   adjacent bands cannot margin-collapse into an inconsistent gap.
   `.section` already supplies `padding-block: var(--section-pad)`
   from base/global.css — every body band therefore contributes an
   identical top and bottom, giving a uniform 2×--section-pad gap
   between any two of them. Nothing is restated here on purpose: a
   duplicate padding rule would silently win the cascade and make
   the rhythm harder to reason about.

   The hero and the closing CTA intentionally breathe more, which
   is what marks them as the page's opening and closing beats. */

/* Nothing may reach outside its own band. */
.explore-view > .section,
.explore-view > .final-cta {
  overflow-x: clip;
}