/* themes_pages.css — layout-only polish for the /themes/ hub and /themes/{slug}/
   spokes (themes_hub.html, theme_page.html).

   Prefix: `th-`. Per DESIGN §1.4 ("New CSS picks a short unique prefix and
   restyles no existing class") every rule here is either a NEW `th-` class or a
   `th-`-scoped descendant selector, so nothing leaks to the free-stories pages
   that share the `lib-` vocabulary.

   Loaded AFTER stories.css and marketing_kit.css in both templates' head_extra,
   so equal-specificity rules win on order.

   No new colours, fonts, weights or logo treatments — geometry and spacing only.
   ------------------------------------------------------------------------- */


/* --- 1. Hub grid: trailing orphan card (themes-hub, ≥1024 only) ------------
   `.lib-stories-grid` is repeat(3, 1fr) from 1024up. Ten themes therefore leave
   card 10 (Unicorns) alone in row 4 with ~700px of empty grid beside it, which
   reads as two cards that failed to load. Centring a lone trailing card closes
   the hole without changing the column count (a 5-up row was rejected: it cuts
   card content width to ~130px).
   2 columns (768–1023) and 1 column (<768) are already balanced — untouched. */
@media (min-width: 1024px) {
    .th-theme-grid > .lib-story-card:last-child:nth-child(3n + 1) {
        grid-column: 2;
    }
}


/* --- 2. Hub grid: icon box height (themes-hub) -----------------------------
   `.lib-story-card-emoji` is used for BOTH icon languages in this grid: an
   <img width="48" height="48"> for themes with an illustration, and a <span>
   at font-size 2.5rem for the rest. The img box is 48px tall; the span box is
   its line box — 40px x 1.6 = 64px — so emoji cards push their <h3> 16px lower
   than illustration cards in the SAME row (measured on themes-hub.desktop.png:
   title ink starts at y=940 on "Starting School" vs y=924 on "Trains" and
   "Dinosaurs"; y=1215 vs y=1200 in row 2).

   Only the span is given the box: setting a CSS height on the <img> as well
   would fight its width attribute and distort the illustration. 48px is the
   illustration's own intrinsic box, so both languages now share it. */
.th-theme-grid span.lib-story-card-emoji {
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 1;
}


/* --- 3. Spoke intro: multi-paragraph rhythm (theme_page) -------------------
   `.lib-page-desc` carries margin-bottom: var(--space-8) — section-scale
   spacing, correct when the intro is one block. Split across paragraphs of a
   single intro it reads as three unrelated blocks, so intra-intro gaps drop to
   --space-5 and only the final paragraph keeps the section gap before the
   name-CTA card. */
.th-intro {
    margin-bottom: var(--space-5);
}

.th-intro:last-of-type {
    margin-bottom: var(--space-8);
}


/* --- 4. Related themes as a standalone section (theme_page) ----------------
   `.lib-related-categories` is built to sit INSIDE a content section: it adds
   margin-top --space-10, padding-top --space-8 and a border-top hairline to
   separate itself from the content above it. On the spoke it IS the whole
   section, directly after a full-bleed forest band, so:
     - the section's own --space-10 padding stacks on the block's --space-10
       margin, putting ~184px of dead space above the heading against ~64px
       below the last link, and
     - the hairline becomes an orphan rule floating 127px under a band edge
       that already divides the page.
   This modifier removes the in-section separators; the section's own padding
   then supplies a symmetric --space-10 top and bottom. */
.th-related--standalone {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* The trailing "All story themes →" line sat 0px under the card row (the
   global reset zeroes <p> margins). */
.th-related-all {
    margin-top: var(--space-4);
}