/* Tata letak gambar di isi berita/halaman — kelas dari editor admin (lihat SafeHtml::FIGURE_CLASSES).
   Dimuat oleh partials/theme-head sebelum CSS tema, jadi berlaku di semua tema dan tetap bisa ditimpa tema. */
/* Awalan "html" menaikkan prioritas di atas aturan tema seperti ".prose figure { margin: 22px 0 }". */
html figure:is(.img-w25, .img-w50, .img-w75) { margin-left: auto; margin-right: auto; }
figure.img-w25 { width: 25%; }
figure.img-w50 { width: 50%; }
figure.img-w75 { width: 75%; }
figure.img-w25 img, figure.img-w50 img, figure.img-w75 img { width: 100%; height: auto; }

/* Rata kiri/kanan: teks mengalir di samping gambar (hanya bila gambar tidak selebar konten). */
html figure.img-kiri:is(.img-w25, .img-w50, .img-w75)  { float: left;  margin: 4px 22px 14px 0; }
html figure.img-kanan:is(.img-w25, .img-w50, .img-w75) { float: right; margin: 4px 0 14px 22px; }
.prose::after { content: ''; display: table; clear: both; }

/* Layar HP: gambar kecil dibuat lebih lebar dan tidak mengapung agar tetap terbaca. */
@media (max-width: 600px) {
  figure.img-w25 { width: 50%; }
  figure.img-w50, figure.img-w75 { width: 100%; }
  figure.img-kiri, figure.img-kanan { float: none !important; margin: 18px auto !important; }
}

/* ── Lightbox galeri (public/js/site-core.js) ─────────────────────────────── */
[data-lightbox][data-src] { cursor: pointer; }
.lb-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(8, 12, 10, .94); padding: 56px 64px 72px; }
.lb-overlay.is-open { display: flex; }
.lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-video { width: min(100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.lb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-stage.is-loading::after { content: ''; position: absolute; width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: lb-spin .8s linear infinite; }
.lb-stage.is-loading .lb-img { opacity: 0; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb-btn { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.28); outline: none; }
.lb-btn[hidden] { display: none; }
.lb-close { top: 12px; right: 14px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-foot { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 14px; align-items: baseline; padding: 0 70px; color: #fff; text-align: center; }
.lb-caption { font-size: 14px; font-weight: 500; line-height: 1.4; }
.lb-counter { font-size: 12px; opacity: .7; white-space: nowrap; }
.lb-error { color: #ddd; font-size: 14px; }
@media (max-width: 600px) {
  .lb-overlay { padding: 56px 8px 84px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; width: 40px; height: 40px; }
  .lb-foot { bottom: 18px; padding: 0 56px; flex-direction: column; gap: 2px; align-items: center; }
  .lb-video { width: 100%; }
}