/* Education pledge page (aesthetic review finding 46).
   Linked after css/style.css and css/page-hero.css by pages/education-pledge.html. The page keeps its own style
   blocks later in the head, so every selector here carries a main prefix to win at equal specificity.
   The review carousel CSS (inline, lines 198 to 305) and its markup are not touched here. */

/* One content width. .content-wrapper (style.css 3631) capped the pledge cards and the Our offer panel at
   800px (752px inside the panel padding) while every other section uses the standard 1200px .container with a
   1rem gutter. The lead paragraph keeps its own 800px reading measure (style.css 4644). */
main .pledge-overview .content-wrapper {
    max-width: none;
}

/* The Our offer panel has the same dark fill as the section, so its 1.5rem side padding is invisible and only
   pushed the two offer cards in from the edges of the pledge cards above. Align them. */
main .pledge-overview .offer-section.offer-inline {
    padding-left: 0;
    padding-right: 0;
}

/* Keep the Our offer paragraph at the same 800px reading measure as the lead paragraph above the cards. */
main .pledge-overview .offer-section.offer-inline > p {
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

/* The intro heading sat in the left column with the body text; lift it above both columns so it centres like
   every other section heading. display: contents lets the h2 span the grid while the paragraph and the photo
   stay side by side below it. */
main .pledge-context .pledge-text {
    display: contents;
}

main .pledge-context .pledge-text h2 {
    grid-column: 1 / -1;
}

/* Centred section headings. The reviews heading was only centred under 600px (inline rule at line 333), and
   Who Qualifies, What's Included and How to Apply had no alignment at all. */
main .pledge-context h2,
main .pledge-overview h2,
main .offer-section h2,
main .reviews-section h2,
main .eligibility-section h2,
main .included-section h2,
main .application-process h2,
main .education-enquiry h2 {
    text-align: center;
}