/* =====================================================================
   BX3 POIN - daftar poin singkat, dua tampilan. Tanpa gerakan selain muncul halus.
   - Foto (.bx3-points--photo): foto persegi 1:1 (3.4.3; dulu 4:5) di satu sisi; di sisi lain judul section lalu poin
     2 x 2 dengan garis tipis di atas tiap poin. Dipakai "Kenapa Bingxue".
     <=899 px: foto 1:1 di atas (maks. 560 px), poin 2 kolom (HP 1 kolom). Tanpa foto: poin selebar section.
   - Ikon (.bx3-points--icons): judul di kiri (ikut menggulir), poin berikon 2 kolom di kanan.
     Dipakai "Dukungan untuk Mitra". <=1024 px judul di atas; HP ikon di kiri teks.
   ===================================================================== */

.bx3.bx3-points{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x)}
.bx3.bx3-points--cream{background:var(--bx3-cream)}
.bx3 .bx3-points__in{max-width:var(--bx3-max);margin:0 auto}
.bx3 .bx3-points__head{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bx3 .bx3-points__head .bx3-text{max-width:30em;text-wrap:pretty}

/* ---------- Foto + poin ---------- */
.bx3.bx3-points--photo .bx3-points__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,120px);align-items:center}
.bx3.bx3-points--right .bx3-points__img{order:2}
.bx3.bx3-points--noimg .bx3-points__in{grid-template-columns:minmax(0,1fr)}
.bx3 .bx3-points__img{aspect-ratio:1/1;border-radius:var(--bx3-r);isolation:isolate}
.bx3 .bx3-points__body{min-width:0}
.bx3 .bx3-points__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,3.4vw,64px);row-gap:clamp(32px,3.4vw,56px);margin-top:clamp(36px,3.6vw,64px)}
.bx3.bx3-points--noimg .bx3-points__list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bx3 .bx3-pt{min-width:0;padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--bx3-line-btn)}
.bx3 .bx3-pt__title{font-size:var(--bx3-tt,clamp(1.125rem,1.4vw,1.375rem));font-weight:700;line-height:1.3;color:var(--bx3-ink)}
.bx3 .bx3-pt__text{margin-top:10px;max-width:22em;font-size:var(--bx3-ts,var(--bx3-fs-sm));line-height:1.7;color:var(--bx3-ink-soft)}

/* ---------- Ikon ---------- */
.bx3 .bx3-points__split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start}
.bx3 .bx3-points__split .bx3-points__head{position:sticky;top:calc(var(--bx3-nav-h) + 40px)}
.bx3 .bx3-points__split .bx3-points__head .bx3-text{max-width:24em}
.bx3 .bx3-points__icons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);row-gap:clamp(40px,4.2vw,72px)}
.bx3 .bx3-pi{min-width:0}
.bx3 .bx3-pi__icon{display:block;width:36px;height:36px;color:var(--bx3-orange)}
.bx3 .bx3-pi__icon svg{display:block;width:100%;height:100%}
.bx3 .bx3-pi__title{margin-top:18px;font-size:var(--bx3-tt,clamp(1.0625rem,1.2vw,1.25rem));font-weight:700;line-height:1.4;color:var(--bx3-ink)}
.bx3 .bx3-pi__text{margin-top:6px;max-width:24em;font-size:var(--bx3-ts,var(--bx3-fs-sm));line-height:1.7;color:var(--bx3-ink-soft)}

@media (max-width:1024px){
  .bx3 .bx3-points__split{grid-template-columns:minmax(0,1fr)}
  .bx3 .bx3-points__split .bx3-points__head{position:static}
}
@media (max-width:899px){
  .bx3.bx3-points--photo .bx3-points__in{grid-template-columns:minmax(0,1fr);gap:clamp(36px,6vw,56px)}
  .bx3.bx3-points--right .bx3-points__img{order:0}
  .bx3 .bx3-points__img{aspect-ratio:1/1;width:100%;max-width:560px}
}
@media (max-width:599px){
  .bx3 .bx3-points__list,.bx3.bx3-points--noimg .bx3-points__list{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .bx3 .bx3-points__icons{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .bx3 .bx3-pi{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px}
  .bx3 .bx3-pi__icon{grid-row:1 / 3;width:28px;height:28px}
  .bx3 .bx3-pi__title{margin-top:0}
}

/* 3.5.2 Rata kanan-kiri kalimat poin (pilihan "Rata kalimat poin"; bawaan Foto + poin = semua layar) */
.bx3.bx3-points.bx3-just :is(.bx3-pt__text,.bx3-pi__text){text-align:justify;text-justify:inter-word;text-align-last:left}
@media (max-width:767px){
  .bx3.bx3-points.bx3-just-m :is(.bx3-pt__text,.bx3-pi__text){text-align:justify;text-justify:inter-word;text-align-last:left}
}