/*
==========================================================
Arian UI Kit
Component : Card
Version   : 3.0 Enterprise (BEM)
Author    : Arian File
==========================================================
*/


/*==========================================================
01. Card Base
==========================================================*/

.af-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:2rem;

    gap:1.5rem;

    background:#fff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:20px;

    overflow:hidden;

    transition:
        transform var(--af-transition),
        box-shadow var(--af-transition),
        border-color var(--af-transition);

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);

}


/*==========================================================
02. Hover
==========================================================*/

.af-card:hover{

    transform:translateY(-8px);

    border-color:rgba(30,159,216,.20);

    box-shadow:
        0 18px 50px rgba(15,23,42,.12);

}


/*==========================================================
03. Header
==========================================================*/

.af-card__header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:1rem;

}


/*==========================================================
04. Icon
==========================================================*/

.af-card__icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(30,159,216,.12),
            rgba(30,159,216,.04)
        );

    color:var(--af-primary);

    flex-shrink:0;

}

.af-card__icon svg{

    width:36px;

    height:36px;

}


/*==========================================================
05. Badge
==========================================================*/

.af-card__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.45rem .9rem;

    border-radius:999px;

    background:rgba(30,159,216,.08);

    color:var(--af-primary);

    font-size:.82rem;

    font-weight:600;

    margin:0;

}


/*==========================================================
06. Body
==========================================================*/

.af-card__body{

    display:flex;

    flex-direction:column;

    flex:1;

    gap:1rem;

}


/*==========================================================
07. Title
==========================================================*/

.af-card__title{

    margin:0;

    color:var(--af-heading);

    font-size:1.45rem;

    font-weight:700;

    line-height:1.4;

}


/*==========================================================
08. Text
==========================================================*/

.af-card__text{

    margin:0;

    color:var(--af-text);

    line-height:1.9;

}


/*==========================================================
09. Features
==========================================================*/

.af-card__features{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:.8rem;

}

.af-card__features li{

    display:flex;

    align-items:center;

    gap:.7rem;

}


/*==========================================================
10. Footer
==========================================================*/

.af-card__footer{

    margin-top:auto;

}


/*==========================================================
11. Button
==========================================================*/

.af-card__footer .wp-block-buttons{

    display:flex;

    justify-content:center;

    width:100%;

}

.af-card__footer .wp-block-button{

    width:100%;

}

.af-card__footer .wp-block-button__link{

    display:flex;

    width:100%;

    justify-content:center;

}


/*==========================================================
12. Service Modifier
==========================================================*/

.af-card--service{

    border-top:4px solid var(--af-primary);

}


/*==========================================================
13. Pricing Modifier
==========================================================*/

.af-card--pricing{

    border-top:4px solid var(--af-success);

}


/*==========================================================
14. Product Modifier
==========================================================*/

.af-card--product{

    border-top:4px solid var(--af-warning);

}


/*==========================================================
15. Team Modifier
==========================================================*/

.af-card--team .af-card__header{

    align-items:center;

    text-align:center;

}


/*==========================================================
16. Blog Modifier
==========================================================*/

.af-card--blog .af-card__title{

    font-size:1.3rem;

}


/*==========================================================
17. Hover Animation
==========================================================*/

.af-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(30,159,216,.02),
            transparent
        );

    opacity:0;

    transition:opacity var(--af-transition);

    pointer-events:none;

}

.af-card:hover::before{

    opacity:1;

}


/*==========================================================
18. Responsive
==========================================================*/

@media (max-width:992px){

    .af-card{

        padding:1.75rem;

    }

}


@media (max-width:768px){

    .af-card{

        padding:1.5rem;

        gap:1.25rem;

    }

    .af-card__icon{

        width:60px;

        height:60px;

    }

    .af-card__icon svg{

        width:30px;

        height:30px;

    }

}


@media (max-width:480px){

    .af-card{

        padding:1.25rem;

    }

}