/*
 Theme Name:   PHC Divi
 Description:  Child Theme for Divi
 Author:       The PixelHouse
 Author URI:   https://thepixelhouse.net
 Template:     Divi
 Version:      1.3
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  phc
*/

/* ===============================
BLOG GRID SAME AS SCREENSHOT
=============================== */
.blog-filter-bar{
    display:flex;
    gap:15px;
    margin-bottom:0px;
    flex-wrap:wrap;
    align-items: center;
}
.blog-filter-bar p {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    font-size: 20px;
}

#blog-category-filter, #blog-search-filter {
    height: 40px;
    padding: 0 15px;
    border: 1px solid rgba(177, 177, 177, 0.40);
    border-radius: 16px;
    background: rgba(177, 177, 177, 0.20);
    color: #fff;
    font-size: 16px;
}
#blog-category-filter option{
    background:#085086;
    color: #fff;
    padding:10px;
}


#blog-category-filter{
    min-width:250px;
}

#blog-search-filter{
    flex:1;
    min-width:250px;
}

.custom-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.blog-card{
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.blog-card-content{
    padding:20px;
}

.blog-title{
    font-size:20px;
    margin-bottom:10px;
}

.load-more-wrap{
    text-align:center;
    margin-top:30px;
}

#load-more {
    padding: 14px 30px;
    border: none;
    background: #000;
    cursor: pointer;
    border-radius: 6px;
    background-color: var(--gcid-f90c5v4652);
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    font-variant: normal;
    text-decoration-line: none;
    color: var(--gcid-3bkuf7z70r) !important;
    font-size: 24px !important;
    letter-spacing: -0.005em !important;
    line-height: 35px !important;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-width: 0px;
    border-color: #333;
    border-style: solid;
    margin-top: 40px;
}
.custom-blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:34px;
    align-items:start;
}

/* CARD */
.blog-card{
    background:#fff;
    border:none;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
}

/* LINK FULL CARD */
.blog-card a{
    text-decoration:none;
    display:block;
}

/* IMAGE */
.blog-image{
    border-radius:18px;
    overflow:hidden;
    margin-bottom:18px;
}

.blog-image img{
    width:100%;
    height:350px;
    object-fit:cover;
    display:block;
    transition:0.4s ease;
}

.blog-card:hover .blog-image img{
    transform:scale(1.04);
}

/* CONTENT */
.blog-card-content{
    padding:0;
}

/* TITLE */
.blog-title {
    font-family: var(--gvid-88dl4cmxet);
    font-weight: var(--et_global_heading_font_weight);
    color: var(--gcid-zelctpogsg);
    font-size: var(--gvid-q43mvpw85h);
    line-height: 1.2em;
}

/* EXCERPT */
.blog-excerpt {
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--et_global_body_font);
    color: var(--gcid-21dt3f6oif);
    font-size: var(--gvid-2vitir9f0q);
}

/* READ MORE */
.blog-readmore {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gcid-zelctpogsg) !important;
    font-size: var(--gvid-myuw6rl2wa)!important;
}

.blog-readmore span{
    margin-left:8px;
}
.blog-readmore span img{
	    width: 12px;
}
/* HIDE DATE */
.blog-date{
    display:none;
}

/* RESPONSIVE */
@media(max-width:1200px){

    .blog-title{
        font-size:24px;
    }

    .blog-excerpt,
    .blog-readmore{
        font-size:18px;
    }

    .blog-image img{
        height:280px;
    }
}

@media(max-width:991px){

    .custom-blog-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .blog-title{
        font-size:22px;
    }
}

@media(max-width:767px){

    .custom-blog-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .blog-title{
        font-size:28px;
    }

    .blog-image img{
        height:260px;
    }
}
@media(max-width:600px){
    .blog-filter-bar {
        display: grid;
    }
    .blog-filter-bar p {
        text-align: center;
    }
}