/* VNN Listen — category / index grids and playlist wrapper */

.vnnl-wrap,
.vnnl-playlist {
    --vnnl-thumb-w: 200px;          /* override in your theme if the size changes */
    --vnnl-thumb-h: 293px;
    --vnnl-gap: 28px;
}

.vnnl-section { margin: 0 0 40px; }
.vnnl-section-title { margin: 0 0 16px; font-size: 22px; line-height: 1.3; }
.vnnl-section-title a { color: inherit; text-decoration: none; }
.vnnl-section-title a:hover { text-decoration: underline; }

/* ── Thumbnail grid: at most 3 across ─────────────────────────── */

.vnnl-grid {
    display: grid;
    grid-template-columns: repeat(3, var(--vnnl-thumb-w));
    justify-content: start;
    gap: var(--vnnl-gap) 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.vnnl-grid.vnnl-cols-1 { grid-template-columns: var(--vnnl-thumb-w); }
.vnnl-grid.vnnl-cols-2 { grid-template-columns: repeat(2, var(--vnnl-thumb-w)); }

.vnnl-incomplete { margin: 32px 0 16px; font-size: 18px; line-height: 1.3; }

.vnnl-card { margin: 0; padding: 0; text-align: center; width: var(--vnnl-thumb-w); }
.vnnl-card::marker { content: none; }

.vnnl-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vnnl-thumb {
    display: block;
    width: var(--vnnl-thumb-w);
    height: var(--vnnl-thumb-h);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #888;
    background: #eee;
}
.vnnl-thumb .vnnl-thumb-img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: fill;
}
.vnnl-thumb-empty { display: block; width: 100%; height: 100%; background: #ddd; }
.vnnl-card a:hover .vnnl-thumb { border-color: #333; }

.vnnl-card-title {
    display: block;
    margin-top: 8px;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
}
.vnnl-card-sub {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
}
.vnnl-card a:hover .vnnl-card-title { text-decoration: underline; }

/* ── Playlist page ────────────────────────────────────────────── */

.vnnl-back { margin: 0 0 12px; font-size: 13px; }
.vnnl-back a { color: #666; text-decoration: none; }
.vnnl-back a:hover { color: #222; }

.vnnl-playlist-desc { margin: 0 0 16px; color: #666; font-size: 14px; }
.vnnl-track-count { margin: 8px 0 0; font-size: 12px; color: #999; }
.vnnl-empty { color: #aaa; font-size: 14px; padding: 24px 0; }

/* fixed-size thumbnails: drop to 2 then 1 column when the screen can't fit 3 / 2 */
@media (max-width: 720px) {
    .vnnl-grid { grid-template-columns: repeat(2, var(--vnnl-thumb-w)); justify-content: start; }
}
@media (max-width: 460px) {
    .vnnl-grid { grid-template-columns: var(--vnnl-thumb-w); justify-content: start; }
}