/* Shared "story landing" hero visual language — used by both science-landing.css
   (science/templates/science/index.html) and mathhistory-landing.js
   (mathhistory/templates/mathhistory/index.html), so the two apps read as "the
   same product" instead of each defining its own copy of the same badge pill /
   certificate card / gradient banner. Link this BEFORE the app-specific
   stylesheet so app-specific rules can layer on top (science's carousel-slide
   overrides, its .sl-cert entrance animation) without needing !important.

   Extracted from science-landing.css 2026-07-10 (the original, more complete
   implementation) rather than the other way round — science's carousel-specific
   rules (multi-slide stage, dots, per-slide-type colour overrides, cert
   entrance choreography) stay in science-landing.css since mathhistory's hero
   is a single static slide with no carousel machinery to hook them onto.

   Tokens only — see static/css/core/theme.css. Uses the approved house style
   (--cream/--paper/--mint/--tangerine/--gold, Bricolage/Space Mono) rather than
   the site's general --color-* palette. */

/* Full-bleed: break out of the .container's max-width so the hero spans the
   whole viewport regardless of screen size, not just the content column.
   Negative top margin cancels base.html's page-wrapper > container-fluid
   pt-2/pt-md-3 padding (the messages-include wrapper) so the hero sits flush
   against the nav bar instead of leaving a gap above it. */
.sl-hero-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -0.75rem;
    margin-bottom: 2rem;
}

.sl-hero {
    background: linear-gradient(120deg, var(--teal-deep) 0%, var(--teal) 45%, var(--cyan) 75%, var(--tangerine) 100%);
    overflow: hidden;
    position: relative;
}

/* Bold gradient background means every slide needs light-on-dark text instead
   of the light-hero dark-on-cream text used elsewhere on the page. */
.sl-hero .sl-disp {
    color: #fff;
}

.sl-hero .sl-slide-title p {
    color: rgba(255, 255, 255, 0.85);
}

.sl-hero .sl-slide-title p b {
    color: #fff !important;
}

.sl-hero-topbar {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subject-toggle {
    display: flex;
    font-family: var(--jm-font-mono);
    font-size: 0.8125rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

.subject-toggle-btn {
    display: block;
    text-decoration: none;
    border: none;
    background: var(--mint);
    color: var(--teal-deep);
    padding: 0.375rem 0.6875rem;
    cursor: pointer;
    line-height: 1;
}

.sl-hero .subject-toggle-btn {
    background: rgba(255, 255, 255, 0.85);
}

.subject-toggle-btn.is-active {
    background: var(--teal);
    color: #fff;
}

.sl-badge {
    font-family: var(--jm-font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-deep);
    background: var(--mint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.4375rem 1rem;
    display: inline-flex;
}

.sl-badge-tangerine {
    background: rgba(255, 107, 74, 0.14);
    border-width: 2px;
    border-color: var(--tangerine);
    color: #d9502e;
    font-weight: 700;
}

.sl-badge-gold {
    background: rgba(255, 176, 32, 0.16);
    border-width: 2px;
    border-color: var(--gold);
    color: #a66a00;
    font-weight: 700;
}

.sl-badge-teal {
    background: rgba(18, 181, 166, 0.14);
    border-width: 2px;
    border-color: var(--teal);
    color: var(--teal-deep);
    font-weight: 700;
}

.sl-badge-cyan {
    background: rgba(34, 211, 238, 0.16);
    border-width: 2px;
    border-color: var(--cyan);
    color: #0e7490;
    font-weight: 700;
}

/* Colour-variant pills (tangerine/gold/teal/cyan) keep their own border and
   text colour everywhere, but get a near-solid fill only inside the hero --
   the busy moving gradient behind them means a translucent tint (fine on the
   plain cream page background elsewhere) isn't reliably legible here. */
.sl-hero .sl-badge {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.sl-hero .sl-badge-tangerine {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--tangerine);
    color: #d9502e;
}

.sl-hero .sl-badge-gold {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--gold);
    color: #a66a00;
}

.sl-hero .sl-badge-teal {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--teal);
    color: var(--teal-deep);
}

.sl-hero .sl-badge-cyan {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--cyan);
    color: #0e7490;
}

.sl-disp {
    font-family: var(--jm-font-display);
    color: var(--teal-ink);
    font-weight: 800;
}

/* slide: title -- certificates flank the text on both sides so growing cert
   content can never overlap the heading above it. */
.sl-slide-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 100%;
    padding: 1.5rem 2rem;
    gap: 1.25rem;
}

.sl-cert-group {
    display: flex;
    gap: 0.875rem;
    flex-shrink: 0;
}

.sl-title-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sl-slide-title h1 {
    font-size: 1.625rem;
    max-width: 420px;
    margin: 0;
    line-height: 1.15;
}

.sl-slide-title p {
    font-size: 1rem;
    color: var(--muted);
    max-width: 420px;
    margin: 0;
    line-height: 1.45;
}

.sl-slide-title-sub {
    font-weight: 700;
}

/* Certificate card: "here's what completing it looks like." Static/always-
   visible base -- a page with no carousel (mathhistory) gets this as its
   resting state. science-landing.css layers an ADDITIONAL entrance
   choreography on top (scoped under .sl-hero-slide, which only exists in its
   carousel), fanning cards in from off-screen when their slide becomes
   active -- that stays science-specific since it needs the carousel's
   is-active toggling to trigger from. */
.sl-cert {
    width: 110px;
    min-height: 132px;
    background: var(--cream);
    border: 2px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
    padding: 0.625rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    opacity: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sl-cert:hover {
    transform: scale(1.08);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.32);
    z-index: 3;
}

.sl-cert-seal {
    font-size: 1.375rem;
}

.sl-cert-title {
    font-family: var(--jm-font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-top: 0.125rem;
}

.sl-cert-name {
    font-family: var(--jm-font-display);
    font-weight: 800;
    font-size: 0.9375rem;
    color: var(--ink);
    margin-top: 0.1875rem;
}

.sl-cert-story {
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.25;
    margin-top: 0.1875rem;
}

.sl-cert-for {
    font-style: normal;
    color: var(--muted);
}

.sl-cert-date {
    font-family: var(--jm-font-mono);
    font-size: 0.625rem;
    color: var(--gold);
    margin-top: auto;
    padding-top: 0.25rem;
}

/* Carousel stage + crossfading slide wrapper — moved here from
   science-landing.css 2026-07-12 so mathhistory's hero can use the exact
   same rotation mechanics (build a heroSlides array, toggle .is-active,
   drive it with dots/arrows/autoplay) instead of a second copy. Pure
   structural/animation rules with zero app-specific content; each app's own
   *-landing.css supplies its own slide-type layouts (science's
   .sl-slide-discovery/.sl-slide-trail/etc, mathhistory's .mh-hero-arc/
   .mh-hero-cast/.mh-hero-cta) inside the .sl-hero-slide wrapper this
   defines.

   height:100% on a slide's children only resolves against an ancestor with
   a DEFINITE height. Slides must stay position:absolute even while active
   (crossfade, not a layout swap) — switching the active slide to
   position:relative breaks height:100% on its children, since min-height
   doesn't establish a definite height for percentage resolution; content
   then only takes the height it needs and top-anchors, leaving dead space
   below. */
.sl-hero-stage {
    height: 380px;
    position: relative;
}

.sl-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.sl-hero-slide.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.sl-hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
}

.sl-hero-dotbtn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.2s ease, background 0.2s ease;
}

.sl-hero-dotbtn.is-active {
    background: var(--tangerine);
    width: 26px;
    border-radius: 4px;
}

.sl-hero-nav-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.125rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sl-hero-nav-arrow:hover {
    background: rgba(255, 255, 255, 0.32);
}