/* Page-specific rules for about.html */

@media (max-width: 768px) {
    .header-cta, .header-cta-primary { display: none !important; }
    .mobile-menu-cta { display: flex !important; }
  }

@media (max-width: 1240px) {
    .header-nav { display: none !important; }
    .hamburger-button { display: flex !important; }
  }

.about-record { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 72px; align-items: center; }

/* .cta-banner ("Get on Callum's latest picks") had a flat 52px padding down
   to 680px, then dropped straight to 32px — same gap as .fancy-highlight-card
   on Fancies had, fixed the same way with a tablet step in between. */
@media (max-width: 992px) {
    .cta-banner { padding: 36px !important; }
  }

@media (max-width: 960px) {
    .about-record { grid-template-columns: 1fr !important; gap: 44px !important; }
    .relative-box { max-width: 360px; width: 100%; }
    .about-hero-portrait { height: 360px !important; }
    /* .cta-banner has no grid of its own — .cta-banner-content is the grid
       (1fr auto). Targeting .cta-banner here did nothing, so the actions
       column stayed pinned to "auto" width and .cta-banner-actions'
       flex-direction:column below never got the full-width row it needs. */
    .cta-banner-content { grid-template-columns: 1fr !important; }
    .career-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .footer-cols { grid-template-columns: 1fr 1fr !important; }
    .about-record .relative-box { margin: 0px auto; }
    /* Same unified heading scale as the ≤680px rules below, extended up to
       tablet width so these don't jump back to their uncapped desktop sizes
       (44px / 32px) between 681-960px. */
    .about-hero-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .cta-banner-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .section-title-white ("Less searching, more football.") and
       .section-title-tight ("Transparent by design.") are a fixed 34px at
       every width, on purpose at desktop size (a smaller secondary-heading
       tier) — but that means they never grew with the others up to 44px at
       tablet width either, same mismatch as the hero title, just inverted. */
    /* .section-title-spaced ("An EFL obsessive, not a pundit in a studio.")
       — same fixed-34px-everywhere situation as the two below. */
    .section-title-white, .section-title-tight, .section-title-spaced { font-size: clamp(28px, 6.4vw, 44px) !important; }
  }

@media (max-width: 680px) {
    header > div { padding: 0 20px !important; gap: 16px !important; }
    section { padding-left: 20px !important; padding-right: 20px !important; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-value { font-size: 26px !important; }
    .cta-banner { padding: 32px !important; }
    .footer-cols { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 20px 28px !important; }
    .footer-legal { padding: 48px 20px 28px !important; }
    section .section-narrow { padding: 88px 0px; }
    .about-hero-body { padding-top: 50px !important; }
    .cta-banner-actions { flex-direction: column !important; width: 100%; }
    .cta-banner-actions a { width: auto; justify-content: center; text-align: center; }
    /* Same clamp as the home hero (.hero-grid h1 in index.css) so every
       page's main heading reads the same size on a given phone. This page
       had no override at all before — .about-hero-title stayed at its
       fixed 44px desktop size down to the smallest phones. */
    .about-hero-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .cta-banner-title ("Get on Callum's latest picks") was a fixed 32px —
       same clamp as every other heading now, exactly, not just capped under
       it, per "all headings the same size on mobile, banners included." */
    .cta-banner-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
  }

@media (max-width: 480px) {
    .about-hero-title { font-size: 34px !important; }
    .cta-banner-title { font-size: 34px !important; }
    /* Pin back to flat 34px here — without this the clamp from the ≤960px
       rule above would keep shrinking these below 34px as the viewport
       narrows further, unlike their naturally-fixed desktop behaviour. */
    .section-title-white, .section-title-tight, .section-title-spaced { font-size: 34px !important; }
  }