/* =================================================================
 * 21. Responsive breakpoints
 * ================================================================= */
@media (max-width: 720px) {
    .entry-content h1::before,
    .entry-content h2::before,
    .single .wp-block-post-title::before,
    .proof-content > .wp-block-post-title::before {
        display: none;
    }
    .proof-site-tagline { display: none; }
    .proof-site-header__brand { gap: 0.75rem; flex-wrap: wrap; }
    .single .entry-content > p:first-of-type::first-letter {
        font-size: 3em;
    }

    /* Title / featured image vs body content used to disagree on the
     * inline edge: the article carries `has-global-padding` (20px each
     * side via --wp--style--root--padding-* from theme.json's
     * spacing.padding), so its constrained-layout children — the title
     * and featured image — sit 20px in from the article's outer edge.
     * The post-content block is `align:full` and negates that padding
     * with `margin-inline: -20px`, jumping out to the article's outer
     * edge. Net result on a 390px viewport: title 330 wide, body 370
     * wide — visibly misaligned and the "100% width article doesn't
     * fill the page" symptom the reader notices.
     *
     * On mobile that 20px gutter eats >10% of viewport AND the
     * registration frame already provides 10px breathing on each side,
     * so we zero the article's inline padding here and zero the
     * root-padding vars in the same scope so alignfull's negation
     * collapses to 0 (otherwise it would extend past the article into
     * negative space). Title, featured image, and body content all
     * align to the same edge — flush with the article's outer box. */
    .single .proof-content,
    .page .proof-content {
        padding-inline: 0;
        --wp--style--root--padding-left: 0px;
        --wp--style--root--padding-right: 0px;
    }
}

@media (max-width: 480px) {
    .single .wp-block-post-title,
    .proof-content > .wp-block-post-title {
        font-size: var(--wp--preset--font-size--2-xl) !important;
    }
    .proof-hero {
        padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--48);
    }
    .wp-site-blocks::before,
    .wp-site-blocks::after { display: none; }
}