/**
 * Hub home mobile polish — BG / EN / PT index only (body:has(#authority-hub))
 * Professional phone layout: full-width content, compact spacing, readable type.
 */

@media screen and (max-width: 1023.98px) {
    body:has(#authority-hub) {
        font-size: 16px;
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body:has(#authority-hub) * {
        box-sizing: border-box;
    }

    body:has(#authority-hub) img,
    body:has(#authority-hub) video,
    body:has(#authority-hub) iframe,
    body:has(#authority-hub) .adsbygoogle {
        max-width: 100%;
    }

    /* ─── Nav & breadcrumbs ─── */
    body:has(#authority-hub) nav.bg-white .cmp-hub-nav-row {
        min-width: 0;
        overflow: hidden;
    }

    body:has(#authority-hub) nav.bg-white .cmp-main-nav.cmp-hub-main-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body:has(#authority-hub) nav.bg-white .cmp-main-nav.cmp-hub-main-nav::-webkit-scrollbar {
        display: none;
    }

    body:has(#authority-hub) nav.bg-white .cmp-main-nav.cmp-hub-main-nav .nav-link {
        flex-shrink: 0 !important;
    }

    body:has(#authority-hub) .max-w-6xl.mx-auto.pt-3,
    body:has(#authority-hub) .site-breadcrumbs-index {
        padding-left: max(0.875rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.875rem, env(safe-area-inset-right, 0px)) !important;
    }

    body:has(#authority-hub) .site-breadcrumbs-index {
        font-size: 0.875rem;
        padding-top: 0.5rem;
        padding-bottom: 0.25rem;
    }

    /* ─── Hero: compact rules live in inline <style> before </body> on hub index pages ─── */

    /* ─── Main layout ─── */
    body:has(#authority-hub) main.max-w-6xl {
        padding-top: 1.5rem !important;
        padding-bottom: 1.75rem !important;
        padding-left: max(0.875rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.875rem, env(safe-area-inset-right, 0px)) !important;
        gap: 1.5rem !important;
    }

    body:has(#authority-hub) main.max-w-6xl > .block.w-full {
        min-height: 0 !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ─── Authority hub article ─── */
    body:has(#authority-hub) #authority-hub {
        padding: 1.125rem !important;
        border-radius: 1.125rem !important;
        gap: 1.75rem !important;
    }

    body:has(#authority-hub) #authority-hub > header .text-base.font-semibold.uppercase {
        font-size: 0.6875rem !important;
        letter-spacing: 0.12em !important;
    }

    body:has(#authority-hub) #authority-hub h2 {
        font-size: 1.375rem !important;
        line-height: 1.28 !important;
    }

    body:has(#authority-hub) #authority-hub h3 {
        font-size: 1.0625rem !important;
        line-height: 1.35 !important;
    }

    body:has(#authority-hub) #authority-hub p,
    body:has(#authority-hub) #authority-hub .hub-readable-text {
        font-size: 1.0625rem !important;
        line-height: 1.62 !important;
    }

    body:has(#authority-hub) #authority-hub .rounded-2xl.border.p-6 {
        padding: 1rem !important;
    }

    body:has(#authority-hub) .hub-cta-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    body:has(#authority-hub) .hub-cta-buttons a {
        width: 100% !important;
        padding: 0.6875rem 0.5rem !important;
        font-size: 0.8125rem !important;
        line-height: 1.25 !important;
        border-radius: 0.75rem !important;
        min-height: 2.625rem;
        text-align: center;
    }

    body:has(#authority-hub) .hub-cta-buttons a[href*="free-spins"] {
        grid-column: 1 / -1;
        font-size: 0.9375rem !important;
        padding: 0.75rem !important;
    }

    /* ─── Content sections ─── */
    body:has(#authority-hub) main > section {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
        padding-left: max(0.875rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(0.875rem, env(safe-area-inset-right, 0px)) !important;
        border-radius: 1.125rem !important;
    }

    body:has(#authority-hub) main > section > i.fa-solid,
    body:has(#authority-hub) main > section > i.fa-brands {
        display: none !important;
    }

    body:has(#authority-hub) main > section .text-center.mb-12 {
        margin-bottom: 1.5rem !important;
    }

    body:has(#authority-hub) main > section h2 {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }

    body:has(#authority-hub) main > section h3 {
        font-size: 1.125rem !important;
        line-height: 1.32 !important;
    }

    body:has(#authority-hub) main > section h4 {
        font-size: 1rem !important;
    }

    body:has(#authority-hub) main > section p,
    body:has(#authority-hub) main > section .hub-readable-text,
    body:has(#authority-hub) main > section li {
        font-size: 1.0625rem !important;
        line-height: 1.6 !important;
    }

    body:has(#authority-hub) main > section .inline-block.rounded-full.border {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.625rem !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 0.75rem !important;
    }

    /* Cards & panels */
    body:has(#authority-hub) main section .bg-white.rounded-3xl,
    body:has(#authority-hub) main section .bg-white.rounded-2xl,
    body:has(#authority-hub) main section .bg-white.dark\:bg-slate-900.p-8,
    body:has(#authority-hub) main section .bg-white.dark\:bg-slate-900.p-6 {
        padding: 1.125rem !important;
        border-radius: 1rem !important;
    }

    body:has(#authority-hub) main section .flex.items-center.gap-4.mb-6,
    body:has(#authority-hub) main section .flex.items-center.gap-4.mb-4 {
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    body:has(#authority-hub) main section .w-16.h-16 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        font-size: 1.125rem !important;
        border-radius: 0.75rem !important;
    }

    body:has(#authority-hub) main section .w-12.h-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        font-size: 1rem !important;
    }

    body:has(#authority-hub) main section .grid.lg\:grid-cols-2,
    body:has(#authority-hub) main section .flex.flex-col.lg\:flex-row {
        gap: 1rem !important;
    }

    body:has(#authority-hub) main section .grid.lg\:grid-cols-2.mb-16 {
        margin-bottom: 1rem !important;
    }

    body:has(#authority-hub) main section ul.text-sm li,
    body:has(#authority-hub) main section ol.text-sm li {
        font-size: 0.9375rem !important;
    }

    /* ─── Calculator ─── */
    body:has(#authority-hub) #calculator {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }

    body:has(#authority-hub) #calculator .max-w-4xl.bg-white {
        padding: 1.125rem !important;
        border-radius: 1rem !important;
    }

    body:has(#authority-hub) .cmp-village-level-input {
        width: 100% !important;
        font-size: 2rem !important;
        padding: 0.75rem !important;
    }

    body:has(#authority-hub) .village-multiplier {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.375rem;
    }

    body:has(#authority-hub) .village-multiplier__btn,
    body:has(#authority-hub) .cmp-main-nav,
    body:has(#authority-hub) #calculator,
    body:has(#authority-hub) .daily-bonus-btn {
        font-size: 0.9375rem !important;
    }

    body:has(#authority-hub) #villageNameDisplay {
        font-size: 1rem !important;
    }

    /* ─── Footer ─── */
    body:has(#authority-hub) footer {
        margin-top: 1.5rem !important;
        padding: 1.25rem max(0.875rem, env(safe-area-inset-right, 0px)) 1.25rem max(0.875rem, env(safe-area-inset-left, 0px)) !important;
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
    }

    body:has(#authority-hub) footer .space-y-3 {
        gap: 0.5rem !important;
    }

    /* ─── Cookie banner ─── */
    body:has(#authority-hub) #cmp-cookie-banner,
    body:has(#authority-hub) .cookie-consent-banner {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 180px !important;
        min-height: unset !important;
        padding: 0.625rem max(0.625rem, env(safe-area-inset-right, 0px)) max(0.625rem, env(safe-area-inset-bottom, 0px)) max(0.625rem, env(safe-area-inset-left, 0px)) !important;
        background: rgba(15, 23, 42, 0.98) !important;
        z-index: 99999 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35) !important;
    }

    body:has(#authority-hub) #cmp-cookie-banner p,
    body:has(#authority-hub) .cookie-consent-banner p {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.375rem !important;
    }

    body:has(#authority-hub) #cmp-cookie-banner .cmp-cookie-banner__buttons,
    body:has(#authority-hub) .cookie-consent-banner .flex {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.5rem !important;
        justify-content: center !important;
        margin-top: 0.25rem !important;
    }

    body:has(#authority-hub) #cmp-cookie-banner button,
    body:has(#authority-hub) .cookie-consent-banner button {
        padding: 0.4375rem 0.75rem !important;
        font-size: 0.8125rem !important;
        min-height: 2.25rem;
    }

    body:has(#authority-hub) #authority-hub > * + * {
        margin-top: 1.75rem !important;
    }

    body:has(#authority-hub) .scroll-mt-28 {
        scroll-margin-top: 5.5rem;
    }
}

/* Small phones — single-column CTAs in hub strip */
@media screen and (max-width: 639.98px) {
    body:has(#authority-hub) .hub-cta-buttons {
        grid-template-columns: 1fr !important;
    }

    body:has(#authority-hub) .hub-cta-buttons a {
        font-size: 0.9375rem !important;
        padding: 0.75rem 1rem !important;
    }

    body:has(#authority-hub) main section h2.text-2xl {
        font-size: 1.25rem !important;
    }

    body:has(#authority-hub) #authority-hub h2.text-3xl {
        font-size: 1.25rem !important;
    }
}