/* Gambar ber-judul/caption dari editor berita:
   <figure class="ql-caption-{bottom|top|left|right}"><div class="ql-figure-title"><img><figcaption>.
   Dipakai editor admin (.ql-editor) dan halaman baca (.article-body) supaya tampilannya sama persis.
   Lebar, float, dan center ada di atribut style figure (hasil resize/align di editor). */
.ql-editor figure,
.article-body figure {
    margin: 1em 0;
    max-width: 100%;
}

.ql-editor figure img,
.article-body figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.ql-editor figcaption,
.article-body figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: #646464;
}

.ql-editor .ql-caption-bottom figcaption,
.article-body .ql-caption-bottom figcaption {
    margin-top: 0.5em;
}

.ql-editor .ql-caption-top figcaption,
.article-body .ql-caption-top figcaption {
    margin-bottom: 0.5em;
}

/* judul di atas gambar: lebarnya ikut figure, jadi teks panjang terbungkus selebar gambar */
.ql-editor .ql-figure-title,
.article-body .ql-figure-title {
    margin-bottom: 0.75em;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: #141618;
}

/* caption samping: gambar mengisi sisa lebar figure, caption 30%; judul (kalau ada) membentang di atas keduanya */
.ql-editor .ql-caption-left,
.ql-editor .ql-caption-right,
.article-body .ql-caption-left,
.article-body .ql-caption-right {
    display: grid;
    align-items: start;
    column-gap: 1em;
}

.ql-editor .ql-caption-left,
.article-body .ql-caption-left {
    grid-template-columns: 30% minmax(0, 1fr);
}

.ql-editor .ql-caption-right,
.article-body .ql-caption-right {
    grid-template-columns: minmax(0, 1fr) 30%;
}

.ql-editor .ql-caption-left .ql-figure-title,
.ql-editor .ql-caption-right .ql-figure-title,
.article-body .ql-caption-left .ql-figure-title,
.article-body .ql-caption-right .ql-figure-title {
    grid-column: 1 / -1;
}

/* layar sempit: caption samping terlalu sempit dibaca, jadi turun ke atas/bawah gambar */
@media (max-width: 575px) {
    .article-body .ql-caption-left,
    .article-body .ql-caption-right {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.5em;
    }
}