/* ================================================================
   PSYCHOHEAL BLOG
   BLOG ARCHIVE / CATEGORY
================================================================ */


/* ================================================================
   VARIABLES
================================================================ */

:root {

    --ps-blog-primary: #22A6B3;

    --ps-blog-primary-soft:
        rgba(34,166,179,.10);

    --ps-blog-dark: #132231;

    --ps-blog-orange: #FF9F43;

    --ps-blog-bg: #F7FAFA;

    --ps-blog-white: #FFFFFF;

    --ps-blog-text:
        #1A2A38;

    --ps-blog-muted:
        #667085;

    --ps-blog-border:
        rgba(19,34,49,.09);

}





/* ================================================================
   RESET
================================================================ */


.ps-blog,
.ps-blog * {

    box-sizing:border-box;

}


.ps-blog {

    width:100%;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #F7FAFA 0%,
            #FFFFFF 100%
        );

}



.ps-blog-container {

    width:
        min(1320px, calc(100% - 48px));

    margin:
        0 auto;

}






/* ================================================================
   HERO
================================================================ */


.ps-blog-hero {

    position:relative;

    padding:

        90px 0 80px;

    overflow:hidden;

}



.ps-blog-hero::before {


    content:"";

    position:absolute;

    width:420px;

    height:420px;


    top:-220px;

    right:-150px;


    border-radius:50%;


    background:

        rgba(34,166,179,.08);


}



.ps-blog-hero::after {


    content:"";


    position:absolute;


    width:220px;

    height:220px;


    bottom:-120px;

    left:-80px;


    border-radius:50%;


    background:

        rgba(255,159,67,.08);


}





.ps-blog-hero__badge {


    width:max-content;


    display:flex;

    align-items:center;


    gap:10px;


    padding:

        8px 18px;


    margin-bottom:24px;


    border-radius:100px;


    background:

        var(--ps-blog-primary-soft);


    color:

        var(--ps-blog-primary);


    font-size:13px;


    font-weight:800;


}



.ps-blog-hero__badge::before {


    content:"";


    width:8px;

    height:8px;


    border-radius:50%;


    background:

        var(--ps-blog-orange);

}




.ps-blog-hero__title {


    max-width:850px;


    margin:

        0 0 22px;


    color:

        var(--ps-blog-dark);



    font-size:

        clamp(34px,4vw,54px);



    font-weight:850;


    line-height:1.45;


    letter-spacing:-1px;


}



.ps-blog-hero__description {


    max-width:760px;


    margin:0;


    color:

        var(--ps-blog-muted);


    font-size:16px;


    font-weight:550;


    line-height:2.2;


    word-spacing:3px;


}






/* ================================================================
   POSTS SECTION
================================================================ */


.ps-blog-posts {


    padding:

        0 0 90px;


}



.ps-blog-grid {


    display:grid;


    grid-template-columns:

        repeat(3,1fr);



    gap:32px;


}







/* ================================================================
   ARTICLE CARD
================================================================ */


.ps-blog-card {


    position:relative;


    display:flex;


    flex-direction:column;


    overflow:hidden;


    min-height:500px;


    border-radius:28px;


    background:

        var(--ps-blog-white);


    border:

        1px solid
        var(--ps-blog-border);


    box-shadow:

        0 20px 50px
        rgba(19,34,49,.07);



    transition:

        transform .35s ease,

        box-shadow .35s ease;


}



.ps-blog-card:hover {


    transform:

        translateY(-10px);


    box-shadow:

        0 30px 70px
        rgba(19,34,49,.14);


}





/* ================================================================
   IMAGE
================================================================ */


.ps-blog-card__image {


    display:block;


    height:260px;


    overflow:hidden;


}



.ps-blog-card__image img {


    width:100%;


    height:100%;


    object-fit:cover;


    transition:

        transform .45s ease;


}



.ps-blog-card:hover
.ps-blog-card__image img {


    transform:

        scale(1.07);


}



.ps-blog-card__placeholder {


    height:100%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

        var(--ps-blog-dark);


    color:white;


    font-size:20px;


    font-weight:800;


}







/* ================================================================
   CONTENT
================================================================ */


.ps-blog-card__content {


    display:flex;


    flex-direction:column;


    flex:1;


    padding:

        26px;


}



.ps-blog-card__category {


    width:max-content;


    margin-bottom:16px;


    padding:

        7px 14px;


    border-radius:100px;


    background:

        rgba(255,159,67,.12);


    color:

        #D97706;


    font-size:12px;


    font-weight:850;


}



.ps-blog-card__title {


    margin:

        0 0 28px;


    min-height:78px;


}



.ps-blog-card__title a {


    color:

        var(--ps-blog-dark);


    font-size:22px;


    font-weight:800;


    line-height:1.75;


    word-spacing:3px;


}



.ps-blog-card__title a:hover {


    color:

        var(--ps-blog-primary);


}






/* ================================================================
   BUTTON
================================================================ */


.ps-blog-card__button {


    margin-top:auto;


    width:max-content;


    padding:

        12px 24px;


    border-radius:15px;


    background:

        var(--ps-blog-dark);


    color:white;


    font-size:13px;


    font-weight:800;


    transition:.25s ease;


}



.ps-blog-card__button:hover {


    background:

        var(--ps-blog-primary);


    color:white;


}






/* ================================================================
   PAGINATION
================================================================ */


.ps-blog-pagination {


    display:flex;


    justify-content:center;


    margin-top:70px;


}



.ps-blog-pagination ul {


    display:flex;


    align-items:center;


    gap:10px;


    padding:0;


    margin:0;


    list-style:none;


}



.ps-blog-pagination a,
.ps-blog-pagination span {


    min-width:44px;


    height:44px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:14px;


    background:white;


    border:

        1px solid
        var(--ps-blog-border);


    color:

        var(--ps-blog-dark);


    font-weight:800;


}



.ps-blog-pagination .current {


    background:

        var(--ps-blog-primary);


    color:white;


    border-color:

        var(--ps-blog-primary);


}







/* ================================================================
   CTA
================================================================ */


.ps-blog-cta {


    padding:

        0 0 100px;


}



.ps-blog-cta__box {


    position:relative;


    overflow:hidden;


    padding:

        55px;


    border-radius:35px;


    background:

        var(--ps-blog-dark);


    color:white;


}



.ps-blog-cta__box::after {


    content:"";


    position:absolute;


    width:300px;

    height:300px;


    right:-100px;

    bottom:-120px;


    border-radius:50%;


    background:

        rgba(34,166,179,.18);


}



.ps-blog-cta__box h2 {


    position:relative;


    z-index:2;


    margin:0 0 15px;


    font-size:32px;


    font-weight:850;


}



.ps-blog-cta__box p {


    position:relative;


    z-index:2;


    max-width:700px;


    margin:0 0 30px;


    color:

        rgba(255,255,255,.75);


    line-height:2;


    word-spacing:3px;


}



.ps-blog-cta__button {


    position:relative;


    z-index:2;


    display:inline-flex;


    padding:

        14px 30px;


    border-radius:16px;


    background:

        var(--ps-blog-orange);


    color:

        var(--ps-blog-dark);


    font-weight:900;


}





/* ================================================================
   TABLET
================================================================ */


@media(max-width:1024px){


.ps-blog-grid {


    grid-template-columns:

        repeat(2,1fr);


}



}






/* ================================================================
   MOBILE
================================================================ */


@media(max-width:767px){


.ps-blog-container {


    width:

        calc(100% - 28px);


}



.ps-blog-hero {


    padding:

        55px 0 45px;


}



.ps-blog-hero__title {


    font-size:32px;


}



.ps-blog-hero__description {


    font-size:14px;


}



.ps-blog-grid {


    grid-template-columns:

        1fr;


    gap:24px;


}



.ps-blog-card {


    min-height:470px;


}



.ps-blog-card__image {


    height:240px;


}



.ps-blog-card__title a {


    font-size:20px;


}



.ps-blog-card__content {


    padding:22px;


}



.ps-blog-cta__box {


    padding:32px 24px;


}



.ps-blog-cta__box h2 {


    font-size:25px;


}



}