/* static/css/components/mathhistory-landing.css */
.mh-hero {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1rem 2rem;
  position: relative;
}

/* The gradient hero banner (badge pill + title + flanking certificates), the
   subject-toggle switcher, AND the carousel stage/slide/dots/arrows
   mechanics are shared with science's hero -- see landing-hero-shared.css
   (linked before this file in mathhistory/templates/mathhistory/index.html),
   single source for .sl-hero-wrap/.sl-hero/.sl-hero-topbar/.subject-toggle*/
   .sl-badge*/.sl-disp/.sl-slide-title/.sl-cert*/.sl-hero-stage/
   .sl-hero-slide/.sl-hero-dots*/.sl-hero-nav-arrow. mathhistory-landing.js's
   template uses those class names directly for its carousel scaffolding;
   only the mathhistory-specific slide *layouts* (.mh-hero-arc/.mh-hero-cast/
   .mh-hero-cta below) are app-specific, mirroring how science-landing.css
   supplies .sl-slide-discovery/.sl-slide-trail/etc for the same wrapper.
   Everything below the "story/browse rows" comment stays on the plain page
   background, same as science. */

/* slide: arc (photo + hook text, alternating sides via .is-reverse) --
   mirrors science's .sl-slide-discovery layout but kept as its own mh-
   prefixed rules (self-contained in this file, no cross-app class reuse)
   since only 4 real arcs exist -- one slide per arc, content pulled
   verbatim from DISCOVERY_POOL (mathhistory-landing-data.js), which is
   itself sourced from each arc's actual hook/title text. */
.mh-hero-arc {
  display: flex;
  height: 100%;
}

.mh-hero-arc.is-reverse {
  flex-direction: row-reverse;
}

.mh-hero-arc-photo {
  width: 42%;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center 20%;
  background-color: var(--teal-deep);
}

.mh-hero-arc-photo.is-empty {
  background-image: linear-gradient(160deg, var(--mint2), var(--teal)) !important;
}

.mh-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--paper));
}

.mh-hero-arc.is-reverse .mh-hero-scrim {
  background: linear-gradient(-90deg, transparent 60%, var(--paper));
}

.mh-hero-arc-text {
  width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 2.75rem;
  gap: 0.125rem;
}

.mh-hero-arc.is-reverse .mh-hero-arc-text {
  align-items: flex-end;
  text-align: right;
}

.mh-hero-arc-text h2 {
  font-size: 1.6875rem;
  margin: 0.625rem 0 0.75rem;
  max-width: 420px;
}

.mh-hero-arc-sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
  line-height: 1.55;
  margin: 0 0 0.875rem;
}

/* slide: cast (a chip wall of the real mathematicians featured across the
   4 live arcs) -- photo + name from the live /posters/api/mathematicians/
   fetch (mathematicianPhoto()/mathematicianName() in mathhistory-landing.js),
   role text pulled verbatim from ARCS[*].cast[].role (mathhistory/views.py). */
.mh-hero-cast {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2.5rem;
  gap: 0.75rem;
  text-align: center;
}

.mh-hero-cast p {
  color: rgba(255, 255, 255, 0.85);
  margin: -0.375rem 0 0;
}

.mh-hero-cast-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  max-width: 760px;
}

.mh-hero-cast-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  max-width: 260px;
  text-align: left;
}

.mh-hero-cast-photo-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--mint2), var(--teal));
}

.mh-hero-cast-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-hero-cast-photo-wrap.no-photo img {
  display: none;
}

.mh-hero-cast-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mh-hero-cast-name {
  font-weight: 700;
  font-size: 0.8125rem;
  color: #fff;
}

.mh-hero-cast-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.25;
}

/* slide: CTA ("browse all stories" -- scrolls to the hooks row just below
   the hero). Reused as the small per-arc button on .mh-hero-arc too. */
.mh-hero-cta {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem 2.5rem;
}

.mh-hero-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
  margin: 0;
  font-size: 1rem;
}

.mh-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--teal-deep);
  font-weight: 700;
  padding: 0.625rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  font-family: var(--jm-font-mono);
  font-size: 0.9375rem;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.mh-hero-cta-btn:hover {
  background: var(--mint);
  color: var(--teal-deep);
}

.mh-hero-arc-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.mh-hero-arc.is-reverse .mh-hero-arc-btn {
  align-self: flex-end;
}

.mh-slide {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.mh-slide-p {
  color: var(--muted);
  margin: -0.5rem 0 0;
}

/* Netflix-style horizontal-scrolling row -- same structure/behaviour as
   science-landing.css's .sl-row/.sl-row-track-wrap/.sl-row-track/.sl-row-nav
   (mirrored here under the mh- prefix): a track of fixed-width, scroll-snap
   cards with hover-revealed nav arrows that hide themselves when a row has
   too few cards to actually overflow (see onRowMounted in
   mathhistory-landing.js). Every card row on this page (hooks, narrator
   cast, mathematician wall, quiz demos, book spines, badge medals, and the
   browse-by-branch/era rows) uses this one row/track/nav trio. */
.mh-row {
  margin: 0 0 0.5rem;
}

.mh-row > h3 {
  margin: 0 0 0.625rem;
}

.mh-row-track-wrap {
  position: relative;
}

.mh-row-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0.25rem 0.25rem 0.625rem;
  scrollbar-width: none;
}

.mh-row-track::-webkit-scrollbar {
  display: none;
}

.mh-row-nav {
  position: absolute;
  top: 0;
  bottom: 10px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--paper), transparent);
  border: none;
  color: var(--teal);
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.mh-row-track-wrap:hover .mh-row-nav {
  opacity: 1;
}

.mh-row-nav.is-right {
  left: auto;
  right: 0;
  background: linear-gradient(-90deg, var(--paper), transparent);
}

/* A row whose track doesn't actually overflow has nothing to scroll to --
   showing the nav arrows anyway reads as broken, not just decorative. */
.mh-row.is-no-overflow .mh-row-nav {
  display: none;
}

.mh-narrator-card,
.mh-wall-card,
.mh-quiz-demo,
.mh-badge-medal {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--mint);
}

.mh-narrator-card,
.mh-quiz-demo {
  width: 240px;
}

.mh-wall-card {
  width: 200px;
  justify-content: center;
  min-height: 3.5rem;
}

.mh-badge-medal {
  width: 200px;
}

/* Real book cover art (same /posters/api/books/ data + media path as the
   existing timeline book-covers gallery) instead of a flat text box. */
.mh-book-spine {
  flex: 0 0 140px;
  scroll-snap-align: start;
  aspect-ratio: 2 / 3;
  border-radius: 0.375rem;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--mint);
  box-shadow: var(--shadow);
}

.mh-book-spine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-book-title-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-ink);
}

/* Poster-style story card (the featured "hook" row) -- a real photo
   (the arc's lead cast member's portrait, see arcPortrait() in
   mathhistory-landing.js) with a dark bottom banner over it, same shape
   language as science-landing.css's .sl-tile. Falls back to a plain
   gradient (no photo, .is-empty) rather than a broken/blank image when a
   mathematician has no portrait on file. */
.mh-hook-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--mint);
}

.mh-hook-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--teal-deep);
}

.mh-hook-photo.is-empty {
  background-image: linear-gradient(160deg, var(--mint2), var(--teal)) !important;
}

.mh-hook-photo .badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  font-family: var(--jm-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  border-width: 2px;
  border-style: solid;
  font-weight: 700;
  /* Sits on a real photo of unpredictable colour -- near-solid white fill
     (not a translucent tint) keeps the coloured text/border legible
     against any portrait, same contrast strategy as science's hero-scoped
     .sl-badge-tangerine etc. */
  background: rgba(255, 255, 255, 0.9);
}

.mh-badge-teal { border-color: var(--teal); color: var(--teal-deep); }
.mh-badge-tangerine { border-color: var(--tangerine); color: #d9502e; }
.mh-badge-gold { border-color: var(--gold); color: #a66a00; }
.mh-badge-cyan { border-color: var(--cyan); color: #0e7490; }

.mh-hook-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.75rem 0.625rem;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85), transparent);
}

.mh-hook-banner-title {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.mh-hook-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem;
  gap: 0.625rem;
}

.mh-hook-body p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Pin the Play button to the bottom of every hook card regardless of how
   much summary text sits above it, so the buttons line up across a row
   even though every card in it is the same fixed width. */
.mh-hook-body > a {
  margin-top: auto;
  align-self: flex-start;
}

/* Poster-style browse card (branch/era rows) -- same photo+banner idea as
   .mh-hook-card but simpler (no body text/button, the whole card is one
   link, matching science's .sl-people-tile/.sl-tile-heading pattern for
   "browse" rows). */
.mh-row-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}

.mh-row-card-link {
  display: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.mh-row-card-photo {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  background-color: var(--teal-deep);
}

.mh-row-card-photo.is-empty {
  background-image: linear-gradient(160deg, var(--mint2), var(--teal)) !important;
}

.mh-row-card-banner {
  padding: 0.5rem 0.625rem;
  background: var(--mint);
  color: var(--teal-ink);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.mh-row-card-link:hover .mh-row-card-banner,
.mh-row-card-link:focus-visible .mh-row-card-banner {
  color: var(--teal-deep);
  text-decoration: underline;
}

.mh-badge-medal {
  border-width: 2px;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  color: var(--teal-ink);
}

/* earned:false is illustrative preview data on this landing page (not a
   logged-in user's real progress) -- dim it slightly so it still reads as
   "here's what you're working toward" rather than an already-won medal. */
.mh-badge-medal:not(.is-earned) {
  opacity: 0.72;
  filter: grayscale(35%);
}

.mh-badge-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.mh-badge-medal p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--teal-ink);
  opacity: 0.85;
}

.mh-rows {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem 2rem;
}

.mh-beat-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal);
  margin-bottom: 0.5rem;
}

.mh-ask {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: var(--mint);
}

.mh-ask summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--teal-deep);
}

.mh-ask p {
  margin: 0.5rem 0 0;
  color: var(--ink);
}

.mh-choices {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.mh-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  cursor: pointer;
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid var(--teal);
  border-radius: 0.5rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.mh-choice:hover,
.mh-choice:focus-visible {
  background: var(--mint);
}

.mh-choice-label {
  font-weight: 600;
}

.mh-choice-lead {
  font-size: 0.85rem;
  color: var(--muted);
}

.mh-diagram {
  display: flex;
  justify-content: center;
  padding: 1rem;
  margin: 0.75rem 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--paper);
}

.mh-diagram svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.mh-foreshadow {
  display: block;
  margin: 0.75rem 0;
  font: inherit;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.mh-foreshadow:hover,
.mh-foreshadow:focus-visible {
  color: var(--teal);
}

.mh-sources {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: var(--mint);
}

.mh-sources summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--teal-deep);
}

.mh-sources ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.mh-sources a {
  color: var(--teal);
}

.mh-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.mh-cast-card {
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
}

.mh-feedback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--teal);
  border-radius: 0.5rem;
  background: var(--mint);
}

.mh-feedback-text {
  margin: 0;
  color: var(--ink);
}

.mh-continue {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid var(--teal);
  border-radius: 0.5rem;
  background: var(--teal);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
}

.mh-continue:hover,
.mh-continue:focus-visible {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}