/* ============================================================================
   MONDO AUDIO — stilurile secțiunii „Colecții pentru tine" (13-oct-2026)
   Singura parte păstrată din redesign: restul paginii folosește designul anterior
   (CSS-ul lui stă în `default.hbs`, neatins). Toate regulile sunt izolate sub
   `.ma-colectii` / `.ma-col`, deci nu pot afecta alte pagini sau alte secțiuni.
   ============================================================================ */
.ma-colectii{
    --ma-card:#FFFFFF;
    --ma-ink:#101315;
    --ma-muted:#6B7275;      /* 4.6:1 pe fundalul paginii = AA (brief-ul cerea #747B7D, care dă 4.05:1) */
    --ma-accent:#087F77;
    --ma-accent-soft:#E3F3F0;
    --ma-line:#E8EBEA;
    --ma-radius:14px;
    --ma-umbra:0 1px 2px rgba(16,19,21,.04), 0 8px 24px rgba(16,19,21,.05);
    margin:26px 0 30px;
}
.ma-colectii *{box-sizing:border-box}
.ma-colectii h2,.ma-colectii h3{font-family:var(--mn-serif,Georgia,serif)}
.ma-rand-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ma-rand-head h2{margin:0;font-size:clamp(2rem,2.4vw,2.6rem);letter-spacing:-.02em;color:var(--ma-ink)}
.ma-vezi{color:var(--ma-accent);font-weight:700;font-size:1.35rem;text-decoration:none}
.ma-vezi:hover{text-decoration:underline}
.ma-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;
    scrollbar-width:none}
.ma-carousel::-webkit-scrollbar{display:none}
.ma-col{flex:0 0 min(62vw,214px);scroll-snap-align:start}
.ma-col-cover{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;
    border-radius:var(--ma-radius);overflow:hidden;background:#dfe6e4;box-shadow:var(--ma-umbra)}
.ma-col-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.ma-col-cover:hover img{transform:scale(1.05)}
.ma-col-play{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:42px;height:42px;
    border-radius:50%;background:#fff;color:var(--ma-accent);font-size:1.5rem;box-shadow:0 6px 16px rgba(0,0,0,.22)}
.ma-col h3{margin:10px 0 2px;font-size:1.5rem;line-height:1.2;color:var(--ma-ink)}
.ma-col-meta{margin:0;color:var(--ma-muted);font-size:1.2rem}
/* listele ascunse din care playerul temei își construiește coada (nu se văd niciodată) */
.ma-col-lista{display:none!important}

@media (min-width:700px){
    .ma-carousel{gap:16px}
    .ma-col{flex:0 0 214px}
}
@media (min-width:1100px){
    .ma-col{flex:0 0 232px}
}
@media (prefers-reduced-motion:reduce){
    .ma-col-cover img{transition:none}
    .ma-col-cover:hover img{transform:none}
}

/* Playerul de jos nu mai are reguli aici: stilurile lui sunt în `assets/css/mondo-audio-player.css`
   (motorul nou scris seara de 13-oct: mini-player + player mare cu taburi + coadă). Blocul vechi de
   grilă pe 11 coloane pe care îl aveam aici se bătea cu noul markup (coperta și titlul sunt acum
   învelite în `.mn-ap-extinde`) și lăsa bara de progres lată de 0px pe desktop. */

/* ECrane mici: TOATE butoanele de transport pe UN rând — copertă, titlu, ⏮ ▶ ⏭ ✕ — iar timpul,
   bara și viteza pe rândul 2. Varianta anterioară (grid 5 coloane) lăsa „prev" singur pe rândul 2,
   în stânga, cu ▶ și ⏭ în dreapta sus: 7 poziții de y diferite măsurate la 390px și, pe telefon în
   profil pe orizontală (844×390), butoanele ajungeau la 753px distanță unul de celălalt.
   Aici rândurile se obțin cu flex-wrap + un element de spargere (.mn-ap-break, din șablon), deci
   nimic nu se suprapune și niciun buton nu rămâne orfan. */
@media (max-width:1099px){
    /* DOI selectori de clasă: regula „.mn-audio-player{bottom:0}" din default.hbs vine DUPĂ
       acest fișier în document (link-ul e în body, <style>-ul temei după {{{body}}}), deci cu o
       singură clasă ea câștiga și playerul se lipea de marginea ecranului, peste navigarea de
       jos — măsurat 13-oct: player bottom=844, dock top=778. */
    .mn-audio-player.mn-audio-player--pagina{left:8px;right:8px;bottom:74px;border-radius:14px 14px 0 0;
        border:1px solid rgba(255,255,255,.14)}
    .mn-audio-player--pagina .mn-audio-player-in{
        display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px 11px}
    /* — rândul 1: copertă + titlu + toate butoanele — */
    .mn-audio-player--pagina .mn-ap-cover{order:1;flex:0 0 40px;width:40px;height:40px}
    .mn-audio-player--pagina .mn-ap-info{order:2;flex:1 1 60px;min-width:0}
    .mn-audio-player--pagina .mn-ap-prev{order:3}
    .mn-audio-player--pagina .mn-ap-play{order:4}
    .mn-audio-player--pagina .mn-ap-next{order:5}
    .mn-audio-player--pagina .mn-ap-close{order:6}
    /* — schimbarea de rând — */
    .mn-audio-player--pagina .mn-ap-break{order:7;flex:1 0 100%;height:0;margin:0}
    /* — rândul 2: timp · bară · viteză — */
    .mn-audio-player--pagina .mn-ap-timp{order:8;flex:0 0 auto;display:flex;gap:4px;font-size:1.05rem}
    .mn-audio-player--pagina .mn-ap-bara{order:9;flex:1 1 120px}
    .mn-audio-player--pagina .mn-ap-viteza{order:10;flex:0 0 auto;display:block;padding:4px 5px;font-size:1.1rem}
    /* selector compus: regula generală .mn-ap-btn nu mai turnează butonul de redare (înainte
       play ieșea de aceeași mărime cu ⏮ și ⏭ pentru că veni după regula de 42px) */
    .mn-audio-player--pagina .mn-ap-btn{flex:0 0 auto;width:34px;height:34px;font-size:1.35rem}
    .mn-audio-player--pagina .mn-ap-btn.mn-ap-play{width:42px;height:42px;font-size:1.6rem}
    .mn-audio-player--pagina .mn-ap-btn.mn-ap-close{width:30px;height:30px;font-size:1.25rem}
    /* volumul se face din butoanele telefonului, iar playerul din articol nu are favorit */
    .mn-audio-player--pagina .mn-ap-fav,.mn-audio-player--pagina .mn-ap-volum{display:none}
    /* loc sub conținut pentru player (fixed) + navigarea fixă de jos (body are deja 70px pentru ea) */
    .mn-audio-page{padding-bottom:210px}
}

/* ECRANE FOARTE ÎNGUSTE (320-359px): fără strângerea asta butoanele nu mai încapeau toate pe
   primul rând și „close" cădea pe rândul 2 (măsurat la 320px: 145px înălțime, 2 rânduri) */
@media (max-width:359px){
    .mn-audio-player--pagina .mn-audio-player-in{gap:6px;padding:9px 10px 11px}
    .mn-audio-player--pagina .mn-ap-info{flex-basis:40px}
    .mn-audio-player--pagina .mn-ap-btn.mn-ap-play{width:38px;height:38px;font-size:1.5rem}
    .mn-audio-player--pagina .mn-ap-btn{width:32px;height:32px;font-size:1.3rem}
    .mn-audio-player--pagina .mn-ap-btn.mn-ap-close{width:28px;height:28px;font-size:1.2rem}
}

/* TELEFON PE ORIZONTALĂ (ex. 844×390): încape totul pe un singur rând — fără spargere, ✕ la capăt */
@media (max-width:1099px) and (max-height:520px){
    .mn-audio-player--pagina .mn-ap-break{display:none}
    .mn-audio-player--pagina .mn-ap-close{order:11}
    .mn-audio-player--pagina .mn-ap-info{flex:1 1 120px}
    .mn-audio-page{padding-bottom:150px}
}


/* ============================================================================
   ULTIMELE EPISOADE — față de player modern (13-oct-2026, cererea lui Vali)
   Rubrica a fost mutată exact sub „Colecții pentru tine" și a primit înfățișarea
   unui player de streaming: copertă, buton de redare care devine egalizator pe
   episodul care rulează, etichetă de categorie, durată reală și bară de progres
   pe rând. Toate regulile au prefix .mn-audio-page (doar pagina asta) și doi
   selectori acolo unde default.hbs (care vine după acest fișier în document)
   are reguli proprii pe aceleași clase.
   ============================================================================ */
.mn-audio-page .mn-audio-doua--sus{margin-top:10px}
.mn-audio-page .mn-audio-latest,
.mn-audio-page .mn-audio-top{
    background:#fff;border:1px solid #E8EBEA;border-radius:16px;padding:4px 8px 10px;
    box-shadow:0 1px 2px rgba(16,19,21,.04),0 10px 28px rgba(16,19,21,.05);align-self:start}
.mn-audio-page .mn-audio-latest .mn-audio-rand-head,
.mn-audio-page .mn-audio-top .mn-audio-rand-head{margin:14px 12px 8px}
.mn-audio-page .mn-audio-latest-lista{display:flex;flex-direction:column;padding:0 4px}

/* — rândul de player — */
.mn-audio-page .mn-audio-linie{
    position:relative;display:grid;grid-template-columns:52px 36px minmax(0,1fr) auto;
    gap:12px;align-items:center;padding:9px 10px;border:0;border-radius:12px;cursor:pointer;
    transition:background .18s ease}
.mn-audio-page .mn-audio-linie + .mn-audio-linie{box-shadow:0 -1px 0 rgba(16,19,21,.06)}
.mn-audio-page .mn-audio-linie:hover{background:#F4F7FB}
.mn-audio-page .mn-audio-linie:focus-visible{outline:2px solid #2e8fff;outline-offset:2px}

/* coperta episodului */
.mn-audio-page .mn-audio-linie-cover{
    position:relative;width:52px;height:52px;border-radius:10px;overflow:hidden;display:grid;
    place-items:center;background:linear-gradient(140deg,#101820,#25384d);flex:0 0 auto}
.mn-audio-page .mn-audio-linie-cover img{display:block;width:100%;height:100%;object-fit:cover}
.mn-audio-page .mn-audio-linie-cover b{font:700 1.1rem/1 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    color:#7FB4FF;letter-spacing:.08em}

/* butonul de redare: gol în repaus, albastru la hover / pe episodul care rulează */
.mn-audio-page .mn-audio-linie-play{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;padding:0;
    border:1px solid #D7DEE5;background:#fff;color:#101315;font-size:1.2rem;line-height:1;
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}
.mn-audio-page .mn-audio-linie:hover .mn-audio-linie-play{background:#2e8fff;border-color:#2e8fff;
    color:#fff;transform:scale(1.07)}

/* egalizatorul: apare doar pe episodul care rulează */
.mn-audio-page .mn-audio-eq{display:none;gap:2px;align-items:flex-end;height:14px}
.mn-audio-page .mn-audio-eq i{display:block;width:2px;height:4px;border-radius:1px;background:currentColor;
    animation:mn-eq .9s ease-in-out infinite}
.mn-audio-page .mn-audio-eq i:nth-child(2){animation-delay:.15s}
.mn-audio-page .mn-audio-eq i:nth-child(3){animation-delay:.3s}
.mn-audio-page .mn-audio-eq i:nth-child(4){animation-delay:.45s}
@keyframes mn-eq{0%,100%{height:4px}50%{height:14px}}

/* titlu + meta */
.mn-audio-page .mn-audio-linie-text{min-width:0}
.mn-audio-page .mn-audio-linie-text b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    white-space:normal;overflow:hidden;font-size:1.4rem;line-height:1.32;font-weight:600;color:#101315}
.mn-audio-page .mn-audio-linie-text small{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin-top:4px;color:#6B7275;font-size:1.1rem}
.mn-audio-page .mn-audio-linie-text em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;color:#1a5fc1;background:#EAF2FE;
    padding:2px 7px;border-radius:6px}
.mn-audio-page .mn-audio-linie-dur{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:1.15rem;color:#6B7275;font-variant-numeric:tabular-nums}

/* starea „rulează": fundal albastru pal, dungă de accent, egalizator, bară de progres */
.mn-audio-page .mn-audio-linie.ruleaza{background:rgba(46,143,255,.08);box-shadow:inset 3px 0 0 #2e8fff}
.mn-audio-page .mn-audio-linie.ruleaza .mn-audio-linie-play{background:#2e8fff;border-color:#2e8fff;color:#fff}
.mn-audio-page .mn-audio-linie.ruleaza .mn-audio-linie-ico{display:none}
.mn-audio-page .mn-audio-linie.ruleaza .mn-audio-eq{display:flex}
.mn-audio-page .mn-audio-linie.ruleaza.pauzat .mn-audio-eq i{animation-play-state:paused}
.mn-audio-page .mn-audio-linie-bar{position:absolute;left:10px;right:10px;bottom:2px;height:3px;
    border-radius:99px;background:rgba(46,143,255,.16);opacity:0;transition:opacity .2s ease}
.mn-audio-page .mn-audio-linie.ruleaza .mn-audio-linie-bar{opacity:1}
.mn-audio-page .mn-audio-linie-bar i{display:block;height:100%;width:0;border-radius:99px;background:#2e8fff}

/* — „Cele mai mari categorii", aceeași față de card — */
.mn-audio-page .mn-audio-top-lista li{border-radius:10px;padding:9px 10px;cursor:pointer;
    transition:background .16s ease;
    /* a 4-a coloană: săgeata din ::after este și ea copil al grilei — fără ea săgeata cădea
       pe un rând separat și fiecare categorie avea 78px în loc de ~56px (măsurat 13-oct) */
    grid-template-columns:30px minmax(0,1fr) auto auto}
.mn-audio-page .mn-audio-top-lista li:hover{background:#F4F7FB}
.mn-audio-page .mn-audio-top-lista li::after{content:"→";color:#c2ccd8;font-size:1.4rem;justify-self:end;transition:transform .16s ease,color .16s ease}
.mn-audio-page .mn-audio-top-lista li:hover::after{transform:translateX(3px);color:#2e8fff}

/* — ecrane mici: copertă și buton mai mici, aceleași rânduri — */
@media (max-width:560px){
    .mn-audio-page .mn-audio-linie{grid-template-columns:44px 34px minmax(0,1fr) auto;gap:9px;padding:8px}
    .mn-audio-page .mn-audio-linie-cover{width:44px;height:44px;border-radius:9px}
    .mn-audio-page .mn-audio-linie-play{width:34px;height:34px;font-size:1.1rem}
    .mn-audio-page .mn-audio-linie-text b{font-size:1.3rem}
    .mn-audio-page .mn-audio-linie-text small{gap:6px;font-size:1.05rem}
    .mn-audio-page .mn-audio-linie-dur{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
    .mn-audio-page .mn-audio-linie,.mn-audio-page .mn-audio-linie-play,.mn-audio-page .mn-audio-top-lista li,
    .mn-audio-page .mn-audio-top-lista li::after{transition:none}
    .mn-audio-page .mn-audio-eq i{animation:none;height:10px}
}


/* ============================================================================
   PLAYER PE TOT ECRANUL, CU PLAYLIST (13-oct-2026, cererea lui Vali)
   Bara de jos se deschide ca un player de streaming: copertă mare, titlu,
   progres căutabil, transport, volum, viteză — și playlistul episodului care
   rulează, ca să poți naviga prin coadă fără să ieși din player.
   Doar pe pagina asta (prefix .mn-audio-page); nu atinge playerul din articole.
   ============================================================================ */
.mn-audio-player--pagina .mn-ap-extinde{
    display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:0;border:0;background:transparent;
    color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-audio-player--pagina .mn-ap-extinde .mn-ap-info{min-width:0;flex:1 1 auto}
.mn-audio-player--pagina .mn-ap-extinde:focus-visible{outline:2px solid #2e8fff;outline-offset:4px;border-radius:10px}
.mn-audio-player--pagina .mn-ap-extinde-ico{flex:0 0 auto;opacity:0;color:#9fb0c2;font-size:1.3rem;line-height:1;
    transition:opacity .16s ease,color .16s ease}
.mn-audio-player--pagina .mn-ap-extinde:hover .mn-ap-extinde-ico{opacity:1;color:#fff}
/* coperta + titlu au devenit un singur element → grila playerului are 10 coloane, nu 11 */
@media (min-width:1100px){
    .mn-audio-player--pagina .mn-audio-player-in{
        grid-template-columns:minmax(0,1.4fr) auto auto auto auto auto minmax(90px,1.6fr) auto auto auto}
}

/* (13-oct-2026) Regulile vechiului overlay de ecran au fost eliminate: playerul
   pe tot ecranul este acum .mn-p2, în assets/css/mondo-audio-player.css. */


/* ============================================================================
   A ȘASEA RUNDĂ DE CERERI (13-oct-2026, Vali)
   1. bara de categorii care se trage pe orizontală dispare pe mobil;
   2. „Cele mai mari categorii" a fost mutată jos de tot → panou pe toată lățimea;
   3. „Ultimele episoade" a rămas singură în fostul rând cu două coloane;
   4. playerul de jos se mută odată cu noua bară de navigare (64px + zona de siguranță).
   ============================================================================ */
@media (max-width:1099px){
    /* categoriile rămân accesibile: secțiunile „Toate episoadele, pe categorii" și indexul
       „Cele mai mari categorii" de jos — bara glisantă nu aducea nimic în plus pe telefon */
    .mn-audio-page .mn-audio-chips{display:none}
    /* măsurați 13-oct: bara are 64px + 1px bordură de sus = 65px; cu 64px playerul se suprapunea
       1px peste ea (player bottom=780, dock top=779). */
    .mn-audio-player.mn-audio-player--pagina{bottom:calc(65px + env(safe-area-inset-bottom,0px))}
    .mn-audio-page{padding-bottom:calc(214px + env(safe-area-inset-bottom,0px))}
}
/* un singur column: fosta coloană din dreapta (indexul categoriilor) a plecat jos de tot */
.mn-audio-page .mn-audio-doua--sus{grid-template-columns:minmax(0,1fr)}
.mn-audio-page .mn-audio-categorii-jos{margin:34px 0 8px}
.mn-audio-page .mn-audio-top--jos .mn-audio-top-lista{display:grid;gap:0 18px}
@media (min-width:700px){
    .mn-audio-page .mn-audio-top--jos .mn-audio-top-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
    .mn-audio-page .mn-audio-top--jos .mn-audio-top-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1099px) and (max-height:520px){
    .mn-audio-page{padding-bottom:calc(154px + env(safe-area-inset-bottom,0px))}
}