/* Styling tambahan khusus halaman artikel & listing blog.
   Reuse design tokens dari style.min.css (--green, --font-display, dst),
   jadi file ini TIDAK menyentuh style.min.css yang dipakai halaman lain. */

.container--narrow {
  max-width: 860px;
}

.article-page {
  padding-top: 40px;
}

/* Halaman DETAIL artikel: isi dibungkus kartu putih rounded + shadow
   (samain gaya .product-detail-card) di atas backdrop abu-biru, biar gak
   polos. Class --detail cuma dipasang di article.ejs, jadi listing blog
   (blog-index) yang juga pakai .article-page gak kepengaruh. */
.article-page--detail {
  background: #f0f4f7;
  padding-top: 28px;
  padding-bottom: 40px;
}

.article-detail-card {
  background: #fff;
  border-radius: var(--radius-l, 22px);
  box-shadow: var(--shadow-soft, 0 2px 14px rgba(28, 28, 26, 0.07));
  padding: 36px 40px 40px;
}

@media (max-width: 640px) {
  /* Mobile: kartu selebar layar (Tokopedia style), sama kayak detail produk */
  .article-page--detail {
    padding-top: 0;
    padding-bottom: 16px;
  }
  .article-detail-card {
    margin: 0 -20px;
    border-radius: 0;
    box-shadow: none;
    padding: 24px 20px 28px;
  }
}

.article-date {
  color: var(--gray);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.article-page h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 16px;
}

.article-excerpt {
  font-size: 1.05rem;
  color: var(--gray);
  margin: 0 0 24px;
}

.article-cover {
  width: 100%;
  border-radius: var(--radius-m);
  margin-bottom: 32px;
  display: block;
}

/* Isi artikel = HTML dari editor Quill (quill.root.innerHTML). Di editor,
   tiap baris itu <p> tanpa margin, dan baris kosong = <p><br></p> setinggi
   1 baris. Dulu di sini <p> dikasih margin-bottom 18px + line-height 1.75,
   jadi tiap baris DAN tiap baris kosong ketambahan jarak (kejauhan).
   Sekarang aturannya disamain kayak editor (margin 0), supaya hasil publish
   sama persis kayak yang diketik di editor. */
.article-content {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}

.article-content p,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content ol,
.article-content ul {
  margin: 0;
  padding: 0;
}

.article-content h1 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.3;
}

.article-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.3;
}

.article-content h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.35;
}

/* Gambar inline di dalam <p> (kayak di editor): tanpa margin, dan
   vertical-align biar gak ada celah kosong di bawah gambar. */
.article-content img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: var(--radius-s);
}

/* Daftar. Quill 2 nyimpen list sebagai <ol><li data-list="bullet|ordered">
   dengan <span class="ql-ui"> kosong di dalamnya, jadi penanda (bullet /
   nomor) digambar sendiri di sini. Format lama (<ul>/<ol> biasa) tetap
   didukung lewat :not([data-list]). */
.article-content ol,
.article-content ul {
  list-style: none;
  counter-reset: art-list;
}

.article-content li {
  position: relative;
  padding-left: 1.5em;
  margin: 0;
}

.article-content li > .ql-ui {
  display: none;
}

.article-content li[data-list="bullet"]::before,
.article-content ul > li:not([data-list])::before {
  content: "\2022";
  position: absolute;
  left: 0.45em;
}

.article-content li[data-list="ordered"],
.article-content ol > li:not([data-list]) {
  counter-increment: art-list;
}

.article-content li[data-list="ordered"]::before,
.article-content ol > li:not([data-list])::before {
  content: counter(art-list) ".";
  position: absolute;
  left: 0;
  width: 1.2em;
  text-align: right;
}

.article-content a {
  color: var(--green);
  text-decoration: underline;
}

.article-content blockquote {
  border-left: 3px solid var(--green);
  margin: 5px 0;
  padding: 0 0 0 16px;
  color: var(--gray);
  font-style: italic;
}

/* Pilihan font dari editor artikel (class ql-font-*). Plus Jakarta Sans =
   bawaan situs (gak ada class); Times New Roman = font sistem. Harus
   sinkron sama CSS di editor.html. Font Google-nya di-load lewat <link> di
   article.ejs, cuma yang dipakai artikel itu aja. */
.article-content .ql-font-times {
  font-family: "Times New Roman", Times, "Liberation Serif", serif;
}

.article-content .ql-font-lora {
  font-family: "Lora", Georgia, "Times New Roman", serif;
}

.article-content .ql-font-courier-prime {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
}

.article-content .ql-font-dancing-script {
  font-family: "Dancing Script", "Brush Script MT", cursive;
  font-size: 1.2em;
}

.article-content .ql-font-bebas-neue {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.article-content .ql-font-nunito {
  font-family: "Nunito", "Trebuchet MS", sans-serif;
}

/* Alignment teks dari editor Quill (class ql-align-*) */
.article-content .ql-align-center {
  text-align: center;
}

.article-content .ql-align-right {
  text-align: right;
}

.article-content .ql-align-justify {
  text-align: justify;
}

.article-cta {
  text-align: center;
}

.article-cta h2 {
  font-family: var(--font-display);
  margin: 0 0 8px;
}

.article-cta p {
  color: var(--gray);
  margin: 0 0 20px;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .article-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .article-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  display: block;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
}

.article-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.article-card-body {
  padding: 16px;
}

.article-card-body h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 4px 0 8px;
  color: var(--charcoal);
}

.article-card-body p {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}