/* CSS untuk memperbaiki tampilan konten berita */

/* Styling untuk konten berita secara umum */
.news-content {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Memperbaiki tampilan figure */
.news-content figure {
    margin: 1.5rem 0;
    max-width: 100%;
    display: block;
}

/* Styling untuk gambar di tengah konten */
.news-content figure.image {
    margin: 2rem auto;
    text-align: center;
}

.news-content figure.image.image-style-align-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

.news-content figure.image.image-style-align-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

.news-content figure.image.image-style-align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.news-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.news-content figure figcaption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 0.5rem 0;
    font-style: italic;
}

/* Memperbaiki tampilan attachment */
.news-content .attachment {
    margin: 1.5rem 0;
    max-width: 100%;
}

.news-content .attachment--preview {
    display: block;
    margin: 0 auto;
}

.news-content .attachment--jpg img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.news-content .attachment__caption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 0.5rem 0;
}

/* Styling untuk video di tengah konten */
.news-content .media {
    margin: 2rem auto;
    max-width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.news-content .media.media-style-align-left {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

.news-content .media.media-style-align-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 50%;
}

.news-content .media.media-style-align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Styling untuk video dan iframe */
.news-content video,
.news-content iframe {
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Membuat container untuk video responsif */
.news-content .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
}

.news-content .video-container iframe,
.news-content .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Memperbaiki tampilan paragraf */
.news-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

/* Menghilangkan paragraf kosong */
.news-content p:empty {
    display: none;
}

/* Membersihkan float setelah gambar atau video yang menggunakan float */
.news-content p.clear-float,
.news-content div.clear-float {
    clear: both;
    width: 100%;
    display: block;
}

/* Menambahkan clearfix untuk container */
.news-content:after {
    content: "";
    display: table;
    clear: both;
}

/* Memperbaiki tampilan link dalam konten */
.news-content a {
    color: #0d6efd;
    text-decoration: none;
}

.news-content a:hover {
    text-decoration: underline;
}

/* Styling untuk caption pada media */
.news-content .media-caption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    padding: 0.5rem 0;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Menambahkan margin pada heading untuk spacing yang lebih baik */
.news-content h2, .news-content h3, .news-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    clear: both; /* Pastikan heading selalu di bawah gambar/video yang menggunakan float */
}