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

.hero-grid h1 { font-size: clamp(40px, 5.1vw, 65px) !important; }

@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; }
    .hero-grid { grid-template-columns: 1fr 0.8fr !important; }
    .fancy-list-grid { grid-template-columns: repeat(2,1fr) !important; }
  }

.operator-card, .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) {
    .hero-grid { grid-template-columns: 1fr !important; padding: 32px !important; }
    .hero-media { height: 360px !important; }
    .hero-media .hero-media-badge { right: calc(50% - 116px); bottom: 20px; }
    .fancy-list-grid { grid-template-columns: 1fr !important; }
    .newsletter-card { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px !important; }
    /* Top padding matches .newsletter-card's own padding above (36px at
       this width), same idea as the ≤680px rule below, extended to tablet. */
    /* .newsletter-card already stacks to one column at this width — #game
       didn't stack until 680px, so between 681-960px its content and
       actions stayed side by side, with the button row just vertically
       centered against the taller text block instead of aligned to
       anything, looking disconnected from the title above it. */
    #game { padding-top: 36px !important; gap: 24px !important; flex-direction: column; align-items: center !important; text-align: center; }
    .footer-cols { grid-template-columns: 1fr 1fr !important; }
    /* Same unified heading scale as the ≤680px rules below, extended up to
       tablet width — without this, every one of these jumped straight from
       44px back to its own uncapped desktop size (52-65px) at 681px, the
       exact inconsistency being fixed here. */
    .hero-grid h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .section-title-hero { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .promo-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* "This weekend's three" (the Fancies section on Home) — .page-hero-title
       is normally each other page's own H1, but Home reuses the class here
       for this H2 and it had no override anywhere, at any width. */
    .page-hero-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
  }

@media (max-width: 680px) {
    section.page-hero-content-tall > div { padding: 128px 20px 56px !important; }
    section.page-hero-content-tall h1 { font-size: 36px !important; }
    .operator-card, .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; }
    header > div { padding: 0 20px !important; gap: 16px !important; }
    /* Hero: text overlaps the portrait instead of stacking a full-width
       photo below a full-width text block — text column on the left,
       .hero-media bleeding off the right edge behind/beside it, both
       sharing one compact band. Matches the reference mobile heroes
       (TomGarrattBets/DeeneyBets: text-forward, photo bleeding on the side,
       compact side-by-side buttons) instead of the two stacked sections
       this used to render as below 960px.
       .hero's own min-height:100vh and .hero-body's min-height:640px (both
       sized for the old, taller stacked layout) forced this much shorter
       overlapping layout to still fill the screen, leaving a dead gap below
       the content — same fix as the reference sites: height comes from the
       content, not a fixed viewport/pixel floor. */
    .hero { min-height: auto !important; }
    .hero-body { min-height: auto !important; }
    /* Wash a touch more opaque on mobile — same wash as desktop, just
       leaning further toward hiding the stadium photo's texture now that
       the hero is this much shorter and the photo sits closer to the text. */
    .hero .hero-glow { background: rgba(250,250,250,0.95) !important; }
    div.hero-grid { display: block !important; position: relative; min-height: 460px; padding: 24px 20px 28px !important; }
    .hero-content { position: relative; z-index: 2; max-width: 100%; padding-top: 4px !important; padding-bottom: 0 !important; }
    .hero-media { position: absolute !important; top: 10px; right: -100px; height: 460px !important; width: 78% !important; }
    .hero-media-badge { display: none; }
    /* No red blob behind the photo on mobile — just the cutout itself,
       faded (see the opacity/brightness rule below) so it recedes and the
       overlapping text stays legible without needing a dark gradient over
       it. Full colour — only lightened, not desaturated. */
    .hero-media-blob { display: none !important; }
    /* Text now runs the full width, over the left side of the (bigger)
       photo. A gradient overlay (Troy Deeney's own technique for text over
       a hero photo) painted a visible rectangle here instead — this is a
       cutout with transparent space around Callum, not a full-bleed photo,
       so any overlay box covers that empty space too. Fading the cutout's
       own opacity instead respects its alpha channel pixel-for-pixel: only
       Callum himself lightens, nothing rectangular shows. */
    /* brightness() lightens the image's own tones (hair, mic, shirt shadow)
       directly — opacity alone only blends it toward the backdrop, which
       still left the darkest areas dark enough to fight the black text. */
    .hero-media-frame .hero-media-image { filter: grayscale(1) brightness(1.2); opacity: 0.7; }
    /* Stronger black than the desktop ink (#262220) / its faded rgba
       variants — now that text sometimes overlaps the (faded) photo
       directly, it needs the extra contrast desktop's plain smoke
       background never required. */
    .hero-title { color: #000 !important; }
    /* .hero-content is 100% wide now, but the paragraph itself shouldn't
       stretch edge to edge with it — stop it short of the photo instead of
       running underneath. */
    .hero-subtitle { color: rgba(0,0,0,0.85) !important; max-width: 82% !important; }
    .hero-compliance { color: rgba(0,0,0,0.75) !important; }
    /* Capped lower than the old 54px: at the wide end of this breakpoint
       (~680px) "CALLUM FOWLER" at 54px ran wide enough to visually collide
       with .hero-media, now positioned much closer to the text than before
       this layout overlapped them. */
    .hero-grid h1 { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .section-title-hero ("The bookies Callum trusts") had no override at
       all — stayed at its fixed 52px desktop size down to the smallest
       phones. Same clamp as the hero h1 above, for one consistent scale. */
    .section-title-hero { font-size: clamp(28px, 6.4vw, 44px) !important; }
    /* .promo-title ("Seek with Callum" / "Friday fancies, straight to your
       inbox") had no override either, at a fixed 46px — same clamp as every
       other main heading, so the banners match too, not just the page
       titles. */
    .promo-title { font-size: clamp(28px, 6.4vw, 44px) !important; }
    .hero-subtitle { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
    /* Compact, side-by-side pills instead of full-width stacked buttons —
       sized to actually fit two across in the text column. */
    .hero-actions { justify-content: flex-start !important; gap: 10px !important; }
    .hero-actions a { width: auto !important; padding: 14px 20px !important; font-size: 14px !important; letter-spacing: 0.02em !important; }
    .hero-compliance { flex-wrap: wrap; row-gap: 6px; margin-top: 16px !important; font-size: 11px !important; }
    section { padding-left: 20px !important; padding-right: 20px !important; }
    .newsletter-card { padding: 28px !important; }
    .footer-cols { grid-template-columns: 1fr !important; padding: 48px 20px 28px !important; gap: 32px !important; }
    .footer-legal { padding: 48px 20px 28px !important; }
    /* #game *is* .game-promo (a div, not a section) — "section#game > div"
       never matched anything, so the card kept its desktop 52px/56px padding
       (and 48px gap, sized for a side-by-side row) on mobile instead of
       shrinking like .newsletter-card does below it. */
    /* Top padding matches .newsletter-card's own padding below it (28px),
       instead of its own separate 32px. */
    #game { padding: 28px 24px 32px !important; gap: 24px !important; flex-direction: column; align-items: center !important; text-align: center; }
    .game-promo-actions { flex-direction: column !important; align-items: center !important; width: 100%; }
    .newsletter-submit { width: 100%; }
  }

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