/* ==============================================================
   Section Editorial
   Diptych 50/50 horizontal di desktop, menumpuk jadi kolom di
   bawah 1024. Semua angka di berkas ini hasil ukur dari desain
   sumber dan disalin apa adanya. Yang berubah hanya nama kelas
   blok, mengikuti konvensi .section-editorial.

   Dipakai dua kali di homepage, bedanya cuma warna latar, rasio
   media, panjang heading, dan label CTA.
   ============================================================== */

/* --- Editorial ------------------------------------------------
   Modifier fullWidth: container 100% dengan gap 0, bukan grid-width. */
.section-editorial {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}
.section-editorial--stone { background: var(--stone); }
.section-editorial--white { background: var(--white); }

/* aspect-ratio WAJIB ada. Tinggi section editorial di desain sumber
   ditentukan oleh rasio gambarnya (2400x2499 dan 2400x2342 yang
   dikirim CDN). Tanpa ini placeholder tidak punya tinggi intrinsik
   dan section kolaps dari 666px jadi 218px. */
.section-editorial__media {
  flex: 1;
  align-self: stretch;
  aspect-ratio: var(--media-ratio, 1);
}
/* object-fit fill, bukan cover. Gambar sudah dipotong di CMS. */
.section-editorial__media img { width: 100%; height: 100%; object-fit: fill; display: block; }

.section-editorial__block { flex: 1; display: flex; }
.section-editorial__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  /* Terukur 51.0848px @1280, yaitu tepat 1 kolom + 1 gutter. */
  padding: 0 calc(var(--col) + var(--gutter));
}
.section-editorial__rich { display: flex; flex-direction: column; gap: 1.4rem; }
/* Jarak judul ke body datang dari DUA sumber yang menumpuk: gap 1.4rem
   di pembungkus, plus margin-bottom 1rem di judul. Totalnya 21.32px
   @1280, dan itu cocok dengan hasil ukur. Dengan 0.8rem selisihnya
   1.78px. */
.section-editorial__heading { margin: 0 0 1rem; }
.section-editorial__body { margin: 0; }

@media (max-width: 1023.98px) {
  .section-editorial { flex-direction: column; }
  .section-editorial__inner { padding: 4rem var(--margin); gap: 2.4rem; }
  /* Terukur 0.6rem di mobile, 1.4rem baru mulai 1024. */
  .section-editorial__rich { gap: 0.6rem; }
}