/* =========================================================
   Music FM — Home Hero 2026
   Desktop premium + mobile clean final
========================================================= */

.mf-home-hero-2026{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:20px;
    margin:0 0 26px;
    direction:rtl;
}

/* ===== Main hero ===== */

.mf-home-hero-main{
    position:relative;
    min-height:500px;
    overflow:hidden;
    border:1px solid rgba(15,35,70,.12);
    border-radius:4px;
    background:#071832;
    box-shadow:0 14px 36px rgba(15,35,70,.10);
}

.mf-home-hero-main-link{
    position:absolute;
    inset:0;
    display:block;
    color:#fff;
}

.mf-home-hero-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:0 !important;
    filter:saturate(1.06) contrast(1.03) brightness(.88);
    transform:scale(1.012);
    transition:
        opacity .36s ease,
        transform 7s ease,
        filter .6s ease;
}

.mf-home-hero-main:hover img{
    transform:scale(1.052);
    filter:saturate(1.10) contrast(1.05) brightness(.82);
}

.mf-home-hero-main.is-changing img,
.mf-home-hero-main.is-changing .mf-home-hero-overlay{
    opacity:.28;
}

.mf-home-hero-main::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 18%,rgba(20,124,255,.18),transparent 32%),
        linear-gradient(90deg,rgba(3,8,18,.82) 0%,rgba(3,8,18,.38) 44%,rgba(3,8,18,.06) 100%),
        linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.74) 100%);
}

.mf-home-hero-main::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    z-index:2;
    width:5px;
    height:42%;
    background:linear-gradient(180deg,#59c7ff,#147cff);
    box-shadow:0 0 22px rgba(20,124,255,.36);
}

.mf-home-hero-overlay,
.mf-home-hero-fallback{
    position:absolute;
    right:34px;
    left:34px;
    bottom:32px;
    z-index:3;
    color:#fff;
    transition:opacity .36s ease, transform .36s ease;
}

.mf-home-hero-kicker{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 11px;
    border-radius:3px;
    background:#147cff;
    color:#fff;
    font-size:13px;
    line-height:1;
    font-weight:950;
    box-shadow:0 8px 18px rgba(20,124,255,.22);
}

.mf-home-hero-overlay h1,
.mf-home-hero-fallback h1{
    max-width:850px;
    margin:18px 0 12px;
    color:#fff;
    font-size:50px;
    line-height:1.04;
    font-weight:950;
    letter-spacing:-1.4px;
    text-shadow:0 16px 34px rgba(0,0,0,.36);
}

.mf-home-hero-overlay p,
.mf-home-hero-fallback p{
    max-width:760px;
    margin:0 0 14px;
    color:rgba(255,255,255,.90);
    font-size:17px;
    line-height:1.62;
    font-weight:760;
}

.mf-home-hero-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    color:rgba(255,255,255,.78);
    font-weight:850;
    margin-bottom:16px;
}

.mf-home-hero-meta small{
    color:inherit;
    font-size:14px;
    font-weight:850;
}

.mf-home-hero-meta i{
    width:1px;
    height:14px;
    background:rgba(255,255,255,.34);
}

.mf-home-hero-cta{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 17px;
    border-radius:3px;
    background:#147cff;
    color:#fff;
    font-size:14px;
    font-weight:950;
    box-shadow:0 12px 24px rgba(20,124,255,.25);
    transition:transform .22s ease, background .22s ease;
}

.mf-home-hero-main:hover .mf-home-hero-cta{
    transform:translateY(-1px);
    background:#0f6fe8;
}

/* ===== Side stories ===== */

.mf-home-hero-side{
    overflow:hidden;
    border:1px solid #dfe7f3;
    border-radius:4px;
    background:#fff;
    box-shadow:0 10px 26px rgba(15,35,70,.06);
}

.mf-home-hero-side > header{
    min-height:66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:row;
    gap:12px;
    padding:15px 18px;
    border-bottom:1px solid #e4ebf5;
    background:linear-gradient(180deg,#fff 0%,#f6f9fd 100%);
}

.mf-home-hero-side > header span{
    display:block;
    color:#147cff;
    font-size:11px;
    line-height:1;
    font-weight:950;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.mf-home-hero-side > header h2{
    margin:4px 0 0;
    color:#111827;
    font-size:22px;
    line-height:1;
    font-weight:950;
}

.mf-home-hero-side-list{
    display:grid;
}

.mf-home-hero-side-card{
    position:relative;
    min-height:145px;
    display:grid;
    grid-template-columns:30px minmax(0,1fr) 96px 32px;
    align-items:center;
    gap:12px;
    padding:14px 15px;
    color:#111827;
    border-bottom:1px solid #e4ebf5;
    overflow:hidden;
    transition:background .22s ease;
}

.mf-home-hero-side-card:hover{
    background:rgba(20,124,255,.045);
}

.mf-home-hero-side-card em{
    order:1;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:3px;
    background:#147cff;
    color:#fff;
    font-size:22px;
    line-height:1;
    font-style:normal;
    font-weight:900;
    transition:transform .22s ease, background .22s ease;
}

.mf-home-hero-side-card:hover em{
    transform:translateX(-3px);
    background:#0f6fe8;
}

.mf-home-hero-side-card div{
    order:2;
    min-width:0;
    text-align:right;
}

.mf-home-hero-side-card div span{
    display:inline-flex;
    min-height:22px;
    align-items:center;
    padding:0 8px;
    border-radius:3px;
    background:#eef6ff;
    color:#147cff;
    font-size:11px;
    font-weight:950;
}

.mf-home-hero-side-card h3{
    margin:8px 0 6px;
    color:#111827;
    font-size:16px;
    line-height:1.28;
    font-weight:950;
}

.mf-home-hero-side-card small{
    display:block;
    color:#667085;
    font-weight:800;
}

.mf-home-hero-side-card img{
    order:3;
    width:96px;
    height:74px;
    object-fit:cover;
    border-radius:3px !important;
    background:#071832;
    transition:transform .35s ease, filter .35s ease;
}

.mf-home-hero-side-card:hover img{
    transform:scale(1.04);
    filter:saturate(1.08);
}

.mf-home-hero-side-card > b{
    order:4;
    justify-self:end;
    color:#147cff;
    font-size:24px;
    line-height:1;
    font-weight:950;
    opacity:.55;
}

.mf-home-hero-side-empty{
    padding:22px;
}

.mf-home-hero-side-empty span{
    color:#147cff;
    font-weight:950;
}

.mf-home-hero-side-empty h3{
    margin:8px 0 0;
    color:#111827;
    font-size:18px;
    font-weight:950;
}

/* ===== Entrance motion ===== */

.mf-home-hero-2026.is-ready .mf-home-hero-main,
.mf-home-hero-2026.is-ready .mf-home-hero-side{
    animation:mfHomeHeroIn .62s cubic-bezier(.16,1,.3,1) both;
}

.mf-home-hero-2026.is-ready .mf-home-hero-side{
    animation-delay:.08s;
}

@keyframes mfHomeHeroIn{
    from{
        opacity:0;
        transform:translateY(12px);
        filter:blur(6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

/* ===== Responsive ===== */

@media(max-width:1120px){
    .mf-home-hero-2026{
        grid-template-columns:1fr;
    }

    .mf-home-hero-main{
        min-height:430px;
    }

    .mf-home-hero-side-list{
        grid-template-columns:1fr 1fr;
    }

    .mf-home-hero-side-card{
        min-height:132px;
    }
}

/* ===== Mobile fix ===== */

@media(max-width:760px){
    .mf-home-hero-2026{
        margin-inline:-9px;
        gap:12px;
    }

    .mf-home-hero-main{
        min-height:0;
        height:430px;
        border-radius:0 0 4px 4px;
    }

    .mf-home-hero-main img{
        filter:saturate(1.04) contrast(1.02) brightness(.72);
        object-position:center center;
    }

    .mf-home-hero-main::before{
        background:
            radial-gradient(circle at 16% 18%,rgba(20,124,255,.14),transparent 35%),
            linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.18) 35%,rgba(0,0,0,.88) 100%);
    }

    .mf-home-hero-main::after{
        width:4px;
        height:36%;
    }

    .mf-home-hero-overlay,
    .mf-home-hero-fallback{
        right:20px;
        left:20px;
        bottom:30px;
    }

    .mf-home-hero-kicker{
        min-height:24px;
        padding:0 9px;
        font-size:11px;
    }

    .mf-home-hero-overlay h1,
    .mf-home-hero-fallback h1{
        max-width:100%;
        margin:12px 0 8px;
        font-size:31px;
        line-height:1.12;
        letter-spacing:-.6px;
        text-shadow:0 10px 26px rgba(0,0,0,.48);
    }

    .mf-home-hero-overlay p,
    .mf-home-hero-fallback p{
        display:none;
    }

    .mf-home-hero-meta{
        gap:8px;
        margin-bottom:12px;
    }

    .mf-home-hero-meta small{
        font-size:13px;
    }

    .mf-home-hero-cta{
        min-height:40px;
        padding:0 16px;
        font-size:14px;
    }

    .mf-home-hero-side{
        border-radius:4px;
    }

    .mf-home-hero-side > header{
        min-height:58px;
        padding:13px 16px;
    }

    .mf-home-hero-side > header h2{
        font-size:21px;
    }

    .mf-home-hero-side-list{
        grid-template-columns:1fr;
    }

    .mf-home-hero-side-card{
        grid-template-columns:32px minmax(0,1fr) 82px;
        min-height:112px;
        gap:10px;
        padding:12px 13px;
    }

    .mf-home-hero-side-card > b{
        display:none;
    }

    .mf-home-hero-side-card img{
        width:82px;
        height:62px;
    }

    .mf-home-hero-side-card h3{
        font-size:15px;
        line-height:1.25;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .mf-home-hero-side-card small{
        font-size:13px;
    }

    .mf-home-hero-side-card em{
        width:30px;
        height:30px;
        font-size:21px;
    }
}

@media(max-width:430px){
    .mf-home-hero-main{
        height:405px;
    }

    .mf-home-hero-overlay,
    .mf-home-hero-fallback{
        right:18px;
        left:18px;
        bottom:28px;
    }

    .mf-home-hero-overlay h1,
    .mf-home-hero-fallback h1{
        font-size:28px;
    }

    .mf-home-hero-side-card{
        grid-template-columns:30px minmax(0,1fr) 74px;
        min-height:104px;
    }

    .mf-home-hero-side-card img{
        width:74px;
        height:58px;
    }

    .mf-home-hero-side-card em{
        width:28px;
        height:28px;
        font-size:20px;
    }
}

/* ===== Accessibility ===== */

@media(prefers-reduced-motion: reduce){
    .mf-home-hero-2026 *,
    .mf-home-hero-2026 *::before,
    .mf-home-hero-2026 *::after{
        animation:none !important;
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }
}