/* ==========================================================================
   Screen-Free Comparison Page (/screen-free/) — R6
   Prefix: sf-  ·  Owns: sf-philosophy-quote, sf-compare-note, sf-prose
   Consumes tokens from styles.css exclusively. The only rules that reach an
   existing class are three page-scoped (#hero / #listen-free) LAYOUT fixes at
   the foot of this file — geometry only, no colour/type change, and no other
   page can match them.
   Spec: bmad-output/redesign/DESIGN.md §2.12
   ========================================================================== */

/* Philosophy pull-quote — semantic <blockquote>.
   Lora italic 600, charcoal text; decorative gold left border paired with
   the parchment field (non-text second cue — R-2 compliant). No animation. */
.sf-philosophy-quote {
    margin: 0 0 40px;
    padding: var(--space-6);
    background-color: var(--parchment);
    border-left: 4px solid var(--antique-gold);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 600;
    font-size: var(--text-xl);
    line-height: 1.45;
    color: var(--color-text-primary);
}

.sf-philosophy-quote p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

@media (min-width: 768px) {
    .sf-philosophy-quote {
        font-size: var(--text-2xl);
    }
}

/* Fairness note + last-reviewed date under the comparison table.
   Charcoal at --text-sm — driftwood fails 4.5:1 at small sizes (R-1). */
.sf-compare-note {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-primary);
    max-width: 900px;
    margin: var(--space-4) auto 0;
}

/* Prose wrapper for the personalised-books section (#personalised-books).
   styles.css's `* { margin: 0 }` reset zeroes <p> margins and nothing else on
   this surface re-instates them, so four bare paragraphs rendered as one
   undifferentiated 20-line slab with no visible breaks. Spacing only — type,
   colour and measure are unchanged. */
.sf-prose p {
    margin: 0 0 var(--space-4);
}

.sf-prose p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Page-scoped layout fixes to shared classes (flagged for sign-off)
   Each is bound to an id on THIS page, so nothing else on the surface can
   match. No colours, fonts, weights or logo treatments are touched.
   ========================================================================== */

/* landing.css sets `.yoto-image-placeholder { height: 300px; object-fit:
   cover }`. In the 287px tablet column that frames the 800x438 (1.83:1)
   artwork into a ~0.96:1 box, cropping BOTH subjects out of the page's only
   product visual (the phone's left edge is sliced, the Yoto card reads
   "LUNA'S ADVENT..."). The <img> already carries width/height, so
   width:100% + height:auto preserves the ratio at every viewport. */
#hero .yoto-image-placeholder {
    height: auto;
}

/* `.btn-magic` is `display: block; width: 100%`, which turned the secondary
   "Browse all free stories" link into a 1032x78px full-width outlined slab —
   visually heavier than the three story cards above it and heavier than the
   page's primary CTA. Shrink-to-fit here only; the homepage's full-width
   .btn-magic is untouched. Padding, border and hover are unchanged. */
#listen-free .btn-magic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
}

/* `.lib-story-card` is `display: block`, so `.lib-story-card-meta` follows the
   description instead of pinning to the (grid-stretched) card bottom: the
   middle card's description is one line shorter, leaving its chip row 23px
   above its neighbours'. Flex column + auto top margin re-aligns the baseline.
   Card padding, border, shadow and hover lift are unchanged. */
#listen-free .lib-story-card {
    display: flex;
    flex-direction: column;
}

#listen-free .lib-story-card-meta {
    margin-top: auto;
}