/* ============================================================================
   MONDO AUDIO — Smart Player 2.0
   ----------------------------------------------------------------------------
   Izolare: toate regulile de aici încep cu .mn-p2 (playerul nou) sau cu
   .mn-audio-player--pagina (bara de jos a ACESTEI pagini). Niciun selector
   global de body / button / a / header. Fișierul e încărcat doar de
   page-mondo-audio.hbs, deci restul site-ului nu-l vede deloc.

   Paleta vine din randarea obligatorie a lui Vali:
     fundal player #07191E · gradient de sus #103A4A · card #142C32
     element activ #1D4148 · accent #39B5A5 · text #FFFFFF / #B5C5C8
     butonul mare de redare: alb cu pictogramă #07191E
   Fără verde Spotify, fără neon, fără mov.
   ============================================================================ */
.mn-p2{
    --p2-fundal:#07191E;
    --p2-sus:#103A4A;
    --p2-card:#142C32;
    --p2-activ:#1D4148;
    --p2-accent:#39B5A5;
    --p2-text:#FFFFFF;
    --p2-secundar:#B5C5C8;
    --p2-line:rgba(181,197,200,.16);
    position:fixed; inset:0; z-index:200;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    color:var(--p2-text);
    -webkit-font-smoothing:antialiased;
}
.mn-p2[hidden]{display:none}
html.mn-audio-ecran{overflow:hidden}
.mn-p2 *{box-sizing:border-box}
.mn-p2 :where(h1,h2,h3,h4,h5,h6){color:inherit;font-weight:700;letter-spacing:0}
.mn-p2 :where(p){margin:0}
.mn-p2 :where(button){font:inherit;color:inherit;background:0;border:0;padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
.mn-p2 :focus-visible{outline:2px solid var(--p2-accent);outline-offset:3px}

.mn-p2-fund{position:absolute;inset:0;background:rgba(4,12,15,.72);backdrop-filter:blur(6px)}
.mn-p2-cutie{
    position:relative;height:100%;display:flex;flex-direction:column;
    background:linear-gradient(180deg,var(--p2-sus) 0%,var(--p2-fundal) 46%,#061418 100%);
    animation:mn-p2-sus .22s ease-out;
    padding-bottom:env(safe-area-inset-bottom,0px);
}
@keyframes mn-p2-sus{from{transform:translateY(3%);opacity:.6}to{transform:none;opacity:1}}

/* ---------- antet ---------- */
.mn-p2-cap{display:flex;align-items:center;gap:10px;padding:10px 12px;flex:0 0 auto}
.mn-p2-sageata{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    font-size:3.20rem;color:var(--p2-secundar);line-height:1}
.mn-p2-sageata:hover{color:var(--p2-text);background:rgba(255,255,255,.07)}
.mn-p2-context{flex:1;min-width:0;margin:0;text-align:center;font-size:1.84rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--p2-secundar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- corp ---------- */
.mn-p2-corps{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.mn-p2-redare{display:flex;flex-direction:column;align-items:center;padding:6px 20px 4px;
    overflow-y:auto;overflow-x:hidden;flex:0 0 auto}
.mn-p2-coperta{width:min(300px,58vw);aspect-ratio:1/1;object-fit:cover;border-radius:14px;
    box-shadow:0 22px 54px rgba(0,0,0,.5);background:var(--p2-card)}
.mn-p2-coperta[hidden]{display:none}
.mn-p2-titlu{margin:18px 0 4px;font-size:clamp(2.40rem,4.6vw,3.20rem);line-height:1.24;font-weight:700;
    text-align:center;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mn-p2-meta{margin:0 0 14px;font-size:1.92rem;color:var(--p2-secundar);text-align:center}

/* ---------- bară de progres: atingere și tragere ---------- */
.mn-p2-bar{position:relative;width:100%;max-width:520px;height:22px;display:flex;align-items:center;
    cursor:pointer;touch-action:none}
.mn-p2-bar::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:4px;
    background:rgba(255,255,255,.18)}
.mn-p2-umplere{position:relative;display:block;height:4px;width:0;border-radius:4px;background:var(--p2-accent)}
.mn-p2-bar::after{content:"";position:absolute;left:0;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
    border-radius:50%;background:#fff;transform:translateX(var(--p2-grad,0));transition:opacity .15s;opacity:0}
.mn-p2-bar:hover::after,.mn-p2-bar:focus-visible::after{opacity:1}
.mn-p2-timp{display:flex;justify-content:space-between;width:100%;max-width:520px;margin-bottom:6px;
    font-variant-numeric:tabular-nums;font-size:1.76rem;color:var(--p2-secundar)}

/* ---------- transport ---------- */
.mn-p2-transport{display:flex;align-items:center;justify-content:center;gap:26px;margin:6px 0 4px}
.mn-p2-salt{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.08);font-size:3.20rem;color:var(--p2-text)}
.mn-p2-salt:hover{background:rgba(255,255,255,.16)}
.mn-p2-salt small{position:absolute;font-size:1.36rem;font-weight:700;letter-spacing:-.02em}
.mn-p2-play{width:76px;height:76px;border-radius:50%;background:#fff;color:#07191E;
    display:grid;place-items:center;font-size:3.52rem;line-height:1;
    box-shadow:0 10px 26px rgba(0,0,0,.42)}
.mn-p2-play:hover{transform:scale(1.04)}

/* ---------- controale secundare ---------- */
.mn-p2-secundare{display:flex;justify-content:center;gap:6px;width:100%;max-width:520px;margin:8px 0 2px}
.mn-p2-secundare button{flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:5px;border-radius:12px;color:var(--p2-secundar)}
.mn-p2-secundare button:hover{background:rgba(255,255,255,.06);color:var(--p2-text)}
.mn-p2-secundare button>span,.mn-p2-secundare button>b{font-size:2.72rem;line-height:1}
.mn-p2-secundare button>em{font-style:normal;font-size:1.68rem;white-space:nowrap;overflow:hidden;
    max-width:100%;text-overflow:ellipsis}
.mn-p2-secundare button.activ{color:var(--p2-accent)}

/* ---------- taburi permanente ---------- */
.mn-p2-taburi{display:flex;gap:6px;width:100%;max-width:520px;margin:10px auto 0;padding:4px;
    background:rgba(255,255,255,.05);border-radius:999px}
.mn-p2-taburi button{flex:1;min-height:38px;border-radius:999px;font-size:1.84rem;font-weight:600;
    color:var(--p2-secundar);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.mn-p2-taburi button.activ{background:var(--p2-activ);color:#fff;box-shadow:inset 0 0 0 1px rgba(57,181,165,.55)}

/* ---------- panoul de conținut (coadă / descriere / articol) ---------- */
.mn-p2-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
    border-top:1px solid var(--p2-line);margin-top:10px}
.mn-p2-panou{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:10px 14px 26px}
.mn-p2-panou[hidden]{display:none}
.mn-p2-panou-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:2px 2px 10px}
.mn-p2-panou-cap h3{margin:0;font-size:2.08rem;font-weight:700;letter-spacing:.01em}
.mn-p2-mica{min-height:34px;padding:0 12px;border-radius:999px;background:rgba(57,181,165,.14);
    color:var(--p2-accent);font-size:1.76rem;font-weight:600;white-space:nowrap}
.mn-p2-mica:hover{background:rgba(57,181,165,.26)}

.mn-p2-piese{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mn-p2-piesa{display:grid;grid-template-columns:22px 44px minmax(0,1fr) 16px auto;align-items:center;gap:12px;
    min-height:62px;padding:7px 8px;border-radius:12px;cursor:pointer}
.mn-p2-piesa:hover{background:rgba(255,255,255,.06)}
.mn-p2-piesa.active{background:var(--p2-activ);box-shadow:inset 2px 0 0 var(--p2-accent)}
.mn-p2-nr{font-size:1.76rem;color:var(--p2-secundar);font-variant-numeric:tabular-nums;text-align:center}
.mn-p2-piesa.active .mn-p2-nr{color:var(--p2-accent)}
.mn-p2-mini{width:44px;height:44px;border-radius:8px;overflow:hidden;background:#0d2226;display:grid;
    place-items:center}
.mn-p2-mini img{width:100%;height:100%;object-fit:cover;display:block}
.mn-p2-mini b{font:700 1.60rem/1 ui-monospace,monospace;color:var(--p2-accent);letter-spacing:.06em}
.mn-p2-text{min-width:0}
.mn-p2-text b{display:block;font-size:2.00rem;font-weight:600;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-p2-text small{display:block;color:var(--p2-secundar);font-size:1.76rem;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-p2-ech{grid-column:4}
.mn-p2-opts{grid-column:5;width:34px;height:34px;border-radius:50%;color:var(--p2-secundar);font-size:2.24rem;line-height:1}
.mn-p2-opts:hover{background:rgba(255,255,255,.1);color:#fff}
.mn-p2-ech{display:flex;align-items:flex-end;gap:2px;height:16px;width:16px}
.mn-p2-ech i{flex:1;background:var(--p2-accent);border-radius:1px;animation:mn-p2-ech 1s ease-in-out infinite}
.mn-p2-ech i:nth-child(2){animation-delay:.18s}
.mn-p2-ech i:nth-child(3){animation-delay:.36s}
.mn-p2-ech i:nth-child(4){animation-delay:.54s}
@keyframes mn-p2-ech{0%,100%{height:4px}50%{height:16px}}
html:not(.mn-audio-ruleaza) .mn-p2-ech i{animation-play-state:paused;height:6px}

/* ---------- descriere ---------- */
.mn-p2-info{margin:0 0 10px;font-size:1.35rem;letter-spacing:.03em;color:#8FA6AA}
.mn-p2-rezumat{margin:0 0 14px;font-size:2.16rem;line-height:1.6;color:#E6EEEF}
.mn-p2-etichete{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.mn-p2-etichete li{padding:6px 12px;border-radius:999px;background:var(--p2-card);
    color:var(--p2-secundar);font-size:1.76rem}
.mn-p2-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
    border-radius:999px;background:rgba(57,181,165,.16);color:var(--p2-accent);
    font-size:1.92rem;font-weight:600;text-decoration:none}
.mn-p2-cta:hover{background:rgba(57,181,165,.3)}

/* ---------- articol în player ---------- */
.mn-p2-articol-stare{margin:8px 0;font-size:1.92rem;color:var(--p2-secundar)}
.mn-p2-articol{font-size:2.24rem;line-height:1.68;color:#E6EEEF}
.mn-p2-articol h2,.mn-p2-articol h3{font-size:2.48rem;line-height:1.3;margin:22px 0 8px;color:#fff}
.mn-p2-articol p{margin:0 0 14px}
.mn-p2-articol a{color:var(--p2-accent);text-decoration:underline}
.mn-p2-articol img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.mn-p2-articol blockquote{margin:14px 0;padding:4px 0 4px 14px;border-left:3px solid var(--p2-accent);
    color:var(--p2-secundar)}
.mn-p2-articol ul,.mn-p2-articol ol{padding-left:22px;margin:0 0 14px}
.mn-p2-articol figure{margin:12px 0}
.mn-p2-articol figcaption{font-size:1.76rem;color:var(--p2-secundar)}

/* ---------- ecranul 3: coada completă ---------- */
.mn-p2-coada{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
    background:#061418;animation:mn-p2-sus .2s ease-out;padding-bottom:env(safe-area-inset-bottom,0px)}
.mn-p2-coada[hidden]{display:none}
.mn-p2-coada-cap{display:flex;align-items:center;gap:12px;padding:12px 14px;
    border-bottom:1px solid var(--p2-line);flex:0 0 auto}
.mn-p2-coada-cap>button:first-child{width:44px;height:44px;border-radius:50%;font-size:2.88rem;
    color:var(--p2-secundar);display:grid;place-items:center}
.mn-p2-coada-cap>div{flex:1;min-width:0}
.mn-p2-coada-cap h3{margin:0;font-size:2.32rem}
.mn-p2-coada-cap p{margin:2px 0 0;font-size:1.76rem;color:var(--p2-secundar)}
.mn-p2-coada>.mn-p2-piese{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:8px 10px 30px;gap:2px}

/* ---------- oala de opțiuni (viteză / timer / episod) ---------- */
.mn-p2-oala{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end}
.mn-p2-oala[hidden]{display:none}
.mn-p2-oala-fund{position:absolute;inset:0;background:rgba(3,10,12,.66)}
.mn-p2-oala-cutie{position:relative;width:100%;background:#0E262B;border-radius:18px 18px 0 0;
    padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -14px 40px rgba(0,0,0,.5);max-height:72%;overflow-y:auto}
.mn-p2-oala-cutie h3{margin:0 0 10px;font-size:2.08rem}
.mn-p2-oala-optiuni{display:flex;flex-direction:column;gap:2px}
.mn-p2-optiune{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;border-radius:12px;
    font-size:2.08rem;text-align:left;color:#E6EEEF}
.mn-p2-optiune:hover{background:rgba(255,255,255,.07)}
.mn-p2-optiune.activa{color:var(--p2-accent);background:rgba(57,181,165,.12)}
.mn-p2-optiune small{margin-left:auto;font-size:1.68rem;color:var(--p2-secundar)}

/* ---------- eroare, meniu, confirmare ---------- */
.mn-p2-eroare{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin:0 14px 10px;padding:10px 12px;border-radius:12px;background:rgba(193,74,58,.18);
    box-shadow:inset 0 0 0 1px rgba(226,120,102,.4);font-size:1.92rem}
.mn-p2-eroare[hidden]{display:none}
.mn-p2-eroare>span{flex:1;min-width:160px}
.mn-p2-eroare button{min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.12);
    font-size:1.76rem;font-weight:600}
.mn-p2-eroare button:hover{background:rgba(255,255,255,.22)}
.mn-p2-meniu{position:absolute;right:14px;top:60px;z-index:5;width:min(300px,calc(100% - 28px));
    background:#0E262B;border-radius:14px;padding:12px;box-shadow:0 18px 44px rgba(0,0,0,.55);
    display:flex;flex-direction:column;gap:10px}
.mn-p2-meniu[hidden]{display:none}
.mn-p2-volum{display:flex;align-items:center;gap:10px;font-size:1.84rem;color:var(--p2-secundar)}
.mn-p2-volum input{flex:1;accent-color:var(--p2-accent)}
.mn-p2-meniu-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
    padding:0 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:1.92rem;
    text-decoration:none;color:#E6EEEF;text-align:left}
.mn-p2-meniu-opt b{color:var(--p2-secundar);font-weight:600;font-size:1.76rem}
.mn-p2-meniu-opt.activ,.mn-p2-meniu-opt:hover b{color:var(--p2-accent)}
.mn-p2-confirmare{position:absolute;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:6;
    margin:0;padding:10px 18px;border-radius:999px;background:#0E262B;font-size:1.92rem;
    box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
    max-width:88%}
.mn-p2-confirmare.arata{opacity:1;transform:translate(-50%,0)}

/* ============================================================================
   TABLETĂ ȘI DESKTOP — aceleași componente, așezate altfel: playerul în stânga,
   coada / descrierea / articolul în coloană din dreapta. Pe desktop playerul nu
   se întinde pe toată lățimea: rămâne o cutie de maximum 1100px.
   ============================================================================ */
@media (min-width:900px){
    .mn-p2{display:grid;place-items:center;padding:26px}
    .mn-p2-cutie{width:min(1100px,100%);height:min(880px,100%);border-radius:20px;overflow:hidden;
        box-shadow:0 40px 100px rgba(0,0,0,.6)}
    .mn-p2-corps{flex-direction:row;min-height:0}
    .mn-p2-redare{flex:0 0 clamp(340px,42%,470px);border-right:1px solid var(--p2-line);
        padding:10px 26px 12px;overflow-y:auto}
    .mn-p2-panel{border-top:0;margin-top:0}
    .mn-p2-coperta{width:min(320px,42vw)}
    .mn-p2-coada{border-radius:20px}
    .mn-p2-oala-cutie{border-radius:18px;margin:0 auto 18px;width:min(520px,calc(100% - 36px))}
    .mn-p2-oala{align-items:center;justify-content:center}
}
@media (min-width:900px) and (max-height:760px){
    .mn-p2-coperta{width:min(220px,30vh)}
    .mn-p2-play{width:66px;height:66px;font-size:3.04rem}
    .mn-p2-salt{width:48px;height:48px;font-size:2.72rem}
}

/* telefon pe orizontală: coperta se face mică, ca să rămână transportul pe ecran */
@media (max-width:899px) and (max-height:560px){
    .mn-p2-coperta{width:min(150px,26vh)}
    .mn-p2-titlu{margin-top:10px;font-size:2.24rem}
    .mn-p2-play{width:62px;height:62px;font-size:2.88rem}
    .mn-p2-salt{width:48px;height:48px}
    .mn-p2-secundare button{min-height:48px}
}

/* ============================================================================
   BARA DE JOS (mini-player) pe aceeași paletă ca playerul nou.
   doi selectori de clasă: regula .mn-audio-player din default.hbs vine DUPĂ
   acest fișier în document (link-ul e în body, <style>-ul temei după {{{body}}}).
   Pe telefon rămân doar coperta, titlul, ▶/❚❚ și săgeata de extindere — exact
   primul ecran din randare; restul controalelor se mută în playerul mare.
   ============================================================================ */
.mn-audio-player.mn-audio-player--pagina{
    background:linear-gradient(180deg,#0E262B,#07191E);
    border-top:1px solid rgba(57,181,165,.28);
    box-shadow:0 -12px 34px rgba(0,0,0,.42);
    color:#fff;
}
.mn-audio-player--pagina .mn-ap-info b{color:#fff}
.mn-audio-player--pagina .mn-ap-info span{color:#B5C5C8}
.mn-audio-player--pagina .mn-ap-fill{background:#39B5A5}
.mn-audio-player--pagina .mn-ap-btn.mn-ap-play{background:#fff;color:#07191E}
.mn-audio-player--pagina .mn-ap-btn{color:#B5C5C8}
.mn-audio-player--pagina .mn-ap-btn:hover{color:#fff}
.mn-audio-player--pagina .mn-ap-btn.mn-ap-fav.activ{color:#39B5A5}
.mn-audio-player--pagina .mn-ap-extinde-ico{color:#B5C5C8}
.mn-audio-player--pagina .mn-ap-timp{color:#B5C5C8}
.mn-audio-player--pagina .mn-ap-volum input{accent-color:#39B5A5}
.mn-audio-player--pagina .mn-ap-viteza{background:#0E262B;color:#B5C5C8;border-color:rgba(57,181,165,.3)}

@media (max-width:699px){
    /* randarea lasă în bară doar: copertă, titlu, ▶/❚❚, ⌃ — atât încape lizibil */
    .mn-audio-player--pagina .mn-ap-fav,
    .mn-audio-player--pagina .mn-ap-prev,
    .mn-audio-player--pagina .mn-ap-next,
    .mn-audio-player--pagina .mn-ap-close,
    .mn-audio-player--pagina .mn-ap-volum,
    .mn-audio-player--pagina .mn-ap-viteza,
    .mn-audio-player--pagina .mn-ap-timp{display:none}
    .mn-audio-player--pagina .mn-ap-break{display:none}
    .mn-audio-player--pagina .mn-ap-play{width:44px;height:44px;font-size:1.5rem}
    .mn-audio-player--pagina .mn-ap-extinde-ico{display:grid;place-items:center;width:34px;height:34px;
        font-size:1.6rem;opacity:1}
    /* indicatorul de progres devine o linie subțire, cât să se vadă unde ai rămas */
    .mn-audio-player--pagina .mn-ap-bara{flex:1 1 100%;order:9;height:14px;min-width:0;
        margin:-5px 0;touch-action:none}
}

/* cardurile „Continuă să asculți" primesc aceeași limbă vizuală */
.mn-audio-page .mn-audio-cont-card{border:1px solid #E8EBEA;border-radius:12px;padding:12px 14px;
    background:#fff;cursor:pointer}
.mn-audio-page .mn-audio-cont-card:hover{border-color:#39B5A5}
.mn-audio-page .mn-audio-cont-bara{display:block;height:4px;border-radius:4px;background:#E1E7E6;
    margin-top:8px;overflow:hidden}
.mn-audio-page .mn-audio-cont-bara>span{display:block;height:100%;background:#39B5A5}

@media (prefers-reduced-motion:reduce){
    .mn-p2-cutie,.mn-p2-coada{animation:none}
    .mn-p2-ech i{animation:none;height:8px}
    .mn-p2-play:hover{transform:none}
    .mn-p2-confirmare{transition:none}
}


/* ============================================================================
   13-oct-2026 (cererea lui Vali: „nu se vede cum trebuie pe mobil, dacă vreau
   să văd articolul nu mai încape, mă refer în player")
   1) taburile încap întregi pe telefon („În continuare" ieșea „În conti…");
   2) când citești Descriere/Articol, coperta și titlul se strâng → panoul
      câștigă ~180px de înălțime utilă;
   3) fără al doilea player în articolul din player (motorul îl lasă acum afară).
   ============================================================================ */
.mn-p2-articol .mn-audio{display:none!important}

@media (max-width:520px){
    .mn-p2-taburi{padding:4px;gap:4px}
    .mn-p2-taburi button{font-size:1.5rem;padding:0 8px;min-height:36px}
    .mn-p2-context{font-size:1.5rem;max-width:70%}
}
@media (max-width:381px){
    .mn-p2-taburi button{font-size:1.36rem;padding:0 6px}
}
@media (max-width:899px){
    .mn-p2:has([data-ma-panou-descriere]:not([hidden])) .mn-p2-coperta,
    .mn-p2:has([data-ma-panou-articol]:not([hidden])) .mn-p2-coperta{width:min(132px,34vw)}
    .mn-p2:has([data-ma-panou-descriere]:not([hidden])) .mn-p2-titlu,
    .mn-p2:has([data-ma-panou-articol]:not([hidden])) .mn-p2-titlu{
        font-size:2rem;margin:10px 0 0;-webkit-line-clamp:2}
    .mn-p2:has([data-ma-panou-descriere]:not([hidden])) .mn-p2-meta,
    .mn-p2:has([data-ma-panou-articol]:not([hidden])) .mn-p2-meta{margin-bottom:6px}
}

/* ============================================================================
   14-oct-2026, noaptea (Vali, poză de pe telefon): „nu se vede bine pe mobil —
   fă poza și titlul mai mici și aranjează să se vadă și puțin din playlist".
   Măsurat la 390×844: blocul de sus (copertă + titlu + transport) ocupa 649px,
   iar panoul cu playlistul rămânea cu 121px (un singur rând vizibil); la 360×780,
   73px. Acum coperta e mică, titlul mai mic, rândurile de jos mai strânse, iar
   panoul primește ~280px (3-4 rânduri din playlist).
   Bonus: atingerea copertei o ascunde/arată (cine vrea doar lista o poate strânge).
   ============================================================================ */
@media (max-width:899px){
    .mn-p2-redare{padding:2px 16px 2px}
    .mn-p2-coperta{width:min(146px,37vw);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
    .mn-p2-titlu{font-size:2.02rem;line-height:1.2;margin:10px 0 2px;-webkit-line-clamp:2}
    .mn-p2-meta{font-size:1.62rem;margin-bottom:6px}
    .mn-p2-bar{margin-bottom:0}
    .mn-p2-timp{font-size:1.5rem;margin-bottom:2px}
    .mn-p2-transport{gap:20px;margin:2px 0 2px}
    .mn-p2-transport .mn-p2-play{width:58px;height:58px;font-size:2.6rem}
    .mn-p2-transport .mn-p2-salt{width:44px;height:44px;font-size:2.4rem}
    .mn-p2-secundare{margin:4px 0 0;gap:4px}
    .mn-p2-secundare button{min-height:40px;font-size:1.42rem;gap:2px}
    .mn-p2-secundare button em{font-size:1.24rem}
    .mn-p2-taburi{margin-top:8px}
    .mn-p2-taburi button{min-height:34px}
    .mn-p2-panel{margin-top:6px}
    /* coperta strânsă de utilizator: doar lista rămâne */
    .mn-p2.ma-fara-coperta .mn-p2-coperta{display:none}
    .mn-p2.ma-fara-coperta .mn-p2-titlu{margin-top:4px}
    /* indicator vizual pe copertă (se vede doar la atingere, ca să nu încarce imaginea) */
    .mn-p2-coperta{position:relative}
}
@media (max-width:899px) and (max-height:700px){
    .mn-p2-coperta{width:min(112px,30vw)}
    .mn-p2-titlu{font-size:1.86rem}
}

/* butonul „Copertă ⌄/⌃": apare doar pe telefon, lângă categoria episodului */
.mn-p2-coperta-btn{display:none}
@media (max-width:899px){
    .mn-p2-meta{align-items:center;gap:8px}
    .mn-p2-coperta-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
        border:1px solid rgba(57,181,165,.35);background:rgba(57,181,165,.10);color:#B5C5C8;
        font-size:1.3rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .mn-p2-coperta-btn:hover{color:#fff;border-color:rgba(57,181,165,.6)}
    .mn-p2-coperta-btn b{font-size:1.35rem}
}

/* 14-oct-2026 (Vali): pe telefon bara de jos rămâne fără buton de închidere (era ascuns „✕"),
   deci nu se putea scăpa de player decât din meniul ecranului mare. Îl readucem, mic. */
@media (max-width:699px){
    .mn-audio-player--pagina .mn-ap-btn.mn-ap-close{display:block;width:28px;height:28px;font-size:1.2rem}
}