/* Styles only for vj_playlist templates */
.vj-toolbar { display:flex; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); }
.vj-toolbar .vj-mode { display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:4px; }
.vj-split { display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 48px); }
.vj-left { background:#121212; border-right:1px solid var(--line); overflow:auto; }
.vj-left ul { list-style:none; margin:0; padding:0; }
.vj-left li { padding:10px 12px; border-bottom:1px solid var(--line); }
.vj-left li.is-active { background:#1a1a1a; }
.vj-right { padding:16px; }
#vj-player-ssr iframe { width:100%; aspect-ratio:16/9; border:0; }


/* Active item highlight */
.vj-rail-item.is-active {
    background: #1f1f1f;
    border-left: 3px solid #66aaff;
}
.vj-rail-item { transition: background-color .15s ease; }
.vj-rail-item:hover { background: #191919; }

/* Layout: desktop = two columns */
.vj-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 48px);
}
.vj-left {
    background: #121212;
    border-right: 1px solid var(--line, #1e1e1e);
    overflow: auto;
}
.vj-left ul { list-style: none; margin: 0; padding: 0; }
.vj-left li { padding: 10px 12px; border-bottom: 1px solid var(--line, #1e1e1e); cursor: pointer; }
.vj-right { padding: 16px; }

/* Player sizing */
#vj-player-ssr iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Mobile: stack video first, list under it; video full width */
@media (max-width: 768px) {
    .vj-split {
        display: flex;
        flex-direction: column;
    }
    .vj-right { order: 1; padding: 12px; }
    .vj-left  { order: 2; max-height: 50vh; } /* let list scroll if long */
    .vj-left li { padding: 12px 14px; }
    .vj-toolbar { position: sticky; top: 0; background: #000; z-index: 5; }
    #vj-player-ssr iframe { aspect-ratio: 16 / 9; }
}

/* Default player box (landscape) */
#vj-player-ssr iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Facebook portrait-friendly: make the player tall */
#vj-player-ssr.vj-p-facebook iframe {
    aspect-ratio: 9 / 16;       /* tall box so nothing is cropped */
    max-height: 85vh;           /* keep it sensible on desktop */
}

/* Tweets with video often need more height than 16:9 */
#vj-player-ssr.vj-p-twitter iframe {
    aspect-ratio: 4 / 5;        /* comfy vertical */
    max-height: 85vh;
}

/* SoundCloud is an audio player: shorter is nicer */
#vj-player-ssr.vj-p-soundcloud iframe {
    aspect-ratio: auto;
    height: 166px;              /* standard SC player height */
}

/* Mobile: keep it full-width and stack list below */
@media (max-width: 768px) {
    #vj-player-ssr.vj-p-facebook iframe,
    #vj-player-ssr.vj-p-twitter iframe {
        max-height: 80vh;         /* use most of the screen */
    }
}
/* Default: landscape */
#vj-player-ssr iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Let JS manage height for portrait-ish providers */
#vj-player-ssr.vj-p-facebook iframe,
#vj-player-ssr.vj-p-twitter iframe {
    aspect-ratio: auto;   /* disable ratio */
    height: auto;         /* JS will set pixel height */
    max-height: 85vh;     /* safety on desktop */
}

@media (max-width: 768px) {
    #vj-player-ssr.vj-p-facebook iframe,
    #vj-player-ssr.vj-p-twitter iframe {
        max-height: 80vh;
    }
}
/* Default player box (landscape) */
#vj-player-ssr iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Facebook: let JS control real pixel height */
#vj-player-ssr.vj-p-facebook iframe {
    aspect-ratio: auto;
    height: auto;
    max-height: 100vh;  /* safety; JS will set explicit px height */
}