/* ══════════════════════════════════════════════════════════════
   INFO PAGES — shared layout container
   Scope: About Us (AboutUs.cshtml), Manifesto (Info.cshtml),
          Voting (FutureGames.cshtml)

   Styles.css lets each full-width section on these pages pick its
   own left/right alignment independently — some use a vw-based
   left margin, some use margin:auto centering with their own
   max-width, one right-aligns with margin-left:auto, one has no
   width cap at all. Stacked down a page that reads as sections
   drifting left/center/right instead of a straight edge.

   Every rule below is scoped under body.ip-page, so it only ever
   applies on these 3 pages and can never affect (or be affected
   by) Privacy/Support/TermsOfUse/Cart/etc., which reuse the same
   class names with their own alignment.
══════════════════════════════════════════════════════════════ */

.ip-page .page-hero,
.ip-page .section-header,
.ip-page .content-wrapper,
.ip-page .support-cards,
.ip-page .vote-grid,
.ip-page .compare-grid,
.ip-page .fp-reserve-banner {
    box-sizing: border-box;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Vertical rhythm per section type is unchanged from Styles.css —
   only the horizontal alignment method is being standardized. */
.ip-page .page-hero        { padding-top: 4rem;   padding-bottom: 3rem; }
.ip-page .section-header   { padding-top: 2.5rem; padding-bottom: 1.25rem; }
.ip-page .content-wrapper  { padding-top: 1rem;   padding-bottom: 3rem; }
.ip-page .support-cards    { padding-top: 0;      padding-bottom: 4rem; }
.ip-page .vote-grid        { padding-top: 0;      padding-bottom: 1rem; }
.ip-page .compare-grid     { padding-top: 0;       padding-bottom: 3rem; }
.ip-page .fp-reserve-banner {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2vh;
}

/* One consistent card size for every card grid on these pages
   (was 220px on Manifesto, 280px on About via an inline override —
   now the same everywhere). */
.ip-page .support-cards {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Opening section heading ("Our Story" on About, "Our Mission" on
   Manifesto) — centered like the lead paragraph beneath it. */
.ip-page .content-section h2 {
    text-align: center;
}

@media (max-width: 768px) {
    .ip-page .page-hero,
    .ip-page .section-header,
    .ip-page .content-wrapper,
    .ip-page .support-cards,
    .ip-page .vote-grid,
    .ip-page .compare-grid,
    .ip-page .fp-reserve-banner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .ip-page .page-hero       { padding-top: 2.5rem; padding-bottom: 2rem; }
    .ip-page .section-header  { padding-top: 2rem;   padding-bottom: 1rem; }
    .ip-page .content-wrapper { padding-top: 1rem;   padding-bottom: 2rem; }
    .ip-page .support-cards,
    .ip-page .vote-grid       { padding-bottom: 3rem; }
    .ip-page .compare-grid    { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2.5rem; }
}

@media (max-width: 480px) {
    .ip-page .page-hero,
    .ip-page .section-header,
    .ip-page .content-wrapper,
    .ip-page .support-cards,
    .ip-page .vote-grid,
    .ip-page .compare-grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ip-page .fp-reserve-banner {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
}