/* Page-specific rules for best-casinos.html */

@media (max-width: 768px) {
    .header-cta, .header-cta-primary { display: none !important; }
    .mobile-menu-cta { display: flex !important; }
    .operator-card-actions, .operator-card-cta-row { flex-direction: column !important; align-items: center !important; gap: 8px !important; }
  }

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

.operator-card, .operator-card-static, .operator-card-featured { grid-column: span 1; }

@media (max-width: 1080px) {
    .operator-card-actions, .operator-card-cta-row { grid-column: 1 / -1; }
    .operator-card-featured { grid-template-columns: 110px minmax(0,1fr) !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; }
  }

@media (max-width: 680px) {
    .page-hero-content { padding: 30px 20px 150px !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, instead of
       each page shrinking its own fixed desktop size independently. */
    .page-hero-content h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .operator-card, .operator-card-static, .operator-card-featured { grid-column: 1 / -1 !important; padding: 20px !important; }
    .operator-card-featured { grid-template-columns: 1fr !important; }
    .operator-card-featured > div:nth-child(2) { width: 100%; }
    /* .operator-card-logo stretches to the card's full width once the grid
       collapses to one column — nothing capped its width, so the (contain-fit,
       center-positioned) logo image ends up looking off-center inside a huge
       white box. Give the box a sane width and center it instead. */
    .operator-card-logo { width: 160px !important; max-width: 100% !important; margin: 0 auto; }
    .footer-cols { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 20px 28px !important; }
    .footer-legal { padding: 48px 20px 28px !important; }
    header > div { padding: 0 20px !important; gap: 16px !important; }
    section { padding-left: 20px !important; padding-right: 20px !important; }
  }

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