/* Page-specific rules for fancies.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; }
  }

.fancy-list-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

@media (max-width: 960px) { .fancy-list-grid { grid-template-columns: 1fr !important; } }

/* .fancy-highlight-card ("Back Callum's 21/1 fourfold...") had a flat 40px
   padding at every width, same class of gap as .newsletter-card/.cta-banner
   before their own mobile/tablet overrides — reduced here the same way. */
@media (max-width: 992px) {
    .fancy-highlight-card { padding: 32px !important; }
  }

@media (max-width: 960px) {
    .footer-cols { grid-template-columns: 1fr 1fr !important; }
    /* Same unified heading scale as the ≤680px rule below, extended up to
       tablet width so this doesn't jump back to its uncapped 52px between
       681-960px. */
    .page-hero-content h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .fancy-highlight-title ("Back Callum's 21/1 fourfold...") and
       .section-title ("Callum's strongest fancies") had no override at all,
       at fixed 30px/38px — same unified clamp as every other heading. */
    .fancy-highlight-title, .section-title { 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; }
    .footer-cols { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 20px 28px !important; }
    .footer-legal { padding: 48px 20px 28px !important; }
    /* 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 — .page-hero-title stayed at its fixed
       52px desktop size down to the smallest phones. */
    .page-hero-content h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .fancy-highlight-card { padding: 28px !important; }
  }

@media (max-width: 480px) {
    .page-hero-content h1 { font-size: 34px !important; }
    .fancy-highlight-title, .section-title { font-size: 34px !important; }
  }