/* ==========================================================================
   WPE Query Builder — Line Divider (grid & list mode)
   --------------------------------------------------------------------------
   Divider digambar via pseudo-element pada tiap .wpe-query-item, diposisikan
   tepat di tengah gap antar item (gap/2 offset). CSS variable di-inline oleh
   wpe_get_layout_opening_tag() pada container .wpe-query-grid / .wpe-query-list.

   Catatan: .wpe-query-item secara default `overflow:hidden` (untuk efek zoom
   thumbnail). Saat divider aktif kita override jadi `visible` agar garis di
   area gap tidak terpotong — zoom gambar tetap aman karena <figure> punya
   overflow:hidden sendiri.
   ========================================================================== */

.wpe-qb-has-divider {
    --wpe-qb-dv-color: #e0e0e0;
    --wpe-qb-dv-style: solid;
    --wpe-qb-dv-thickness: 1px;
    --wpe-qb-dv-gap: 30px;
}

/* Specificity 0,3,0 — sengaja lebih tinggi dari `.wpe-query-builder-output
   .wpe-query-item { overflow:hidden }` (0,2,0) di style-index.css, supaya
   garis divider di area gap tidak terpotong. */
.wpe-query-grid.wpe-qb-has-divider > .wpe-query-item,
.wpe-query-list.wpe-qb-has-divider > .wpe-query-item {
    position: relative;
    overflow: visible;
}

/* ==========================================================================
   GRID — garis vertikal (antar kolom) + horizontal (antar baris)
   ========================================================================== */

/* Garis vertikal di sisi kanan tiap item (di-hide pada kolom terakhir) */
.wpe-query-grid.wpe-qb-has-divider > .wpe-query-item::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc((var(--wpe-qb-dv-gap) + var(--wpe-qb-dv-thickness)) * -0.5);
    width: 0;
    border-left: var(--wpe-qb-dv-thickness) var(--wpe-qb-dv-style) var(--wpe-qb-dv-color);
    pointer-events: none;
}

/* Garis horizontal di sisi atas tiap item (di-hide pada baris pertama) */
.wpe-query-grid.wpe-qb-has-divider > .wpe-query-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--wpe-qb-dv-gap) + var(--wpe-qb-dv-thickness)) * -0.5);
    height: 0;
    border-top: var(--wpe-qb-dv-thickness) var(--wpe-qb-dv-style) var(--wpe-qb-dv-color);
    pointer-events: none;
}

/* Hide garis vertikal di KOLOM TERAKHIR — per data-dv-cols (1..12) */
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="1"]  > .wpe-query-item::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="2"]  > .wpe-query-item:nth-child(2n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="3"]  > .wpe-query-item:nth-child(3n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="4"]  > .wpe-query-item:nth-child(4n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="5"]  > .wpe-query-item:nth-child(5n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="6"]  > .wpe-query-item:nth-child(6n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="7"]  > .wpe-query-item:nth-child(7n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="8"]  > .wpe-query-item:nth-child(8n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="9"]  > .wpe-query-item:nth-child(9n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="10"] > .wpe-query-item:nth-child(10n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="11"] > .wpe-query-item:nth-child(11n)::after,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="12"] > .wpe-query-item:nth-child(12n)::after {
    display: none;
}

/* Hide garis horizontal di BARIS PERTAMA — per data-dv-cols (1..12) */
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="1"]  > .wpe-query-item:nth-child(-n+1)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="2"]  > .wpe-query-item:nth-child(-n+2)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="3"]  > .wpe-query-item:nth-child(-n+3)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="4"]  > .wpe-query-item:nth-child(-n+4)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="5"]  > .wpe-query-item:nth-child(-n+5)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="6"]  > .wpe-query-item:nth-child(-n+6)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="7"]  > .wpe-query-item:nth-child(-n+7)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="8"]  > .wpe-query-item:nth-child(-n+8)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="9"]  > .wpe-query-item:nth-child(-n+9)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="10"] > .wpe-query-item:nth-child(-n+10)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="11"] > .wpe-query-item:nth-child(-n+11)::before,
.wpe-query-grid.wpe-qb-has-divider[data-dv-cols="12"] > .wpe-query-item:nth-child(-n+12)::before {
    display: none;
}

/* ==========================================================================
   LIST — garis horizontal di antara item (kecuali setelah item terakhir)
   ========================================================================== */

.wpe-query-list.wpe-qb-has-divider > .wpe-query-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc((var(--wpe-qb-dv-gap) + var(--wpe-qb-dv-thickness)) * -0.5);
    height: 0;
    border-top: var(--wpe-qb-dv-thickness) var(--wpe-qb-dv-style) var(--wpe-qb-dv-color);
    pointer-events: none;
}

/* ==========================================================================
   Opsi "Hide on Mobile" — sembunyikan semua garis divider di ≤767px.
   Class .wpe-qb-divider-hide-mobile ditambahkan server-side saat atribut
   lineDividerHideMobile aktif (lihat wpe_get_layout_opening_tag()).
   ========================================================================== */
@media (max-width: 767px) {
    .wpe-qb-divider-hide-mobile.wpe-qb-has-divider > .wpe-query-item::before,
    .wpe-qb-divider-hide-mobile.wpe-qb-has-divider > .wpe-query-item::after {
        display: none !important;
    }
}