/* =========================================================
   Music FM — Newspaper Magazine 2026
========================================================= */

.mf-newspaper-page{
    direction:rtl;
    padding-top:22px;
    padding-bottom:84px;
    color:#111827;
}

.mf-newspaper-page a{
    color:inherit;
    text-decoration:none;
}

.mf-paper-masthead{
    display:grid;
    grid-template-columns:220px minmax(0,1fr) 220px;
    gap:18px;
    align-items:center;
    padding:22px 0 20px;
    margin-bottom:12px;
    border-top:4px solid #071832;
    border-bottom:1px solid #111827;
    background:
        linear-gradient(90deg,rgba(20,124,255,.08),transparent 18%,transparent 82%,rgba(89,199,255,.08)),
        #fff;
}

.mf-paper-date,
.mf-paper-note{
    display:grid;
    gap:5px;
    padding:14px;
    border:1px solid #dfe7f3;
    border-radius:4px;
    background:#f8fbff;
}

.mf-paper-date strong,
.mf-paper-note strong{
    color:#111827;
    font-size:15px;
    font-weight:950;
}

.mf-paper-date span,
.mf-paper-note span,
.mf-paper-date small{
    color:#667085;
    font-size:13px;
    font-weight:850;
}

.mf-paper-logo{
    text-align:center;
}

.mf-paper-logo h1{
    margin:0;
    color:#071832;
    font-size:62px;
    line-height:1;
    font-weight:950;
    letter-spacing:-2.2px;
}

.mf-paper-logo b{
    direction:ltr;
    display:inline-block;
    font-weight:950;
}

.mf-paper-logo b span{
    color:#147cff;
}

.mf-paper-logo p{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin:10px 0 0;
    padding:0 14px;
    border-radius:4px;
    background:#071832;
    color:#fff;
    font-size:13px;
    font-weight:900;
}

.mf-paper-cats{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 0 14px;
    margin-bottom:18px;
    border-bottom:3px double #111827;
    scrollbar-width:none;
}

.mf-paper-cats::-webkit-scrollbar{
    display:none;
}

.mf-paper-cats a{
    flex:0 0 auto;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    border:1px solid #dfe7f3;
    border-radius:4px;
    background:#fff;
    color:#111827;
    font-size:13px;
    font-weight:950;
}

.mf-paper-cats a:hover{
    background:#147cff;
    border-color:#147cff;
    color:#fff;
}

.mf-paper-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:22px;
    align-items:start;
}

.mf-paper-main{
    display:grid;
    gap:22px;
}

.mf-paper-feature{
    position:relative;
    overflow:hidden;
    border:1px solid #111827;
    border-radius:4px;
    background:#fff;
    box-shadow:0 18px 42px rgba(15,35,70,.08);
}

.mf-paper-feature a{
    display:grid;
    grid-template-columns:46% minmax(0,1fr);
    min-height:430px;
}

.mf-paper-feature img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:saturate(1.02) contrast(1.02);
}

.mf-paper-feature div{
    position:relative;
    display:grid;
    align-content:center;
    gap:12px;
    padding:34px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.99)),
        repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(7,24,50,.045) 32px);
}

.mf-paper-feature span,
.mf-paper-leading article span,
.mf-paper-more-grid span{
    width:max-content;
    min-height:28px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 10px;
    border-radius:4px;
    background:#147cff;
    color:#fff;
    font-size:12px;
    font-weight:950;
}

.mf-paper-feature h2{
    margin:0;
    color:#071832;
    font-size:46px;
    line-height:1.04;
    font-weight:950;
    letter-spacing:-1.2px;
    text-wrap:balance;
}

.mf-paper-feature p{
    margin:0;
    color:#334155;
    font-size:17px;
    line-height:1.85;
    font-weight:780;
    column-count:2;
    column-gap:26px;
}

.mf-paper-feature small{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    color:#667085;
    font-size:13px;
    font-weight:850;
}

.mf-paper-feature b{
    width:max-content;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 18px;
    border-radius:4px;
    background:#071832;
    color:#fff;
    font-size:14px;
    font-weight:950;
}

.mf-paper-leading,
.mf-paper-more,
.mf-paper-flashes,
.mf-paper-most{
    border:1px solid #dfe7f3;
    border-radius:4px;
    background:#fff;
    box-shadow:0 10px 26px rgba(15,35,70,.045);
}

.mf-paper-leading,
.mf-paper-more{
    padding:20px;
}

.mf-paper-leading>header,
.mf-paper-more>header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.mf-paper-leading>header i,
.mf-paper-more>header i{
    height:1px;
    background:#111827;
    opacity:.28;
}

.mf-paper-leading h2,
.mf-paper-more h2{
    margin:0;
    color:#071832;
    font-size:28px;
    line-height:1;
    font-weight:950;
    white-space:nowrap;
}

.mf-paper-leading-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.mf-paper-leading article{
    min-width:0;
    border-left:1px solid #e4ebf5;
    padding-left:16px;
}

.mf-paper-leading article:last-child{
    border-left:0;
    padding-left:0;
}

.mf-paper-leading img{
    width:100%;
    height:160px;
    display:block;
    object-fit:cover;
    border-radius:4px;
    margin-bottom:12px;
}

.mf-paper-leading h3{
    margin:10px 0 7px;
    color:#071832;
    font-size:22px;
    line-height:1.18;
    font-weight:950;
    text-wrap:balance;
}

.mf-paper-leading p{
    margin:0 0 10px;
    color:#475569;
    font-size:14px;
    line-height:1.65;
    font-weight:760;
}

.mf-paper-leading small,
.mf-paper-more-grid small{
    display:flex;
    align-items:center;
    gap:8px;
    color:#667085;
    font-size:12px;
    font-weight:850;
}

.mf-paper-more-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.mf-paper-more-grid>a{
    min-height:112px;
    display:grid;
    grid-template-columns:118px minmax(0,1fr);
    gap:13px;
    align-items:center;
    padding:10px;
    border:1px solid #e4ebf5;
    border-radius:4px;
    background:#fff;
    transition:.18s ease;
}

.mf-paper-more-grid>a:hover{
    transform:translateY(-2px);
    border-color:#bdd7ff;
    box-shadow:0 14px 28px rgba(15,35,70,.07);
}

.mf-paper-more-grid img{
    width:118px;
    height:88px;
    display:block;
    object-fit:cover;
    border-radius:4px;
}

.mf-paper-more-grid h3{
    margin:7px 0;
    color:#071832;
    font-size:17px;
    line-height:1.25;
    font-weight:950;
}

.mf-paper-button{
    width:max-content;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:18px auto 0;
    padding:0 18px;
    border:0;
    border-radius:4px;
    background:#147cff;
    color:#fff;
    font-family:inherit;
    font-size:14px;
    font-weight:950;
    cursor:pointer;
}

.mf-paper-side{
    position:sticky;
    top:96px;
    display:grid;
    gap:18px;
}

.mf-paper-flashes,
.mf-paper-most{
    padding:18px;
}

.mf-paper-flashes header,
.mf-paper-most header{
    padding-bottom:14px;
    margin-bottom:12px;
    border-bottom:3px double #111827;
}

.mf-paper-flashes h2,
.mf-paper-most h2{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    color:#071832;
    font-size:25px;
    line-height:1;
    font-weight:950;
}

.mf-paper-flashes h2 i{
    color:#147cff;
}

.mf-paper-flashes div,
.mf-paper-most{
    display:grid;
    gap:10px;
}

.mf-paper-flashes div a,
.mf-paper-most>a{
    min-height:58px;
    display:grid;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #e4ebf5;
}

.mf-paper-flashes div a{
    grid-template-columns:74px minmax(0,1fr) 18px;
}

.mf-paper-flashes time{
    color:#147cff;
    font-size:12px;
    font-weight:950;
}

.mf-paper-flashes strong,
.mf-paper-most strong{
    color:#111827;
    font-size:14px;
    line-height:1.35;
    font-weight:900;
}

.mf-paper-most>a{
    grid-template-columns:36px minmax(0,1fr);
}

.mf-paper-most>a b{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:4px;
    background:#071832;
    color:#fff;
    font-weight:950;
}

.mf-paper-most span{
    display:grid;
    gap:4px;
}

.mf-paper-most small{
    color:#667085;
    font-size:12px;
    font-weight:850;
}

.mf-paper-categories{
    display:grid;
    gap:8px;
}

.mf-paper-categories a{
    min-height:46px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    padding:0 12px;
    border:1px solid #e4ebf5;
    border-radius:4px;
    background:#f8fbff;
}

.mf-paper-categories span{
    color:#111827;
    font-weight:900;
}

.mf-paper-categories strong{
    color:#147cff;
    font-weight:950;
}

.mf-paper-flashes footer,
.mf-paper-most footer{
    padding-top:12px;
}

.mf-paper-flashes footer a,
.mf-paper-most footer a{
    color:#147cff;
    font-size:13px;
    font-weight:950;
}

.mf-paper-empty{
    grid-column:1/-1;
    margin:0;
    padding:30px;
    text-align:center;
    color:#667085;
    border:1px dashed #cbd5e1;
    border-radius:4px;
}

@media(max-width:1180px){
    .mf-paper-layout,
    .mf-paper-masthead{
        grid-template-columns:1fr;
    }

    .mf-paper-logo{
        order:-1;
    }

    .mf-paper-side{
        position:static;
    }
}

@media(max-width:900px){
    .mf-paper-feature a{
        grid-template-columns:1fr;
    }

    .mf-paper-feature img{
        height:280px;
    }

    .mf-paper-feature p{
        column-count:1;
    }

    .mf-paper-leading-grid,
    .mf-paper-more-grid{
        grid-template-columns:1fr;
    }

    .mf-paper-leading article{
        border-left:0;
        padding-left:0;
        border-bottom:1px solid #e4ebf5;
        padding-bottom:16px;
    }

    .mf-paper-leading article:last-child{
        border-bottom:0;
        padding-bottom:0;
    }
}

@media(max-width:620px){
    .mf-newspaper-page{
        padding-top:14px;
    }

    .mf-paper-masthead{
        padding:16px 0;
    }

    .mf-paper-logo h1{
        font-size:38px;
    }

    .mf-paper-logo p{
        font-size:12px;
    }

    .mf-paper-feature h2{
        font-size:31px;
    }

    .mf-paper-feature div{
        padding:22px;
    }

    .mf-paper-more-grid>a{
        grid-template-columns:92px minmax(0,1fr);
    }

    .mf-paper-more-grid img{
        width:92px;
        height:76px;
    }
}



/* =========================================================
   Music FM — Newspaper Mobile Opening Fix
   Compact newspaper opening on mobile, desktop unchanged
========================================================= */

@media(max-width:620px){

    .mf-newspaper-page{
        padding-top:10px !important;
    }

    .mf-paper-masthead{
        position:relative;
        display:grid !important;
        grid-template-columns:1fr auto !important;
        grid-template-areas:
            "logo logo"
            "date note" !important;
        gap:8px !important;
        padding:12px 0 10px !important;
        margin-bottom:8px !important;
        border-top:4px solid #071832 !important;
        border-bottom:1px solid #071832 !important;
        background:
            radial-gradient(circle at 18% 0%,rgba(89,199,255,.10),transparent 34%),
            linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
    }

    .mf-paper-logo{
        grid-area:logo !important;
        order:0 !important;
        text-align:center !important;
        padding:0 4px !important;
    }

    .mf-paper-logo h1{
        margin:0 !important;
        font-size:36px !important;
        line-height:1 !important;
        letter-spacing:-1.2px !important;
        white-space:nowrap !important;
    }

    .mf-paper-logo p{
        min-height:28px !important;
        margin:8px auto 0 !important;
        padding:0 10px !important;
        border-radius:4px !important;
        font-size:11px !important;
        line-height:1 !important;
        max-width:92% !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .mf-paper-date,
    .mf-paper-note{
        min-height:58px !important;
        padding:9px 10px !important;
        gap:3px !important;
        border-radius:4px !important;
        background:#fff !important;
        box-shadow:0 6px 14px rgba(15,35,70,.035) !important;
    }

    .mf-paper-date{
        grid-area:date !important;
    }

    .mf-paper-note{
        grid-area:note !important;
        min-width:132px !important;
    }

    .mf-paper-date strong,
    .mf-paper-note strong{
        font-size:13px !important;
        line-height:1.1 !important;
    }

    .mf-paper-date span,
    .mf-paper-note span,
    .mf-paper-date small{
        font-size:11px !important;
        line-height:1.15 !important;
    }

    .mf-paper-cats{
        position:relative !important;
        padding:8px 0 10px !important;
        margin-bottom:12px !important;
        border-bottom:1px solid #071832 !important;
        gap:7px !important;
    }

    .mf-paper-cats a{
        min-height:36px !important;
        padding:0 11px !important;
        font-size:12px !important;
    }

    .mf-paper-feature{
        margin-top:0 !important;
        border-color:#dfe7f3 !important;
        box-shadow:0 10px 26px rgba(15,35,70,.055) !important;
    }

    .mf-paper-feature a{
        min-height:0 !important;
    }

    .mf-paper-feature img{
        height:210px !important;
    }

    .mf-paper-feature div{
        padding:18px !important;
        gap:9px !important;
    }

    .mf-paper-feature span{
        min-height:26px !important;
        font-size:11px !important;
        padding:0 9px !important;
    }

    .mf-paper-feature h2{
        font-size:27px !important;
        line-height:1.08 !important;
        letter-spacing:-.7px !important;
    }

    .mf-paper-feature p{
        font-size:14px !important;
        line-height:1.65 !important;
        display:-webkit-box !important;
        -webkit-line-clamp:3 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .mf-paper-feature small{
        gap:8px !important;
        font-size:11px !important;
    }

    .mf-paper-feature b{
        min-height:38px !important;
        padding:0 14px !important;
        font-size:13px !important;
    }

    .mf-paper-leading,
    .mf-paper-more{
        padding:15px !important;
    }

    .mf-paper-leading>header,
    .mf-paper-more>header{
        margin-bottom:14px !important;
    }

    .mf-paper-leading h2,
    .mf-paper-more h2{
        font-size:22px !important;
    }
}

@media(max-width:390px){

    .mf-paper-logo h1{
        font-size:31px !important;
    }

    .mf-paper-logo p{
        font-size:10px !important;
    }

    .mf-paper-date,
    .mf-paper-note{
        padding:8px !important;
    }

    .mf-paper-note{
        min-width:118px !important;
    }
}