/* ==========================================================
   BERITA IMUNISASI
   RTQ AL IMAM ADZ DZAHABIY
========================================================== */

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

.berita-detail-hero{

    position:relative;

    min-height:540px;

    padding:110px 0 100px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.68),
            rgba(0,0,0,.42),
            rgba(0,0,0,.18)
        ),
        url("../images/berita/berita-imunisasi-santri3.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    color:#fff;
}


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

.berita-detail-hero .container{

    position:relative;

    z-index:2;

    padding-top:40px;

    padding-bottom:40px;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.berita-detail-hero .breadcrumb-custom{

    margin-bottom:18px;

    color:#fff;

}

.berita-detail-hero .breadcrumb-custom a{

    color:#fff;

}

.berita-detail-hero .breadcrumb-custom a:hover{

    color:#fff;

}


/* ==========================================================
   LABEL
========================================================== */

.berita-detail-hero .page-hero-label{

    display:inline-block;

    color:var(--accent);

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:8px;

    text-shadow:1px 1px 5px rgba(0,0,0,.75);

}


/* ==========================================================
   JUDUL
========================================================== */

.berita-detail-hero h1{

    margin:0 0 25px;

    max-width:850px;

    color:#fff;

    font-size:3.4rem;

    line-height:1.2;

    font-weight:700;

    text-shadow:2px 2px 7px rgba(0,0,0,.75);

}


/* ==========================================================
   GARIS 
========================================================== */

.berita-detail-hero h1::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    margin-top:25px;

    background:var(--accent);

}


/* ==========================================================
   DESKRIPSI
========================================================== */

.berita-detail-hero p{

    max-width:800px;

    margin:0;

    color:#fff;

    font-size:1.25rem;

    line-height:1.8;

    text-shadow:1px 1px 5px rgba(0,0,0,.75);

}

/* ==========================================================
   META BERITA
========================================================== */

.news-detail-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:22px;

    padding:18px 0;

    color:#555;

    font-size:.95rem;

}


.news-detail-meta span{

    display:inline-flex;

    align-items:center;

    gap:7px;

}


.news-detail-meta i{

    color:#198754;

}


/* ==========================================================
   GAMBAR UTAMA BERITA
========================================================== */

.news-detail-image{

    width:100%;

    max-width:900px;

    margin:0 auto 35px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-radius:16px;

    background:#f5f7f6;

}


.news-detail-image img{

    width:100%;

    height:auto;

    max-height:500px;

    object-fit:contain;

    display:block;

    border-radius:16px;

}

/* ==========================================================
   POSTER BERITA - UKURAN LEBIH KECIL
========================================================== */

.news-image.poster-berita{

    width:50%;

    max-width:450px;

    margin:0 auto 35px;

}


.news-image.poster-berita img{

    width:100%;

    height:auto;

    display:block;

    border-radius:16px;

}

/* ==========================================================
   ISI BERITA
========================================================== */

.news-detail-content{

    max-width:900px;

    margin:0 auto;

}


.news-detail-content p{

    color:#555;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:22px;

}

/* ==========================================================
   GALERI FOTO - 3 KOLOM
========================================================== */

.news-detail-gallery{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}


/* ==========================================================
   FOTO DALAM BOX
========================================================== */

.news-detail-gallery figure{

    margin:0;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:14px;

    background:#f5f7f6;

    box-shadow:
        0 6px 20px rgba(0,0,0,.06);

}


/* ==========================================================
   GAMBAR
========================================================== */

.news-detail-gallery img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.news-detail-gallery figure:hover img{

    transform:scale(1.04);

}


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

@media (max-width:991px){

    .berita-detail-hero{

        min-height:480px;

        background:
            linear-gradient(
                to right,
                rgba(0,0,0,.68),
                rgba(0,0,0,.42),
                rgba(0,0,0,.18)
            ),
            url("../images/berita/berita-imunisasi-santri3.jpeg");

        background-size:cover;

        background-position:center;

    }


    .berita-detail-hero h1{

        font-size:2.8rem;

        max-width:700px;

    }


    .berita-detail-hero p{

        font-size:1.05rem;

        max-width:650px;

    }


    .news-detail-gallery{

        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:15px;

        margin:30px 0;

    }

}

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

@media (max-width:767px){

    .berita-detail-hero{

        min-height:520px;

        align-items:flex-start;

        padding:0;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.30) 0%,
                rgba(0,0,0,.40) 45%,
                rgba(0,0,0,.52) 100%
            ),
             url("../images/berita/berita-imunisasi-santri3.jpeg");

        background-size:cover;

        background-position:center;

        background-repeat:no-repeat;

    }


    .berita-detail-hero .container{

        padding-top:35px;

        padding-bottom:30px;

    }


    .berita-detail-hero .breadcrumb-custom{

        margin-bottom:24px;

        color:#fff;

    }


    .berita-detail-hero .breadcrumb-custom a{

        color:#fff;

    }


    .berita-detail-hero .page-hero-label{

        font-size:.8rem;

        letter-spacing:2.5px;

        margin-bottom:14px;

         color:var(--accent);

    }


    .berita-detail-hero h1{

        font-size:2.15rem;

        line-height:1.2;

        color:#fff;

        text-shadow:2px 2px 7px rgba(0,0,0,.8);

    }


    .berita-detail-hero h1::after{

        width:55px;

        margin-top:22px;

        background:var(--accent);

    }


    .berita-detail-hero p{

        margin-top:22px;

        font-size:.98rem;

        line-height:1.7;

        color:#fff;

        text-shadow:1px 1px 5px rgba(0,0,0,.75);

    }


    .news-detail-image{

        max-width:100%;

        margin-bottom:25px;

        border-radius:12px;

    }


    .news-detail-image img{

        max-height:none;

        border-radius:12px;

    }


    .news-detail-meta{

        gap:10px 18px;

        padding:15px 0;

        font-size:.9rem;

    }


    .news-detail-content p{

        font-size:1rem;

        line-height:1.8;

    }


    .news-detail-gallery{

        grid-template-columns:1fr;

        gap:14px;

        margin:25px 0;

    }


    .news-detail-gallery figure{

        border-radius:12px;

    }

}


    .news-detail-meta{

        gap:10px 18px;

        padding:15px 0;

        font-size:.9rem;

    }


    .news-detail-content p{

        font-size:1rem;

        line-height:1.8;

    }


    .news-detail-gallery{

        margin:25px 0;

    }

        /* GALERI 1 KOLOM */

    .news-detail-gallery{

        grid-template-columns:1fr;

        gap:14px;

        margin:25px 0;

    }

    .news-detail-gallery figure{

        border-radius:12px;

    }


/* ==========================================================
   FOTO + NARASI DALAM BOX
========================================================== */

.news-feature-box{

    display:grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

    gap:30px;

    align-items:center;

    margin:40px 0;

    padding:25px;

    background:#f8faf9;

    border:1px solid #e2e8e5;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}


/* ==========================================================
   FOTO
========================================================== */

.news-feature-image{

    overflow:hidden;

    border-radius:14px;

    background:#fff;

}


.news-feature-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:14px;

}


/* ==========================================================
   KETERANGAN FOTO
========================================================== */

.news-feature-caption{

    padding:12px 15px;

    color:#666;

    font-size:.9rem;

    line-height:1.6;

    text-align:center;

}


/* ==========================================================
   TEKS DI SEBELAH FOTO
========================================================== */

.news-feature-text{

    padding:5px 10px;

}


.news-feature-text p{

    margin:0 0 18px;

    color:#555;

    font-size:1.05rem;

    line-height:1.9;

}


.news-feature-text p:last-child{

    margin-bottom:0;

}


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

@media (max-width:991px){

    .news-feature-box{

        grid-template-columns:1fr 1fr;

        gap:22px;

        padding:20px;

    }


    .news-feature-text p{

        font-size:1rem;

        line-height:1.8;

    }

}


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

@media (max-width:767px){

    .news-feature-box{

        grid-template-columns:1fr;

        gap:20px;

        margin:30px 0;

        padding:15px;

        border-radius:14px;

    }


    .news-feature-text{

        padding:0 5px;

    }


    .news-feature-text p{

        font-size:1rem;

        line-height:1.8;

    }


    .news-feature-caption{

        font-size:.85rem;

    }

}
/* ==========================================================
   END FOTO + NARASI DALAM BOX
========================================================== */