/* ============================================================================
   Papua Blood Money — Lapisan web modern (2026)
   Dimuat di SEMUA halaman publik, sesudah gabung.css.
   Isi:
     1) Dynamic viewport (dvh) + safe-area (env) — keyboard HP & layar poni
     2) Container queries — komponen beradaptasi pada WADAHNYA, bukan lebar layar
     3) View Transitions — nama elemen + penjaga gerak
     4) Antarmuka PWA — bilah luring, tombol pasang, pemberitahuan versi baru
   Prinsip: semua tambahan bersifat progresif. Bila peramban tidak mendukung,
   aturan diabaikan dan tampilan lama (media query) tetap berlaku.
   ========================================================================== */

/* ---------- 0. Token tambahan ------------------------------------------- */
:root{
  --safe-atas: env(safe-area-inset-top, 0px);
  --safe-bawah: env(safe-area-inset-bottom, 0px);
  --safe-kiri: env(safe-area-inset-left, 0px);
  --safe-kanan: env(safe-area-inset-right, 0px);
  --tinggi-layar: 100dvh;          /* cadangan: 100vh diberikan lebih dulu */
  --pbm-bilah: 0px;                /* tinggi bilah luring (diisi JS/CSS) */
}
@supports not (height: 100dvh){ :root{ --tinggi-layar: 100vh; } }

/* ---------- 1. Dynamic viewport & safe-area ----------------------------- */
html, body { overflow-x: clip; }
body { min-height: 100vh; min-height: 100dvh; }

/* Bilah atas & kaki menghormati lekukan/takik perangkat */
.topbar, header.mast, nav.main { padding-left: var(--safe-kiri); padding-right: var(--safe-kanan); }
.topbar .wrap, header.mast .wrap, nav.main .wrap { padding-left: calc(18px + var(--safe-kiri)); padding-right: calc(18px + var(--safe-kanan)); }
footer { padding-bottom: calc(24px + var(--safe-bawah)); }

/* Menu ponsel: panel setinggi layar dinamis, sehingga tidak terpotong keyboard */
@media (max-width: 860px){
  header.mast.menu-open nav.main{
    display: block;
    max-height: calc(100dvh - 132px - var(--safe-bawah));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(12px + var(--safe-bawah));
  }
  /* iOS memperbesar halaman bila ukuran huruf < 16px pada isian */
  input, select, textarea { font-size: 16px; }
  .search input { font-size: 16px; padding: 11px 12px; }
}

/* Ruang ketik (Studio/editor) memakai dvh supaya tombol kirim tidak tertutup keyboard */
.tulis-layar-penuh, .editor-teks-panjang {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: calc(100dvh - var(--safe-atas) - var(--safe-bawah));
}
textarea.input-textarea { max-width: 100%; }
@supports (height: 100svh){
  .tulis-layar-penuh { min-height: 100svh; }
}

/* Mode terpasang (standalone/full-screen): beri ruang status bar */
html.pwa-standalone .topbar { padding-top: var(--safe-atas); }
html.pwa-standalone body { padding-bottom: 0; }

/* ---------- 2. Container queries ---------------------------------------- */
/* Wadah dinyatakan "container": anak-anaknya kini bisa bereaksi pada lebar
   wadahnya sendiri — bukan pada lebar layar. */
/* CATATAN PENTING: container query HANYA berlaku pada TURUNAN container.
   Karena itu yang dijadikan container adalah PEMBUNGKUS (.wrap, .blk, .card),
   dan yang diatur di dalam @container adalah komponen di dalamnya (.grid, table.db). */
.wrap,
.blk,
.card,
.incident-detail,
.article-page,
.article-layout,
.world-lead-column,
.world-secondary,
.world-rail,
.world-more,
.world-feed,
.newsroom-grid,
.story-grid,
.profile-grid { container-type: inline-size; }

/* Kartu berita: susunan mendatar saat wadahnya lega, menumpuk saat sempit */
@container (max-width: 620px){
  .grid { grid-template-columns: 1fr; gap: 20px; }
  .article-layout { grid-template-columns: 1fr; gap: 20px; }
  .story-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-page .byline { flex-wrap: wrap; }
}
@container (max-width: 420px){
  .profile-grid { grid-template-columns: 1fr; }
  .card .stat { font-size: 26px; }
  .card h3 { font-size: 17px; }
}
@container (max-width: 300px){
  .card { padding: 12px; }
  .card .mini { font-size: 10.5px; }
}

/* Kartu dampak: angka besar tetap terbaca di kolom sempit */
@container (max-width: 360px){
  .card .src { display: block; margin-top: 6px; }
  .counters .wrap { gap: 12px; }
}

/* Kartu daftar entri kini diatur di desain-seragam.css (berlaku semua lebar). */

/* Cadangan: peramban tanpa :has() mengabaikan aturan kartu di atas dan tetap
   memakai geser mendatar dari mobile-refinement.css (tabel 660px). */

/* ---------- 3. View Transitions ----------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .24s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* Elemen yang diberi nama akan "morph" antar halaman (bila peramban mendukung) */
header.mast { view-transition-name: pbm-mast; }
nav.main { view-transition-name: pbm-nav; }
h1 { view-transition-name: pbm-judul; }
.pagetop { view-transition-name: pbm-pagetop; }
/* Jangan memberi satu nama yang sama pada dua elemen berbeda: transisi akan batal. */

/* Perpindahan di dalam halaman (filter, pencarian, tab) — lihat view-transitions.js */
.pbm-vt-isi { view-transition-name: pbm-isi-dalam; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-image-pair(*) { animation: none !important; }
}

/* ---------- 4. Antarmuka PWA -------------------------------------------- */
/* Bilah mode luring */
#pbm-luring {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  display: flex; align-items: center; gap: 9px;
  padding: 10px calc(14px + var(--safe-kanan)) calc(10px + var(--safe-bawah)) calc(14px + var(--safe-kiri));
  background: #2b2f2e; color: #f4f2ea;
  font: 500 12.5px/1.35 "Roboto", system-ui, -apple-system, sans-serif;
  letter-spacing: .01em;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 -6px 18px rgba(0,0,0,.16);
}
#pbm-luring.tampil { transform: translateY(0); }
#pbm-luring .pbm-luring-titik {
  width: 8px; height: 8px; border-radius: 50%; background: #e0b24f; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(224,178,79,.18);
}
html.pbm-luring-aktif body { padding-bottom: calc(38px + var(--safe-bawah)); }

/* Tombol pasang aplikasi — tenang, tidak menyaingi navigasi */
/* Warna mengikuti teks sekitarnya: tombol ini hidup di kaki halaman yang berlatar
   gelap, jadi warna navy akan hilang. currentColor membuatnya terbaca di keduanya. */
.pbm-pasang {
  display: none; align-items: center; gap: 8px; margin: 20px 0 4px;
  padding: 11px 15px; min-height: 44px; border: 1px solid currentColor; border-radius: 2px;
  background: transparent; color: inherit; opacity: .88;
  font: 600 12px/1 "Roboto Condensed", Arial, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  transition: opacity .18s ease, background .18s ease;
}
.pbm-pasang.siap { display: inline-flex; }
.pbm-pasang:hover, .pbm-pasang:focus-visible { opacity: 1; background: rgba(127,127,127,.16); }
.pbm-pasang svg { flex: 0 0 auto; }
html.pwa-standalone .pbm-pasang { display: none !important; }

/* Pesan singkat (petunjuk iOS, konfirmasi pasang) */
#pbm-pesan {
  position: fixed; left: 50%; bottom: calc(18px + var(--safe-bawah)); transform: translate(-50%, 20px);
  z-index: 9999; max-width: min(92vw, 460px); opacity: 0; pointer-events: none;
  background: #142c3c; color: #fff; padding: 12px 15px; border-radius: 3px;
  font: 500 13px/1.45 "Roboto", system-ui, sans-serif; box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: opacity .22s ease, transform .22s ease;
}
#pbm-pesan.tampil { opacity: 1; transform: translate(-50%, 0); }

/* Pemberitahuan versi baru */
#pbm-versi-baru {
  position: fixed; left: 50%; top: calc(14px + var(--safe-atas)); transform: translateX(-50%);
  z-index: 9999; border: 0; border-radius: 999px; cursor: pointer;
  padding: 10px 16px; background: #943c30; color: #fff;
  font: 600 12.5px/1 "Roboto", system-ui, sans-serif; box-shadow: 0 8px 22px rgba(0,0,0,.2);
}