/* ══════════════════════════════════════════
   EDITOR'S PICK CARD
══════════════════════════════════════════ */

.mre-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--mr-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ── Hero ──────────────────────────────── */
.mre-hero { position: relative; background: #1a1208; }

.mre-thumb-wrap { position: relative; display: block; cursor: pointer; }

.mre-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    opacity: .82;
}

.mre-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10,8,5,.18) 0%,
        rgba(10,8,5,.05) 40%,
        rgba(10,8,5,.55) 75%,
        rgba(10,8,5,.80) 100%
    );
}

/* Editor's Pick badge — top-left */
.mre-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(15,12,8,.72);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
}

/* Large play circle — centered */
.mre-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 62px; height: 62px;
    background: rgba(255,255,255,.92);
    border: none; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #1a1208;
    box-shadow: 0 2px 12px rgba(0,0,0,.28);
    transition: background .15s, transform .15s;
    padding: 0; margin: 0;
}
.mre-play-btn svg { margin-left: 3px; }
.mre-play-btn:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

/* Artist name + meta — bottom-left */
.mre-hero-info {
    position: absolute;
    bottom: 18px; left: 20px; right: 20px;
    pointer-events: none;
}
.mre-hero-title {
    font-family: var(--mr-serif, Georgia, 'Times New Roman', serif);
    font-size: 1.55rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.mre-hero-meta {
    font-size: .85rem;
    color: rgba(255,255,255,.78);
    margin-top: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* ── Inline player (replaces thumbnail) ─ */
.mre-player-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}
.mre-player-wrap iframe,
.mre-player-wrap #mre-yt-placeholder {
    display: block;
    width: 100%; height: 100%;
    border: 0;
}
/* When player is active, hero info fades out (it's behind the iframe) */

/* ── Setlist ────────────────────────────── */
.mre-setlist {
    border-top: 1px solid rgba(0,0,0,.07);
}

.mre-setlist-head {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8c7f71;
    padding: 14px 20px 10px;
}

/* Scrollable song list — shows ~4-5 rows, scrolls for more */
.mre-song-list {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(140,127,113,.3) transparent;
}
.mre-song-list::-webkit-scrollbar { width: 5px; }
.mre-song-list::-webkit-scrollbar-track { background: transparent; }
.mre-song-list::-webkit-scrollbar-thumb { background: rgba(140,127,113,.35); border-radius: 3px; }

/* Song row */
.mre-song {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    gap: .75rem;
    align-items: center;
    padding: 11px 20px;
    border-top: 0.5px solid rgba(0,0,0,.07);
    cursor: pointer;
    transition: background .1s;
}
.mre-song:hover { background: rgba(26,21,18,.03); }

/* Type badge — fixed width so all badges are the same size and song titles align */
.mre-type {
    display: block;
    width: 100%;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    background: #ede9e4;
    color: #5a4a3a;
}
.mre-type-none { background: transparent; }
/* Per-type colours */
.mre-type-varnam    { background: #f5e8d6; color: #7a4a1a; }
.mre-type-kriti     { background: #dde2f2; color: #3a4a8c; }
.mre-type-alapana   { background: #d4e8df; color: #2a5c48; }
.mre-type-tani      { background: #e5d8f0; color: #5a3878; }
.mre-type-mangalam  { background: #f2e8d5; color: #7a5a2a; }
.mre-type-tillana   { background: #f2ddd8; color: #8a3520; }
.mre-type-pallavi   { background: #dce8f5; color: #2a4a7a; }
.mre-type-javali    { background: #f0dce8; color: #7a2a58; }
.mre-type-thukkada         { background: #e8f0dc; color: #4a6a2a; }
.mre-type-guided-listening { background: #d8eef0; color: #1a5a60; }

/* Song info */
.mre-song-info { min-width: 0; }
.mre-song-title {
    font-size: .95rem;
    font-weight: 500;
    color: #1a1512;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mre-song-sub {
    font-size: .8rem;
    color: #b0712a;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Timestamp */
.mre-song-ts {
    font-size: .8rem;
    color: #8c7f71;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 480px) {
    .mre-hero-title { font-size: 1.2rem; }
    .mre-song { grid-template-columns: 95px 1fr 50px; gap: .5rem; padding: 10px 14px; }
    .mre-setlist-head { padding: 12px 14px 8px; }
    .mre-type { font-size: .58rem; padding: 3px 5px; }
}