/* ============================================================
   McLuck Official CA — Mobile Supplement CSS
   All inline-grid overrides + flex layout fixes for mobile
   ============================================================ */

/* === Mobile tracker bar (shown only on mobile) === */
.mobile-tracker-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1001;
    background: linear-gradient(90deg, #FFD700, #ff8c42);
    padding: 10px 16px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-tracker-bar .promo-text {
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-tracker-bar .btn-play-sm {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 8px;
    background: #000;
    color: #FFD700;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    transition: 0.2s;
    flex-shrink: 0;
}

.mobile-tracker-bar .btn-play-sm:hover {
    background: #1a0533;
}

@media (max-width: 768px) {
    .mobile-tracker-bar {
        display: flex;
    }

    /* Push header down because tracker bar is now sticky */
    header {
        top: 48px;
        /* height of tracker bar */
    }

    /* Prevent SPECIFIC known inline grids from overflowing horizontally */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Charts: MUST keep height, cannot collapse ---- */
    .chart-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 260px;
    }

    .chart-container {
        height: 220px !important;
        min-height: 180px !important;
        width: 100% !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    .chart-container canvas {
        max-width: 100% !important;
        height: 220px !important;
    }

    /* Grid that contains chart-wrappers — also flex column */
    .grid-2:has(.chart-wrapper),
    div[style*="grid-template-columns"]:has(.chart-wrapper) {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Review page quick verdict stays readable */
    .card div[style*="justify-content:space-between"],
    .card div[style*="justify-content: space-between"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
    }

    /* VIP page 5 tier cards → 2 column on tablet */
    div[style*="repeat(auto-fit"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: unset !important;
    }

    /* Author page photo center on mobile */
    .container .grid-2[style] {
        flex-direction: column;
    }

    /* ---- TABLES MOBILE ---- */

    /* Critical: min-width:0 prevents flex item from blocking overflow-x scroll */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        border-radius: 12px;
        border: 1px solid rgba(255, 215, 0, 0.2);
        box-sizing: border-box;
    }

    table {
        min-width: 520px;
        /* forces scroll, does NOT overflow body */
        font-size: 12px;
        /* NO width:max-content — that breaks page layout */
    }

    caption {
        font-size: 13px;
        padding: 12px 14px;
        white-space: normal;
    }

    thead th {
        padding: 10px 10px;
        white-space: nowrap;
        font-size: 11px;
    }

    tbody td {
        padding: 10px 10px;
        /* NO white-space:nowrap — let text wrap in cells */
    }
}

@media (max-width: 480px) {

    /* VIP tiers → 1 column on small phones */
    div[style*="repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* Stat counter items side by side on small */
    .hero-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
    }

    /* Tracker bar tighter on small phones */
    .mobile-tracker-bar {
        padding: 8px 12px;
    }

    .mobile-tracker-bar .promo-text {
        font-size: 11px;
    }

    /* Full-width play button */
    .btn-play {
        width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }
}