/* ══ Blok Kolom Flex (1/2/3/4 kolom) — background, lebar, margin ══

   ARSITEKTUR LEBAR (penting, jangan diubah tanpa baca ini):

   Wrapper konten halaman (.pg-body) sekarang FULL WIDTH — tidak lagi dibungkus
   .container oleh Blade. Batas container dipasang PER-BLOK:
     • saat render, page-builder.js membungkus blok-blok non-full-bleed yang
       berurutan ke dalam <div class="bk-cgroup"> (lihat renderHtml()), dan
     • .bk-cgroup diberi geometri container di file ini.

   Kenapa begitu? Teknik full-bleed sebelumnya memakai
       width:100vw; left:50%; margin-left:-50vw
   dan satuan `vw` IKUT MENGHITUNG lebar scrollbar vertikal, sedangkan sisa
   halaman (topbar, navbar, .container) memakai lebar area konten yang TANPA
   scrollbar. Selisih ~15px itu membuat blok full-width jadi lebih lebar dari
   ruang yang tersedia: dokumen melebar ~8px, muncul scrollbar horizontal, dan
   tepi kanan halaman terlihat tidak rata.
   Sekarang wrapper-nya sendiri sudah full-width, jadi full-bleed cukup
   `width:100%` — presisi, tanpa vw, tanpa overflow, apa pun kondisi scrollbar.

   CATATAN kompatibilitas: konten lama yang disimpan SEBELUM perubahan ini
   tersimpan sebagai blok-blok datar (tanpa .bk-cgroup). Aturan
   `.pg-body > *:not(.bk-flexrow-full)` di bawah membuatnya tetap terbatasi
   container, bukan mendadak edge-to-edge. Hanya blok berukuran PERSEN (mis.
   Gambar 75%/50%/33%) yang bisa tampak lebih lebar sampai halamannya disimpan
   ulang lewat builder, karena persentase dihitung terhadap parent.
*/

/* Geometri container — max-width & breakpoint SAMA PERSIS dengan .container
   Bootstrap 5, supaya semua elemen rata dari atas ke bawah.
   PENTING: padding horizontalnya harus sama dengan .container situs ini, yang
   di public/style.css DIOVERRIDE jadi max(1rem, 2vw) — bukan 12px bawaan
   Bootstrap. Kalau di sini dipakai 12px, blok mode "normal" jadi bergeser 22px
   (di lebar 1700px) dibanding blok mode "Full Width + Container" yang memang
   memakai .container asli. */
.pg-body > .bk-cgroup,
.pg-body > *:not(.bk-flexrow-full) {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1rem, 2vw);
    padding-right: max(1rem, 2vw);
}
@media (min-width: 576px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 540px; }
}
@media (min-width: 768px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 720px; }
}
@media (min-width: 992px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 960px; }
}
@media (min-width: 1200px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .pg-body > .bk-cgroup,
    .pg-body > *:not(.bk-flexrow-full) { max-width: 1320px; }
}

.bk-flexrow {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay di atas background (warna/gambar) — elemen-nya di-generate
   page-builder.js (renderHtml()), hanya membawa background-color (rgba
   dengan opacity sudah "dibakar" ke warnanya) sebagai inline style karena
   `position`/`inset`/`opacity`/`z-index` inline dibuang HtmlSanitizer.
   Geometrinya (menutupi seluruh .bk-flexrow) makanya harus lewat class di
   sini. pointer-events:none supaya link/tombol di dalam kolom tetap bisa
   diklik menembus overlay. */
.bk-flexrow-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Full-bleed: cukup 100% dari .pg-body yang memang sudah full-width. */
.bk-flexrow-full {
    width: 100%;
}

/* position:relative (z-index:auto, urutan DOM setelah .bk-flexrow-overlay)
   supaya konten tetap di atas overlay tanpa perlu z-index inline (dibuang
   HtmlSanitizer). Berlaku untuk pembungkus isi baris flex DAN untuk mode
   "Full Width + Container" yang memakai .container bawaan Bootstrap. */
.bk-flexrow-inner,
.bk-flexrow > .container {
    position: relative;
}

/* Pembungkus isi baris flex (mode "normal"/"full").
   Mode "normal": baris sudah berada di dalam .bk-cgroup, jadi TIDAK perlu
   padding horizontal lagi (kalau ditambah, baris flex jadi lebih menjorok ke
   dalam dibanding heading/paragraf di sekitarnya). */
.bk-flexrow-inner {
    margin-left: auto;
    margin-right: auto;
    padding: 32px 0;
}

/* Kolom-kolom TIDAK saling meregang ke tinggi yang sama (override
   align-items:stretch bawaan Bootstrap .row). Tanpa ini: kalau satu kolom
   berisi blok yang jauh lebih tinggi dari kolom sebelah (mis. Card Model 4
   ditumpuk bareng Card Model 1 di kolom kiri, sementara kolom kanan cuma
   berisi satu Card Model 1), kolom pendek ikut diregangkan setinggi kolom
   tinggi — dan card di dalamnya (height:100% di builder-stat-card.css dkk)
   ikut meregang jadi terlihat "berongga" dengan ruang kosong besar di
   dalamnya. Dengan flex-start, tiap kolom tetap setinggi konten aslinya. */
.bk-flexrow-inner > .row,
.bk-flexrow > .container > .row {
    align-items: flex-start;
}

/* Opsi admin "Samakan Tinggi Kolom" (equal_height) — kebalikan dari aturan di
   atas. Dipakai kalau beberapa kartu SEJENIS berjajar (mis. 2 Card Model 4
   bersisian) justru ingin tampil rata/seragam tingginya, bukan mengikuti
   tinggi konten masing-masing. Card yang punya height:100% (builder-stat-card
   .css, builder-program-card.css, builder-promo-card.css) baru benar-benar
   ikut memenuhi kolom yang diregangkan ini. */
.bk-flexrow-inner > .row.bk-flexrow-equal-height,
.bk-flexrow > .container > .row.bk-flexrow-equal-height {
    align-items: stretch;
}

/* Fallback mode "Full Width": DEFAULT-nya gutter Bootstrap bawaan (margin
   negatif .row + padding .col) ternolkan di sini supaya isinya (mis. peta,
   banner, gambar) menempel ke tepi layar tanpa celah — SAMA seperti perilaku
   dari awal, supaya halaman yang sudah ada tidak berubah tampilannya.
   Field "Gap Kolom (px)" biasa TIDAK berlaku di mode ini (field terpisah
   khusus, lihat di bawah), justru supaya blok Full Width lama yang gap_px-nya
   masih nilai default (tidak pernah disentuh admin) tetap konsisten edge-to-
   edge. Kalau admin memang mau ada jarak antar kolom WALAU bloknya Full
   Width, dipakai field terpisah "Gap Kolom — mode Full Width" (full_gap_px,
   defaultnya kosong/opt-in) — kalau diisi, page-builder.js menulis inline
   padding di tiap kolom (menang atas rule di sini — inline > class) TANPA
   margin negatif di .row (supaya tidak overflow horizontal, wrapper Full
   Width tidak punya padding luar untuk menyerapnya) — lihat komentar
   `rowStyleParts`/`colPad`/`full_gap_px` di renderBlock() case
   columns_flex_*. Konsekuensinya kolom paling kiri/kanan dapat sedikit jarak
   dari tepi layar (setengah gap) kalau field itu diisi; itu wajar, bukan bug.
   Kalau butuh jarak antar kolom TAPI kontennya tetap dibatasi (tidak ikut
   membentang penuh layar), pakai mode "Full Width + Container". */
.bk-flexrow-full > .bk-flexrow-inner > .row {
    margin-left: 0;
    margin-right: 0;
}
.bk-flexrow-full > .bk-flexrow-inner > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Mode "Full Width + Container" memakai .container bawaan Bootstrap di dalam
   .bk-flexrow-full (di-generate page-builder.js), sehingga lebarnya identik
   dengan .bk-cgroup di atas. */