/* ==========================================================================
   Sibling Stories Landing (R5) — /stories-for-siblings/
   Prefix: sib-. Per DESIGN.md §2.0 this sheet owns ONLY .sib-hero-placeholder
   (DESIGN §2.11 / §5): the clearly-labelled sage-mist placeholder block for
   the hero illustration slot "PLACEHOLDER: siblings-hero-illustration".
   Everything else on the page composes from landing.css (.landing-hero-v2,
   .landing-how-*), stories.css (lib-) and marketing_kit.css (mk-).
   Tokens consumed from styles.css only — no new colours, no :root custom
   properties. The only rules that reach an existing class are two #hero-
   scoped LAYOUT overrides of landing.css's shared hero grid (see the media
   queries at the foot of this file) — geometry only, no colour/type change,
   and no other page can match them. Sage-mist is a decorative
   fill only (R-9); the label text renders charcoal (--color-text-primary),
   which passes AA on sage-mist at all sizes.
   ========================================================================== */

.sib-hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 420px;
    padding: var(--space-6);
    background-color: var(--sage-mist);
    border-radius: var(--radius-lg);
    text-align: center;
}

/* Decorative emoji stand-in (established free-stories emoji-art pattern). */
.sib-hero-placeholder > span {
    font-size: var(--text-5xl);
    line-height: 1;
}

/* Label + art-brief line — charcoal, never driftwood at small sizes (R-1). */
.sib-hero-placeholder p {
    margin: 0;
    max-width: 34ch;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* The stencilled slot label itself. */
.sib-hero-placeholder p strong {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Tablet (768–1023px): landing.css keeps .hero-grid at `1.2fr 1fr` with a
   60px gap right down to 768px, which leaves this hero a 344px copy column —
   the 44px H1 breaks to four lines with "hero." orphaned, the body copy runs
   at ~33 characters, and the placeholder becomes a 285px slab with ~130px of
   empty sage above and below its label. Page-scoped single-column override
   (#hero raises specificity over landing.css's `.hero-grid`); the homepage
   hero is untouched. Layout only — no colour/type change. */
@media (min-width: 768px) and (max-width: 1023px) {
    #hero .hero-grid {
        grid-template-columns: 1fr;
    }

    /* Full-measure banner rather than a floating column. */
    .sib-hero-placeholder {
        min-height: 260px;
    }
}

/* Mobile (<768px): landing.css sets `.hero-image { order: -1 }` below 768,
   which promotes the stencilled art slot above the badge and the H1 — at 375
   the first ~220px of the fold reads "PLACEHOLDER: SIBLINGS-HERO-
   ILLUSTRATION" and the page looks unfinished. Return the hero to DOM order
   (copy → CTAs → placeholder); page-scoped, homepage hero untouched. */
@media (max-width: 767px) {
    #hero .hero-image {
        order: 0;
    }

    .sib-hero-placeholder {
        min-height: 220px;
    }
}