/* ══ Blok Galeri — item grid ══
   overflow/aspect-ratio/border-radius sengaja ditaruh di file CSS eksternal
   ini (bukan inline style="...") — HtmlSanitizer (HTMLPurifier) memakai
   whitelist CSS default yang tidak mengizinkan properti seperti border-radius,
   overflow, atau aspect-ratio pada atribut style inline, jadi kalau ditulis
   inline akan senyap terpangkas saat konten disimpan.

   Struktur: <figure class="bk-gallery-item"> adalah target klik (area zoom +
   caption), sedangkan crop rasio 4:3 + overflow:hidden + radius HANYA di
   <div class="bk-gallery-media"> yang membungkus <img>. Kalau overflow:hidden
   ditaruh di <figure> yang juga membungkus <figcaption>, teks caption akan
   ikut terpotong karena melewati tinggi box rasio 4:3 itu. */
.bk-gallery-item {
    display: block;
    margin: 0;
    cursor: zoom-in;
}
.bk-gallery-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.bk-gallery-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .25s ease, opacity .2s ease;
}
.bk-gallery-item:hover .bk-gallery-media img {
    transform: scale(1.03);
    opacity: .92;
}

.bk-gallery-media.bk-gallery-radius-none { border-radius: 0; }
.bk-gallery-media.bk-gallery-radius-sm { border-radius: 6px; }
.bk-gallery-media.bk-gallery-radius-md { border-radius: 12px; }
.bk-gallery-media.bk-gallery-radius-lg { border-radius: 24px; }
.bk-gallery-media.bk-gallery-radius-circle { border-radius: 50%; }

/* ── Carousel buatan page builder (bk-cr-*) ──────────────────────────────
   HtmlSanitizer dulu membuang object-fit/object-position dari style inline
   gambar slide, sehingga foto (width:100% + height tetap) tertarik gepeng di
   HP. Aturan ini memperbaiki konten lama tanpa perlu disimpan ulang, dan
   menetralkan aturan umum .sp-body img / .pg-body img (margin, radius). */
.carousel[id^="bk-cr-"] .carousel-item img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border-radius: 0;
}
.carousel[id^="bk-cr-"] .carousel-inner { border-radius: 10px; }

@media (max-width: 767.98px) {
    /* max-height mengalahkan inline height yang lebih besar → tetap landscape ±16:10 */
    .carousel[id^="bk-cr-"] .carousel-item img { max-height: 62vw; }
}