/* Our Playlists page - neon green theme (shell colours come from the variables below) */
:root {
    --accent: #1df08a;
    --accent-start: #5bffb4;
    --accent-end: #00c466;
    --accent-rgb: 29,240,138;
}

.content.pl-page {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4vh 5vh 6vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #000;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.80) 0%, rgba(0,8,4,0.86) 100%),
        url("https://itxrecordlabel.in/Itx-jungle-logo.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #e9f5ee;
    font-family: 'Outfit', 'Oswald', sans-serif;
}
.content.pl-page::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 769px) and (min-height: 501px) {
    .content.pl-page { background-attachment: fixed; }
}

.pl-wrap { max-width: 178vh; margin: 0 auto; }

/* ---- hero ---- */
.pl-eyebrow { display: flex; align-items: center; gap: 1.2vh; font: 600 1.45vh 'Outfit', sans-serif; letter-spacing: 0.45vh; color: #fff; }
.pl-dot { width: 1.1vh; height: 1.1vh; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.4vh var(--accent); }
.pl-title { margin: 1.6vh 0 1.8vh; font: 700 7.4vh/0.98 'Oswald', sans-serif; text-transform: uppercase; color: #fff; letter-spacing: 0.1vh; }
.pl-title span { color: var(--accent); text-shadow: 0 0 2.4vh rgba(var(--accent-rgb), 0.45); }
.pl-lead { margin: 0; max-width: 78vh; font: 400 1.6vh/1.6 'Outfit', sans-serif; color: #f1f7f3; }

/* ---- panel ---- */
.pl-panel {
    margin-top: 4vh; padding: 2vh;
    border: 0.18vh solid rgba(var(--accent-rgb), 0.55); border-radius: 1.8vh;
    background: rgba(2, 10, 6, 0.55);
    -webkit-backdrop-filter: blur(0.5vh); backdrop-filter: blur(0.5vh);
    box-shadow: 0 0 4vh rgba(var(--accent-rgb), 0.10), inset 0 0 3vh rgba(var(--accent-rgb), 0.05);
}
.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 2vh; margin-bottom: 2vh; }
.pl-count { font: 500 1.35vh 'Outfit', sans-serif; letter-spacing: 0.25vh; color: #9bb3a6; text-transform: uppercase; }

/* ---- platform dropdown ---- */
.pl-select { position: relative; }
.pl-select-btn {
    display: flex; align-items: center; gap: 1.3vh; min-width: 21vh; padding: 1.2vh 1.6vh;
    background: #0a0f0c; color: var(--accent);
    border: 0.15vh solid rgba(var(--accent-rgb), 0.35); border-radius: 1vh;
    font: 600 1.6vh 'Outfit', sans-serif; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pl-select-btn:hover, .pl-select-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 1.6vh rgba(var(--accent-rgb), 0.25); }
.pl-select-name { flex: 1; text-align: left; }
.pl-chev { width: 2vh; height: 2vh; color: #cfe9db; transition: transform .15s; }
.pl-select-btn[aria-expanded="true"] .pl-chev { transform: rotate(180deg); }
.pl-ic { width: 3.2vh; height: 3.2vh; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pl-ic img { width: 1.9vh; height: 1.9vh; filter: brightness(0); }

.pl-select-menu {
    position: absolute; z-index: 20; top: calc(100% + 0.8vh); left: 0; min-width: 100%;
    margin: 0; padding: 0.6vh; list-style: none;
    background: #070b09; border: 0.15vh solid rgba(var(--accent-rgb), 0.45); border-radius: 1.2vh;
    box-shadow: 0 1.5vh 4vh rgba(0,0,0,0.7);
}
.pl-select-menu[hidden] { display: none; }
.pl-opt { display: flex; align-items: center; gap: 1.2vh; padding: 1vh 1.2vh; border-radius: 0.8vh; cursor: pointer; font: 500 1.5vh 'Outfit', sans-serif; color: #e9f5ee; white-space: nowrap; }
.pl-opt:hover, .pl-opt:focus-visible, .pl-opt[aria-selected="true"] { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); outline: none; }
.pl-opt .pl-ic { width: 2.8vh; height: 2.8vh; }
.pl-opt .pl-ic img { width: 1.6vh; height: 1.6vh; }
.pl-opt-n { margin-left: auto; padding-left: 2vh; font-size: 1.2vh; color: #7f978a; }

/* ---- cards ---- */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(27vh, 1fr)); gap: 2vh; }

.pl-card {
    position: relative; display: flex; flex-direction: column;
    background: #090c0a; color: #fff;
    border: 0.12vh solid rgba(255,255,255,0.14); border-radius: 1vh; overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    animation: plIn .45s ease both;
}
.pl-card:hover, .pl-card:focus-within { transform: translateY(-0.7vh); border-color: var(--accent); box-shadow: 0 1vh 3vh rgba(var(--accent-rgb), 0.22); }
@keyframes plIn { from { opacity: 0; transform: translateY(1.4vh); } to { opacity: 1; transform: none; } }

.pl-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; outline: none; }
.pl-cover { position: relative; aspect-ratio: 6 / 5; background: #050706; overflow: hidden; }
.pl-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pl-card:hover .pl-cover > img { transform: scale(1.05); }
.pl-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.25), #050706 70%); color: var(--accent); font: 700 5vh 'Oswald', sans-serif; }
.pl-badge { position: absolute; top: 1.2vh; right: 1.2vh; width: 3.2vh; height: 3.2vh; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 1.2vh rgba(0,0,0,0.5); }
.pl-badge img { width: 1.9vh; height: 1.9vh; filter: brightness(0); }

.pl-prev {
    position: absolute; left: 1.2vh; top: 1.2vh; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.7vh; padding: 0.7vh 1.2vh;
    background: rgba(0,0,0,0.72); color: var(--accent); border: 0.12vh solid rgba(var(--accent-rgb), 0.6); border-radius: 2vh;
    font: 600 1.15vh 'Outfit', sans-serif; letter-spacing: 0.15vh; cursor: pointer;
    -webkit-backdrop-filter: blur(0.4vh); backdrop-filter: blur(0.4vh);
}
.pl-prev:hover { background: var(--accent); color: #04100a; }

.pl-body { display: flex; flex-direction: column; gap: 0.9vh; padding: 1.8vh 1.8vh 1.6vh; flex: 1; }
.pl-body h3 { margin: 0; font: 700 2vh/1.15 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1vh; }
.pl-desc { margin: 0; font: 400 1.35vh/1.5 'Outfit', sans-serif; color: #d3dcd7; min-height: 4.05vh; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pl-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 1.2vh; }
.pl-play { display: inline-flex; align-items: center; gap: 0.9vh; font: 600 1.3vh 'Outfit', sans-serif; letter-spacing: 0.2vh; color: var(--accent); }
.pl-play svg { width: 2.5vh; height: 2.5vh; }
.pl-fol { text-align: right; font: 700 1.4vh/1.2 'Outfit', sans-serif; color: #fff; }
.pl-fol small { display: block; font: 500 0.95vh 'Outfit', sans-serif; letter-spacing: 0.2vh; color: #aebbb4; }

.pl-skel { aspect-ratio: 6 / 7.6; border-radius: 1vh; background: linear-gradient(100deg, #0c120f 30%, #16211b 50%, #0c120f 70%); background-size: 200% 100%; animation: plSh 1.3s linear infinite; }
@keyframes plSh { to { background-position: -200% 0; } }
.pl-empty { grid-column: 1 / -1; padding: 7vh 2vh; text-align: center; color: #8ea398; font: 500 1.7vh 'Outfit', sans-serif; border: 0.15vh dashed rgba(var(--accent-rgb), 0.3); border-radius: 1.2vh; }

/* ---- Spotify preview modal ---- */
.pl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.78); padding: 2vh; }
.pl-modal[hidden] { display: none; }
.pl-modal-box { position: relative; width: min(64vh, 94vw); background: #070b09; border: 0.15vh solid rgba(var(--accent-rgb), 0.5); border-radius: 1.6vh; padding: 2.4vh 2vh 2vh; box-shadow: 0 0 5vh rgba(var(--accent-rgb), 0.2); }
.pl-modal-box iframe { display: block; width: 100%; height: 35.2vh; min-height: 300px; border: 0; border-radius: 1.2vh; background: #000; }
.pl-modal-title { margin: 0 4vh 1.4vh 0; font: 700 2vh 'Oswald', sans-serif; text-transform: uppercase; color: #fff; }
.pl-modal-x { position: absolute; top: 1.2vh; right: 1.4vh; width: 3.6vh; height: 3.6vh; border: 0; border-radius: 50%; background: #16211b; color: #fff; font: 400 2.6vh/1 'Outfit', sans-serif; cursor: pointer; }
.pl-modal-x:hover { background: var(--accent); color: #04100a; }
.pl-modal-open { display: inline-block; margin-top: 1.6vh; color: var(--accent); font: 600 1.4vh 'Outfit', sans-serif; letter-spacing: 0.15vh; text-decoration: none; }
.pl-modal-open:hover { text-decoration: underline; }

/* ---- mobile ---- */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .content.pl-page { padding: 4% 4% 8%; }
    .pl-title { font-size: min(13vw, 56px); }
    .pl-eyebrow { font-size: 12px; letter-spacing: 3px; }
    .pl-lead { font-size: min(3.9vw, 15px); }
    .pl-panel { padding: 3%; margin-top: 24px; border-radius: 14px; }
    .pl-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .pl-select-btn { width: 100%; font-size: 15px; padding: 11px 14px; border-radius: 10px; }
    .pl-ic { width: 28px; height: 28px; } .pl-ic img { width: 16px; height: 16px; }
    .pl-select-menu { width: 100%; border-radius: 12px; }
    .pl-opt { font-size: 15px; padding: 11px 12px; } .pl-opt-n { font-size: 12px; }
    .pl-count { font-size: 11px; }
    .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pl-body { padding: 10px; gap: 6px; }
    .pl-body h3 { font-size: 15px; } .pl-desc { font-size: 11.5px; min-height: 0; -webkit-line-clamp: 2; }
    .pl-play { font-size: 10px; } .pl-play svg { width: 20px; height: 20px; }
    .pl-fol { font-size: 12px; } .pl-fol small { font-size: 8px; }
    .pl-badge { width: 26px; height: 26px; top: 8px; right: 8px; } .pl-badge img { width: 15px; height: 15px; }
    .pl-prev { font-size: 10px; padding: 5px 9px; left: 8px; top: 8px; }
    .pl-modal-box { width: 94vw; } .pl-modal-title { font-size: 16px; } .pl-modal-open { font-size: 13px; }
}
@media (max-width: 420px) { .pl-grid { grid-template-columns: 1fr; } }