/* =========================================================
   Dewandaru — Article Detail (page-scoped)
   Dimuat HANYA di halaman article detail (/guest/article/show).
   Menghilangkan visual card container Selio (border, radius,
   shadow) dari wrapper artikel — artikel full-width di dalam
   container, tanpa kotak.
   Listing blog card di halaman lain tidak terpengaruh:
   scoped khusus `.blog-single-post.single`.
   ========================================================= */

/* ---------- Hilangkan card wrapper ---------- */
.blog-single-post.single {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  /* matikan hover lift card — tidak relevan tanpa visual card */
  transition: none;
  transform: none;
}
.blog-single-post.single:hover {
  box-shadow: none;
  transform: none;
}

/* ---------- Judul pager (breadcrumb) ---------- */
/* md ke atas: 75% width; di bawah md: 100% */
@media (min-width: 768px) {
  .pager-sec-details h3 {
    width: 75%;
  }
}
/* ---------- Rich Text Content Formatting (CKEditor) ---------- */

/* 1. Fix ukuran Heading h1, h2, h3 agar berbeda dan proporsional */
.article-content-body h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.article-content-body h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.article-content-body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

/* 2. Fix gambar agar SELALU berada di tengah (Center Alignment) pada frontend */
.article-content-body figure.image,
.article-content-body figure.media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto;
  text-align: center;
  width: 100%;
}

.article-content-body figure.image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* opsional: agar sudut gambar lebih halus */
  display: block;
}

/* Fallback untuk tag <img> yang tidak dibungkus <figure> */
.article-content-body > img {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  height: auto;
}