/* =========================================================
   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://zanash.id/widget/gambar/header-2025-rajawali.webp');
  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 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));
  gap: 32px 28px;
  list-style: none;
  margin: 24px 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: hidden;   /* potong konten yang kelebaran, misal gambar */
  background: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0 0 18px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Aksen garis tipis senada warna header, di tepi atas tiap kartu */
.page_index_site .journals ul > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #12a2a8;
  z-index: 2;
}

.page_index_site .journals ul > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
}

/* 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 dibuat besar & proporsional ala sampul buku (rasio ~3:4),
   bukan lagi strip tipis. object-fit:cover supaya cover tetap penuh
   tanpa gepeng/melar. */
.page_index_site .journals ul > li img {
  width: 100% !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
  margin: 0 0 14px 0;
}

.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 12px 0;
  color: #1a1a1a;
  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-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 3px 8px 3px;
  color: #fff;
  text-decoration: none;
  line-height: 1.4;
}

/* 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: 10px;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  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: block;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 7px 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  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;
  }
}