/* ============================================================
 * Paparan Iklan & MarketPlace - CSS Utama
 * Last Update: 27/11/2025 (MYT)
 * Fungsi:
 *  - Grid kategori responsif
 *  - Gambar kategori ratio 2:3 (auto crop/zoom)
 *  - 2 kolum di skrin telefon
 * ========================================================== */

html,
body {
    overflow-x: hidden;
}

/* =========================
   CONTAINER & GRID
   ========================= */
.kpp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px 25px;
    box-sizing: border-box;
}

.kpp-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   BOX KATEGORI
   ========================= */
.kpp-box {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 14px;
    overflow: hidden;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    box-sizing: border-box;
    word-wrap: break-word;
    width: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.kpp-box:hover {
    background-color: #d4edda; /* Hijau muda lembut bila hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
    cursor: pointer;
}

/* Tajuk kategori */
.kpp-category-title,
.kpp-box h2 {
    font-size: 1.15rem;
    margin: 5px 0 8px;
}

/* =========================
   IMEJ KATEGORI (RATIO 2:3)
   ========================= */
/* === Gambar kategori ratio 2:3 + background blur === */
.kpp-category-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;          /* Lock 2:3 */
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: #f2f2f2;

    /* untuk background blur */
    background-size: cover;
    background-position: center;
}

/* Layer blur belakang – guna URL dari --kpp-bg */
.kpp-category-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--kpp-bg);
    background-size: cover;
    background-position: center;
    filter: blur(14px);
    transform: scale(1.1);
    opacity: 0.3;        /* lebih kurang 30% */
    z-index: 1;
}

/* Imej sebenar di depan */
.kpp-category-image img,
.kpp-category-thumb {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Tak lonjong, tak kembang */
    display: block;
    border-radius: 10px;
}






/* =========================
   SENARAI POST
   ========================= */
.kpp-post-list,
.kpp-box ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.kpp-post-item,
.kpp-box li {
    margin-bottom: 8px;
}

.kpp-post-bullet {
    margin-right: 5px;
}

.kpp-post-link,
.kpp-box a {
    color: #0073aa;
    text-decoration: none;
}

.kpp-post-link:hover,
.kpp-box a:hover {
    color: #005177;
    text-decoration: underline;
}

.kpp-post-meta {
    color: #777;
    font-size: 0.8rem;
}

/* =========================
   BUTANG "Lihat Semua"
   ========================= */
.kpp-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    background-color: #0073aa;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 999px;
    font-weight: bold;
    font-size: 0.9rem;
}

.kpp-btn:hover {
    background-color: #005177;
    color: #ffffff !important;
}

/* =========================
   RESPONSIVE: TABLET
   ========================= */
@media (max-width: 768px) {
    .kpp-box {
        width: 100%;
        padding: 12px;
    }
}

/* =========================
   RESPONSIVE: PHONE (≤480px)
   - Paksa 2 kolum
   - Kecilkan font & padding
   ========================= */
@media (max-width: 480px) {

    html,
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    .kpp-container {
        padding: 0 5px !important;   /* kiri-kanan 5px */
        margin: 0 auto;
        box-sizing: border-box;
    }

    .kpp-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Paksa 2 kolum */
        gap: 8px;
        padding: 0 !important;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .kpp-box {
        padding: 10px;
        font-size: 0.95em;
    }

    .kpp-category-title,
    .kpp-box h2 {
        font-size: 1em !important;
        margin-bottom: 6px;
    }

    .kpp-post-list,
    .kpp-box ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .kpp-post-item,
    .kpp-box li {
        padding-left: 0 !important;
        margin-left: 0 !important;
        text-indent: 0 !important;
    }

    .kpp-btn {
        padding: 7px 10px;
        font-size: 0.85em;
    }
}



/* ============================================
   OVERRIDE: Featured image kategori 2:3 penuh
   ============================================ */
.kpp-category-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;   /* Lock ratio 2:3 */
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 10px;
}

/* Paksa gambar isi penuh div (zoom + crop) */
.kpp-category-image img,
.kpp-category-thumb {
    width: 100% !important;
    height: 100% !important;      /* lawan height:auto global */
    object-fit: cover !important; /* zoom & crop */
    display: block;
    border-radius: 10px;
}


/* ============================================
   MOBILE FIX: rapatkan kiri/kanan & buang max-width
   ============================================ */
@media (max-width: 600px) {

    /* Rapat kiri kanan */
    .kpp-container {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Paksa 2 kolum penuh */
    .kpp-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    /* Kad isi penuh column – tak kecik di tengah */
    .kpp-box {
        width: 100% !important;
        max-width: none !important;
        padding: 10px;
        font-size: 0.95em;
    }
}