.afs-hero-grid{
    direction:rtl;
    font-family:'Vazirmatn', Tahoma, sans-serif;
    width:100%;
    max-width:1060px;
    margin:40px auto;
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:16px;
    height:430px;
    box-sizing:border-box;
}
.afs-hero-grid *{ box-sizing:border-box; }
.afs-main{ display:flex; flex-direction:column; height:100%; }
.afs-main-img{
    display:block !important; width:100% !important; flex:1; min-height:0;
    border-radius:14px !important; overflow:hidden !important;
    background-size:cover !important; background-position:center !important;
    background-color:#0a0a0d;
    box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 18px 34px -10px rgba(0,0,0,.7), 0 4px 10px -2px rgba(0,0,0,.5) !important;
}
.afs-main-caption{
    position:relative;
    margin-top:9px; height:96px; flex-shrink:0;
    background:linear-gradient(135deg, rgba(20,20,24,0.92), rgba(10,10,12,0.96));
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius:12px;
    padding:14px 17px; box-sizing:border-box;
    display:flex; flex-direction:column; justify-content:center;
}
.afs-accent-line{ position:absolute; top:0; right:17px; width:28px; height:2px; background:#e8c766; border-radius:2px; }
.afs-meta-row{ display:flex; align-items:center; gap:8px; margin-bottom:9px; margin-top:4px; }
.afs-badge{
    font-size:11px; font-weight:500; letter-spacing:.4px;
    padding:4px 11px; border-radius:999px;
    background:#1c1c20; border:1px solid #2c2c31; color:#e8c766;
}
.afs-dot{ font-size:11px; color:#6f6f77; }
.afs-dot-light{ color:rgba(255,255,255,.4); font-size:9px; }
.afs-meta-text{ font-size:11.5px; color:#8a8a92; }
.afs-title-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.afs-main-title{
    font-size:17px; line-height:1.5; font-weight:700;
    margin:0; color:#f5f5f7; letter-spacing:-.1px;
    text-decoration:none;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.afs-arrow{ flex-shrink:0; font-size:15px; color:#e8c766; }

.afs-side{ display:flex; flex-direction:column; height:100%; gap:16px; }
.afs-side-card{
    position:relative; display:block !important; width:100% !important; flex:1; min-height:0;
    border-radius:12px !important; overflow:hidden !important;
    background-color:#0a0a0d;
    text-decoration:none;
    box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 12px 26px -8px rgba(0,0,0,.7) !important;
}
.afs-side-img{
    position:absolute; inset:0;
    background-size:cover !important; background-position:center !important;
    background-color:#0a0a0d;
}
.afs-side-overlay{
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(6,6,9,.94) 0%, rgba(6,6,9,.6) 42%, rgba(6,6,9,0) 72%);
}
.afs-side-caption{
    position:absolute; right:13px; left:13px; bottom:11px;
    display:flex; flex-direction:column;
}
.afs-side-badge{ font-size:10.5px; font-weight:500; letter-spacing:.3px; color:#e8c766; }
.afs-side-meta{ font-size:10.5px; color:rgba(255,255,255,.6); display:inline-flex; align-items:center; gap:4px; }
.afs-side-title{
    font-size:15px; line-height:1.45; font-weight:600;
    margin:6px 0 0; color:#f5f5f7; letter-spacing:-.1px;
    overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.afs-meta-text{ font-size:11.5px; color:#8a8a92; display:inline-flex; align-items:center; gap:4px; }
.afs-icon{ width:11px; height:11px; flex-shrink:0; color:#8a8a92; }
.afs-icon-fire{ color:#e8a63c; }
.afs-side-meta .afs-icon{ color:rgba(255,255,255,.55); }

@media (min-width:641px){
    .afs-hero-grid:not(.afs-hero-grid-mobile){
        height:auto;
        grid-template-columns:1.9fr 1fr;
        animation:afs-fade-in .7s ease both;
        background:#181b22;
        border:1px solid rgba(255,255,255,.07);
        border-radius:22px;
        padding:30px;
        box-shadow:0 26px 60px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-main{
        height:auto;
        animation:afs-fade-slide .7s ease both;
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-main-img{
        position:relative;
        flex:none;
        aspect-ratio:16/9;
        max-height:420px;
        box-shadow:0 0 0 1.5px rgba(232,199,102,.45) inset, 0 0 0 1px rgba(255,255,255,.16) inset, 0 24px 48px -12px rgba(0,0,0,.85), 0 6px 16px -3px rgba(0,0,0,.6) !important;
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-main-img::after{
        content:"";
        position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%);
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-side{
        height:auto;
        align-self:stretch;
        animation:afs-fade-slide .7s ease .12s both;
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-side-card{
        flex:1;
        min-height:0;
        box-shadow:0 18px 36px -10px rgba(0,0,0,.85) !important;
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-side-card::after{
        content:"";
        position:absolute; inset:0; border-radius:inherit; pointer-events:none;
        box-shadow:0 0 0 1.5px rgba(232,199,102,.45) inset, 0 0 0 1px rgba(255,255,255,.16) inset;
    }
    .afs-hero-grid:not(.afs-hero-grid-mobile) .afs-side-card::before{
        content:"";
        position:absolute; inset:0; pointer-events:none;
        background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%);
    }
}

@keyframes afs-fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}
@keyframes afs-fade-slide{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

@media (max-width:640px){
    .afs-hero-grid{
        grid-template-columns:1.6fr 1fr;
        gap:8px;
        height:220px;
        padding:0 10px;
    }
    .afs-side{ gap:8px; }
    .afs-main-caption{
        height:auto;
        padding:8px 10px;
        margin-top:6px;
    }
    .afs-badge{ font-size:9px; padding:3px 8px; }
    .afs-meta-text{ font-size:9px; }
    .afs-main-title{ font-size:12px; }
    .afs-arrow{ font-size:12px; }
    .afs-side-caption{ right:8px; left:8px; bottom:6px; }
    .afs-side-badge, .afs-side-meta{ font-size:8.5px; }
    .afs-side-title{ font-size:10.5px; margin-top:3px; -webkit-line-clamp:1; }
}

.afs-hero-grid-mobile{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "main main"
        "side1 side2";
    height:auto;
    gap:10px;
    max-width:420px;
    background:#181b22;
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:18px;
    box-shadow:0 20px 46px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
}
.afs-hero-grid-mobile .afs-main{ grid-area:main; }
.afs-hero-grid-mobile .afs-side{ display:contents; }
.afs-hero-grid-mobile .afs-side-card:nth-of-type(1){ grid-area:side1; }
.afs-hero-grid-mobile .afs-side-card:nth-of-type(2){ grid-area:side2; }

.afs-hero-grid-mobile .afs-main-img{
    flex:none; aspect-ratio:16/10.2;
    box-shadow:0 0 0 1.5px rgba(232,199,102,.45) inset, 0 0 0 1px rgba(255,255,255,.09) inset, 0 18px 34px -10px rgba(0,0,0,.7), 0 4px 10px -2px rgba(0,0,0,.5) !important;
}
.afs-hero-grid-mobile .afs-main-caption{
    height:auto; padding:10px 12px; margin-top:8px;
}
.afs-hero-grid-mobile .afs-accent-line{ display:none; }
.afs-hero-grid-mobile .afs-title-row{ order:1; }
.afs-hero-grid-mobile .afs-meta-row{ order:2; margin-top:6px; margin-bottom:0; }
.afs-hero-grid-mobile .afs-arrow{ display:none; }
.afs-hero-grid-mobile .afs-main-title{ font-size:13.5px; -webkit-line-clamp:2; }


.afs-hero-grid-mobile .afs-side-card{
    display:flex; flex-direction:column;
    background:none; box-shadow:none !important;
    overflow:visible !important; border-radius:0 !important;
}
.afs-hero-grid-mobile .afs-side-img{
    position:static; width:100%; aspect-ratio:5/4;
    border-radius:14px !important; overflow:hidden;
    box-shadow:0 0 0 1.5px rgba(232,199,102,.45) inset, 0 0 0 1px rgba(255,255,255,.09) inset, 0 18px 34px -10px rgba(0,0,0,.7), 0 4px 10px -2px rgba(0,0,0,.5) !important;
}
.afs-hero-grid-mobile .afs-side-overlay{ display:none; }
.afs-hero-grid-mobile .afs-side-caption{
    position:static; margin-top:8px; padding:8px 10px;
    background:linear-gradient(135deg, rgba(20,20,24,0.92), rgba(10,10,12,0.96));
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
    border-radius:12px;
}

.afs-hero-grid-mobile .afs-main-caption,
.afs-hero-grid-mobile .afs-side-caption{
    background:linear-gradient(135deg, #2c2c33, #1a1a1f);
}
.afs-hero-grid-mobile .afs-side-title{ order:1; font-size:11.5px; line-height:1.7; margin-top:0; -webkit-line-clamp:2; }
.afs-hero-grid-mobile .afs-side-caption .afs-meta-row{ order:2; margin-top:6px; margin-bottom:0; }