/* ==========================================================================
   Penyesuaian milik KMI Ehime atas template.
   Dimuat SESUDAH style.css, jadi aturan di sini menang tanpa perlu !important
   kecuali melawan aturan template yang sendirinya memakai !important.

   BERKAS TEMPLATE JANGAN DISUNTING. Semua perubahan rasa/tata letak ditulis
   di sini supaya template masih bisa diganti versi tanpa kehilangan pekerjaan
   kita — dan supaya jelas mana yang bawaan, mana yang kita putuskan sendiri.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kartu berita: gambar tertutup judul
   --------------------------------------------------------------------------
   Template menaruh kotak putih berisi judul MENUMPUK di atas gambar
   (`position: absolute; bottom: 0`). Judul demo aslinya pendek — "Eid
   Celebration Highlights". Judul berita kami dua sampai tiga kali lebih
   panjang, mis. "Ketika Kematian Dibicarakan dengan Tenang: Kajian Persiapan
   Kematian Muslim di Jepang Niihama, Ehime — 5 September 2026". Kotak putihnya
   tumbuh ke atas mengikuti tinggi judul, lalu menelan seluruh gambar.

   Diperbaiki dengan membuat tinggi kotak itu BISA DIPREDIKSI, bukan dengan
   memindahkannya: judul dipotong dua baris, ukurannya dikecilkan, dan gambar
   dikunci pada rasio tetap. Judul utuh tetap ada di halaman detail, dan
   tersedia sebagai tooltip lewat atribut `title`.
   -------------------------------------------------------------------------- */

.blog-post .inner-box .image-box {
  /* Rasio tetap → tinggi kartu seragam berapa pun ukuran berkas gambarnya,
     dan tak ada lagi pergeseran tata letak saat gambar selesai dimuat. */
  aspect-ratio: 16 / 10;
}

.blog-post .inner-box .image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wajah orang biasanya di bagian atas foto kegiatan; saat dipotong, yang
     dikorbankan lantai, bukan kepala. */
  object-position: center 40%;
}

.blog-post .inner-box .content-box .title {
  font-size: 19px;
  line-height: 27px;
}

.blog-post .inner-box .content-box .title a {
  /* Dipotong tepat dua baris. `-webkit-line-clamp` sudah didukung seluruh
     peramban arus utama termasuk Firefox sejak 2023, dan kalau toh tidak,
     `max-height` di bawahnya tetap menahan tingginya. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 54px; /* 2 × line-height */
}

/* --------------------------------------------------------------------------
   Ponsel
   --------------------------------------------------------------------------
   Di layar sempit kartu memakai hampir seluruh lebar, jadi judul muat lebih
   banyak kata per baris — ukurannya boleh sedikit lebih kecil lagi, dan
   bantalannya dirapatkan supaya gambar mendapat porsi yang lebih besar.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .blog-post .inner-box .image-box {
    aspect-ratio: 16 / 11;
  }

  .blog-post .inner-box .content-box {
    padding: 20px 20px 16px;
  }

  .blog-post .inner-box .content-box .title {
    font-size: 17px;
    line-height: 24px;
  }

  .blog-post .inner-box .content-box .title a {
    max-height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Isi berita (halaman detail)
   --------------------------------------------------------------------------
   Sejak isi berita disimpan sebagai HTML sungguhan (lihat src/lib/sanitize.ts),
   elemen-elemen ini benar-benar muncul dan butuh gaya sendiri — template tidak
   menyediakannya karena demo-nya cuma berisi paragraf polos.
   -------------------------------------------------------------------------- */

.blog-details__text-2 > * + * {
  margin-top: 1.1em;
}

.blog-details__text-2 h2 {
  font-size: 28px;
  line-height: 1.3;
  margin-top: 1.6em;
}

.blog-details__text-2 h3 {
  font-size: 22px;
  line-height: 1.35;
  margin-top: 1.5em;
}

.blog-details__text-2 h4 {
  font-size: 19px;
  line-height: 1.4;
  margin-top: 1.4em;
}

.blog-details__text-2 ul,
.blog-details__text-2 ol {
  /* Template me-reset daftar jadi tanpa penanda di seluruh situs (untuk menu
     dan navigasi). Di badan tulisan itu justru salah — bullet dan penomoran
     harus kembali. */
  list-style: revert;
  padding-left: 1.5em;
  margin-left: 0;
}

/* Penanda dipasang pada <li>, BUKAN cuma pada <ul>/<ol>: template menyetel
   `list-style: none` langsung pada `li` di seluruh situs, dan itu menang atas
   `list-style-type` milik induknya. Tanpa baris ini daftar tampil menjorok
   tapi tanpa titik maupun angka — persis gejala yang dilaporkan. */
.blog-details__text-2 ul > li { list-style-type: disc; }
.blog-details__text-2 ol > li { list-style-type: decimal; }
.blog-details__text-2 ul ul > li { list-style-type: circle; }
.blog-details__text-2 li { display: list-item; margin-bottom: 0.45em; }
.blog-details__text-2 li > ul,
.blog-details__text-2 li > ol { margin-top: 0.45em; }

.blog-details__text-2 a {
  /* Tautan harus terlihat sebagai tautan tanpa bergantung pada warna saja —
     pembaca yang buta warna tetap menemukannya lewat garis bawah. */
  color: #1f6f4a;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* URL panjang (bit.ly, Google Maps) jangan sampai melebarkan halaman di
     ponsel. */
  overflow-wrap: anywhere;
}

.blog-details__text-2 a:hover {
  color: #14512f;
}

.blog-details__text-2 blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 3px solid #1f6f4a;
  color: #4a4a4a;
  font-style: italic;
}

.blog-details__text-2 img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.4em 0;
}

.blog-details__text-2 table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
}

.blog-details__text-2 th,
.blog-details__text-2 td {
  border: 1px solid #e3e3e3;
  padding: 8px 12px;
  text-align: left;
}

.blog-details__text-2 hr {
  border: 0;
  border-top: 1px solid #e3e3e3;
  margin: 2em 0;
}

.blog-details__text-2 code {
  background: #f4f4f4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Teks Arab di tengah paragraf Indonesia: beri ruang baris yang cukup supaya
   harakat tidak terpotong, dan biarkan arahnya ditentukan peramban. */
.blog-details__text-2 [lang="ar"],
.blog-details__text-2 .arabic {
  line-height: 2.1;
  font-size: 1.15em;
}