/* =====================================================================
   free_stories.css — the free-story library on the design system:
   /free-stories/ (hub), /free-stories/{age|duration|genre|topic}/{slug}/
   and /free-stories/bedtime-stories-to-read-online-free/ (goal 13;
   bmad-output/redesign-site/decisions.md §3).

   The three templates compose ds.css (ds-section / ds-inner / ds-card /
   ds-grid / ds-pills …); this sheet carries only what that grammar lacks:
   the browse-tile density, the two-up tile grid on a phone, the story
   card's meta row and the empty-state callout.

   ⛔ EVERY SELECTOR NAMES AN fs- CLASS and nothing else (design contract
   §4.6) — ds- classes are never restyled from here. ⛔ NO CUSTOM
   PROPERTIES (contract §1.6): literals only, from the palette and the type
   scale in ds.css's header. No shadows, no gradients. Radii 0/2/8/10/12/16
   or 999.

   ⚠ stories.css (lib-) is NOT linked by these pages any more; it still
   serves the story detail page (goal 17) and the locked pack page, so it is
   left untouched.
   ===================================================================== */

/* --- Browse tiles (age / topic / duration / genre) -------------------------
   A denser a.ds-card: the tile carries one label and, on the hub, a count,
   so the card's 26px padding and 19px title would leave four words adrift in
   a 200px tile. Two-up on a phone so twelve topics do not become twelve
   screens. */
.fs-browse-card { padding: 18px 16px; gap: 4px; }
.fs-browse-title { font-size: 17px; }
.fs-browse-count { margin: 0; }

@media (max-width: 767px) {
    .fs-browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* --- Story cards ------------------------------------------------------------
   Emoji glyph, title, description, then the meta pills pinned to the card's
   base so a row of cards shares a baseline (the DS's "grids stretch"). */
.fs-meta { margin-top: auto; padding-top: 6px; }

/* --- Section heads ---------------------------------------------------------
   A little more air between a band's H2 and the grid beneath it than the
   ds-h2's 16px, which is sized for a lede to follow. */
.fs-h2 { margin-bottom: 24px; }
/* On a category page the H1's lede is followed by the story grid itself (the
   H1 is the list's heading), so the lede takes a grid-sized gap. */
.fs-lede { margin-bottom: 32px; }

/* --- Empty state ----------------------------------------------------------- */
.fs-empty { text-align: center; }
.fs-empty-text { margin: 0; }

/* --- The forest CTA band's button ------------------------------------------
   ds.css colours every link on a forest band parchment (.ds-section--forest a,
   specificity 0,1,1), which out-ranks .ds-btn--invert's ink-on-parchment
   (0,1,0) and leaves the button's label invisible: parchment on parchment,
   1:1 — and axe files a 1:1 ratio under "incomplete", not "violations", so
   the harness cannot see it. Two fs- classes (0,2,0) restore the button's own
   text colour on both states. */
.fs-cta .fs-cta-btn { color: #24503C; }
.fs-cta .fs-cta-btn:hover { color: #24503C; }

@media (min-width: 768px) {
    .fs-browse-card { padding: 22px 20px; }
    .fs-h2 { margin-bottom: 32px; }
    .fs-lede { margin-bottom: 40px; }
}