/* Zone B below hero — result, backward, lucky, horoscope, news */

body.page-hero-zone-b {
    --page-hero-edge-gap: 0.25rem;
    --page-hero-banner-gap: 0.25rem;
}

@media (min-width: 640px) {
    body.page-hero-zone-b {
        --page-hero-edge-gap: 1.25rem;
        --page-hero-banner-gap: 1.25rem;
    }
}

/* Zone A visible on desktop — banner provides top gap */
body.page-hero-zone-b:has(.home-banners-stack.banner-stack--desktop) .page-hero-band,
body.page-hero-zone-b:has(.home-banners-stack.banner-stack--desktop) #top.page-hero-band {
    --page-hero-edge-gap: 0;
    padding-top: 0 !important;
}

/* Zone A visible on mobile/tablet — banner provides top gap */
@media (max-width: 1023px) and (not ((hover: hover) and (pointer: fine))) {
    body.page-hero-zone-b:has(.home-banners-stack:not(.banner-stack--desktop)) .page-hero-band,
    body.page-hero-zone-b:has(.home-banners-stack:not(.banner-stack--desktop)) #top.page-hero-band {
        --page-hero-edge-gap: 0;
        padding-top: 0 !important;
    }
}

body.page-hero-zone-b .page-hero-band,
body.page-hero-zone-b #top.page-hero-band {
    --page-hero-edge-gap: 0.25rem;
}

/* Zone B visible on desktop — only when banner is first in follow (not historical layout) */
@media (min-width: 768px) {
    body.page-hero-zone-b main #top ~ .page-hero-follow:has(> .index-banners-stack.banner-stack--desktop:first-child),
    body.page-hero-zone-b main > section.page-hero-band ~ .page-hero-follow:has(> .index-banners-stack.banner-stack--desktop:first-child),
    body.page-hero-zone-b main > section.page-hero-band + section.page-hero-follow:has(> .index-banners-stack.banner-stack--desktop:first-child),
    body.page-hero-zone-b main > section.page-hero-band + .page-hero-follow:has(> .index-banners-stack.banner-stack--desktop:first-child),
    body.page-hero-zone-b .page-hero-follow:has(> .index-banners-stack.banner-stack--desktop:first-child) {
        padding-top: 0 !important;
    }

    body.page-hero-zone-b #top.page-hero-band:has(+ .page-hero-follow > .index-banners-stack.banner-stack--desktop:first-child) {
        padding-bottom: 0 !important;
    }

    /* Historical — results first, Zone B below: keep gap after hero card */
    body.page-hero-zone-b main #top ~ .page-hero-follow:not(:has(> .index-banners-stack.banner-stack--desktop:first-child)) {
        padding-top: var(--page-hero-banner-gap) !important;
    }
}

/* Zone B visible on mobile/tablet — only when banner is first in follow */
@media (max-width: 1023px) and (not ((hover: hover) and (pointer: fine))) {
    body.page-hero-zone-b main #top ~ .page-hero-follow:has(> .index-banners-stack:not(.banner-stack--desktop):first-child),
    body.page-hero-zone-b main > section.page-hero-band ~ .page-hero-follow:has(> .index-banners-stack:not(.banner-stack--desktop):first-child),
    body.page-hero-zone-b main > section.page-hero-band + section.page-hero-follow:has(> .index-banners-stack:not(.banner-stack--desktop):first-child),
    body.page-hero-zone-b main > section.page-hero-band + .page-hero-follow:has(> .index-banners-stack:not(.banner-stack--desktop):first-child),
    body.page-hero-zone-b .page-hero-follow:has(> .index-banners-stack:not(.banner-stack--desktop):first-child) {
        padding-top: 0 !important;
    }

    body.page-hero-zone-b main #top ~ .page-hero-follow:not(:has(> .index-banners-stack:not(.banner-stack--desktop):first-child)) {
        padding-top: var(--page-hero-banner-gap) !important;
    }
}

/* Desktop — no visible Zone B under hero (disabled or mobile-only config) */
@media (min-width: 1024px) {
    body.page-hero-zone-b .page-hero-follow.page-hero-follow--no-zone-b,
    body.page-hero-zone-b .page-hero-follow.page-hero-follow--zone-b-mobile-only {
        padding-top: 0 !important;
    }

    body.page-hero-zone-b:not(:has(.index-banners-stack.banner-stack--desktop)) .page-hero-band,
    body.page-hero-zone-b:not(:has(.index-banners-stack.banner-stack--desktop)) #top.page-hero-band {
        padding-bottom: 1.25rem !important;
    }
}

/* Mobile — no Zone B at all */
@media (max-width: 767px) and (hover: none) {
    body.page-hero-zone-b .page-hero-follow.page-hero-follow--no-zone-b:not(:has(> .index-banners-stack)) {
        padding-top: 1rem !important;
    }
}

/* Desktop — no visible Zone A (disabled or mobile-only config) */
@media (min-width: 1024px) {
    body.page-hero-zone-b .page-hero-band.page-hero-band--no-zone-a,
    body.page-hero-zone-b .page-hero-band.page-hero-band--zone-a-mobile-only,
    body.page-hero-zone-b #top.page-hero-band--no-zone-a,
    body.page-hero-zone-b #top.page-hero-band--zone-a-mobile-only,
    body.page-hero-zone-b:not(:has(.home-banners-stack.banner-stack--desktop)) .page-hero-band,
    body.page-hero-zone-b:not(:has(.home-banners-stack.banner-stack--desktop)) #top.page-hero-band {
        padding-top: 1.25rem !important;
    }
}

body.page-hero-zone-b .page-hero-follow > .index-banners-stack.result-zone-b-stack,
body.page-hero-zone-b .page-hero-follow > .result-zone-b-stack,
body.page-hero-zone-b .page-hero-follow > .index-banners-stack {
    width: 100%;
    max-width: 750px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    margin-bottom: 0.25rem !important;
}

/* Hero card ↔ Zone B — gap when banner is visible (horoscope, result, backward, …) */
body.page-hero-zone-b .page-hero-follow > .index-banners-stack.banner-stack--desktop {
    margin-top: var(--page-hero-banner-gap) !important;
}

@media (max-width: 1023px) and (not ((hover: hover) and (pointer: fine))) {
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack:not(.banner-stack--desktop) {
        margin-top: var(--page-hero-banner-gap) !important;
    }
}

body.page-hero-zone-b .page-hero-follow > .index-banners-stack.historical-zone-b-stack {
    --historical-zone-b-gap: var(--page-hero-banner-gap);
    margin-top: var(--historical-zone-b-gap) !important;
    margin-bottom: var(--historical-zone-b-gap) !important;
}

body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack {
    --lucky-zone-b-gap: calc(var(--page-hero-banner-gap) * 0.5);
    margin-top: var(--lucky-zone-b-gap) !important;
    margin-bottom: 0 !important;
}

/* Match poster ↔ banner spacing: banner ↔ first stats card */
body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack + div > div > .prediction-panel:first-child {
    padding-top: calc(var(--page-hero-banner-gap) * 0.5) !important;
}

body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack + div > div > .prediction-panel:first-child > .mb-5:first-child {
    margin-bottom: 0.75rem !important;
}

body.page-hero-zone-b .page-hero-follow > .lucky-poster-section {
    margin-bottom: 0 !important;
}

/* Collapse extra gap only when mid-page Zone B is visible on this viewport */
@media (min-width: 768px) {
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.historical-zone-b-stack.banner-stack--desktop + div > section,
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack.banner-stack--desktop + div > div {
        margin-top: 0 !important;
    }
}

@media (max-width: 1023px) and (not ((hover: hover) and (pointer: fine))) {
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.historical-zone-b-stack:not(.banner-stack--desktop) + div > section,
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack:not(.banner-stack--desktop) + div > div {
        margin-top: 0 !important;
    }
}

/* Historical / lucky detail — gap between the two boxes when Zone B hidden or absent */
@media (min-width: 1024px) {
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.historical-zone-b-stack:not(.banner-stack--desktop) + div,
    body.page-hero-zone-b .page-hero-follow > .index-banners-stack.lucky-zone-b-stack:not(.banner-stack--desktop) + div {
        margin-top: var(--page-hero-banner-gap) !important;
    }
}

body.page-hero-zone-b .page-hero-follow > div.max-w-3xl + div.max-w-3xl,
body.page-hero-zone-b .page-hero-follow > .lucky-poster-section + div:not(.index-banners-stack) {
    margin-top: var(--page-hero-banner-gap) !important;
}

.result-page-grid {
    align-items: start;
}

.result-page-grid > * {
    align-self: start;
}