/**
 * Blogul mycloudshop.ro — lista de articole si pagina unui articol.
 *
 * DE CE O FOAIE SEPARATA, si nu inca 600 de linii in `mycloudshop.css`:
 *   foaia principala se incarca pe TOATE paginile, inclusiv pe wizard, unde fiecare
 *   kilooctet inainte de primul ecran conteaza. Blogul e citit de altcineva, in alta
 *   zi, si n-are ce cauta in drumul critic al inscrierii. Se incarca doar din
 *   `blog.php` si `blog-article.php`, prin `$pageCss`.
 *
 * ⚠️ TOATE clasele incep cu `mcb-` (my cloudshop blog). Foaia principala foloseste
 *    `w-`; despartirea asta e singurul lucru care garanteaza ca o regula scrisa aici
 *    nu ajunge sa mute ceva din wizard. Tokenii (culori, spatii, raze) vin din
 *    `mycloudshop.css` — aici NU se defineste nicio culoare noua in afara de nuantele
 *    de accent ale articolelor.
 *
 * ⚠️ Nu se atinge `mycloudshop.css` din acest fisier si nu se rescrie nicio clasa `w-`.
 *
 * Ultima modificare: 2026-09-04 21:10
 * Modificari:
 *   2026-09-04 21:10 — Copertile articolelor: invelis `.mcb-cover` (raport 1200×630,
 *                      apropiere fina la hover), coperta pe tot panoul cartonasului mare
 *                      si `.mcb-art-cover` in capul articolului.
 *   2026-09-04 20:15 — Grila de cartonase cu `min(298px,100%)`: pe ecrane de 320 px
 *                      coloana iesea din invelis si pagina capata derulare orizontala.
 *   2026-09-04 17:40 — Creare (lista cu filtre pe rubrici, articolul scos in evidenta,
 *                      grila de cartonase, pagina de articol cu cuprins lipicios,
 *                      intrebari, banda de conversie si navigare inainte/inapoi).
 */

/* ============================================================
   1. ACCENTELE ARTICOLELOR
   Fiecare articol isi alege un accent (`iris`, `mint`, `amber`, `cyan`). Nu e
   decor: pe o lista de sase cartonase identice ochiul nu are de ce sa se agate,
   iar rubrica se recunoaste inainte de a citi eticheta. Culorile sunt cele din
   tokenii sitului — aici se face doar legatura.
   ============================================================ */
.mcb-a-iris  { --mcb-c:#6D5AF6; --mcb-c-soft:#A99CFF; --mcb-c-dim:rgba(109,90,246,.14); }
.mcb-a-mint  { --mcb-c:#2FE3A8; --mcb-c-soft:#7CF3CE; --mcb-c-dim:rgba(59,234,178,.13); }
.mcb-a-amber { --mcb-c:#FBBF24; --mcb-c-soft:#FCD778; --mcb-c-dim:rgba(251,191,36,.13); }
.mcb-a-cyan  { --mcb-c:#3BC9D8; --mcb-c-soft:#87E3ED; --mcb-c-dim:rgba(59,201,216,.13); }
/* Implicit, cand un articol n-a scris nimic. */
.mcb { --mcb-c:#6D5AF6; --mcb-c-soft:#A99CFF; --mcb-c-dim:rgba(109,90,246,.14); }

/* ============================================================
   2. SCHELET
   ============================================================ */
.mcb { flex:1; padding-bottom:var(--sp-8); }
.mcb-sec { padding:var(--sp-7) 0 0; }

/* Antetul paginii de lista. */
.mcb-hero { padding:var(--sp-7) 0 var(--sp-6); }
.mcb-hero h1 { max-width:16ch; font-size:clamp(30px,4.4vw,46px); }
.mcb-hero-lead {
    margin:var(--sp-4) 0 0; max-width:44em;
    font-size:var(--fs-md); color:var(--t2); text-wrap:pretty;
}

/* ============================================================
   3. FILTRELE PE RUBRICI
   Sunt LINKURI, nu butoane cu cod: merg si cu cititorul de ecran, si cu
   „deschide in fila noua", si daca nu porneste niciun script.
   ============================================================ */
.mcb-filters {
    display:flex; flex-wrap:wrap; gap:var(--sp-2);
    margin:var(--sp-6) 0 0; padding:0; list-style:none;
}
.mcb-filter {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 15px; border-radius:999px;
    border:1px solid var(--line); background:rgba(255,255,255,.03);
    color:var(--t2); font-size:var(--fs-meta); font-weight:600;
    transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.mcb-filter:hover { border-color:var(--line-strong); color:var(--t1); text-decoration:none; }
.mcb-filter i { font-size:14px; opacity:.85; }
.mcb-filter-n {
    font-size:var(--fs-micro); font-weight:700; color:var(--t4);
    padding-left:4px; border-left:1px solid var(--line); margin-left:2px;
}
.mcb-filter.is-on {
    border-color:rgba(109,90,246,.55); background:var(--iris-dim); color:var(--t1);
}
.mcb-filter.is-on i, .mcb-filter.is-on .mcb-filter-n { color:var(--iris-soft); }

/* ============================================================
   3b. COPERTILE ARTICOLELOR
   Poza e desenata la 1200×630 (raportul cerut de retele), deci ACELASI fisier
   serveste si cartonasul de pe WhatsApp, si cartonasul din lista, si capul
   articolului — o poza, un singur adevar.

   ⚠️ `aspect-ratio` NU e decor: impreuna cu `width`/`height` din atribute, tine
      locul pozei inainte ca ea sa se descarce. Fara el, textul de dedesubt sare
      in jos exact cand omul apuca sa citeasca primul rand.
   ⚠️ Apropierea de la hover cere `overflow:hidden` PE INVELIS, altfel poza marita
      iese peste coltul rotunjit al cartonasului.
   ============================================================ */
.mcb-cover { display:block; overflow:hidden; background:var(--ink-850); }
.mcb-cover img {
    display:block; width:100%; height:auto;
    aspect-ratio:1200/630; object-fit:cover;
    transition:transform .5s var(--ease);
}
/* Cine a cerut mai putina miscare o primeste: apropierea e infrumusetare, nu informatie. */
@media(prefers-reduced-motion:reduce){ .mcb-cover img { transition:none; } }

/* ============================================================
   4. ARTICOLUL SCOS IN EVIDENTA
   ============================================================ */
.mcb-featured {
    display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0;
    margin:var(--sp-6) 0 0;
    background:var(--ink-800); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--glint); overflow:hidden;
    transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.mcb-featured:hover { border-color:var(--line-strong); transform:translateY(-2px); }
.mcb-featured-in { padding:var(--sp-6); min-width:0; }
.mcb-featured-in h2 {
    margin:var(--sp-3) 0 0; font-size:clamp(23px,2.6vw,31px); line-height:1.2;
    color:var(--t1); max-width:20ch;
}
.mcb-featured:hover .mcb-featured-in h2 { color:#fff; }
.mcb-featured-x {
    margin:var(--sp-4) 0 0; color:var(--t2); font-size:var(--fs-sm);
    max-width:46em; text-wrap:pretty;
}
.mcb-featured-go {
    display:inline-flex; align-items:center; gap:8px; margin-top:var(--sp-5);
    color:var(--mcb-c-soft); font-weight:700; font-size:var(--fs-sm);
}
.mcb-featured-go i { transition:transform .2s var(--ease); }
.mcb-featured:hover .mcb-featured-go i { transform:translateX(4px); }
/* Panoul din dreapta: doar pictograma articolului pe fundalul lui de accent.
   Fara poze de stoc — o poza generica de „laptop pe birou" nu spune nimic si
   incarca pagina degeaba. */
.mcb-featured-art {
    display:grid; place-items:center;
    background:
        radial-gradient(120% 100% at 70% 0%, var(--mcb-c-dim) 0%, transparent 70%),
        var(--ink-850);
    border-left:1px solid var(--line);
}
.mcb-featured-art i { font-size:74px; color:var(--mcb-c); opacity:.85; }
/* Cand articolul ARE coperta, ea tine tot panoul din dreapta, taiata pe centru: pe un
   cartonas inalt, o poza lasata la raportul ei ar sta cu doua dungi goale deasupra si
   dedesubt. Raportul se pastreaza in schimb pe telefon, unde poza trece deasupra. */
/* ⚠️ COPERTA NU SE TAIE AICI, se vede INTREAGA. Panoul din dreapta e aproape patrat, iar
   coperta e de doua ori mai lata decat inalta: umpluta cu `cover`, ar arata jumatati de
   cuvinte din titlul scris pe ea — s-a si incercat, arata rau. Asa ca panoul isi pastreaza
   fundalul de accent, iar poza sta la raportul ei, pe mijloc.
   Coloana se latește cand exista poza (`:has`); unde `:has` nu merge, raman 300 px si poza
   iese doar mai mica — nimic rupt. */
.mcb-featured:has(> .mcb-cover) { grid-template-columns:minmax(0,1fr) clamp(300px,42%,520px); }
.mcb-featured > .mcb-cover {
    height:100%; border-left:1px solid var(--line);
    display:flex; align-items:center;
    background:
        radial-gradient(120% 100% at 70% 0%, var(--mcb-c-dim) 0%, transparent 70%),
        var(--ink-850);
}
.mcb-featured > .mcb-cover img { height:auto; }
.mcb-featured:hover > .mcb-cover img { transform:scale(1.03); }
@media(max-width:860px){
    /* ⚠️ AMANDOUA randurile. `.mcb-featured:has(> .mcb-cover)` de mai sus cantareste mai
       mult decat `.mcb-featured` simplu, iar o regula dintr-un `@media` NU bate
       specificitatea — asa ca fara randul cu `:has` cartonasul ramanea pe doua coloane si
       pe telefon: coloana pozei cerea 300 px din 325 disponibili, iar coperta iesea de
       25 px latime. Masurat pe 4 septembrie 2026, la 375 px. */
    .mcb-featured,
    .mcb-featured:has(> .mcb-cover) { grid-template-columns:1fr; }
    .mcb-featured-art { order:-1; border-left:0; border-bottom:1px solid var(--line); padding:var(--sp-6) 0; }
    .mcb-featured-art i { font-size:52px; }
    .mcb-featured-in { padding:var(--sp-5) var(--sp-4); }
    .mcb-featured > .mcb-cover {
        order:-1; height:auto; border-left:0; border-bottom:1px solid var(--line);
    }
    .mcb-featured > .mcb-cover img { height:auto; aspect-ratio:1200/630; }
}

/* ============================================================
   5. GRILA DE CARTONASE
   ============================================================ */
/* `min(298px,100%)` — nu doar `298px`: pe un ecran de 320 px, coloana ceruta ar fi mai lata
   decat locul ramas dupa marginile invelisului, iar pagina intreaga ar capata derulare
   pe orizontala. Cu `min()`, coloana se strange in loc sa iasa afara. */
.mcb-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(298px,100%),1fr));
    gap:var(--sp-5); margin:var(--sp-5) 0 0;
}
.mcb-card {
    display:flex; flex-direction:column; min-width:0;
    padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-lg);
    background:var(--ink-800); box-shadow:var(--glint); overflow:hidden;
    transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.mcb-card:hover {
    border-color:var(--line-strong); transform:translateY(-3px);
    background:var(--ink-700); text-decoration:none;
}
/* Coperta iese din marginile cartonasului si atinge chenarul — de aceea marginile
   negative. Coltul rotunjit il face `overflow:hidden` de pe cartonas. */
.mcb-card > .mcb-cover {
    margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
    border-bottom:1px solid var(--line);
}
.mcb-card:hover > .mcb-cover img { transform:scale(1.03); }
.mcb-card-ico {
    display:grid; place-items:center; width:44px; height:44px; flex:none;
    border-radius:var(--r-sm); background:var(--mcb-c-dim);
    color:var(--mcb-c); font-size:21px; margin-bottom:var(--sp-4);
}
.mcb-card h3 {
    margin:0; font-size:var(--fs-md); line-height:1.32; color:var(--t1); text-wrap:pretty;
}
.mcb-card .mcb-meta + h3 { margin-top:var(--sp-3); }
.mcb-card:hover h3 { color:#fff; }
.mcb-card-x {
    margin:var(--sp-3) 0 0; color:var(--t2); font-size:var(--fs-meta); line-height:1.65;
    text-wrap:pretty;
}
.mcb-card-foot {
    display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:var(--sp-5);
    color:var(--mcb-c-soft); font-size:var(--fs-meta); font-weight:700;
}
.mcb-card-foot i { transition:transform .2s var(--ease); }
.mcb-card:hover .mcb-card-foot i { transform:translateX(3px); }

/* ============================================================
   6. RANDUL DE INFORMATII (rubrica · data · cat se citeste)
   ============================================================ */
.mcb-meta {
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3);
    font-size:var(--fs-micro); color:var(--t3);
}
.mcb-meta span { display:inline-flex; align-items:center; gap:6px; }
.mcb-meta i { font-size:13px; }
.mcb-tag {
    padding:4px 11px; border-radius:999px;
    background:var(--mcb-c-dim); color:var(--mcb-c-soft);
    font-weight:700; letter-spacing:.04em;
}

/* ============================================================
   7. BANDA DE CONVERSIE
   ============================================================ */
.mcb-cta {
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
    flex-wrap:wrap; margin:var(--sp-8) 0 0;
    padding:var(--sp-6); border-radius:var(--r-lg);
    border:1px solid rgba(109,90,246,.28);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(109,90,246,.16) 0%, transparent 62%),
        var(--ink-800);
    box-shadow:var(--glint);
}
.mcb-cta h2 { font-size:var(--fs-h3); margin:0; max-width:18ch; }
.mcb-cta p { margin:var(--sp-2) 0 0; color:var(--t2); font-size:var(--fs-sm); max-width:42em; }
.mcb-cta-txt { min-width:0; }
@media(max-width:640px){
    .mcb-cta { padding:var(--sp-5) var(--sp-4); }
    .mcb-cta .w-btn { width:100%; }
}

/* ============================================================
   8. PAGINA DE ARTICOL — firimituri si antet
   ============================================================ */
.mcb-crumbs {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    margin:var(--sp-6) 0 0; padding:0; list-style:none;
    font-size:var(--fs-micro); color:var(--t3);
}
.mcb-crumbs li { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.mcb-crumbs a { color:var(--t3); font-weight:600; }
.mcb-crumbs a:hover { color:var(--t1); text-decoration:none; }
.mcb-crumbs i { font-size:12px; opacity:.6; }
.mcb-crumbs [aria-current] {
    color:var(--t2); max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.mcb-art-head { padding:var(--sp-5) 0 var(--sp-6); border-bottom:1px solid var(--line); }
.mcb-art-head h1 { margin:var(--sp-4) 0 0; max-width:22ch; font-size:clamp(28px,4vw,42px); }
.mcb-art-lead {
    margin:var(--sp-4) 0 0; max-width:40em;
    font-size:var(--fs-lead); line-height:1.55; color:var(--t2); text-wrap:pretty;
}
/* Coperta din capul articolului. Nu se apropie la hover: aici nu e link, iar o poza
   care se misca sub cursor in mijlocul cititului doar distrage. */
/* Latimea e cat coloana de text (restul paginii tine cuprinsul, in dreapta). Pe toata
   latimea invelisului, poza ar fi inalta de peste 600 px si ar impinge inceputul
   articolului sub marginea ecranului — omul a venit sa citeasca, nu sa deruleze. */
.mcb-art-cover {
    margin:var(--sp-6) 0 0; padding:0; max-width:820px;
    border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; box-shadow:var(--glint);
}

/* ============================================================
   9. ASEZAREA ARTICOLULUI: text + cuprins lipicios
   ============================================================ */
/* Cuprinsul e PRIMUL in pagina, ca pe telefon sa se vada inaintea textului (dupa
   text n-ar mai folosi nimanui). Pe ecran lat il mutam in coloana din dreapta cu
   grila — asa ordinea vizuala si ordinea din pagina sunt fiecare cea corecta. */
.mcb-layout {
    display:grid; grid-template-columns:minmax(0,1fr) 268px;
    gap:var(--sp-8); align-items:start; margin-top:var(--sp-6);
}
.mcb-layout > .mcb-main { grid-column:1; grid-row:1; min-width:0; }
.mcb-layout > .mcb-toc  { grid-column:2; grid-row:1; }
@media(max-width:1024px){
    .mcb-layout { grid-template-columns:1fr; gap:var(--sp-5); }
    .mcb-layout > .mcb-main, .mcb-layout > .mcb-toc { grid-column:1; grid-row:auto; }
}

.mcb-toc { position:sticky; top:var(--sp-5); }
.mcb-toc-in {
    padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--ink-800); box-shadow:var(--glint);
}
.mcb-toc-t {
    display:flex; align-items:center; gap:8px;
    font-size:var(--fs-micro); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    color:var(--iris-soft); margin-bottom:var(--sp-3);
}
.mcb-toc ol { margin:0; padding:0; list-style:none; counter-reset:mcbtoc; }
.mcb-toc li { counter-increment:mcbtoc; }
.mcb-toc a {
    display:flex; gap:10px; padding:7px 0;
    color:var(--t2); font-size:var(--fs-meta); line-height:1.5; font-weight:500;
}
.mcb-toc a::before {
    content:counter(mcbtoc); flex:none; width:18px;
    color:var(--t4); font-weight:700; font-size:var(--fs-micro); padding-top:1px;
}
.mcb-toc a:hover { color:var(--t1); text-decoration:none; }
.mcb-toc a:hover::before { color:var(--iris-soft); }
/* Pe ecran ingust cuprinsul nu mai e lipicios: ar fura jumatate din inaltime. */
@media(max-width:1024px){
    .mcb-toc { position:static; }
    .mcb-toc-in { padding:var(--sp-4); }
}

/* ============================================================
   10. CORPUL ARTICOLULUI
   Masura textului e limitata la ~72 de caractere: peste atat ochiul pierde randul
   la intoarcere. Nu e o preferinta, e motivul pentru care carțile n-au pagini late.
   ============================================================ */
.mcb-body { max-width:72ch; font-size:var(--fs-md); line-height:1.75; color:var(--t2); }
.mcb-body > *:first-child { margin-top:0; }
.mcb-body h2 {
    margin:var(--sp-8) 0 var(--sp-4); font-size:clamp(21px,2.3vw,27px); line-height:1.24;
    color:var(--t1); scroll-margin-top:var(--sp-6);
}
/* Liniuta de accent din fata titlului mare — leaga vizual sectiunea de rubrica. */
.mcb-body h2::before {
    content:''; display:block; width:34px; height:3px; border-radius:2px;
    background:var(--mcb-c); opacity:.9; margin-bottom:var(--sp-4);
}
.mcb-body h3 {
    margin:var(--sp-6) 0 var(--sp-3); font-size:var(--fs-h4); color:var(--t1);
    scroll-margin-top:var(--sp-6);
}
.mcb-body p { margin:0 0 var(--sp-5); text-wrap:pretty; }
.mcb-body strong { color:var(--t1); font-weight:700; }
.mcb-body a { color:var(--iris-soft); font-weight:600; text-decoration:underline;
    text-decoration-color:rgba(169,156,255,.35); text-underline-offset:3px; }
.mcb-body a:hover { color:var(--t1); text-decoration-color:currentColor; }
.mcb-body ul, .mcb-body ol { margin:0 0 var(--sp-5); padding-left:22px; }
.mcb-body li { margin-bottom:10px; }
.mcb-body li::marker { color:var(--mcb-c); }
.mcb-body ul ul, .mcb-body ol ol { margin:10px 0 0; }
.mcb-body hr { border:0; border-top:1px solid var(--line); margin:var(--sp-7) 0; }
.mcb-body code {
    background:var(--ink-850); border:1px solid var(--line); border-radius:6px;
    padding:2px 6px; font-size:.88em; color:var(--t1);
}

/* Citat. */
.mcb-body blockquote {
    margin:var(--sp-6) 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-5);
    border-left:3px solid var(--mcb-c);
    color:var(--t1); font-size:var(--fs-lead); line-height:1.6; font-weight:500;
}
.mcb-body blockquote p:last-child { margin-bottom:0; }

/* Blocul „de reținut" — o idee scoasa din text, ca sa ramana dupa citire. */
.mcb-note {
    display:flex; gap:14px; margin:var(--sp-6) 0;
    padding:var(--sp-5); border-radius:var(--r-md);
    border:1px solid var(--line); border-left:3px solid var(--mcb-c);
    background:var(--ink-850);
}
.mcb-note > i { flex:none; font-size:20px; color:var(--mcb-c); margin-top:2px; }
.mcb-note-in { min-width:0; }
.mcb-note b { display:block; color:var(--t1); margin-bottom:6px; }
.mcb-note p { margin:0; font-size:var(--fs-sm); line-height:1.7; }
.mcb-note p + p { margin-top:var(--sp-3); }
.mcb-note ul { margin:var(--sp-2) 0 0; padding-left:20px; font-size:var(--fs-sm); }

/* Tabelele se deruleaza in cutia LOR, nu impinge pagina in lateral. */
.mcb-tablewrap {
    margin:var(--sp-6) 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--ink-850);
}
.mcb-tablewrap table { width:100%; min-width:520px; border-collapse:collapse; font-size:var(--fs-meta); }
.mcb-tablewrap th, .mcb-tablewrap td {
    text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); line-height:1.55;
}
.mcb-tablewrap thead th {
    color:var(--t1); font-weight:700; font-size:var(--fs-micro);
    letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.03);
}
.mcb-tablewrap tbody tr:last-child td { border-bottom:0; }
.mcb-tablewrap td strong { color:var(--t1); }

/* ============================================================
   11. INTREBARI
   Raspunsurile sunt VIZIBILE, nu ascunse in acordeon: datele structurate de tip
   FAQ au voie sa declare doar ce se vede pe pagina.
   ============================================================ */
.mcb-faq { margin:var(--sp-8) 0 0; max-width:72ch; }
.mcb-faq h2 { font-size:var(--fs-h3); margin:0 0 var(--sp-5); }
.mcb-faq-item {
    padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--ink-800); box-shadow:var(--glint);
}
.mcb-faq-item + .mcb-faq-item { margin-top:var(--sp-3); }
.mcb-faq-q {
    display:flex; gap:11px; align-items:baseline;
    margin:0 0 var(--sp-3); font-size:var(--fs-md); font-weight:700; color:var(--t1);
}
.mcb-faq-q i { flex:none; font-size:16px; color:var(--mcb-c); }
.mcb-faq-a { margin:0; font-size:var(--fs-sm); line-height:1.72; color:var(--t2); }

/* ============================================================
   12. „CITESTE SI" + navigarea inainte/inapoi
   ============================================================ */
.mcb-also { margin:var(--sp-8) 0 0; }
.mcb-also h2 { font-size:var(--fs-h3); margin:0 0 var(--sp-5); }

.mcb-prevnext {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin:var(--sp-7) 0 0;
}
@media(max-width:720px){ .mcb-prevnext { grid-template-columns:1fr; } }
.mcb-pn {
    display:flex; gap:12px; align-items:flex-start; min-width:0;
    padding:var(--sp-4) var(--sp-5); border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--ink-800);
    transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.mcb-pn:hover { border-color:var(--line-strong); transform:translateY(-2px); text-decoration:none; }
.mcb-pn > i { flex:none; font-size:18px; color:var(--iris-soft); margin-top:3px; }
.mcb-pn-in { min-width:0; }
.mcb-pn small {
    display:block; font-size:var(--fs-micro); color:var(--t3);
    letter-spacing:.08em; text-transform:uppercase; font-weight:700; margin-bottom:4px;
}
.mcb-pn b { display:block; color:var(--t1); font-size:var(--fs-sm); line-height:1.4; font-weight:600; }
.mcb-pn-next { flex-direction:row-reverse; text-align:right; }

/* ============================================================
   13. PAGINA CARE NU EXISTA
   ============================================================ */
.mcb-404 { padding:var(--sp-8) 0; text-align:center; }
.mcb-404 i.mcb-404-ico { font-size:56px; color:var(--iris-soft); opacity:.7; }
.mcb-404 h1 { margin:var(--sp-5) auto 0; max-width:18ch; }
.mcb-404 p { margin:var(--sp-4) auto 0; max-width:40em; color:var(--t2); font-size:var(--fs-md); }
.mcb-404-go { display:flex; justify-content:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-6); }

/* ============================================================
   14. LISTA GOALA (rubrica fara articole)
   ============================================================ */
.mcb-empty {
    margin:var(--sp-6) 0 0; padding:var(--sp-7) var(--sp-5); text-align:center;
    border:1px dashed var(--line-strong); border-radius:var(--r-lg); color:var(--t2);
}
.mcb-empty i { font-size:32px; color:var(--t4); }
.mcb-empty p { margin:var(--sp-4) 0 0; font-size:var(--fs-sm); }