/* Page shell
 * ============================================================================
 * The wrapper every page's content sits in, and the title block at the top of
 * it. Companion to nav.css: that file owns everything above the fold line, this
 * one owns everything immediately below it.
 *
 * What this replaces
 * ------------------
 * An audit on 2026-09-08 found the same wrapper under three different names:
 *
 *     .page        10 pages
 *     .container    8 pages
 *     .page-wrap    2 pages
 *
 * and 11 of them carried a byte-identical body under one of those names. The
 * title block was in the same state: .page-title had 8 distinct definitions of
 * which 6 pages shared one, and the subtitle existed as both .subtitle and
 * .page-subtitle. All of it is now written once, here.
 *
 * Load order: linked after <title>, so it lands before each page's own <style>
 * and a page that still needs to differ keeps its own rule and wins.
 */

/* The wrapper.
 *
 * Note the two shells the audit found, which this does NOT paper over:
 *
 *   modern (13 pages)  flat --page-bg body with no padding of its own, green
 *                      .nav-wrap, and this padding supplied here.
 *   legacy  (4 pages)  index, account, privacy and terms sit on a full-page
 *                      green gradient with body { padding: 20px } and bleed the
 *                      nav out of it with negative margins. They keep a local
 *                      .page rule that drops this padding, because taking it
 *                      would double up against the body's.
 *
 * Converging those two is a visible change to what those four pages look like,
 * not a refactor, so it is left as a decision rather than made here.
 */
.page {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--gutter-top) var(--gutter-x) var(--gutter-bot);
}

/* Title block. align-items is centred because the common case is a title beside
 * a button; the pages that pair a title+subtitle stack with actions keep their
 * own flex-start. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.page-title {
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--ink);
}

/* A title standing on its own directly inside .page, with no .page-header
 * wrapped around it, has to carry its own gap: everywhere else that gap comes
 * from .page-header's margin-bottom. Without this, gift-cards, cashback and
 * gwp-calculator had their content sitting flush against the title.
 * 24px so the space below a title is the same either way. */
.page > .page-title { margin-bottom: 24px; }

.page-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.page-actions { display: flex; gap: 10px; align-items: center; }

/* Breakpoints, per the convention in base.css: 900 / 700 / 480.
 *
 * These are the first responsive rules several pages have ever had. gwp-codes,
 * promotions, analytics and gc-wallet carried no media query at all, so their
 * title rows could not reflow and their gutters stayed at 20px down to phone
 * width. They inherit sensible behaviour now by linking this file. */
@media (max-width: 700px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-actions { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .page { padding: 24px 12px var(--gutter-bot); }
  .page-title { font-size: 20px; }
}