/* ================================================================= *
 |  CHARACTER PAGE  —  /characters?name=NNN  (Phase 2, 2026-07-25)
 |
 |  Everything here is scoped under `body.fc-skin`, which character/show.blade.php
 |  sets ALONGSIDE `md-skin`: the character page wears the Massive Dynamic skin
 |  (massive-dynamic.css) for its section headings, prose, lists, image cards,
 |  dividers and the sticky jump bar, so it is the same page furniture as
 |  /episode. This file only adds what a character page has and an episode page
 |  doesn't: the avatar hero, the version rows, the appearance strips and the
 |  prev/next character footer.
 |
 |  Loaded after massive-dynamic.css. ?design=current gets neither.
 * ================================================================= */


/* ================================================================= *
 |  HERO  —  avatar plate + name + stats over the still
 * ================================================================= */

/* Hero crop: set in the admin "Hero focus" tool, emitted inline by the view.
   Default + reasoning live in App\Support\HeroTargets — a rule here would be
   overridden by that inline style and silently disagree with it. */

/* The name is the only thing on the page set in the site's letterpress, same as
   an episode title. A little under the episode clamp — character names are
   short, and "Olivia Dunham" at 3.5rem shouts next to a one-line byline. */
.fc-skin .fc-hero .md-hero__title { font-size: clamp(2rem, 3.8vw, 3rem) }

.fc-skin .fc-hero .md-hero__byline p { margin: 0 }
.fc-skin .fc-hero .md-hero__byline p + p { margin-top: .25rem }

/* Facts a character page can state that an episode page can't: how many
   versions of this person the show made, and how much of the run they cover. */
.fc-skin .fc-hero__arrow { margin: 0 .4rem; opacity: .6 }

@media (max-width: 575.98px) {
    }


/* ================================================================= *
 |  CHARACTER AVATAR  (components/character-avatar.blade.php)
 |
 |  The 500x500 avatar.jpg every character has shipped with since the legacy
 |  site, as a round plate. Used by the prev/next pair at the foot of a
 |  character page; it was the hero's portrait until 2026-07-25 (removed —
 |  the hero is already a full-bleed picture of the character).
 |
 |  DELIBERATELY NOT SCOPED UNDER .fc-skin so the component is portable. This
 |  sheet only loads on character pages, though — if the avatar is used
 |  anywhere else, move this block to a globally-loaded sheet (the layout
 |  loads navbar-redesign.css / footer-redesign.css / spoiler-settings.css on
 |  every page).
 * ================================================================= */
.fc-avatar {
    flex: 0 0 auto;
    width:  var(--fc-avatar-size, 44px);
    height: var(--fc-avatar-size, 44px);
    border-radius: 50%;
    object-fit: cover;
}
/* on a light ground — a hairline, matching the card borders */
.fc-avatar--plain { border: 1px solid var(--md-line, #d3dfea) }
/* on a photograph — a white ring and a drop shadow to lift it off the image
   (the hero's treatment, at 116px with a .35rem bottom nudge onto the baseline) */
.fc-avatar--photo {
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
}
@media (max-width: 575.98px) {
    .fc-avatar--photo { border-width: 2px }
}

/* The bar labels versions, not sections — a touch more room per pill than the
   episode bar's terse section names need. */
.fc-skin .md-secnav .fr-pill { text-transform: none; letter-spacing: .02em; font-size: .74rem }


/* ================================================================= *
 |  SPOILER NOTE
 |  The shared red banner draws its own box, so per the section-geometry rule
 |  it takes the 1.5rem inset as margin (the .px-4 wrapper) and keeps its own
 |  padding. Its leading <br/> supplies the top gap.
 * ================================================================= */
.fc-skin .fc-spoiler-note { margin-top: 1.5rem }
.fc-skin .fc-spoiler-note .alert { margin-bottom: 0 }


/* ================================================================= *
 |  VERSION  —  description + still side by side
 |  Same 1.7fr/1fr pairing the episode page uses for the observer and clue
 |  rows, so a version reads like a section of an episode page.
 * ================================================================= */
/* There is no divider between versions — the ruled section heading is the
   separator (a divider under it was a second one doing the same job). The gap
   that the divider used to occupy rides here instead, so consecutive versions
   still read as distinct blocks. */
.fc-skin .fc-version { padding-bottom: 2.75rem }

.fc-skin .fc-version__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}
/* The still is a fixed 340px rather than a fraction of the row. A version's
   description is often a single line, so a proportional (1fr ≈ 430px) image
   towered over it and left a lot of empty floor beside the picture — and with
   16-18 versions on a page, every one of those gaps is page length. 340px is
   still a legible 16:9 frame, and clicking it opens the full-size modal. */
@media (min-width: 992px) {
    .fc-skin .fc-version__row {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 1.6rem;
    }
}

/* The description is the .ioi-list bullet treatment from the episode page, so
   a one-line version and a version with a nested list both look at home. */
.fc-skin .fc-version__text > ul { margin: 0 }
/* a single bullet is not a list — drop the marker, keep the text */
.fc-skin .fc-version__text > ul > li:only-child { padding-left: 0 }
.fc-skin .fc-version__text > ul > li:only-child::before { display: none }

.fc-skin .fc-version__media { margin: 0 }
.fc-skin .fc-version__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--md-line);
    border-radius: 4px;
    background: var(--md-surface);
    box-shadow: 0 1px 3px rgba(42, 53, 64, .1);
    cursor: pointer;
    transition: box-shadow .14s ease, border-color .14s ease;
}
.fc-skin .fc-version__media img:hover {
    border-color: var(--md-accent);
    box-shadow: 0 4px 14px rgba(42, 53, 64, .22);
}
@media (max-width: 991.98px) {
    /* stacked, the still would otherwise run the full width and dwarf the text */
    .fc-skin .fc-version__media { max-width: 460px }
}


/* (The appearance strip's `.fc-appear*` block lived here until 2026-07-27. It is
   now the shared `.fr-appear*` in massive-dynamic.css — /universe-hopping-methods
   and /intro-sciences render the same strip. Markup: partials/appearances.blade.php.) */


/* (The prev/next character pair's `.fc-charnav*` block lived here until
   2026-07-28. It is now the shared `.fr-pagenav*` in massive-dynamic.css —
   /episode renders the same pair for the previous/next episode. Markup:
   character/partials/character-nav.blade.php and
   episode/partials/episode-nav.blade.php. The character link's round portrait
   still gets its size + ring from the `.fc-avatar` block above.) */

@media (prefers-reduced-motion: reduce) {
    .fc-skin .fc-version__media img { transition: none }
}