/* exploration-page-specific styles (loaded after app-common.css). Shared by the hub
   (/maths/explorations/) and every dedicated /maths/explorations/<slug>/ page — same
   two-column .shell (content + right rail) as Games/Puzzles now that every exploration
   has a real page and a real sidebar. */

.expl-wrap {
  padding: 24px;
  max-width: 760px;
  margin: 0 auto 40px;
  width: 100%;
}

.section-divider {
  border: none;
  border-top: 1px solid #ede8e3;
  margin: 0 0 24px;
}

.about-section {
  margin-bottom: 0;
}

/* NOTE: .about-topic* / .about-faq-* (exam-page AboutUnit styles) removed — AboutUnit is
   only rendered on exam pages (exam.css), never on exploration pages. */

/* Hub page (/maths/explorations/) — full-width like Games/Puzzles' own hub wrap
   (.grade-wrap), not the 760px reading column .expl-wrap uses for a single
   exploration's article-style detail page. */
.expl-hub-wrap {
  max-width: none;
  margin: 0;
  padding: 20px 24px;
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(41, 40, 39, 0.5);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.crumb-sep {
  color: rgba(41, 40, 39, 0.3);
}

.crumb-mid {
  color: rgba(41, 40, 39, 0.5);
}

.expl-hero {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  display: flex;
  gap: 20px;
}

/* The hub page reuses .expl-hero for its own intro band, just without an icon panel
   (only the dedicated exploration pages have one) — .expl-hero-body wraps the text
   content on both so the flex-row layout below works either way. */
.expl-hero-icon-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: var(--cb, #f5f2ef);
  flex-shrink: 0;
}

.expl-hero-icon {
  width: 56px;
  height: 56px;
  display: block;
}

.expl-hero-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.expl-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.expl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid rgba(41, 40, 39, 0.12);
  border-radius: 20px;
  font-size: 12px;
  color: rgba(41, 40, 39, 0.85);
}

.expl-pill strong {
  color: #97948e;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.expl-hero-hook {
  font-size: 14px;
  line-height: 22px;
  color: rgba(41, 40, 39, 0.85);
  margin: 4px 0 0;
}

.expl-section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.expl-section h2 {
  font-family: 'Athletics';
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: #1c1917;
  margin-bottom: 12px;
}

/* The FAQs heading specifically uses the same weight as Games'/Puzzles' detail-page
   FAQ heading (.grade-section-title, app-common.css) rather than this page's own bold
   section-heading style — Manasa asked for the FAQ section itself to look identical
   across all three verticals. Needs the extra specificity to win over .expl-section h2
   above (class+element beats grade-section-title's single class). */
.expl-section h2.grade-section-title {
  font-weight: 400;
}

.expl-section p {
  font-size: 15px;
  line-height: 24px;
  color: rgba(41, 40, 39, 0.85);
  margin-bottom: 12px;
}

.expl-section p:last-child {
  margin-bottom: 0;
}

/* global-reset.css strips list-style off every ul/ol site-wide, so this needs its own
   marker rather than relying on the browser default bullet. */
.expl-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expl-list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 22px;
  color: rgba(41, 40, 39, 0.85);
}

.expl-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1c1917;
}

/* "Why This Matters" gets the gold-tinted treatment so it reads as a distinct payoff
   callout rather than another content block. */
.expl-about {
  background: #faf1e6;
  border: 1px solid #f4ab52;
}

/* The pre-Play embed panel is shared — see .enr-embed* in app-common.css. */

.expl-coming-soon-note {
  font-size: 13px;
  line-height: 20px;
  color: rgba(41, 40, 39, 0.5);
  padding: 4px 4px 16px;
}

/* Hub/directory page (/maths/explorations/) — reuses this sheet rather than a
   near-duplicate one. One flat grid of every exploration (Karan, 2026-09-08 — dropped
   the earlier per-mode sections; real split was 5 Wonders/5 Claims/3 Choices/1
   Patterns/0 Builds, so a "Patterns" section would've shown one tile), bare in the page
   column rather than nested in a bordered card — same precedent as games.css's
   .game-card-list (the Games type-page's own flat list). Mode is still real, visible
   data — surfaced as a small tag on each card (.expl-hub-card-mode) — just not the
   page's organizing structure any more. */
.expl-hub-intro {
  font-size: 15px;
  line-height: 22px;
  color: rgba(41, 40, 39, 0.7);
  margin: 0;
}

.expl-hub-count {
  font-size: 12px;
  color: rgba(41, 40, 39, 0.5);
  white-space: nowrap;
  margin: 0 0 6px;
}

.expl-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

/* The card box, media panel, lock badge and footer container/title/sub are all shared —
   see .enr-card* in app-common.css. Only the meta row below (a mode chip beside the
   grade) is exploration-specific. */
.expl-hub-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.expl-hub-card-mode {
  font-size: 11px;
  font-weight: 600;
  color: var(--cd, #1c1917);
  background: #fff;
  border: 1px solid var(--cd, #ede8e3);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
  white-space: nowrap;
}


/* Right rail — "More {Mode} Explorations" quick-switch (ExplorationPage sidebar), same
   pattern as games.css's "Other Formats" / puzzles.css's "Other Categories". */
.rp-formats {
  background: #fff;
  border: 1px solid #ede8e3;
  border-radius: 8px;
  overflow: hidden;
}

.rf-title {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #97948e;
  padding: 12px 16px;
  border-bottom: 1px solid #ede8e3;
}

.rf-item {
  display: block;
  padding: 12px 16px;
  border-bottom: 1px solid #ede8e3;
  font-size: 13px;
  line-height: 20px;
  color: rgba(41, 40, 39, 0.7);
  text-decoration: none;
}

.rf-item:hover {
  background: #faf1e6;
  color: #1c1917;
}

.rf-item.active {
  color: #1c1917;
  font-weight: 500;
  background: #faf1e6;
}

.rf-item:last-child {
  border-bottom: none;
}

/* "Explore Enrichment" cross-vertical nav (app-shell.js's EnrichmentCrossNav) — a
   colored icon per row, unlike the plain-text "More X Explorations" rows above, so
   this block reads as more prominent. */
.rp-formats-icons .rf-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rf-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
}

.rf-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Right rail — "Resources" list (ResourcesRail, app-shell.js). Same rules added to
   games.css/puzzles.css for the same reason: the component only ever ships
   `variant="grade"`'s classnames, but this sheet never defined them. */
.rp-resources {
  background: #fff;
  border: 1px solid #ede8e3;
  border-radius: 8px;
  padding: 0 16px;
}

.rp-res-title {
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #97948e;
  padding: 16px 0 12px;
}

.rp-res-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #ede8e3;
  text-decoration: none;
  color: #1c1917;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.rp-res-item:hover .rp-res-name {
  text-decoration: underline;
}

.rp-res-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rp-res-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 1024px) {
  .shell {
    display: block;
    overflow-y: auto;
  }

  .main {
    overflow-y: visible;
  }

  .rightpanel {
    border-left: none;
    border-top: 1px solid #ede8e3;
    background-image: none;
    overflow-y: visible;
  }
}

@media (max-width: 767px) {
  .expl-wrap,
  .expl-hub-wrap {
    padding: 16px;
  }

  .expl-hero,
  .expl-section {
    padding: 16px;
  }

  .expl-hero {
    flex-direction: column;
  }

  .expl-hero-icon-panel {
    width: 100%;
    height: 120px;
  }

  .expl-hub-grid {
    gap: 12px;
  }
}