/* ============================================================
   KIIFF — Cards v5 (compact / mobile-first / 3-column mobile)
   ============================================================ */

/* ═══════════ GRID ═══════════ */
.news-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin:14px auto !important;
    padding:0 !important;
    max-width:100% !important;
    border-radius:0 !important;
}
@media (min-width:640px){
    .news-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:12px !important; max-width:1000px !important; margin:18px auto !important; }
}
@media (min-width:992px){
    .news-grid{ grid-template-columns:repeat(5, minmax(0, 1fr)) !important; gap:14px !important; max-width:1240px !important; margin:22px auto !important; }
}
@media (min-width:1280px){
    .news-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:16px !important; max-width:1400px !important; }
}

/* ═══════════ CARD ═══════════ */
.news-card{
    background:linear-gradient(155deg, #2e3f4c 0%, #263540 100%) !important;
    border:1px solid rgba(232,237,242,.08) !important;
    border-radius:12px !important;
    overflow:hidden !important;
    transition:transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s !important;
    cursor:pointer !important;
    display:flex !important;
    flex-direction:column !important;
    box-shadow:0 4px 14px rgba(0,0,0,.22) !important;
    position:relative !important;
}
.news-card:hover{
    transform:translateY(-5px) !important;
    border-color:rgba(212,175,55,.55) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(212,175,55,.2) !important;
}

/* ═══════════ IMAGE ═══════════ */
.news-card .img-wrap{
    width:100% !important;
    aspect-ratio:16/11 !important;
    overflow:hidden !important;
    background:#0a0f16 !important;
    position:relative !important;
    margin:0 !important;
}
.news-card .img-wrap img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:transform .5s ease !important;
    display:block !important;
}
.news-card:hover .img-wrap img{ transform:scale(1.06) !important; }

/* شماره خبر — overlay روی تصویر */
.news-card .img-wrap::after{
    content:attr(data-id);
    position:absolute;
    top:6px; left:6px;
    background:rgba(0,0,0,.72);
    color:#D4AF37;
    font-size:.6rem;
    font-weight:800;
    padding:2px 7px;
    border-radius:8px;
    font-family:monospace;
    backdrop-filter:blur(4px);
}

/* ═══════════ BODY ═══════════ */
.news-card .card-body{
    padding:8px 8px 7px !important;
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
}

/* Meta (id + date) — روی موبایل پنهان */
.news-card .card-body .meta{
    display:none !important;
}

/* Title box */
.news-card .card-body .title-box{
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    margin:0 0 5px 0 !important;
    border-radius:0 !important;
}
.news-card .card-body .title-box h3{
    font-size:.72rem !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    color:#E8EDF2 !important;
    margin:0 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    word-break:break-word !important;
}

/* Summary text — پنهان تا تبلت */
.news-card .card-body p{
    display:none !important;
}

/* Read more — پنهان */
.news-card .card-body .read-more{
    display:none !important;
}

/* ═══════════ STATS ROW (❤️ 💬 📅) ═══════════ */
.news-card .card-body .like-count{
    display:none !important;
}

.kiff-card-stats{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
    margin-top:auto !important;
    padding-top:6px !important;
    border-top:1px dashed rgba(212,175,55,.18) !important;
    font-size:.65rem !important;
    color:#9AA5B1 !important;
    line-height:1 !important;
    flex-wrap:nowrap !important;
}
.kiff-card-stats .like,
.kiff-card-stats .cmt{
    display:inline-flex !important;
    align-items:center !important;
    gap:3px !important;
    transition:.2s !important;
    white-space:nowrap !important;
}
.kiff-card-stats .like svg{ color:#ff4d6d !important; }
.kiff-card-stats .cmt svg{ color:#5aa9ff !important; }
.kiff-card-stats b{
    font-weight:800 !important;
    color:#E8EDF2 !important;
    font-size:.68rem !important;
    font-family:'Vazirmatn',monospace !important;
}
.kiff-card-stats .kiff-date-badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:3px !important;
    color:#D4AF37 !important;
    font-size:.6rem !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    direction:rtl !important;
}
.kiff-card-stats .kiff-date-badge svg{
    width:10px !important;
    height:10px !important;
    fill:currentColor !important;
    opacity:.85 !important;
}

/* ═══════════ TABLET (از 640px) ═══════════ */
@media (min-width:640px){
    .news-card .card-body{ padding:10px 10px 9px !important; }
    .news-card .card-body .title-box h3{ font-size:.82rem !important; -webkit-line-clamp:2 !important; }
    .news-card .card-body p{
        display:-webkit-box !important;
        font-size:.72rem !important;
        line-height:1.5 !important;
        color:rgba(232,237,242,.55) !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
        margin:5px 0 0 0 !important;
    }
    .kiff-card-stats{ font-size:.7rem !important; }
    .kiff-card-stats b{ font-size:.72rem !important; }
    .kiff-card-stats .kiff-date-badge{ font-size:.66rem !important; }
}

/* ═══════════ DESKTOP (از 992px) ═══════════ */
@media (min-width:992px){
    .news-card .card-body{ padding:11px 12px 10px !important; }
    .news-card .card-body .title-box h3{ font-size:.88rem !important; }
    .news-card .card-body p{ font-size:.76rem !important; }
    .kiff-card-stats{ font-size:.74rem !important; }
    .kiff-card-stats b{ font-size:.78rem !important; }
    .kiff-card-stats .kiff-date-badge{ font-size:.7rem !important; }
}

/* ═══════════ MODAL (بستن مطمئن) ═══════════ */
.modal-overlay{
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.72) !important;
    backdrop-filter:blur(6px) !important;
    z-index:99999 !important;
    display:none !important;
    align-items:center !important;
    justify-content:center !important;
    padding:16px !important;
}
.modal-overlay.active{ display:flex !important; animation:modalFadeIn .25s ease !important; }
@keyframes modalFadeIn{ from{opacity:0} to{opacity:1} }

.modal-box{
    max-width:760px !important;
    width:100% !important;
    max-height:88vh !important;
    overflow-y:auto !important;
    background:linear-gradient(160deg, #263540 0%, #1e2a34 100%) !important;
    border:1px solid rgba(212,175,55,.35) !important;
    border-radius:20px !important;
    padding:22px 24px 20px !important;
    box-shadow:0 30px 70px rgba(0,0,0,.6) !important;
    position:relative !important;
    animation:modalSlideIn .3s cubic-bezier(.2,.9,.3,1) !important;
}
@keyframes modalSlideIn{ from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:none} }

/* دکمه بستن مودال */
.modal-box .close-modal{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    width:38px !important;
    height:38px !important;
    border-radius:50% !important;
    background:rgba(200,60,60,.15) !important;
    border:1.5px solid rgba(200,60,60,.55) !important;
    color:#ff8a8a !important;
    font-size:1.1rem !important;
    font-weight:800 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    transition:.25s !important;
    z-index:10 !important;
    line-height:1 !important;
    padding:0 !important;
}
.modal-box .close-modal:hover{
    background:rgba(200,60,60,.35) !important;
    color:#fff !important;
    transform:rotate(90deg) !important;
    box-shadow:0 0 20px rgba(200,60,60,.5) !important;
}

/* دکمه بستن پایین مودال (پشتیبان) */
.kiff-modal-close-bottom{
    display:flex !important;
    justify-content:center !important;
    margin-top:18px !important;
    padding-top:14px !important;
    border-top:1px solid rgba(232,237,242,.1) !important;
}
.kiff-modal-close-bottom button{
    padding:10px 40px !important;
    background:linear-gradient(135deg,#D4AF37,#C9A03D) !important;
    border:none !important;
    border-radius:30px !important;
    color:#0a121c !important;
    font-family:inherit !important;
    font-weight:800 !important;
    font-size:.9rem !important;
    cursor:pointer !important;
    transition:.25s !important;
}
.kiff-modal-close-bottom button:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 8px 20px rgba(212,175,55,.4) !important;
}

@media (max-width:520px){
    .modal-box{ padding:18px 16px 16px !important; border-radius:16px !important; max-height:92vh !important; }
    .modal-box .close-modal{ width:34px !important; height:34px !important; top:10px !important; left:10px !important; font-size:1rem !important; }
}

/* ═══════════ PAGINATION v5 ═══════════ */
.pagination{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin:28px auto 20px !important;
    padding:12px 20px !important;
    background:linear-gradient(135deg, rgba(38,53,64,.72), rgba(30,42,52,.62)) !important;
    border:1px solid rgba(212,175,55,.22) !important;
    border-radius:50px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
    max-width:max-content !important;
    width:auto !important;
    backdrop-filter:blur(12px) !important;
    direction:rtl !important;
}
.pagination .page-info{
    font-size:.76rem !important;
    color:#9AA5B1 !important;
    padding:0 12px 0 4px !important;
    font-weight:600 !important;
    border-left:1px solid rgba(232,237,242,.12) !important;
    margin-left:4px !important;
    white-space:nowrap !important;
}
.pagination button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-width:38px !important;
    height:38px !important;
    padding:0 12px !important;
    border-radius:30px !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(232,237,242,.14) !important;
    color:#C5CED6 !important;
    font-family:'Vazirmatn',Tahoma,sans-serif !important;
    font-size:.84rem !important;
    font-weight:700 !important;
    cursor:pointer !important;
    transition:all .25s cubic-bezier(.2,.9,.3,1) !important;
    line-height:1 !important;
    flex-shrink:0 !important;
}
.pagination button:hover:not(:disabled){
    background:rgba(212,175,55,.14) !important;
    border-color:#D4AF37 !important;
    color:#D4AF37 !important;
    transform:translateY(-2px) !important;
    box-shadow:0 6px 16px rgba(212,175,55,.25) !important;
}
.pagination button.active{
    background:linear-gradient(135deg,#D4AF37,#C9A03D) !important;
    border-color:#D4AF37 !important;
    color:#0a121c !important;
    font-weight:900 !important;
    box-shadow:0 6px 18px rgba(212,175,55,.45) !important;
    transform:translateY(-2px) !important;
}
.pagination button:disabled{
    opacity:.32 !important;
    cursor:not-allowed !important;
    color:#6f8fa8 !important;
    transform:none !important;
}
.pagination button svg{ width:14px !important; height:14px !important; fill:currentColor !important; }
.pagination span:not(.page-info){ color:#6f8fa8 !important; padding:0 4px !important; user-select:none !important; }

@media (max-width:640px){
    .pagination{ gap:5px !important; padding:9px 14px !important; margin:20px auto 14px !important; border-radius:40px !important; }
    .pagination button{ min-width:34px !important; height:34px !important; padding:0 10px !important; font-size:.76rem !important; }
    .pagination .page-info{ font-size:.68rem !important; padding:0 6px 0 2px !important; }
}
@media (max-width:420px){
    .pagination .page-info{ display:none !important; }
    .pagination button{ min-width:32px !important; height:32px !important; padding:0 8px !important; }
    .pagination button .plabel{ display:none !important; }
}

/* ═══════════ FADE-IN ═══════════ */
.news-card{
    animation:kiffCardIn .4s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes kiffCardIn{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:none; }
}
.news-card:nth-child(1){ animation-delay:0ms; }
.news-card:nth-child(2){ animation-delay:40ms; }
.news-card:nth-child(3){ animation-delay:80ms; }
.news-card:nth-child(4){ animation-delay:120ms; }
.news-card:nth-child(5){ animation-delay:160ms; }
.news-card:nth-child(6){ animation-delay:200ms; }
.news-card:nth-child(7){ animation-delay:240ms; }
.news-card:nth-child(8){ animation-delay:280ms; }
.news-card:nth-child(9){ animation-delay:320ms; }
.news-card:nth-child(10){ animation-delay:360ms; }
.news-card:nth-child(11){ animation-delay:400ms; }
.news-card:nth-child(12){ animation-delay:440ms; }