/* =========================================================
   CUSTOM CSS UNTUK OJS - jurnal.stit-buntetpesantren.ac.id
   1) Hero image di bawah header
   2) Daftar jurnal (halaman depan) menjadi grid 6 kolom
   Cara pakai: Administration > Site Settings > Website >
   Appearance > Custom CSS (upload file ini sebagai .css)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap');

/* -----------------------------
   1. HERO IMAGE DI BAWAH HEADER
   ----------------------------- */
/* Ganti URL di bawah dengan URL gambar Anda sendiri.
   Karena fitur upload custom CSS tidak menyediakan tempat
   upload gambar terpisah, gambar harus punya URL publik.
   Cara termudah: upload gambar sebagai "Homepage Image" salah
   satu jurnal Anda lewat Website Settings > Appearance, lalu
   salin URL filenya (polanya seperti:
   https://jurnal.stit-buntetpesantren.ac.id/public/journals/1/namafile.jpg )
   dan tempel di bawah ini. */

header.pkp_structure_head {
  position: relative;
}

header.pkp_structure_head::after {
  content: "";
  display: block;
  width: 100%;
  height: 320px;
  margin-top: 12px;
  background-image: url('https://picsum.photos/1024/400/?image=41');
  background-size: cover;
  background-position: center;
  border-radius: 0;
}

/* Versi mobile: tinggi hero dikecilkan supaya tidak makan tempat */
@media (max-width: 768px) {
  header.pkp_structure_head::after {
    height: 180px;
  }
}

/* -----------------------------
   1B. BUANG SIDEBAR, MAIN CONTENT FULL WIDTH
   ----------------------------- */
/* Sembunyikan sidebar (kotak search, dsb) di seluruh situs */
.pkp_structure_sidebar {
  display: none !important;
}

/* Paksa konten utama full width, apapun mekanisme layout tema
   (flexbox/grid/float) yang dipakai di baliknya */
.pkp_structure_content {
  display: block !important;
}

.pkp_structure_main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* -----------------------------
   2. DAFTAR JURNAL JADI GRID 6 KOLOM
   ----------------------------- */
.page_index_site .journals {
  padding: 0 28px;
  box-sizing: border-box;
}

.page_index_site .journals ul {
  display: grid;
  /* PENTING: pakai minmax(0, 1fr), BUKAN 1fr saja.
     1fr saja tidak mencegah kolom membesar kalau ada gambar/konten
     besar di dalamnya - itu penyebab tampilan berantakan sebelumnya. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Jarak baris (row-gap) dibuat lebih besar dari jarak kolom karena
     cover "melayang" ke atas melewati batas card (lihat .thumb di
     bawah) - butuh ruang ekstra supaya tidak menabrak card di baris
     atasnya. */
  gap: 64px 32px;
  list-style: none;
  margin: 48px 0 0 0;
  padding: 0;
}

.page_index_site .journals ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;      /* cegah kartu memaksa lebar kolom membesar */
  /* overflow SENGAJA visible (bukan hidden) supaya cover boleh
     "nongol" ke luar batas atas card, seperti pada gambar referensi.
     Lebar cover tetap dikunci 100% (lihat .thumb/img) jadi tidak akan
     melebar horizontal, hanya menonjol ke atas secara vertikal. */
  overflow: visible;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 36px 0 20px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page_index_site .journals ul > li:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Wadah pembungkus cover (div.thumb dan <a> di dalamnya) sering
   dibatasi ukurannya kecil oleh tema aslinya - paksa melebar penuh
   dulu, baru gambarnya bisa ikut membesar */
.page_index_site .journals ul > li .thumb,
.page_index_site .journals ul > li .thumb a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  line-height: 0;
}

/* Cover "melayang": ditarik ke atas dengan margin negatif sehingga
   bagian atasnya menonjol keluar dari batas card. Karena li punya
   overflow:visible + padding-top 36px, cover akan nongol +/- 28px di
   atas garis border card, persis seperti pada gambar referensi. */
.page_index_site .journals ul > li .thumb {
  margin: -64px 0 16px 0;
  position: relative;
  z-index: 2;
}

/* Cover dibuat besar & proporsional ala sampul buku (rasio ~3:4),
   bukan lagi strip tipis. object-fit:cover supaya cover tetap penuh
   tanpa gepeng/melar. */
/* Cover ditampilkan UTUH sesuai proporsi asli gambar (tidak dipotong
   paksa ke rasio tertentu) - persis seperti referensi, di mana setiap
   cover terlihat penuh dari atas sampai bawah tanpa ada bagian terpotong.
   Kartu tetap rapi karena area judul & tombol otomatis menyesuaikan
   ke bawah (lihat aturan .body dan margin-top:auto pada ul.links). */
.page_index_site .journals ul > li img {
  width: 100% !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 0 !important;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px 8px 0 0;
  display: block;
  margin: 0;
  /* Shadow terpisah untuk cover, membuatnya terlihat seperti elemen
     yang mengambang sendiri di atas card (bukan menyatu). */
  box-shadow: 0 14px 24px -6px rgba(0, 0, 0, 0.3);
}

.page_index_site .journals ul > li .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  text-align: center;
}

.page_index_site .journals ul > li .body h3 {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 4px 0 14px 0;
  color: #2b2d89;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* jaga tinggi konsisten meski judul 1 baris */
}

.page_index_site .journals ul > li .body h3 a {
  text-decoration: none;
  color: inherit;
}

/* Deskripsi disembunyikan di tampilan grid supaya fokus ke cover +
   badge akreditasi, seperti contoh referensi. Kalau ingin tetap
   tampil, hapus/comment blok ini. */
.page_index_site .journals ul > li .body .description {
  font-size: 12px;
  color: #666;
  display: none;
}

/* ============================================================
   BADGE AKREDITASI DARI FORMAT BOLD / ITALIC / UNDERLINE
   ------------------------------------------------------------
   Cara pakai di OJS:
   1. Login sebagai Journal Manager tiap jurnal
   2. Buka Settings > Website > Setup (atau "Masthead") > Description
   3. Di baris PALING AWAL deskripsi, ketik label akreditasi lalu
      format pakai tombol toolbar:
        - Tombol Bold (B)      -> untuk label "Sinta 2" / "Sinta 1"
        - Tombol Italic (I)    -> untuk label "Scopus"
        - Tombol Underline (U) -> untuk label "DOAJ"
      Contoh isi baris pertama: **Sinta 2**  *Scopus*  __DOAJ__
      (tulisannya nanti otomatis berubah jadi badge warna di grid)
   4. Simpan, lalu lihat hasilnya di halaman depan situs.
   ============================================================ */
.page_index_site .journals ul > li .body strong,
.page_index_site .journals ul > li .body em,
.page_index_site .journals ul > li .body u {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  margin: 0 3px 8px 3px;
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
}

/* Titik aksen kecil di kiri teks, meniru gaya ikon bulat pada referensi */
.page_index_site .journals ul > li .body strong::before,
.page_index_site .journals ul > li .body em::before,
.page_index_site .journals ul > li .body u::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

/* Bold -> badge Sinta (teal) */
.page_index_site .journals ul > li .body strong {
  background: #12a2a8;
}

/* Italic -> badge Scopus (oranye) */
.page_index_site .journals ul > li .body em {
  background: #f2872f;
}

/* Underline -> badge DOAJ (gelap) */
.page_index_site .journals ul > li .body u {
  background: #22252b;
}

/* Baris badge dibuat wrap rapi & di tengah */
.page_index_site .journals ul > li .body > strong,
.page_index_site .journals ul > li .body > em,
.page_index_site .journals ul > li .body > u {
  display: inline-block;
}

/* Reset garis/border bawaan tema pada tombol View Journal | Current Issue,
   sekaligus ubah jadi tombol pil kecil supaya lebih rapi */
.page_index_site .journals ul > li .body ul.links,
.page_index_site .journals ul > li .body ul.links li,
.page_index_site .journals ul > li .body ul.links li a {
  border: none !important;
  box-shadow: none !important;
}

.page_index_site .journals ul > li .body ul.links {
  margin-top: auto;
  padding-top: 12px;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  font-size: 11px;
}

.page_index_site .journals ul > li .body ul.links li {
  flex: 1 1 0;
  min-width: 0;
}

.page_index_site .journals ul > li .body ul.links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  white-space: normal;      /* boleh turun baris, tidak dipotong lagi */
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Aksi sekunder: View Journal (outline tipis) */
.page_index_site .journals ul > li .body ul.links li.view a,
.page_index_site .journals ul > li .body ul.links li:first-child a {
  background: #ffffff;
  border: 1px solid #c9ced2 !important;
  color: #333 !important;
}

.page_index_site .journals ul > li .body ul.links li.view a:hover,
.page_index_site .journals ul > li .body ul.links li:first-child a:hover {
  background: #f5f6f7;
  border-color: #a9afb4 !important;
}

/* Aksi utama: Current Issue (solid, warna aksen) */
.page_index_site .journals ul > li .body ul.links li.current a,
.page_index_site .journals ul > li .body ul.links li:last-child a {
  background: #12a2a8;
  border: 1px solid #12a2a8 !important;
  color: #ffffff !important;
}

.page_index_site .journals ul > li .body ul.links li.current a:hover,
.page_index_site .journals ul > li .body ul.links li:last-child a:hover {
  background: #0e8388;
  border-color: #0e8388 !important;
}

/* -----------------------------
   RESPONSIVE: kurangi jumlah kolom di layar kecil
   ----------------------------- */
@media (max-width: 992px) {
  .page_index_site .journals ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .page_index_site .journals ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .page_index_site .journals ul {
    grid-template-columns: 1fr;
  }
}