/* =============================================================
   BIMBER MODIF - Peningkatan tampilan MOBILE
   File ini bersifat tambahan (tidak mengubah inti tema).
   Dipanggil dari akhir functions.php.
   Target: kelas asli Bimber (.g1-collection, .g1-collection-items,
   .g1-collection-item, .entry-featured-media, dll)
   ============================================================= */

/* ---------- Variabel warna aksen (boleh diubah) ---------- */
:root{
    --bm-accent:#ff2d55;
    --bm-radius:14px;
    --bm-shadow:0 6px 18px rgba(0,0,0,.10);
    --bm-shadow-hover:0 10px 26px rgba(0,0,0,.16);
    --bm-line:rgba(0,0,0,.08);
}

/* =============================================================
   1) HANYA BERLAKU DI LAYAR HP (maks 767px)
   ============================================================= */
@media (max-width: 767px){

    /* ---- Judul tiap section lebih menonjol + garis aksen ---- */
    .g1-collection-title,
    .g1-collection-header .g1-delta{
        position:relative;
        padding-left:12px !important;
        font-weight:800 !important;
        letter-spacing:.2px;
    }
    .g1-collection-title:before,
    .g1-collection-header .g1-delta:before{
        content:"";
        position:absolute;
        left:0; top:50%;
        transform:translateY(-50%);
        width:5px; height:1em;
        border-radius:4px;
        background:var(--bm-accent);
    }

    /* ---- Jarak antar baris/section lebih rapi ---- */
    .g1-row, .g1-collection{ margin-bottom:6px; }

    /* ---- Kartu (semua grid) jadi lebih modern ---- */
    .g1-collection-item .g1-card,
    .g1-collection-item article.entry-tpl-grid{
        border-radius:var(--bm-radius);
        overflow:hidden;
        box-shadow:var(--bm-shadow);
        background:#fff;
        transition:box-shadow .2s ease, transform .2s ease;
    }
    .g1-collection-item .entry-featured-media,
    .g1-collection-item .g1-frame{ border-radius:0; }
    .g1-collection-item .entry-body{ padding:12px 14px 14px; }
    .g1-collection-item .entry-title{ line-height:1.3 !important; }

    /* Rasio gambar seragam supaya rapi */
    .g1-collection-item .entry-featured-media img{
        width:100%;
        height:auto;
        display:block;
    }

    /* =========================================================
       2) SLIDER GESER KIRI-KANAN
       Otomatis untuk grid kecil (grid-s / grid-xs / grid-xxs)
       ATAU untuk block apa pun yang diberi kelas: g1m-slider
       ========================================================= */
    .g1-collection-grid-xxs   .g1-collection-items,
    .g1-collection-grid-xs    .g1-collection-items,
    .g1-collection-grid-s     .g1-collection-items,
    .g1m-slider               .g1-collection-items{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:12px;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        scroll-padding-left:14px;
        padding:4px 14px 14px;
        margin:0;
        list-style:none;
        /* sembunyikan scrollbar */
        scrollbar-width:none;
    }
    .g1-collection-grid-xxs   .g1-collection-items::-webkit-scrollbar,
    .g1-collection-grid-xs    .g1-collection-items::-webkit-scrollbar,
    .g1-collection-grid-s     .g1-collection-items::-webkit-scrollbar,
    .g1m-slider               .g1-collection-items::-webkit-scrollbar{
        display:none;
    }

    .g1-collection-grid-xxs   .g1-collection-item,
    .g1-collection-grid-xs    .g1-collection-item,
    .g1-collection-grid-s     .g1-collection-item,
    .g1m-slider               .g1-collection-item{
        flex:0 0 76% !important;
        max-width:76% !important;
        width:76% !important;
        margin:0 !important;
        scroll-snap-align:start;
    }
    /* kartu di dalam slider */
    .g1m-slider .g1-card,
    .g1-collection-grid-s .g1-card{
        height:100%;
        box-shadow:var(--bm-shadow);
    }

    /* =========================================================
       3) DAFTAR JUDUL RINGKAS (3-5 judul menurun)
       Berlaku untuk block list bawaan Bimber
       (list / list-xs / txtlist / listxxs) ATAU kelas: g1m-titles
       ========================================================= */
    .g1-collection-list       .g1-collection-items,
    .g1-collection-list-otxtlist .g1-collection-items,
    .g1m-titles               .g1-collection-items{
        display:block;
        padding:2px 0;
        margin:0;
        list-style:none;
        border-top:1px solid var(--bm-line);
    }
    .g1-collection-list       .g1-collection-item,
    .g1-collection-list-otxtlist .g1-collection-item,
    .g1m-titles               .g1-collection-item{
        display:block;
        margin:0 !important;
        padding:0;
        border-bottom:1px solid var(--bm-line);
    }
    /* baris judul + thumbnail kecil */
    .g1-collection-list .entry-tpl-listxs,
    .g1-collection-list .entry-tpl-txtlist,
    .g1m-titles .entry-tpl-listxs,
    .g1m-titles .entry-tpl-txtlist,
    .g1m-titles article{
        display:flex !important;
        align-items:center;
        gap:12px;
        padding:11px 4px;
    }
    .g1-collection-list .entry-featured-media,
    .g1m-titles .entry-featured-media{
        flex:0 0 68px;
        width:68px;
        border-radius:10px;
        overflow:hidden;
    }
    .g1-collection-list .entry-featured-media img,
    .g1m-titles .entry-featured-media img{
        width:68px; height:68px; object-fit:cover; display:block;
    }
    .g1-collection-list .entry-header,
    .g1m-titles .entry-header{ margin:0; flex:1 1 auto; }
    .g1-collection-list .entry-title,
    .g1m-titles .entry-title{
        margin:0 !important;
        font-size:15px !important;
        line-height:1.35 !important;
        font-weight:700 !important;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    /* =========================================================
       4) INDIKATOR TITIK untuk slider (dibuat oleh JS)
       ========================================================= */
    .g1m-dots{
        display:flex;
        justify-content:center;
        gap:7px;
        margin:2px 0 10px;
    }
    .g1m-dots span{
        width:7px; height:7px;
        border-radius:50%;
        background:var(--bm-line);
        transition:all .2s ease;
    }
    .g1m-dots span.is-active{
        width:20px;
        border-radius:6px;
        background:var(--bm-accent);
    }

    /* Label kategori sedikit lebih manis */
    .g1-collection-item .entry-categories a,
    .g1-collection-item .entry-category a{
        font-weight:700;
        letter-spacing:.3px;
        text-transform:uppercase;
        font-size:11px;
    }
}

/* =============================================================
   5) Bantuan universal (semua layar) - aman
   Kelas opsional yang bisa dipakai di block builder Bimber.
   ============================================================= */
.g1m-slider .g1-collection-more{ text-align:center; }