/*
SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
SPDX-License-Identifier: Apache-2.0
*/

/* FlashDreams custom CSS, layered on top of pydata-sphinx-theme.
   Components are keyed off the design tokens in section 1.

   Two RST/docutils quirks the rules below account for:
   - Class names use single dashes only; docutils collapses `__`/`--` in
     `:class:` / `.. container::` args to single dashes in the HTML.
   - `.. container::` / `.. rubric::` wrap their text in a `<p>`, so text
     components reset that `<p>`'s margin.

   Sections:
     1. Design tokens
     2. Theme overrides
     3. Layout helpers
     4. Components (hero, feature card, CTA row, stat block)
     5. Header chrome
     6. Front-of-site marketing layout
     7. Homepage "Supported Models" rail
     8. Misc upstream tweaks
     9. Reference-docs model-page components */


/* ----- 1. Design tokens --------------------------------------------------- */

:root {
    /* Accent — single source of truth for branded color (FlashDreams
       logo green, 20% darker). Re-brand by editing these four values. */
    --fd-accent:        #5e9400;
    --fd-accent-hover:  #4b7600;
    --fd-accent-soft:   rgba(94, 148, 0, 0.12);
    --fd-accent-ink:    #ffffff;        /* text color on top of --fd-accent */

    /* Type scale — four canonical sizes. Smaller labels share
       --fd-text-base and differentiate via weight/color/case. */
    --fd-text-base: 1rem;        /* 16px  body, captions, eyebrows, table cells */
    --fd-text-lg:   1.25rem;     /* 20px  lede paragraphs, card titles */
    --fd-text-xl:   1.75rem;     /* 28px  section heads, stat values */
    --fd-text-3xl:  3.25rem;     /* 52px  hero head only */

    /* Aliases onto the canonical four. */
    --fd-text-xs:   var(--fd-text-base);
    --fd-text-sm:   var(--fd-text-base);
    --fd-text-2xl:  var(--fd-text-xl);

    /* Spacing scale (4px base). */
    --fd-space-1:   0.25rem;     /* 4px  */
    --fd-space-2:   0.5rem;      /* 8px  */
    --fd-space-3:   1rem;        /* 16px */
    --fd-space-4:   1.5rem;      /* 24px */
    --fd-space-5:   2.25rem;     /* 36px */
    --fd-space-6:   3.5rem;      /* 56px */
    --fd-space-7:   5rem;        /* 80px */

    /* Radii */
    --fd-radius-sm: 4px;
    --fd-radius-md: 8px;
    --fd-radius-lg: 14px;

    /* Shadow / elevation */
    --fd-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04),
                   0 1px 1px rgba(15, 23, 42, 0.03);
    --fd-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06),
                   0 2px 4px rgba(15, 23, 42, 0.04);

    /* Misc */
    --fd-border-width: 1px;
    --fd-transition: 150ms ease-out;
    --fd-max-content: 72rem;   /* max width for hero / wide rows */
}

/* Light-mode neutral palette */
html[data-theme="light"] {
    --fd-bg:            #ffffff;
    --fd-bg-muted:      #f7f8fa;
    --fd-bg-sunken:     #eef0f4;
    --fd-surface:       #ffffff;
    --fd-border:        #e4e7ec;
    --fd-border-strong: #cdd2da;
    --fd-text:          #1a1f2b;
    --fd-text-muted:    #5a6271;
    --fd-text-subtle:   #8a92a3;
}

/* Dark-mode neutral palette */
html[data-theme="dark"] {
    --fd-bg:            #0f1218;
    --fd-bg-muted:      #161a22;
    --fd-bg-sunken:     #0a0c11;
    --fd-surface:       #1a1f29;
    --fd-border:        #2a313d;
    --fd-border-strong: #3a4150;
    --fd-text:          #e8eaf0;
    --fd-text-muted:    #a8b0bf;
    --fd-text-subtle:   #6b7385;

    /* Brighter accent so it pops against the dark background. */
    --fd-accent:        #71b015;
    --fd-accent-hover:  #83bb2e;
    --fd-accent-soft:   rgba(113, 176, 21, 0.18);
    --fd-accent-ink:    #0f1218;

    /* Heavier shadows are noise on a dark background; flatten them. */
    --fd-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --fd-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
}


/* ----- 2. Theme overrides ------------------------------------------------- */

/* Re-bind sphinx-design and pydata-sphinx-theme accent palettes to
   --fd-accent so buttons, links, badges, and focus rings share one green
   (the theme defaults to blue links and a purple "secondary"). */
html[data-theme="light"],
html[data-theme="dark"] {
    --pst-color-primary:        var(--fd-accent);
    --pst-color-primary-bg:     var(--fd-accent-soft);
    --pst-color-link:           var(--fd-accent);
    --pst-color-link-hover:     var(--fd-accent-hover);
    --pst-color-accent:         var(--fd-accent);
    --sd-color-primary:         var(--fd-accent);
    --sd-color-primary-text:    var(--fd-accent-ink);
    --sd-color-primary-highlight: var(--fd-accent-hover);

    --pst-color-secondary:          var(--fd-accent);
    --pst-color-secondary-bg:       var(--fd-accent-soft);
    --sd-color-secondary:           var(--fd-accent);
    --sd-color-secondary-text:      var(--fd-accent-ink);
    --sd-color-secondary-highlight: var(--fd-accent-hover);
}


/* ----- 3. Layout helpers -------------------------------------------------- */

/* Hide the "Table of Contents" heading in the primary sidebar. */
.bd-links__title {
    display: none;
}


/* ----- 4. Components ------------------------------------------------------ */

/* 4.1 Hero ----------------------------------------------------------------- */

.fd-hero {
    margin-block: var(--fd-space-4) var(--fd-space-6);
    padding: var(--fd-space-6) var(--fd-space-4);
    border-radius: var(--fd-radius-lg);
    background:
        radial-gradient(120% 140% at 0% 0%,
                        var(--fd-accent-soft) 0%,
                        transparent 55%),
        linear-gradient(180deg, var(--fd-bg-muted), var(--fd-bg));
    border: var(--fd-border-width) solid var(--fd-border);
}

/* Hero title from `.. rubric:: :class: fd-hero-title`, which docutils
   emits as `<p class="fd-hero-title rubric">`; override the rubric
   default margins. */
p.fd-hero-title.rubric,
.fd-hero-title {
    font-size: var(--fd-text-3xl);
    line-height: 1.08;
    font-weight: 500;
    color: var(--fd-text);
    margin: 0 0 var(--fd-space-3) 0;
    letter-spacing: -0.02em;
}

.fd-hero-lede,
.fd-hero-lede > p {
    margin: 0 0 var(--fd-space-4) 0;
    font-size: var(--fd-text-lg);
    line-height: 1.5;
    color: var(--fd-text-muted);
    max-width: 48rem;
}

@media (max-width: 768px) {
    .fd-hero {
        padding: var(--fd-space-5) var(--fd-space-3);
    }
    p.fd-hero-title.rubric,
    .fd-hero-title {
        font-size: var(--fd-text-2xl);
    }
    .fd-hero-lede,
    .fd-hero-lede > p {
        font-size: var(--fd-text-base);
    }
}


/* 4.2 Feature card --------------------------------------------------------- */

/* Applied as `:class-card: fd-feature` on a sphinx-design card. */
.sd-card.fd-feature {
    border: var(--fd-border-width) solid var(--fd-border);
    border-radius: var(--fd-radius-md);
    background: var(--fd-surface);
    box-shadow: var(--fd-shadow-1);
    transition: transform var(--fd-transition),
                box-shadow var(--fd-transition),
                border-color var(--fd-transition);
    height: 100%;
}

/* Only lift on hover when the card is clickable — sphinx-design adds
   `.sd-card-hover` only to cards with a `:link:`. */
.sd-card.fd-feature.sd-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--fd-shadow-2);
    border-color: var(--fd-border-strong);
}

.sd-card.fd-feature .sd-card-title {
    font-size: var(--fd-text-lg);
    font-weight: 600;
    color: var(--fd-text);
    margin-bottom: var(--fd-space-2);
}

.sd-card.fd-feature .sd-card-body {
    color: var(--fd-text-muted);
    font-size: var(--fd-text-sm);
    line-height: 1.55;
}


/* 4.3 CTA button row ------------------------------------------------------- */

.fd-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-2);
    align-items: center;
    margin-block: var(--fd-space-3);
}

/* `display: contents` drops the wrapping <p> so buttons sit flush. */
.fd-cta-row > p {
    margin: 0;
    display: contents;
}

.fd-cta-row .sd-btn {
    padding: 0.625rem 1.125rem;
    border-radius: var(--fd-radius-md);
    font-weight: 600;
    font-size: var(--fd-text-sm);
    transition: transform var(--fd-transition),
                box-shadow var(--fd-transition);
}

.fd-cta-row .sd-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--fd-shadow-1);
}

@media (max-width: 480px) {
    .fd-cta-row .sd-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}


/* 4.4 Stat block ----------------------------------------------------------- */

/* A scannable value + label, typically inside a sphinx-design grid. */
.fd-stat {
    padding: var(--fd-space-4) var(--fd-space-3);
    border: var(--fd-border-width) solid var(--fd-border);
    border-radius: var(--fd-radius-md);
    background: var(--fd-surface);
    text-align: left;
    height: 100%;
}

/* Each .fd-stat-* subcomponent is a `.. container::` (<div> + inner <p>). */
.fd-stat-value {
    margin-bottom: var(--fd-space-1);
}
.fd-stat-value > p {
    margin: 0;
    font-size: var(--fd-text-2xl);
    line-height: 1.1;
    font-weight: 700;
    color: var(--fd-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fd-stat-label > p {
    margin: 0;
    font-size: var(--fd-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fd-text-muted);
    font-weight: 600;
}

/* Linked KPI stat tile — a grid-item-card with `:class-card: fd-stat`
   and a `:link:`. Neutralize the leftover `.sd-card` chrome so it
   matches a standalone `.fd-stat`, with an accent border on hover. */
.sd-card.fd-stat {
    text-decoration: none;
    box-shadow: none;
}
.sd-card.fd-stat > .sd-card-body {
    padding: 0;
}
.sd-card.fd-stat:hover {
    border-color: var(--fd-accent);
    box-shadow: none;
    transform: none;
    text-decoration: none;
}


/* ----- 5. Project-wide header chrome ------------------------------------- */

/* Drop the pydata version subtitle ("FlashDreams v0.1.0a2") under the
   logo — it reads as a build tag on a front-of-site hero. The navbar
   search button is intentionally kept so every page stays searchable. */
.navbar-brand .logo__title {
    display: none !important;
}


/* ----- 6. Front-of-site marketing layout --------------------------------- */

/* Front-of-site pages bypass pydata's docs scaffold via the `docs_main`
   override in `_templates/layout.html`: content renders into
   `<div class="fd-landing-main">` and `<body>` gets `fd-page-landing`.
   Content runs full-bleed; widths come from per-section bands. */

/* Full-bleed wrapper for the body content. */
body.fd-page-landing .fd-landing-main {
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Reclaim the full viewport so the section bands can stretch edge-to-edge. */
body.fd-page-landing .bd-container,
body.fd-page-landing .bd-container__inner {
    max-width: 100%;
    padding-inline: 0;
}

body.fd-page-landing .bd-main {
    padding-inline: 0;
}

/* The outer Sphinx `<section>` carrying the H1 + all H2 sub-sections —
   strip its padding so nested band styles control the rhythm. */
body.fd-page-landing .fd-landing-main > section {
    padding: 0;
    margin: 0;
    max-width: none;
}

/* Hero pages: hide the structural H1 (kept only for the toctree caption,
   browser tab, and page <title>) since the authored `fd-hero-title` is
   the visible title. Plain pages (`fd-page-plain`) show their H1 instead. */
body.fd-page-landing:not(.fd-page-plain) .fd-landing-main > section > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* No-hero pages: style the H1 + intro prose as the page title — large
   display H1 with a thin accent rule beneath, on the same wide column
   as the bands below. */
body.fd-page-landing.fd-page-plain .fd-landing-main > section > h1 {
    font-size: var(--fd-text-xl);
    letter-spacing: -0.025em;
    line-height: 1.08;
    font-weight: 500;
    color: var(--fd-text);
    max-width: var(--fd-max-content);
    margin: 0 auto var(--fd-space-4);
    padding-block: var(--fd-space-6) 0;
    padding-inline: var(--fd-space-4);
}
body.fd-page-landing.fd-page-plain .fd-landing-main > section > p {
    max-width: var(--fd-max-content);
    margin-inline: auto;
    padding-inline: var(--fd-space-4);
    font-size: var(--fd-text-lg);
    line-height: 1.6;
    color: var(--fd-text-muted);
}
body.fd-page-landing.fd-page-plain .fd-landing-main > section > p:last-of-type {
    padding-bottom: var(--fd-space-5);
    margin-bottom: var(--fd-space-5);
    border-bottom: var(--fd-border-width) solid var(--fd-border);
}

/* Hide docutils artifacts that read as "documentation" on a marketing
   page: the `#` headerlink anchors and the `----` transition `<hr>`s. */
body.fd-page-landing .headerlink {
    display: none;
}
body.fd-page-landing hr.docutils {
    display: none;
}

/* Each top-level H2 section is a full-bleed band; its children are
   auto-constrained to a centered readable column (the `> *` rule).
   Flex column layout lets the optional eyebrow be reordered above the
   H2 (RST emits it after the H2, since docutils anchors the section by
   its heading). */
body.fd-page-landing .fd-landing-main > section > section {
    padding-block: var(--fd-space-7);
    padding-inline: var(--fd-space-4);
    margin: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
}
body.fd-page-landing .fd-landing-main > section > section > * {
    max-width: var(--fd-max-content);
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Visual reorder: eyebrow above the H2, lede below it (DOM order). */
body.fd-page-landing .fd-landing-main > section > section > .fd-eyebrow {
    order: -2;
}

/* H2 within a band — pulled above the lede/grid (`order: -1`) but below
   the eyebrow (`order: -2`). */
body.fd-page-landing .fd-landing-main > section > section > h2 {
    order: -1;
    font-size: var(--fd-text-xl);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-weight: 600;
    color: var(--fd-text);
    margin: 0 auto var(--fd-space-4);
    padding: 0;
    border: 0;
    max-width: var(--fd-max-content);
}

/* H3 within a band — sub-section label. */
body.fd-page-landing .fd-landing-main > section > section h3 {
    font-size: var(--fd-text-lg);
    letter-spacing: -0.01em;
    line-height: 1.3;
    font-weight: 700;
    color: var(--fd-text);
    margin-top: var(--fd-space-5);
    margin-bottom: var(--fd-space-3);
}

/* Alternating band backgrounds (`:nth-of-type` counts only sibling
   sections). */
body.fd-page-landing .fd-landing-main > section > section:nth-of-type(even) {
    background: var(--fd-bg-muted);
}
body.fd-page-landing .fd-landing-main > section > section:nth-of-type(odd) {
    background: var(--fd-bg);
}

/* Tighter top padding on the first band when the page leads with a hero. */
body.fd-page-landing .fd-landing-main > section > .fd-hero-band ~ section:first-of-type {
    padding-top: var(--fd-space-6);
}


/* Hero band — full-bleed hero variant (vs. the card-style `.fd-hero`).
   Opt in via `.. container:: fd-hero fd-hero-band`. */
body.fd-page-landing .fd-hero-band,
body.fd-page-landing .fd-landing-main > section > .fd-hero-band {
    background:
        radial-gradient(80% 120% at 0% 0%,
                        var(--fd-accent-soft) 0%,
                        transparent 60%),
        linear-gradient(180deg, var(--fd-bg-muted) 0%, var(--fd-bg) 100%);
    border: 0;
    border-radius: 0;
    margin: 0;
    padding-block: clamp(var(--fd-space-6), 8vw, var(--fd-space-7));
    padding-inline: var(--fd-space-4);
    border-bottom: var(--fd-border-width) solid var(--fd-border);
}

body.fd-page-landing .fd-hero-band > * {
    max-width: var(--fd-max-content);
    margin-inline: auto;
}

/* Hero display title — marketing-scale type. */
body.fd-page-landing .fd-hero-band .fd-hero-title,
body.fd-page-landing .fd-hero-band p.fd-hero-title.rubric {
    font-size: clamp(2.0rem, 4.0vw + 0.5rem, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-weight: 500;
    margin: 0 auto var(--fd-space-3);
    max-width: var(--fd-max-content);
}

body.fd-page-landing .fd-hero-band .fd-hero-lede,
body.fd-page-landing .fd-hero-band .fd-hero-lede > p {
    font-size: var(--fd-text-lg);
    line-height: 1.5;
    color: var(--fd-text-muted);
}

body.fd-page-landing .fd-hero-band > .fd-hero-lede {
    max-width: var(--fd-max-content);
}

body.fd-page-landing .fd-hero-band .fd-cta-row {
    margin: 0 auto;
    max-width: var(--fd-max-content);
    justify-content: flex-start;
    gap: var(--fd-space-3);
}
body.fd-page-landing .fd-hero-band .fd-cta-row .sd-btn {
    padding: 0.75rem 1.5rem;
    font-size: var(--fd-text-base);
}

/* Asymmetric hero: when the hero holds an `fd-split`, let the split lay
   out across the hero width and left-align the title/lede/CTA. */
body.fd-page-landing .fd-hero-band > .fd-split {
    max-width: var(--fd-max-content);
    margin-inline: auto;
}
body.fd-page-landing .fd-hero-band .fd-split .fd-hero-title,
body.fd-page-landing .fd-hero-band .fd-split p.fd-hero-title.rubric,
body.fd-page-landing .fd-hero-band .fd-split .fd-hero-lede,
body.fd-page-landing .fd-hero-band .fd-split .fd-hero-lede > p,
body.fd-page-landing .fd-hero-band .fd-split .fd-cta-row {
    margin-inline: 0;
    max-width: none;
    text-align: left;
}
body.fd-page-landing .fd-hero-band .fd-split .fd-hero-title,
body.fd-page-landing .fd-hero-band .fd-split p.fd-hero-title.rubric {
    font-size: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);
}


/* Eyebrow — small uppercase label above a section H2. Use
   `.. container:: fd-eyebrow` as the first child of the section. */
.fd-eyebrow,
.fd-eyebrow > p {
    margin: 0 auto var(--fd-space-2);
    font-size: var(--fd-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fd-accent);
    max-width: var(--fd-max-content);
}

/* Normalize all band prose to body size so sections don't drift; the
   eyebrow re-asserts its size below. */
body.fd-page-landing .fd-landing-main > section > section p,
body.fd-page-landing .fd-landing-main > section > section li {
    font-size: var(--fd-text-base);
}

body.fd-page-landing .fd-landing-main > section > section .fd-eyebrow,
body.fd-page-landing .fd-landing-main > section > section .fd-eyebrow > p {
    font-size: var(--fd-text-base);
}


/* Feature card polish (marketing context). */
body.fd-page-landing .sd-card.fd-feature {
    padding: var(--fd-space-3);
}
body.fd-page-landing .sd-card.fd-feature .sd-card-body {
    padding: var(--fd-space-3);
}
body.fd-page-landing .sd-card.fd-feature .sd-card-title {
    font-size: 1.0625rem;
    margin-bottom: var(--fd-space-2);
}


/* Stat block polish (marketing context). The matching-depth selector
   out-specifies the band-prose normalization above. */
body.fd-page-landing .fd-stat {
    padding: var(--fd-space-4);
}
body.fd-page-landing .fd-landing-main > section > section .fd-stat-value > p {
    font-size: var(--fd-text-xl);
    line-height: 1.05;
}


/* Landing footer — give the global `bd-footer` (copyright) a deeper
   neutral band that anchors the page bottom. */
body.fd-page-landing .bd-footer {
    background: var(--fd-bg-sunken);
    border-top: var(--fd-border-width) solid var(--fd-border);
    color: var(--fd-text-muted);
    font-size: var(--fd-text-sm);
}
body.fd-page-landing .bd-footer .bd-footer__inner {
    max-width: var(--fd-max-content);
    margin-inline: auto;
    padding-block: var(--fd-space-5);
    padding-inline: var(--fd-space-4);
}


/* Footer icon links — GitHub + Discord glyphs from the `icon-links`
   `footer_end` entry. Scoped to `.bd-footer` so they don't reach the
   navbar markup. */
.bd-footer .navbar-icon-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fd-space-3);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-footer .navbar-icon-links > .nav-item {
    margin: 0;
    padding: 0;
}

.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--fd-text-muted);
    border-radius: var(--fd-radius-sm);
    transition: color var(--fd-transition),
                background-color var(--fd-transition);
}

.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:hover,
.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:focus-visible {
    color: var(--fd-accent);
    background: var(--fd-accent-soft);
    text-decoration: none;
}

.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon > i {
    font-size: 1.25rem;     /* override FontAwesome `fa-lg` */
    line-height: 1;
}

.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon,
.bd-footer .navbar-icon-links .nav-link.pst-navbar-icon:visited {
    text-decoration: none;
}

/* Keep the icon links right-aligned even when the copyright wraps. */
.bd-footer .bd-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-3);
}
.bd-footer .footer-items__start {
    flex: 1 1 auto;
}
.bd-footer .footer-items__end {
    flex: 0 0 auto;
}

@media (max-width: 540px) {
    .bd-footer .bd-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .bd-footer .navbar-icon-links {
        justify-content: center;
    }
}


/* Two-column split — a `.fd-split-text` and a `.fd-split-visual` inside a
   `.fd-split`. Variants: `.fd-split-reverse` (flip visual left ≥768px),
   `.fd-split-asymmetric` (5fr/7fr), `.fd-split-asymmetric-reverse`
   (7fr/5fr). Below 768px every variant stacks, text first. */
body.fd-page-landing .fd-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--fd-space-5);
    align-items: center;
    width: 100%;
    max-width: var(--fd-max-content);
    margin-inline: auto;
}

@media (min-width: 768px) {
    body.fd-page-landing .fd-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--fd-space-6);
    }
    body.fd-page-landing .fd-split.fd-split-reverse > .fd-split-visual {
        order: -1;
    }
    body.fd-page-landing .fd-split.fd-split-asymmetric {
        grid-template-columns: 5fr 7fr;
    }
    body.fd-page-landing .fd-split.fd-split-asymmetric-reverse {
        grid-template-columns: 7fr 5fr;
    }
}

body.fd-page-landing .fd-landing-main > section > section > .fd-split {
    margin-block: var(--fd-space-3);
}

body.fd-page-landing .fd-split-visual {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
}
body.fd-page-landing .fd-split-visual > * {
    margin: 0;
    width: 100%;
}

body.fd-page-landing .fd-split-text {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3);
}
body.fd-page-landing .fd-split-text > p {
    margin: 0;
    line-height: 1.65;
}
body.fd-page-landing .fd-split-text > p:not(:last-child) {
    margin-bottom: var(--fd-space-2);
}


/* A `.. code-block::` dropped into a split column: drop inherited
   horizontal margins and fill the column width. */
body.fd-page-landing .fd-split-visual .highlight,
body.fd-page-landing .fd-split-text .highlight {
    margin: 0;
    width: 100%;
}


/* Responsive — landing-specific overrides. */
@media (max-width: 768px) {
    body.fd-page-landing .fd-landing-main > section > section {
        padding-block: var(--fd-space-5);
    }
    body.fd-page-landing .fd-hero-band {
        padding-block: var(--fd-space-5);
    }
}


/* ----- 7. Homepage "Supported Models" rail ------------------------------ */

/* Right-hand secondary sidebar shown only on the homepage (wired in by
   `_templates/layout.html`, populated by `js/supported_models_nav.js`).
   The marketing layout has no content column to dock against, so the rail
   floats `position: fixed` in the right gutter and only appears once the
   viewport clears the centered content column. Hidden until JS adds
   `.is-ready` inside the wide-screen media query. */
.fd-models-nav {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Breakpoint in `em` so it scales with the reader's font setting. Media
   queries can't read `var()`, so this can't reference --fd-max-content
   directly; the rail docks at 50% + half the content column + the same
   gap used between the topnav and content (clamp 3.5-5rem) and is 11rem
   wide, clearing the viewport edge around 98rem (100em adds breathing
   room). If --fd-max-content changes, nudge this (content-rem + ~28). */
@media (min-width: 100em) {
    .fd-models-nav.is-ready {
        display: block;
        position: fixed;
        z-index: 5;
        top: calc(var(--pst-header-height, 4rem) + clamp(var(--fd-space-6), 8vw, var(--fd-space-7)));
        left: calc(50% + (var(--fd-max-content) / 2) + clamp(var(--fd-space-6), 8vw, var(--fd-space-7)));
        width: 11rem;
        max-height: calc(100vh - var(--pst-header-height, 4rem) - clamp(var(--fd-space-6), 8vw, var(--fd-space-7)) - var(--fd-space-4));
        overflow-y: auto;
    }
}

.fd-models-nav__title {
    font-size: var(--fd-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fd-text-muted);
    margin-bottom: var(--fd-space-3);
    padding-left: var(--fd-space-3);
}

/* The list carries the rail "spine"; links overlay it with a transparent
   left border so hover/focus spacing stays stable. */
.fd-models-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--fd-border);
}

.fd-models-nav__item {
    margin: 0;
}

.fd-models-nav__link {
    display: block;
    padding: var(--fd-space-1) 0 var(--fd-space-1) var(--fd-space-3);
    margin-left: -2px;
    font-size: var(--fd-text-sm);
    line-height: 1.4;
    color: var(--fd-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--fd-transition), border-color var(--fd-transition);
}

.fd-models-nav__link:hover,
.fd-models-nav__link:focus-visible {
    color: var(--fd-text);
}


/* ----- 8. Misc upstream tweaks ------------------------------------------- */

/* Drop the "FlashDreams" caption row above the sidebar nav — it echoes
   the root toctree caption and adds noise on per-section pages. */
.bd-sidenav + .caption,
.bd-toc-item > .caption {
    display: none;
}

/* Keyboard focus rings on interactive FlashDreams components. */
.sd-card.fd-feature:focus-visible,
.fd-cta-row .sd-btn:focus-visible,
.fd-stat:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 2px;
}


/* ----- 9. Reference-docs model-page components --------------------------- */

/* Note admonitions read in the branded accent rather than the theme's
   default info-blue (left border, title background, title icon). */
.admonition.note,
div.admonition.note {
    border-color: var(--fd-accent);
}
.admonition.note > .admonition-title,
div.admonition.note > .admonition-title {
    background-color: var(--fd-accent-soft);
}
.admonition.note > .admonition-title::after,
div.admonition.note > .admonition-title::after {
    color: var(--fd-accent);
}

/* Used by the per-model RST pages under `models/*.rst` (raw HTML for the
   link row, teaser-video cards, and benchmark charts). */

.fd-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 20px;
}

.fd-highlight-card {
    border: 1px solid var(--fd-border);
    border-radius: 10px;
    padding: 15px;
    background: var(--fd-surface);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.fd-highlight-card:hover {
    border-color: var(--fd-border-strong);
    box-shadow: var(--fd-shadow-2);
    transform: translateY(-1px);
}

.fd-highlight-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.fd-highlight-body {
    color: var(--fd-text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.benchmark-figure {
    margin: 16px 0 8px;
}

.benchmark-chart-svg {
    display: block;
    width: 100%;
    height: auto;
}

.benchmark-figure-wrap figcaption {
    text-align: left;
    margin-top: 0;
}

.model-footnote {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.2;
    color: var(--fd-text-muted);
    font-style: italic;
}

/* Promo video block — embedded on the landing page hero. */
.fd-promo-video-wrap {
    position: relative;
    width: min(960px, 100%);
    margin: 0.4rem auto 1.6rem;
    overflow: hidden;
    border-radius: 8px;
    background: #05070a;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.fd-promo-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #05070a;
}

.model-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 18px;
}

.model-video-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--fd-border);
    background: #101214;
}

.model-video-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #cfcfcf;
    font-size: 0.95rem;
}

.model-video-player {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

.model-video-overlay {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(0, 0, 0, 0.72);
    color: #f3f3f3;
    padding: 10px 12px;
    font-size: 0.60rem;
    line-height: 1.1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.model-video-card:hover .model-video-overlay {
    opacity: 1;
}

/* Sample-clip thumbnail at the top of each model card on the Models
   index. Fixed 16:9 + object-fit:cover so mixed-resolution clips line up
   as a uniform strip. */
.fd-feature .fd-card-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
    border-radius: var(--fd-radius-sm);
    margin-bottom: var(--fd-space-3);
}

/* Picture-in-picture inset (e.g. LingBot-World's camera-trajectory clip
   over the generated view). The wrapper is the positioning context. */
.fd-feature .fd-card-video-wrap {
    position: relative;
    margin-bottom: var(--fd-space-3);
}

.fd-feature .fd-card-video-wrap .fd-card-video {
    margin-bottom: 0;
}

.fd-feature .fd-card-video-pip {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 33%;
    opacity: 0.7;
    border-radius: var(--fd-radius-sm);
    pointer-events: none;
}

@media (max-width: 800px) {
    .fd-highlight-grid {
        grid-template-columns: 1fr;
    }

    .model-video-grid {
        grid-template-columns: 1fr;
    }
}

/* Image click-to-zoom (overlay built by js/image_zoom.js). */
img.zoomable,
.zoomable img,
.zoomable video {
    cursor: zoom-in;
}

.img-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    cursor: zoom-out;
    transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.img-zoom-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.img-zoom-clone {
    max-width: 72vw;
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: scale(0.92);
    opacity: 0;
}

.img-zoom-overlay.visible .img-zoom-clone {
    transform: scale(1);
    opacity: 1;
}


/* Benchmark comparison table — wrap a list-table / csv-table in a
   `.. container:: fd-compare`. Numeric columns right-align via
   `.fd-compare-numeric`; `.fd-compare-best` highlights a winning cell. */
.fd-compare table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fd-text-sm);
    border: var(--fd-border-width) solid var(--fd-border);
    border-radius: var(--fd-radius-md);
    overflow: hidden;
}

.fd-compare thead th {
    background: var(--fd-bg-muted);
    color: var(--fd-text);
    font-weight: 600;
    text-align: left;
    padding: var(--fd-space-2) var(--fd-space-3);
    border-bottom: var(--fd-border-width) solid var(--fd-border);
    font-size: var(--fd-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fd-compare tbody td {
    padding: var(--fd-space-2) var(--fd-space-3);
    border-bottom: var(--fd-border-width) solid var(--fd-border);
    color: var(--fd-text);
    vertical-align: top;
}

.fd-compare tbody tr:last-child td {
    border-bottom: 0;
}

.fd-compare tbody tr:nth-child(even) td {
    background: var(--fd-bg-muted);
}

.fd-compare-numeric td,
.fd-compare td.fd-compare-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fd-compare-numeric td:first-child {
    text-align: left;
}

.fd-compare-best {
    color: var(--fd-accent);
    font-weight: 700;
}

@media (max-width: 640px) {
    .fd-compare {
        overflow-x: auto;
    }
    .fd-compare table {
        min-width: 32rem;
    }
}