/* =====================================================================
   BX3 SPLIT — setengah foto, setengah teks
   Foto kiri → teks rata kanan (seperti "Tentang CHAGEE"); foto kanan → teks rata kiri.
   ===================================================================== */

.bx3.bx3-split{display:grid;grid-template-columns:1fr 1fr;min-height:var(--bx3-full);background:var(--bx3-white)}
.bx3.bx3-split--cream{background:var(--bx3-cream)}
.bx3 .bx3-split__media{grid-column:1;grid-row:1;min-height:100%}
.bx3 .bx3-split__body{grid-column:2;grid-row:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;padding:var(--bx3-sec-y) var(--bx3-pad-x) var(--bx3-sec-y) clamp(24px,4vw,80px)}
.bx3.bx3-split--right .bx3-split__media{grid-column:2}
.bx3.bx3-split--right .bx3-split__body{grid-column:1;align-items:flex-start;text-align:left;padding:var(--bx3-sec-y) clamp(24px,4vw,80px) var(--bx3-sec-y) var(--bx3-pad-x)}
/* Tanpa foto: teks di tengah selebar halaman */
.bx3.bx3-split--noimg{grid-template-columns:1fr;min-height:0}
.bx3.bx3-split--noimg .bx3-split__body{grid-column:1;align-items:center;text-align:center;padding:var(--bx3-sec-y) var(--bx3-pad-x)}

@media (max-width:767px){
  .bx3.bx3-split{grid-template-columns:1fr;min-height:0}
  .bx3 .bx3-split__media,.bx3.bx3-split--right .bx3-split__media{grid-column:1;grid-row:1;aspect-ratio:1/1;min-height:0}
  .bx3 .bx3-split__body,.bx3.bx3-split--right .bx3-split__body{grid-column:1;grid-row:2;align-items:flex-start;text-align:left;padding:56px var(--bx3-pad-x) 72px}
  .bx3.bx3-split--noimg .bx3-split__body{grid-row:1;align-items:center;text-align:center}
}

/* 3.5.2 Rata kanan-kiri (pilihan "Rata kalimat"): kalimat selebar kolom teks (maks. 28em), baris terakhir ikut posisi teks */
.bx3.bx3-split.bx3-just .bx3-split__body .bx3-text{width:100%;text-align:justify;text-justify:inter-word;text-align-last:right}
.bx3.bx3-split--right.bx3-just .bx3-split__body .bx3-text{text-align-last:left}
.bx3.bx3-split--noimg.bx3-just .bx3-split__body .bx3-text{text-align-last:center}
@media (max-width:767px){
  .bx3.bx3-split:is(.bx3-just,.bx3-just-m) .bx3-split__body .bx3-text{width:100%;text-align:justify;text-justify:inter-word;text-align-last:left}
  .bx3.bx3-split--noimg:is(.bx3-just,.bx3-just-m) .bx3-split__body .bx3-text{text-align-last:center}
}