/* ===================================================================
   Q1-LEVEL PROFESSIONAL UI REDESIGN FOR OJS SITE INDEX
   Fokus: Clean, Authoritative, Functional, and Responsive.
   Dibuat oleh AI untuk journal.bygates.com
   =================================================================== */

/* 1. Palet Warna & Pengaturan Global */
:root {
    --q1-primary: #1a237e;      /* Biru Indigo Gelap - untuk judul dan aksen kuat */
    --q1-secondary: #5c6bc0;      /* Biru Indigo lebih terang - untuk hover & link */
    --q1-text-primary: #212121;  /* Abu-abu sangat gelap untuk teks utama */
    --q1-text-secondary: #616161;  /* Abu-abu medium untuk deskripsi */
    --q1-border: #e0e0e0;         /* Abu-abu sangat terang untuk border */
    --q1-bg: #f5f5f5;             /* Latar belakang halaman */
    --q1-card-bg: #ffffff;
}

body {
    background-color: var(--q1-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--q1-text-primary);
}

/* Mengatur header halaman utama (misal: tulisan "Jurnal Kami") */
.page_index_site h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--q1-primary);
    margin: 2rem 0 3rem 0;
    border-bottom: 2px solid var(--q1-border);
    padding-bottom: 1.5rem;
}

/* 2. Layout Grid Utama */
.page_index_site .journals {
    display: grid;
    /* Grid responsif, kolom akan menyesuaikan antara 320px dan 1fr */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
    list-style: none;
    padding: 0 2rem 3rem 2rem;
    margin: 0;
}


/* 3. Desain Kartu Jurnal Profesional (Layout 2 Kolom Internal) */
.journal-summary {
    background: var(--q1-card-bg);
    border: 1px solid var(--q1-border);
    border-radius: 8px; /* Sudut sedikit melengkung, lebih formal */
    display: flex; /* Mengaktifkan flexbox untuk layout sisi-menyisi */
    flex-direction: row; /* Gambar di kiri, teks di kanan */
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.journal-summary:hover {
    border-color: var(--q1-secondary);
    transform: translateY(-5px);
}


/* 4. Gambar Sampul (Sisi Kiri Kartu) */
.journal-thumbnail {
    flex-shrink: 0; /* Mencegah gambar menyusut */
    width: 120px;   /* Lebar gambar dibuat tetap */
    background-color: #fafafa;
}

.journal-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Trik agar gambar selalu pas dan rapi */
}


/* 5. Konten Teks Jurnal (Sisi Kanan Kartu) */
.journal-meta {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.journal-meta .journal-title {
    margin: 0 0 10px 0;
    font-size: 1.15rem; /* Ukuran font judul yang pas */
    font-weight: 600;
    line-height: 1.4;
}

.journal-meta .journal-title a {
    color: var(--q1-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.journal-meta .journal-title a:hover {
    color: var(--q1-secondary);
}

.journal-meta .journal-description {
    font-size: 0.9rem;
    color: var(--q1-text-secondary);
    line-height: 1.5;
    flex-grow: 1; /* Mendorong tombol ke bawah */
    margin-bottom: 1rem;
}

/* Tombol "View Journal" dibuat lebih subtil */
.journal-meta .journal-view-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--q1-secondary);
    text-decoration: none;
    align-self: flex-start;
}

.journal-meta .journal-view-link:hover {
    text-decoration: underline;
}


/* 6. Desain Responsif (Mobile-First) */

/* Untuk layar HP, kartu akan menjadi vertikal */
@media (max-width: 768px) {
    .page_index_site .journals {
        grid-template-columns: 1fr; /* 1 kolom penuh */
        padding: 0 1rem 2rem 1rem;
    }

    .journal-summary {
        flex-direction: column; /* Ubah layout kartu menjadi vertikal */
    }

    .journal-thumbnail {
        width: 100%; /* Lebar gambar penuh */
        height: 180px; /* Tinggi gambar ditetapkan */
    }
}