/* Homepage stages inside a blog post (blog/post.leaf .blog-stage).
 *
 * Loaded only by a post with stages (BlogPost.stages). The device stage is the
 * homepage's own partial (partials/stages/*.leaf), styled by /css/story.css;
 * nothing here restyles the mockups. Each stage sits between two prose-body
 * blocks rather than inside one, so the prose rules (paragraph margins, link
 * colour, line height) never reach the mockup's own <p> and <b> elements.
 *
 * The panel is a quiet alternate-surface card in the article column. On a
 * wide screen the stage is a little wider than one comparison-page cell, so
 * its chips and cards follow the stage's own width the same way
 * compare.css does. On narrower screens story.css's narrow stage layout
 * applies, as on the homepage. .fk-story clips sideways overflow, so a
 * chip can never add a horizontal scroll to the page.
 *
 * Each figure carries data-story-timer, so motion.js plays it on a timer
 * once it is on screen. The homepage's scroll-scrubbed depth animations
 * name a timeline only a homepage chapter defines, so they are off here.
 * With no script or with reduced motion, html has no .fk-motion and the
 * stage shows its finished state.
 */
.blog-stage {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    margin: 2.5rem 0;
    padding: clamp(1rem, 3vw, 1.75rem);
    border-radius: var(--fk-radius-lg);
    background: var(--fk-surface-alt);
}

.blog-stage__title {
    margin: 0;
    color: var(--fk-ink);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.blog-stage__caption {
    margin: 0;
    color: var(--fk-ink-soft);
    font-size: var(--fk-font-small);
    line-height: var(--fk-leading-body);
}

.blog-stage__stage { min-width: 0; }

/* On a phone story.css sets the cards' type in rem, so on a stage this narrow
   the status email runs up to ~3rem past the stage box (48px at 360px wide).
   The homepage chapter's padding absorbs that; here it would cover the
   caption, so the stage reserves the room itself. */
@media (max-width: 559px) {
    .blog-stage__stage { padding-bottom: 3.25rem; }
}

@media (min-width: 1024px) {
    .blog-stage__stage { container-type: inline-size; }
    .blog-stage .fk-st__card { font-size: clamp(0.56rem, 1.7cqi, 0.82rem); }
    .blog-stage .fk-st__float { font-size: clamp(0.62rem, 1.9cqi, 0.9rem); }
    .blog-stage .fk-st--vote .fk-st__float--b { left: auto; right: 0; }
    [dir="rtl"] .blog-stage .fk-st--vote .fk-st__float--b { left: 0; right: auto; }
}

html.fk-motion .blog-stage .fk-st,
html.fk-motion .blog-stage .fk-st__dev { animation: none; }