/*
 * Beranda blog (/blog) — mengikuti Figma "[ABL/S2/2026] Landing Page Abills"
 * node 6018-55843 (Blog - Beranda).
 *
 * Semua selector di-scope ke .blog-listing karena class yang sama dipakai
 * halaman kategori/tag. blog.min.css memaksa Roboto + warna/ukuran h1-h3
 * dengan !important, jadi properti itu ikut di-override dengan !important.
 *
 * Tipografi: ukuran Figma berlaku >500px; <=500px tetap ukuran mobile lama.
 * Layout kolom: hanya desktop (>=769px); mobile tetap stack seperti sebelumnya.
 */

/* Menu -> konten 48px di Figma: 24px dari .blog-container + 24px di sini. */
.blog-listing {
  margin: 0 auto;
  max-width: 1200px;
  padding-top: 24px;
}

/* ---------- Font & warna (semua ukuran layar) ---------- */

.blog-listing .title-main-headline,
.blog-listing .title-list-article,
.blog-listing .title-popular,
.blog-listing .h2-title-article {
  color: #0b1628 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}

/* Judul section (Artikel Terbaru/Populer, kategori) di Figma Poppins Regular */
.blog-listing .h2-title-article {
  font-weight: 400 !important;
}

/* Letter-spacing 1% sesuai Figma (kecuali judul headline & tanggal) */
.blog-listing .h2-title-article,
.blog-listing .title-list-article,
.blog-listing .title-popular,
.blog-listing .headline-excerpt,
.blog-listing .article-excerpt,
.blog-listing .tagging-list-article {
  letter-spacing: 0.01em;
}

.blog-listing .headline-excerpt {
  color: #3c3c3c;
  font-family: 'Mulish', 'Muli', sans-serif !important;
  font-weight: 400;
}

.blog-listing .article-excerpt {
  color: #465366;
  font-family: 'Mulish', 'Muli', sans-serif !important;
  font-weight: 400;
}

.blog-listing .tagging-list-article {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  line-height: 155%;
  padding: 4px 10px;
}

.blog-listing .see-all {
  color: #f47522;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.0025em;
  line-height: 155%;
  text-decoration: underline;
}

.blog-listing .hastag,
.blog-listing .hastag-number {
  color: #465366;
  font-family: 'Poppins', sans-serif !important;
}

.blog-listing .hastag {
  font-weight: 400;
}

.blog-listing .hastag-number {
  font-weight: 600;
}

.blog-listing .separator {
  border: 0;
  border-top: 1px solid #e5e7ee;
}

.blog-listing .sep-headline {
  margin: 64px 0 !important;
}

/* Pagination: lihat blog-revamp.css (dipakai bersama halaman pencarian). */

/* ---------- Header kategori (Figma: Blog - Category) ---------- */

.blog-listing .category-header {
  margin-bottom: 64px;
}

.blog-listing .wording-category {
  color: #0b1628;
  font-family: 'Mulish', 'Muli', sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 160%;
  margin: 0 !important;
}

.blog-listing .title-category {
  color: #f47522 !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  line-height: 150%;
  margin: 0 !important;
}

/* Kategori kosong: empty state di kolom kiri */
.blog-listing .wrapper-new-article .blog-empty-state {
  padding-top: 0;
}

/* ---------- Ukuran teks (tablet & desktop) ---------- */

@media screen and (min-width: 501px) {
  .blog-listing .title-main-headline {
    font-size: 32px !important;
    line-height: 150%;
    margin: 16px 0 !important;
  }

  .blog-listing .headline-excerpt {
    font-size: 18px;
    line-height: 160%;
  }

  .blog-listing .h2-title-article {
    font-size: 24px !important;
    line-height: 150%;
  }

  .blog-listing .title-list-article {
    font-size: 24px !important;
    line-height: 150%;
    margin: 16px 0 4px !important;
  }

  .blog-listing .article-excerpt {
    font-size: 18px;
    line-height: 160%;
  }

  .blog-listing .tagging-list-article {
    font-size: 13px;
  }

  .blog-listing .title-popular {
    font-size: 20px !important;
    line-height: 150%;
  }

  .blog-listing .hastag {
    font-size: 32px;
    line-height: 48px;
  }

  .blog-listing .hastag-number {
    font-size: 40px;
    line-height: 60px;
  }

  .blog-listing .see-all {
    font-size: 18px;
  }

  .blog-listing .wording-category {
    font-size: 18px;
  }

  .blog-listing .title-category {
    font-size: 32px !important;
  }
}

/* ---------- Layout desktop ---------- */

@media screen and (min-width: 769px) {
  /* Headline: gambar 560x421, jarak ke teks 48px */
  .blog-listing .main-headline {
    column-gap: 48px;
  }

  .blog-listing .image-cover-headline {
    border-radius: 20px;
    height: 421px;
  }

  /* Kolom terbaru 720 : populer 385, gap 46px di kiri-kanan garis */
  .blog-listing .container-main-article {
    column-gap: 46px;
  }

  .blog-listing .wrapper-new-article {
    border-right: 1px solid #e5e7ee;
    box-sizing: border-box;
    flex: 766 1 0;
    min-width: 0;
    padding-right: 46px;
    width: auto;
  }

  .blog-listing .wrapper-popular-article {
    flex: 385 1 0;
    min-width: 0;
    width: auto;
  }

  .blog-listing .container-main-article .h2-title-article {
    margin: 0 0 62px !important;
  }

  /* Item artikel terbaru: gambar 284x214, jarak 28px, antar item 64px */
  .blog-listing .wrapper-list-main-article {
    column-gap: 28px;
    margin-bottom: 64px;
  }

  .blog-listing .image-list-main {
    flex: 0 0 284px;
    width: 284px;
  }

  .blog-listing .wrapper-text-main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .blog-listing .wrapper-new-article .title-list-article {
    margin-top: 16px !important;
  }

  /* Artikel populer: item 104px + garis, jarak antar item 39px */
  .blog-listing .wrapper-list-popular {
    column-gap: 28px;
  }

  .blog-listing .separator-list-popular {
    border-bottom: 1px solid #e5e7ee;
    padding-bottom: 24px;
  }

  .blog-listing .wrapper-list-popular.mt16 {
    margin-top: 39px;
  }

  .blog-listing .title-popular.mt16 {
    margin-top: 16px;
  }

  /* Section kategori: header -> kartu 20px, 3 kartu 378px space-between */
  .blog-listing .wrapper-title-category {
    margin-bottom: 20px;
  }

  .blog-listing .wrapper-title-category .h2-title-article {
    margin: 0 !important;
  }

  .blog-listing .container-tag-list-article {
    justify-content: space-between;
  }

  .blog-listing .container-tag-article {
    width: 31.5%;
  }

  .blog-listing .img-tag-cover {
    border-radius: 20px;
    height: 270px;
  }

  .blog-listing .container-tag-article .title-list-article {
    margin: 12px 0 !important;
  }

  .blog-listing .container-tag-article .article-excerpt {
    font-size: 16px;
  }
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 768px) {
  .blog-listing .category-header {
    margin-bottom: 32px;
  }

  /* Pagination tidak lagi absolute, ruang cadangan 60px tidak dibutuhkan */
  .blog-listing .wrapper-new-article {
    padding-bottom: 0;
  }
}