/* =========================================================
   JEMA HOSPITALS
   BLOG PAGE
========================================================= */


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

.blog-hero{
    position:relative;
    min-height:520px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,59,117,.96),
            rgba(0,59,117,.78)
        ),
        url("../images/blog/blog-hero.jpg");

    background-size:cover;
    background-position:center;
}

.blog-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,38,78,.85),
            rgba(0,59,117,.35)
        );
}

.blog-hero .container{
    position:relative;
    z-index:2;
}

.blog-hero-content{
    max-width:760px;
    color:#fff;
}

.blog-hero .section-tag{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.15);
    color:var(--accent);
}

.blog-hero h1{
    margin:25px 0 20px;

    color:#fff;

    font-size:clamp(3rem,6vw,5.5rem);
    line-height:1.05;

    font-weight:700;
}

.blog-hero h1 span{
    display:block;
    color:var(--accent);
}

.blog-hero p{
    max-width:650px;

    color:rgba(255,255,255,.85);

    font-size:18px;
    line-height:1.8;
}


/* =========================================================
   FEATURED BLOG
========================================================= */

.featured-blog{
    padding:100px 0;
    background:#fff;
}

.featured-blog-card{
    display:grid;
    grid-template-columns:1.1fr 1fr;

    min-height:480px;

    overflow:hidden;

    border-radius:25px;

    background:#f8fbff;

    border:1px solid #edf2f7;

    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.featured-blog-image{
    min-height:480px;
    overflow:hidden;
}

.featured-blog-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;
}

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

.featured-blog-content{
    padding:55px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.blog-category{
    display:inline-flex;

    width:max-content;

    padding:7px 14px;

    border-radius:50px;

    background:rgba(212,160,23,.12);

    color:var(--accent);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.featured-blog-content h3{
    margin:20px 0;

    color:var(--primary);

    font-size:36px;
    line-height:1.2;
}

.featured-blog-content p{
    color:var(--text-light);

    font-size:16px;
    line-height:1.8;

    margin-bottom:20px;
}

.blog-meta{
    display:flex;
    align-items:center;
    gap:20px;

    margin-bottom:25px;

    color:#7a8795;

    font-size:13px;
}

.blog-meta span{
    display:flex;
    align-items:center;
    gap:7px;
}

.blog-meta i{
    color:var(--accent);
}

.featured-blog-content .btn{
    width:max-content;
}


/* =========================================================
   LATEST BLOG
========================================================= */

.latest-blog{
    padding:100px 0;

    background:#f8fbff;
}

.blog-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;
}

.blog-card{
    overflow:hidden;

    background:#fff;

    border-radius:20px;

    border:1px solid #edf2f7;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;
}

.blog-card:hover{
    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);
}

.blog-image{
    position:relative;

    height:240px;

    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;
}

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

.blog-image .blog-category{
    position:absolute;

    left:20px;
    bottom:20px;

    background:#fff;

    color:var(--primary);

    box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.blog-content{
    padding:30px;
}

.blog-content .blog-meta{
    margin-bottom:12px;
}

.blog-content h3{
    margin:0 0 15px;

    color:var(--primary);

    font-size:22px;
    line-height:1.35;
}

.blog-content p{
    color:var(--text-light);

    line-height:1.75;

    margin-bottom:20px;
}

.blog-content > a{
    display:inline-flex;

    align-items:center;

    gap:9px;

    color:var(--accent);

    text-decoration:none;

    font-weight:700;

    transition:.3s;
}

.blog-content > a:hover{
    gap:14px;
    color:var(--primary);
}


/* =========================================================
   HEALTHCARE NEWS
========================================================= */

.health-news{
    padding:100px 0;

    background:#fff;
}

.news-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;
}

.news-card{
    background:#fff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #edf2f7;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;
}

.news-card:hover{
    transform:translateY(-7px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);
}

.news-image{
    height:210px;
    overflow:hidden;
}

.news-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.news-content{
    padding:25px;
}

.news-source{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:10px;

    margin-bottom:12px;

    color:#7b8794;

    font-size:12px;
}

.news-source span:first-child{
    color:var(--accent);

    font-weight:700;
}

.news-content h3{
    margin-bottom:12px;

    color:var(--primary);

    font-size:20px;

    line-height:1.4;
}

.news-content p{
    color:var(--text-light);

    line-height:1.7;

    font-size:14px;

    margin-bottom:18px;
}

.news-content a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;
}

.news-content a:hover{
    color:var(--accent);
}


/* =========================================================
   NEWS LOADING
========================================================= */

.news-loading{
    grid-column:1 / -1;

    min-height:180px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

    color:var(--text-light);

    text-align:center;
}

.news-loading i{
    color:var(--accent);

    font-size:28px;
}


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

.blog-cta{
    position:relative;

    padding:100px 0;

    background:
        linear-gradient(
            135deg,
            #003b75,
            #0056a6
        );

    overflow:hidden;
}

.blog-cta::before{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    right:-150px;
    top:-200px;

    background:rgba(255,255,255,.06);
}

.blog-cta::after{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    left:-150px;
    bottom:-180px;

    background:rgba(212,160,23,.08);
}

.blog-cta .container{
    position:relative;
    z-index:2;
}

.blog-cta-content{
    max-width:750px;

    margin:auto;

    text-align:center;

    color:#fff;
}

.blog-cta .section-tag{
    background:rgba(255,255,255,.10);

    color:var(--accent);

    border:1px solid rgba(255,255,255,.15);
}

.blog-cta h2{
    margin:25px 0 20px;

    color:#fff;

    font-size:48px;
    line-height:1.2;
}

.blog-cta p{
    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.8;

    margin-bottom:30px;
}

.blog-cta-buttons{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;
}

.blog-cta-buttons .btn{
    display:inline-flex;

    align-items:center;

    gap:10px;
}

.blog-cta-buttons .btn-outline{
    color:#fff;

    border-color:rgba(255,255,255,.5);
}

.blog-cta-buttons .btn-outline:hover{
    background:#fff;
    color:var(--primary);
}


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

@media(max-width:992px){

    .featured-blog-card{
        grid-template-columns:1fr;
    }

    .featured-blog-image{
        height:400px;
        min-height:400px;
    }

    .blog-grid,
    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media(max-width:768px){

    .blog-hero{
        min-height:480px;
    }

    .blog-hero h1{
        font-size:clamp(2.5rem,10vw,3.5rem);
    }

    .blog-hero p{
        font-size:15px;
    }

    .featured-blog,
    .latest-blog,
    .health-news,
    .blog-cta{
        padding:70px 0;
    }

    .featured-blog-card{
        border-radius:18px;
    }

    .featured-blog-image{
        height:280px;
        min-height:280px;
    }

    .featured-blog-content{
        padding:30px 25px;
    }

    .featured-blog-content h3{
        font-size:28px;
    }

    .blog-grid,
    .news-grid{
        grid-template-columns:1fr;

        gap:22px;

        margin-top:40px;
    }

    .blog-image{
        height:220px;
    }

    .blog-content{
        padding:25px;
    }

    .blog-cta h2{
        font-size:34px;
    }

    .blog-cta p{
        font-size:15px;
    }

    .blog-cta-buttons{
        flex-direction:column;
    }

    .blog-cta-buttons .btn{
        width:100%;
        justify-content:center;
    }

}


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

@media(max-width:480px){

    .blog-hero{
        min-height:430px;
    }

    .blog-hero h1{
        font-size:2.3rem;
    }

    .blog-hero p{
        font-size:14px;
        line-height:1.7;
    }

    .featured-blog-content h3{
        font-size:24px;
    }

    .featured-blog-content p{
        font-size:14px;
    }

    .blog-content h3{
        font-size:20px;
    }

    .blog-meta{
        flex-wrap:wrap;
        gap:10px;
    }

}