/**
 * XOTLIST Mobile Engine v3.1
 * Single source of truth for all mobile styles.
 * Loaded on every page. Overrides per-page breakpoints.
 *
 * Breakpoint system:
 *   --mob-xs:  320px  (small phones)
 *   --mob-sm:  375px  (iPhone SE / standard)
 *   --mob-md:  430px  (iPhone Pro Max / large Android)
 *   --mob-lg:  768px  (tablet portrait)
 *   --mob-xl:  1024px (tablet landscape / small desktop)
 */

/* ═══════════════════════════════════════════════════
   1. ROOT — Global overflow guard & safe spacing
═══════════════════════════════════════════════════ */
html {
    overflow-x: hidden;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* overflow-x: clip — clips horizontal overflow WITHOUT creating a new scroll
       container. overflow-x: hidden would make body a scroll container, which
       breaks position:sticky on the site header (sticky sticks to body, not
       the viewport). clip avoids that entirely. */
    overflow-x: clip;
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0; /* Prevents flex/grid children from overflowing */
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════
   2. CSS VARIABLES — Mobile spacing system
═══════════════════════════════════════════════════ */
:root {
    /* Padding scale */
    --xot-pad:        1rem;       /* Default mobile page padding */
    --xot-pad-sm:     0.75rem;    /* Tight sections */
    --xot-pad-lg:     1.25rem;    /* Comfortable sections */

    /* Gap scale */
    --xot-gap:        0.75rem;
    --xot-gap-sm:     0.5rem;
    --xot-gap-lg:     1rem;

    /* Card radius */
    --xot-radius:     12px;
    --xot-radius-sm:  8px;
    --xot-radius-lg:  16px;

    /* Font scale */
    --xot-text-xs:    0.6rem;
    --xot-text-sm:    0.72rem;
    --xot-text-md:    0.85rem;
    --xot-text-base:  1rem;
    --xot-text-lg:    1.15rem;
    --xot-text-xl:    1.4rem;
    --xot-text-2xl:   1.75rem;
    --xot-text-3xl:   clamp(1.6rem, 5vw, 2.5rem);

    /* Consistent bottom nav clearance */
    --xot-nav-h:      60px;
    --xot-page-pb:    calc(var(--xot-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
}

@media (min-width: 768px) {
    :root {
        --xot-pad:     1.5rem;
        --xot-pad-sm:  1rem;
        --xot-pad-lg:  2rem;
        --xot-gap:     1rem;
        --xot-gap-lg:  1.5rem;
        --xot-nav-h:   0px;
        --xot-page-pb: 2rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --xot-pad:     2rem;
        --xot-pad-lg:  2.5rem;
    }
}

/* ═══════════════════════════════════════════════════
   3. PAGE BODY — Bottom padding for all pages
   Ensures content isn't hidden under the mobile nav.

   IMPORTANT: Apply ONLY to body — not to .site, #page,
   .site-content, #content. These are nested ancestors;
   padding on each one stacks, producing 4-5× the intended
   clearance. One application on body is sufficient because
   the bottom of the DOM flow falls inside body.
═══════════════════════════════════════════════════ */
body {
    padding-bottom: var(--xot-page-pb);
}

/* NOTE: The old block that re-applied padding-bottom !important
   to .xrf, .xot-ent, .xot-take-feed, .lb-wrap is intentionally
   removed. body already handles the clearance. Re-applying it to
   page containers created a double-padding on every page. */

/* ═══════════════════════════════════════════════════
   4. HEADER — Consistent across all pages
═══════════════════════════════════════════════════ */
#masthead.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    width: 100%;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   5. BOTTOM NAV — Safe area + consistent height
═══════════════════════════════════════════════════ */
.xot-mob-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    width: 100%;
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════
   6. LAYOUT CONTAINERS — Overflow protection on all

   IMPORTANT: These wildcard selectors are scoped to
   @media (max-width: 767px) ONLY. Applying overflow-x:hidden
   globally would clip desktop carousels, dropdown menus,
   tooltips, and any element that intentionally overflows.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Named page-level wrappers */
    .xrf,
    .xot-ent,
    .xot-take-feed,
    .lb-wrap,
    .xot-acc,
    .xot-cg,
    .xot-search,
    .xot-tw,
    .xot-sports {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Broad wildcard catch — mobile only so desktop is untouched */
    [class*="-wrap"],
    [class*="-inner"],
    [class*="-body"],
    [class*="-section"] {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Grids — never overflow on mobile */
    [style*="display:grid"],
    [style*="display: grid"] {
        min-width: 0;
    }

    /* Two-column grids that should stack on mobile */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════
   7. TEXT — Break long strings everywhere
═══════════════════════════════════════════════════ */
p, h1, h2, h3, h4, h5, h6,
.xrf-card,
[class*="-card"],
[class*="-title"],
[class*="-body"],
[class*="-text"] {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════
   8. HOME PAGE — Mobile fixes
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Hero */
    .xot-hero,
    .xot-home-hero {
        padding: 1.5rem var(--xot-pad);
        min-height: auto;
    }

    /* Section headings */
    .xot-sh,
    .section-header,
    [class*="-section-hd"],
    .xot-ent-sh,
    .xrf-ph,
    .xot-take-section-hd {
        padding: 0 var(--xot-pad);
        margin-bottom: var(--xot-gap);
    }

    /* Horizontal scroll rows — snappy, no overflow escape */
    .xot-scroll-row,
    [class*="-scroll"],
    [class*="-horizontal"] {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-left: var(--xot-pad);
        padding-right: var(--xot-pad);
    }

    .xot-scroll-row::-webkit-scrollbar,
    [class*="-scroll"]::-webkit-scrollbar {
        display: none;
    }

    /* Cards in scroll rows — snap to position */
    .xot-scroll-row > *,
    [class*="-scroll"] > * {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════
   9. ENTERTAINMENT PAGE — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Section padding */
    .xot-ent-section,
    .xot-ent-section--dark {
        padding-left: var(--xot-pad) !important;
        padding-right: var(--xot-pad) !important;
    }

    .xot-ent-inner {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* AI predictions + chart history — always stack */
    .xot-ent-pred-grid {
        grid-template-columns: 1fr !important;
        gap: var(--xot-gap-lg) !important;
    }

    /* Prediction cards */
    .xot-ent-pred-grid [style*="white-space:nowrap"],
    .xot-ent-pred-grid [style*="white-space: nowrap"] {
        white-space: normal !important;
    }

    /* Festival countdown units */
    .xot-ent-fest__countdown {
        gap: 0.4rem;
    }

    .xot-ent-fest__unit {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.3rem;
    }

    .xot-ent-fest__num {
        font-size: clamp(1rem, 5vw, 1.4rem);
    }

    /* Artist pills — wrap gracefully */
    .xot-ent-fest__artists {
        gap: 0.3rem;
    }

    .xot-ent-fest__artist {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }

    /* Chart rows */
    .xot-ent-chart__row {
        grid-template-columns: 24px 36px 1fr auto !important;
        gap: 0.4rem;
        padding: 0.55rem var(--xot-pad-sm);
    }

    /* Inline styles on entertainment sections — normalize padding */
    .xot-ent-section .xot-ent-inner > div[style*="padding"],
    .xot-ent-section--dark .xot-ent-inner > div[style*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════
   10. REACTIONS PAGE — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xrf {
        overflow-x: hidden;
        width: 100%;
    }

    .xrf-body {
        grid-template-columns: 1fr !important;
        padding: 1rem var(--xot-pad) !important;
        gap: var(--xot-gap-lg) !important;
        overflow: hidden;
    }

    .xrf-body aside {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .xrf-card {
        overflow: hidden;
        word-break: break-word;
    }

    .xrf-ph {
        padding: 1.25rem var(--xot-pad) 1rem;
    }

    .xrf-stats__inner {
        gap: 1.25rem;
        padding: 0 var(--xot-pad);
    }

    .xrf-prem__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════
   11. TAKE FEED — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xot-take-feed,
    .xot-feed-wrap {
        padding: 0 var(--xot-pad);
        overflow-x: hidden;
    }

    .xot-feed-card {
        overflow: hidden;
        word-break: break-word;
        max-width: 100%;
    }

    .xot-feed-compose {
        margin: 0.75rem 0;
    }
}

/* ═══════════════════════════════════════════════════
   12. SEARCH PAGE — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .search-results--grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem;
    }

    .search-result__img {
        height: 110px !important;
    }

    .search-result__title {
        font-size: 0.78rem !important;
    }

    .search-hero__input {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
    }
}

@media (max-width: 374px) {
    .search-results--grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════
   13. LEADERBOARD PAGE — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .lb-wrap {
        padding: 1rem var(--xot-pad) !important;
    }

    .lb-podium {
        gap: 0.5rem;
    }

    .lb-pod {
        padding: 1rem 0.5rem 0.75rem;
    }

    .lb-pod__avatar {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .lb-pod__name {
        font-size: 0.72rem;
    }

    .lb-row {
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════
   14. ACCOUNT PAGE — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xot-acc,
    [class*="xot-account"] {
        padding: 1rem var(--xot-pad);
        overflow-x: hidden;
    }
}

/* ═══════════════════════════════════════════════════
   15. CULTURE GAME — Mobile overrides
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xot-cg,
    .xot-game-wrap {
        padding: 1rem var(--xot-pad);
        overflow-x: hidden;
    }
}

/* ═══════════════════════════════════════════════════
   16. CARDS — Universal card fixes
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Any card with class containing -card */
    [class*="-card"] {
        max-width: 100%;
        overflow: hidden;
    }

    /* Tables inside cards — scroll instead of overflow */
    [class*="-card"] table,
    [class*="-box"] table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════
   17. TYPOGRAPHY — Responsive font sizes
═══════════════════════════════════════════════════ */
@media (max-width: 374px) {
    /* Extra small phones — scale down aggressively */
    :root {
        --xot-pad: 0.75rem;
        --xot-text-3xl: clamp(1.35rem, 6vw, 1.75rem);
    }
}

/* ═══════════════════════════════════════════════════
   18. UTILITY — Mobile-only helper classes
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
    .show-mobile-only { display: none !important; }
}

/* Full-width on mobile */
@media (max-width: 767px) {
    .mobile-full { width: 100% !important; max-width: 100% !important; }
    .mobile-stack { flex-direction: column !important; }
    .mobile-pad { padding: 0 var(--xot-pad) !important; }
    .mobile-no-pad { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ═══════════════════════════════════════════════════
   19. SCORE PILL (header) — Mobile positioning
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xot-score-pill {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ═══════════════════════════════════════════════════
   20. LEADERBOARD STRIP (reactions page)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .xot-lb-strip {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 0.5rem;
        padding: 0.65rem 0.85rem;
    }

    .xot-lb-strip__fans {
        overflow: hidden;
        flex: 1;
        min-width: 0;
    }

    .xot-lb-fan {
        flex-shrink: 0;
        max-width: 100px;
    }

    .xot-lb-fan__name {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}