/*======================================================
Arian UI Kit
Component : Related Content
Version : 2.0 Stable
======================================================*/


/*----------------------------------
1. Related Container
----------------------------------*/

.af-related{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:22px;

    margin:36px 0;

    padding:24px;

    background:var(--af-surface,#fff);

    border:1px solid var(--af-border,#e7eef5);

    border-inline-start:5px solid var(--af-primary,#2bccd9);

    border-radius:var(--af-radius,18px);

    box-shadow:var(--af-shadow-sm);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        border-color .30s ease;

    overflow:hidden;

}

.af-related:hover{

    transform:translateY(-4px);

    border-color:rgba(43,204,217,.35);

    box-shadow:var(--af-shadow-md);

}


/*----------------------------------
2. Icon
----------------------------------*/

.af-related-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(43,204,217,.10);

    color:var(--af-primary,#2bccd9);

    font-size:24px;

    transition:
        background .30s,
        color .30s,
        transform .30s;

}

.af-related:hover .af-related-icon{

    transform:scale(1.08);

}


/*----------------------------------
3. Content
----------------------------------*/

.af-related-content{

    flex:1;

    min-width:0;

}


/*----------------------------------
4. Badge
----------------------------------*/

.af-related-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-bottom:12px;

    padding:5px 12px;

    border-radius:999px;

    background:rgba(43,204,217,.10);

    color:var(--af-primary,#2bccd9);

    font-size:.78rem;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

}
/*----------------------------------
5. Title
----------------------------------*/

.af-related-title{

    margin:0 0 10px;

    color:var(--af-heading,#0f172a);

    font-size:1.18rem;

    font-weight:700;

    line-height:1.7;

}

.af-related-title a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

.af-related-title a:hover{

    color:var(--af-primary,#2bccd9);

}


/*----------------------------------
6. Description
----------------------------------*/

.af-related-description{

    margin:0;

    color:var(--af-text-light,#64748b);

    font-size:.96rem;

    line-height:2;

}

.af-related-description p{

    margin:0;

}


/*----------------------------------
7. Meta
----------------------------------*/

.af-related-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:16px;

    margin-top:18px;

    color:var(--af-text-light,#64748b);

    font-size:.84rem;

}

.af-related-meta-item{

    display:inline-flex;

    align-items:center;

    gap:6px;

    white-space:nowrap;

}

.af-related-meta-item i{

    color:var(--af-primary,#2bccd9);

    font-size:.88rem;

    flex-shrink:0;

}


/*----------------------------------
8. Divider
----------------------------------*/

.af-related-divider{

    width:100%;

    height:1px;

    margin:18px 0;

    background:var(--af-border,#e7eef5);

}
/*----------------------------------
9. Footer
----------------------------------*/

.af-related-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:20px;

    flex-wrap:wrap;

}


/*----------------------------------
10. Action
----------------------------------*/

.af-related-action{

    display:flex;

    align-items:center;

    gap:10px;

}




/*----------------------------------
12. Variants
----------------------------------*/

/* مطالعه بیشتر */

.af-related.af-readmore{

    border-inline-start-color:var(--af-primary,#2bccd9);

}

.af-related.af-readmore
.af-related-icon{

    background:rgba(43,204,217,.10);

    color:var(--af-primary,#2bccd9);

}


/* مقاله مرتبط */

.af-related.af-related-post{

    border-inline-start-color:var(--af-info,#3b82f6);

}

.af-related.af-related-post
.af-related-icon{

    background:rgba(59,130,246,.10);

    color:var(--af-info,#3b82f6);

}


/* دانلود */

.af-related.af-download{

    border-inline-start-color:var(--af-success,#22c55e);

}

.af-related.af-download
.af-related-icon{

    background:rgba(34,197,94,.10);

    color:var(--af-success,#22c55e);

}


/* دوره آموزشی */

.af-related.af-course{

    border-inline-start-color:var(--af-warning,#f59e0b);

}

.af-related.af-course
.af-related-icon{

    background:rgba(245,158,11,.12);

    color:var(--af-warning,#f59e0b);

}


/* ویدئو */

.af-related.af-video{

    border-inline-start-color:var(--af-danger,#ef4444);

}

.af-related.af-video
.af-related-icon{

    background:rgba(239,68,68,.10);

    color:var(--af-danger,#ef4444);

}


/* ابزار */

.af-related.af-tool{

    border-inline-start-color:#8b5cf6;

}

.af-related.af-tool
.af-related-icon{

    background:rgba(139,92,246,.10);

    color:#8b5cf6;

}


/*----------------------------------
13. Hover Effects
----------------------------------*/

.af-related:hover
.af-related-title a{

    color:var(--af-primary,#2bccd9);

}

.af-related:hover
.af-related-badge{

    background:var(--af-primary,#2bccd9);

    color:#fff;

}

.af-related:hover
.af-related-meta-item i{

    transform:scale(1.08);

}

.af-related-meta-item i{

    transition:
        transform .25s ease,
        color .25s ease;
}
/*----------------------------------
14. Responsive
----------------------------------*/

@media (max-width:1024px){

    .af-related{

        padding:22px;

        gap:18px;

    }

}


@media (max-width:768px){

    .af-related{

        flex-direction:column;

        align-items:flex-start;

        padding:20px;

        gap:18px;

    }

    .af-related-icon{

        width:52px;

        height:52px;

        font-size:22px;

    }

    .af-related-footer{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .af-related-action{

        width:100%;

    }

    .af-related .af-btn{

        width:100%;

        justify-content:center;

    }

}


/*----------------------------------
15. Keyboard Accessibility
----------------------------------*/

.af-related a:focus-visible,

.af-related button:focus-visible{

    outline:2px solid var(--af-primary,#2bccd9);

    outline-offset:3px;

    border-radius:8px;

}


/*----------------------------------
16. Reduced Motion
----------------------------------*/

@media (prefers-reduced-motion:reduce){

    .af-related,

    .af-related *{

        transition:none !important;

        animation:none !important;

    }

}


/*----------------------------------
17. Print
----------------------------------*/

@media print{

    .af-related{

        box-shadow:none;

        border:1px solid #ccc;

        break-inside:avoid;

        page-break-inside:avoid;

    }

}


/*----------------------------------
18. Utilities
----------------------------------*/

.af-related.is-full{

    width:100%;

}

.af-related.is-compact{

    padding:18px;

}

.af-related.is-centered{

    align-items:center;

}

.af-related.is-bordered{

    border-width:2px;

}

.af-related.is-shadowless{

    box-shadow:none;

}


/*----------------------------------
19. Dark Mode Ready
----------------------------------*/

@media (prefers-color-scheme:dark){

    .af-related{

        background:var(--af-surface,#1f2937);

        border-color:rgba(255,255,255,.08);

    }

}