/* ===============================================================
   BTV — MOBILE PENTAGON ROLODEX (v4.1 FINAL)
   Full-screen cinematic mobile cards
   =============================================================== */

/* Hidden on desktop/tablet */
.btv-mobile-rolodex {
    display: none !important;
    overflow: visible !important;
}

/* ===============================================================
   MOBILE MODE (≤ 768px)
   =============================================================== */
@media (max-width: 768px) {

    /* -----------------------------------------------------------
       DISABLE DESKTOP HERO
       ----------------------------------------------------------- */
    .btv-pentagon-frame,
    .btv-pentagon-hubs,
    .btv-parallax-layer,
    .btv-scroll-indicator {
        display: none !important;
    }

    /* -----------------------------------------------------------
       ROLODEX WRAPPER (visible on mobile)
       ----------------------------------------------------------- */
    .btv-mobile-rolodex {
        display: block !important;
        width: 100%;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 40;
    }

    /* -----------------------------------------------------------
       TRACK — horizontal scroller
       ----------------------------------------------------------- */
    .btv-roll-track {
    display: flex;
    flex-direction: row;
    align-items: center;

    height: 780px !important; /* stable viewport container */

    overflow-x: auto;
    overflow-y: visible !important;

    /* IMPORTANT: Disable native snap so JS can take control */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;

    padding: 0 32px;
    gap: 40px;
    position: relative;

    /* KEEP THESE — they ensure the first/last card can center */
    padding-left: calc((100vw - 280px) / 2) !important;
    padding-right: calc((100vw - 280px) / 2) !important;
   } 


    /* tiny extra space so last card doesn’t get squashed */
    .btv-roll-track::after {
        content: "";
        flex: 0 0 60px;
    }

    /* Hide scrollbars */
    .btv-roll-track::-webkit-scrollbar {
        display: none;
    }

    /* Dragging state – disable cards while dragging ONLY */
    .btv-roll-track.dragging {
        scroll-snap-type: none !important;
    }
    

    /* -----------------------------------------------------------
       CARD — anchor, full-height, cinematic
       ----------------------------------------------------------- */
    .btv-roll-card {
        scroll-snap-align: center;

        /* make anchor behave like card */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        width: 300px;
        flex: 0 0 300px;
        height: 625px !important;

        margin-right: -20px; /* overlap neighbours slightly */

        background: rgba(10,10,10,1);
        border-radius: 12px;
        border: 1px solid var(--btv-silver);
        box-shadow: 0 0 22px rgba(0,0,0,0.45);
        backface-visibility: hidden;
        transform-style: preserve-3d;

        padding: 24px 0 28px;

        text-decoration: none;
        color: inherit;

        opacity: 0.65;
        transform: scale(0.90);
        filter: blur(1px);

        transition:
            transform 0.35s ease,
            opacity 0.35s ease,
            filter 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* Active card floats forward */
    .btv-roll-card.active {
        transform: scale(1.05) translateZ(20px);
        opacity: 1 !important;
        filter: blur(0);
        z-index: 20;
    }

    /* Inactive cards — ghosted in background */
    .btv-roll-card:not(.active) {
        opacity: 0.55;
        filter: blur(1.5px);
        transform: scale(0.88) translateY(4px);
        background: rgba(10,10,10,0.65);
    }

    /* -----------------------------------------------------------
       IMAGE (top of card) — centered circle
       ----------------------------------------------------------- */
    .btv-roll-image {
        display: block;
        width: 240px;
        height: 240px;
        border-radius: 50%;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        margin: 0 auto 20px;  /* <-- hard centre */

        border: 2px solid var(--btv-silver);
        box-shadow: 0 0 24px rgba(255,255,255,0.18);
        flex-shrink: 0;
    }

    /* Hub-specific images */
    .hub-ssp-card .btv-roll-image {
        background-image: url('/wp-content/uploads/2025/11/metalicDisk-hangar-violetHue.png');
    }
    .hub-antiquity-card .btv-roll-image {
        background-image: url('/wp-content/uploads/2025/12/stoneHead-Mars.png');
    }
    .hub-abductions-card .btv-roll-image {
        background-image: url('/wp-content/uploads/2025/12/grey-1.png');
    }
    .hub-cryptids-card .btv-roll-image {
        background-image: url('/wp-content/uploads/2025/12/Bigfoot-Hiding-Behind-Tree.png');
    }
    .hub-conscious-card .btv-roll-image {
        background-image: url('/wp-content/uploads/2025/12/Meditation-and-consciousness.png');
    }

    /* -----------------------------------------------------------
       TITLES
       ----------------------------------------------------------- */
    .btv-roll-title {
        font-family: var(--btv-font-head);
        font-size: 1.05rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--btv-silver);
        text-align: center;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    /* -----------------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------------- */
    .btv-roll-desc {
        font-family: var(--btv-font-body);
        color: var(--btv-silver);
        opacity: 0.85;
        font-size: 0.85rem;
        padding: 0 20px;
        line-height: 1.55;
        text-align: center;
        flex-shrink: 0;
    }

    /* -----------------------------------------------------------
       CATEGORY COLOR GLOW (active)
       ----------------------------------------------------------- */
    .hub-ssp-card.active {
        border-color: var(--btv-ssp);
        box-shadow: 0 0 32px var(--btv-ssp);
    }
    .hub-antiquity-card.active {
        border-color: var(--btv-antiquity);
        box-shadow: 0 0 32px var(--btv-antiquity);
    }
    .hub-abductions-card.active {
        border-color: var(--btv-abductions);
        box-shadow: 0 0 32px var(--btv-abductions);
    }
    .hub-cryptids-card.active {
        border-color: var(--btv-cryptids);
        box-shadow: 0 0 32px var(--btv-cryptids);
    }
    .hub-conscious-card.active {
        border-color: var(--btv-conscious);
        box-shadow: 0 0 32px var(--btv-conscious);
    }
}

/* ===========================================================
   ULTRA-SMALL DEVICES FIX (≤ 390px width)
   =========================================================== */
@media (max-width: 390px) {

    .btv-roll-card {
        width: 240px !important;
        flex: 0 0 240px !important;
        height: 500px !important;
        padding: 20px 0 24px;
    }

    .btv-roll-image {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto 18px;
    }

    .btv-roll-title {
        font-size: 0.90rem !important;
        letter-spacing: 1.6px;
    }

    .btv-roll-desc {
        font-size: 0.78rem !important;
        line-height: 1.35;
        padding: 0 12px;
    }

    .btv-roll-track {
        height: 550px !important;
    }
}