/* ==========================================================================
   Tata letak isi berita & halaman (dari editor TinyMCE).
   Dipakai di situs publik DAN di dalam editor, sehingga tampilan saat
   mengedit sama dengan hasil akhirnya. Semua aturan di bawah .article-content.

   Kelas yang diizinkan juga harus terdaftar di includes/html.php.
   ========================================================================== */

.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 8px); vertical-align: top; }
.article-content figure { margin: 1rem 0; max-width: 100%; }
.article-content figure img { display: block; }
.article-content figcaption { font-size: .82rem; color: var(--muted, #69728a); text-align: center; margin-top: .4rem; line-height: 1.5; }

/* ---------- Lebar gambar ---------- */
.article-content .img-100 { width: 100%; }
.article-content .img-50  { width: calc(50% - .5rem); }
.article-content .img-33  { width: calc(33.333% - .67rem); }
.article-content .img-25  { width: calc(25% - .75rem); }
.article-content figure.img-50 img,
.article-content figure.img-33 img,
.article-content figure.img-25 img,
.article-content figure.img-100 img { width: 100%; }

/* Beberapa gambar berukuran dalam satu paragraf → berdampingan rapi. */
.article-content p:has(> .img-50, > .img-33, > .img-25) { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }

/* ---------- Posisi gambar ---------- */
.article-content .img-kiri   { float: left;  margin: .3rem 1.25rem .75rem 0; max-width: 50%; }
.article-content .img-kanan  { float: right; margin: .3rem 0 .75rem 1.25rem; max-width: 50%; }
.article-content .img-tengah { display: block; margin-left: auto; margin-right: auto; }
.article-content::after { content: ""; display: block; clear: both; }

/* ---------- Kolom ---------- */
.article-content .kolom-2,
.article-content .kolom-3 { display: grid; gap: 1.25rem; margin: 1.25rem 0; }
.article-content .kolom-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-content .kolom-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-content .kolom { min-width: 0; }
.article-content .kolom > :first-child { margin-top: 0; }
.article-content .kolom > :last-child { margin-bottom: 0; }
.article-content .kolom img { width: 100%; }
.article-content .kolom figure { margin: 0; }

/* ---------- Layar kecil ---------- */
@media (max-width: 575.98px) {
  .article-content .kolom-2,
  .article-content .kolom-3 { grid-template-columns: minmax(0, 1fr); }
  .article-content .img-33,
  .article-content .img-25 { width: calc(50% - .5rem); }
  .article-content .img-kiri,
  .article-content .img-kanan { float: none; max-width: 100%; margin: .75rem 0; display: block; }
}