/* ==========================================================================
   Swara — Lapisan Intrinsic Responsive Web Design (intrinsic.css)
   Dimuat SETELAH v5.css. Lapisan ini hanya MENAMBAH / MENYESUAIKAN:
   - di layar < 768px tampilan tetap mengikuti mockup (files/swara-mockup.html);
     semua clamp() dikalibrasi supaya nilai minimumnya berlaku sampai lebar 430px,
     jadi ukuran huruf di HP sama persis dengan v5.css;
   - di layar >= 768px wadah melebar dan daftar berita menjadi grid 2/3/4 kolom.
   Aturan main: tanpa !important, tanpa font eksternal, tanpa library,
   warna selalu lewat variabel v5 (--navy, --gold, --paper, --card, --ink, ...)
   supaya mode gelap (body.dark) tetap bekerja.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token tambahan: tipografi fluid, jarak fluid, jumlah kolom
   -------------------------------------------------------------------------- */
:root {
  /* Tipografi fluid — nilai minimum = nilai v5/mockup, berlaku s.d. ±430px */
  --fs-merek: clamp(26px, 0.8vw + 22.5px, 30px);     /* .brand            */
  --fs-sorot: clamp(19px, 1.4vw + 12.8px, 26px);     /* .sorot h2         */
  --fs-peristiwa: clamp(20px, 1.6vw + 13px, 28px);   /* .dossier h1       */
  --fs-artikel: clamp(22px, 1.8vw + 14px, 32px);     /* .article h1       */
  --fs-wire: clamp(15px, 0.4vw + 13.2px, 17px);      /* .witem h3         */
  --fs-halaman: clamp(24px, 1.4vw + 17.8px, 32px);   /* .pagehead h2      */
  --fs-teks: clamp(13.5px, 0.3vw + 12.2px, 15px);    /* kutipan & recap   */
  --fs-terkait: clamp(14px, 0.4vw + 12.2px, 16px);   /* .rel a            */

  /* Jarak fluid */
  --gutter: clamp(18px, 2.4vw + 6px, 40px);          /* tepi kiri-kanan    */
  --gap: clamp(12px, 1vw + 6px, 24px);               /* jarak antar kartu  */
  --ruang: clamp(16px, 1.5vw + 10px, 32px);          /* jarak antar bagian */
  --pad-kartu: clamp(14px, 1vw + 8px, 22px);         /* isi kartu          */

  /* Grid intrinsik: jumlah kolom maksimum & lebar kartu minimum */
  --kolom: 1;
  --kartu-min: 240px;

  /* Ruang aman bawah (menu bawah HP & lembar bagikan) */
  --tinggi-nav: 78px;        /* tinggi visual .bottomnav (acuan v5: actionbar bottom 78px) */
  --nav-pad-bawah: 10px;     /* padding bawah asli .bottomnav */
  --sheet-pad-bawah: 20px;   /* padding bawah asli .sheet */
  --ruang-view: 96px;        /* padding bawah asli .view */
}

@media (min-width: 768px)  { :root { --kolom: 2; } }
@media (min-width: 1024px) { :root { --kolom: 3; } }
@media (min-width: 1366px) { :root { --kolom: 4; } }

/* --------------------------------------------------------------------------
   2. Fondasi & pencegahan meluber
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* box-sizing menyeluruh, termasuk pseudo-elemen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Pengecualian: titik timeline di mockup berukuran 11px + border 2,5px
   (content-box = 16px). Dipertahankan agar HP tetap identik dengan mockup. */
.witem::before {
  box-sizing: content-box;
}

/* Tinggi layar dinamis: 100vh untuk peramban lama, 100dvh menimpanya bila didukung */
body,
.phone {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Media tidak boleh lebih lebar dari wadahnya */
img,
video,
iframe,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

/* Gambar di halaman artikel belum diberi gaya oleh v5 (bisa meluber) */
.article img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 10px;
  background: var(--line);
}

/* overflow-x: clip memotong luberan horizontal TANPA membuat wadah gulir,
   jadi position: sticky (.actionbar, tab .cats) tetap bekerja.
   Sengaja tanpa fallback "hidden" karena hidden akan mematikan sticky. */
@supports (overflow-x: clip) {
  .phone,
  .view {
    overflow-x: clip;
  }
}

/* Pemenggalan kata yang aman: kata normal tetap utuh, hanya string
   sangat panjang (URL, tagar) yang boleh dipatahkan. */
h1, h2, h3, h4, p,
.mtitle,
.rel a,
.tagline,
.wsrc,
.msrc {
  overflow-wrap: break-word;
  word-break: normal;
}

.excerpt,
.recap-box p,
.disclaimer,
.src-link {
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Kolom pencarian boleh menyusut di layar 320px */
.searchrow input {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3. Tipografi fluid
   -------------------------------------------------------------------------- */
.brand              { font-size: var(--fs-merek); }
.sorot h2           { font-size: var(--fs-sorot); }
.dossier h1         { font-size: var(--fs-peristiwa); }
.article h1         { font-size: var(--fs-artikel); }
.witem h3           { font-size: var(--fs-wire); }
.pagehead h2        { font-size: var(--fs-halaman); }
.excerpt,
.recap-box p,
.cover-row .mtitle  { font-size: var(--fs-teks); }
.rel a              { font-size: var(--fs-terkait); }

/* --------------------------------------------------------------------------
   4. Unit dinamis & ruang aman (safe area) bawah
   Catatan: env(safe-area-inset-bottom) baru bernilai > 0 di iOS bila meta
   viewport memuat viewport-fit=cover (lihat laporan pemasangan).
   -------------------------------------------------------------------------- */
.bottomnav {
  padding-bottom: calc(var(--nav-pad-bawah) + env(safe-area-inset-bottom, 0px));
}

.sheet {
  padding-bottom: calc(var(--sheet-pad-bawah) + env(safe-area-inset-bottom, 0px));
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ruang di bawah isi halaman agar footer tidak tertutup menu bawah */
.view {
  padding-bottom: calc(var(--ruang-view) + env(safe-area-inset-bottom, 0px));
}

/* Bilah aksi artikel menempel tepat di atas menu bawah, ikut safe area */
.actionbar {
  bottom: calc(var(--tinggi-nav) + env(safe-area-inset-bottom, 0px));
}

/* Halaman tanpa .view (peristiwa, artikel, topik, simpan, tentang) belum
   punya ruang bawah, sehingga footer tertutup .bottomnav di HP. */
@supports selector(:has(*)) {
  @media (max-width: 767.98px) {
    .phone:not(:has(> .view)) {
      padding-bottom: calc(var(--tinggi-nav) + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* --------------------------------------------------------------------------
   5. Tata letak intrinsik (grid)
   Lapis 1 (semua peramban ber-grid): jumlah kolom tetap = --kolom, trek
   minmax(0, 1fr) supaya judul/gambar panjang tidak mendorong kolom melebar.
   Lapis 2 (peramban dengan max()): repeat(auto-fit, ...) dengan lebar minimum
   = 1/--kolom dari wadah -> kolom TIDAK pernah lebih dari --kolom, dan bila
   kartunya sedikit, trek kosong dilipat sehingga kartu melebar mengisi baris.
   (repeat(auto-fit, minmax(0, 1fr)) murni tidak dipakai sendirian: trek
   ber-minimum 0 dibulatkan peramban menjadi 1px sehingga muncul puluhan kolom.)
   -------------------------------------------------------------------------- */
.wire,
.rel,
.dossier {
  display: grid;
  grid-template-columns: repeat(var(--kolom), minmax(0, 1fr));
  column-gap: var(--gap);
}

@supports (width: max(1px, 2px)) {
  .wire,
  .rel,
  .dossier {
    grid-template-columns: repeat(auto-fit, minmax(max(min(100%, var(--kartu-min)), (100% - (var(--kolom) - 1) * var(--gap)) / var(--kolom) - 1px), 1fr));
  }
}

/* Di HP timeline tetap rapat seperti mockup (tanpa jarak antar baris) */
.wire {
  row-gap: 0;
}

/* Elemen yang selalu selebar grid */
.wire > p,
.rel h4,
.dossier .dhead {
  grid-column: 1 / -1;
}

/* Kolom gambar & isi pada kartu peristiwa menyatu tanpa celah */
.dossier {
  column-gap: 0;
}

/* --------------------------------------------------------------------------
   6. CSS Container Queries — kartu menyesuaikan LEBAR SLOT-nya, bukan layar
   -------------------------------------------------------------------------- */
.witem {
  container-type: inline-size;
  container-name: wire-item;
}

.sorot {
  container-type: inline-size;
  container-name: sorot;
  /* Grid tanpa templat: kolom implisit selebar 1fr. Di slot sempit semua
     anak bertumpuk di satu kolom (identik dengan display:block v5). */
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
}

/* 6a. Kartu berita LEBAR (>= 420px): gambar kiri 16:9, teks kanan */
@container wire-item (min-width: 420px) {
  .witem .wrow {
    gap: clamp(14px, 4cqi, 22px);
  }

  .witem .wthumb {
    order: -1;
    width: clamp(150px, 38cqi, 260px);
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }

  .witem .wmain {
    align-self: center;
  }

  .witem .wdetail {
    margin-top: 14px;
  }
}

/* 6b. Kartu berita SEMPIT (<= 419px): tetap bertumpuk vertikal seperti
   mockup — jam & media di atas judul, thumbnail persegi 76px di kanan.
   (Lebar pecahan 419–420px jatuh ke gaya bawaan v5 yang sama persis.) */
@container wire-item (max-width: 419px) {
  .witem .wthumb {
    order: 0;
    width: 76px;
    height: 76px;
    aspect-ratio: auto;
  }
}

/* 6c. Sorotan LEBAR (>= 420px): kepala di atas, gambar kiri (2/5), teks kanan (3/5) */
@container sorot (min-width: 420px) {
  .sorot .shead {
    grid-column: 1 / span 5;
  }

  .sorot img {
    grid-column: 1 / span 2;
    grid-row: 2;
    height: 100%;
    aspect-ratio: 16 / 9;
  }

  .sorot .sbody {
    grid-column: 3 / span 3;
    grid-row: 2;
    align-self: center;
    padding: var(--pad-kartu) clamp(16px, 3cqi, 32px);
  }

  /* Tanpa gambar (tidak ada <img> atau gambar gagal dimuat): teks selebar kartu */
  .sorot .shead + .sbody,
  .sorot img[style*="none"] + .sbody {
    grid-column: 1 / span 5;
  }
}

/* 6d. Sorotan SEMPIT (<= 419px): bertumpuk vertikal, rasio gambar mockup 16:8 */
@container sorot (max-width: 419px) {
  .sorot img {
    aspect-ratio: 16 / 8;
  }
}

/* --------------------------------------------------------------------------
   7. Fallback @media untuk peramban TANPA container queries
   Lebar kartu diperkirakan dari lebar layar (perkiraan, termasuk ±15px
   bilah gulir desktop):
   - .sorot selalu selebar wadah -> lebar di >= 768px;
   - .witem di grid 2 kolom baru >= 420px (isi) pada layar ±990–1023px;
     di 3–4 kolom kartu kembali sempit.
   -------------------------------------------------------------------------- */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .sorot .shead {
      grid-column: 1 / span 5;
    }

    .sorot img {
      grid-column: 1 / span 2;
      grid-row: 2;
      height: 100%;
      aspect-ratio: 16 / 9;
    }

    .sorot .sbody {
      grid-column: 3 / span 3;
      grid-row: 2;
      align-self: center;
      padding: var(--pad-kartu) 28px;
    }

    .sorot .shead + .sbody,
    .sorot img[style*="none"] + .sbody {
      grid-column: 1 / span 5;
    }
  }

  @media (min-width: 990px) and (max-width: 1023.98px) {
    .witem .wrow {
      gap: 18px;
    }

    .witem .wthumb {
      order: -1;
      width: 38%;
      max-width: 260px;
      height: auto;
      aspect-ratio: 16 / 9;
      border-radius: 10px;
    }

    .witem .wmain {
      align-self: center;
    }
  }
}

/* --------------------------------------------------------------------------
   8. Titik henti >= 768px: tablet & desktop
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* 8a. Wadah melebar; lebar maksimum ikut layar dalam rentang 1100–1280px */
  .phone,
  .devbar,
  .devnote {
    max-width: clamp(1100px, 92vw, 1280px);
  }

  /* 8b. Menu bawah khusus HP -> disembunyikan; ruang bawah tidak diperlukan */
  .bottomnav {
    display: none;
  }

  .view {
    padding-bottom: 0;
  }

  .actionbar {
    bottom: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    justify-content: center;
    padding-inline: var(--gutter);
  }

  .actionbar a,
  .actionbar button {
    flex: 0 1 280px;
  }

  /* Lembar bagikan sedikit lebih lega di layar besar */
  .sheet {
    max-width: 480px;
  }

  /* 8c. .view jadi kolom flex agar tab kategori bisa dipindah ke atas
     (flex, bukan grid: item grid tidak bisa sticky melewati barisnya) */
  .view.active,
  .view:only-of-type {
    display: flex;
    flex-direction: column;
  }

  .view > .topbar { order: -2; }
  .view > .cats   { order: -1; }

  /* 8d. Bilah kategori -> bilah tab di atas, menempel saat digulir */
  .cats {
    position: sticky;
    top: 0;
    z-index: 30;
    gap: 0;
    padding: 0 var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .cats .cat {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 13px clamp(10px, 1vw + 4px, 18px) 11px;
    color: var(--gray);
  }

  .cats .cat:hover {
    color: var(--ink);
  }

  .cats .cat.active {
    background: transparent;
    color: var(--navy);
    border-bottom-color: var(--gold);
  }

  /* 8e. Tepi kiri-kanan fluid untuk semua bagian */
  .topbar {
    padding: var(--ruang) var(--gutter);
  }

  .searchrow {
    padding: var(--ruang) var(--gutter) 12px;
  }

  .trend {
    padding: 12px var(--gutter) 4px;
  }

  .wirehead {
    padding: var(--ruang) var(--gutter) 0;
  }

  .pagehead {
    padding: calc(var(--ruang) + 8px) var(--gutter) 8px;
  }

  .backbtn {
    margin: 16px var(--gutter) 0;
  }

  .footer {
    margin-top: calc(var(--ruang) + 16px);
    padding: var(--ruang) var(--gutter) calc(var(--ruang) + 8px);
  }

  .topic-list {
    margin: 12px var(--gutter) 0;
  }

  /* 8f. Sorotan selebar wadah (tata letak mendatar diatur container query) */
  .sorot {
    margin: 8px var(--gutter) 4px;
  }

  /* 8g. Timeline -> grid kartu */
  .wire {
    margin: 12px var(--gutter) 0;
    padding-left: 0;
    row-gap: var(--gap);
  }

  .wire::before,
  .witem::before {
    content: none;
  }

  .witem {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: var(--pad-kartu);
    box-shadow: 0 2px 10px rgba(22, 41, 77, .05);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  /* Penanda "diliput banyak media" pengganti titik emas timeline */
  .witem.hot {
    box-shadow: inset 0 3px 0 var(--gold), 0 2px 10px rgba(22, 41, 77, .05);
  }

  .loadmore {
    width: min(360px, 100% - 2 * var(--gutter));
    margin: var(--ruang) auto 0;
  }

  /* 8h. Kartu peristiwa: kepala selebar kartu, gambar kiri, isi kanan */
  .dossier {
    margin: 12px var(--gutter) 0;
  }

  .dossier img {
    align-self: stretch;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .dossier .dbody {
    padding: var(--pad-kartu) clamp(16px, 2vw, 32px);
  }

  .dossier .dhead + .dbody,
  .dossier img[style*="none"] + .dbody {
    grid-column: 1 / -1;
  }

  /* 8i. Liputan per media & simpanan -> grid kartu.
     Pembungkusnya tidak berkelas, jadi dipilih lewat id (#daftar-simpan),
     atribut style (halaman peristiwa), dan :has() bila didukung. */
  #daftar-simpan,
  .phone > div[style="margin-top:10px"] {
    display: grid;
    grid-template-columns: repeat(var(--kolom), minmax(0, 1fr));
    gap: var(--gap);
    padding-inline: var(--gutter);
  }

  #daftar-simpan > .cover-row,
  .phone > div[style="margin-top:10px"] > .cover-row {
    margin: 0;
  }

  .topic-list {
    display: grid;
    grid-template-columns: repeat(var(--kolom), minmax(0, 1fr));
    gap: var(--gap);
  }

  /* Tabel daftar sumber di halaman Tentang selalu selebar grid */
  .topic-list > table {
    grid-column: 1 / -1;
  }

  @supports (width: max(1px, 2px)) {
    #daftar-simpan,
    .phone > div[style="margin-top:10px"],
    .topic-list {
      grid-template-columns: repeat(auto-fit, minmax(max(min(100%, var(--kartu-min)), (100% - (var(--kolom) - 1) * var(--gap)) / var(--kolom) - 1px), 1fr));
    }
  }

  /* 8j. Artikel: kolom baca nyaman di tengah, berita terkait selebar wadah.
     Ruang kanan +56px = tempat rail aksi ikon (.aksi-baris); tanpa ini rail
     sticky/fixed akan menimpa teks artikel. */
  .article {
    max-width: 820px;
    margin-inline: auto;
    padding: 20px calc(var(--gutter) + 56px) 0 var(--gutter);
  }

  .article img {
    border-radius: 14px;
  }

  .rel {
    margin: calc(var(--ruang) + 8px) var(--gutter) 0;
  }

  .rel a {
    padding-block: 12px;
  }

  /* Hover hanya untuk perangkat berpenunjuk */
  @media (hover: hover) {
    .witem:hover,
    .topic:hover {
      border-color: var(--gold-d);
    }
  }
}

/* Tombol kembali sejajar dengan kolom baca artikel (butuh :has) */
@supports selector(:has(*)) {
  @media (min-width: 768px) {
    .backbtn:has(+ .article) {
      display: block;
      width: fit-content;
      margin-left: max(var(--gutter), (100% - 820px) / 2 + var(--gutter));
    }

    .phone > div:has(> .cover-row) {
      display: grid;
      grid-template-columns: repeat(var(--kolom), minmax(0, 1fr));
      gap: var(--gap);
      padding-inline: var(--gutter);
    }

    .phone > div:has(> .cover-row) > .cover-row {
      margin: 0;
    }
  }
}

@supports selector(:has(*)) and (width: max(1px, 2px)) {
  @media (min-width: 768px) {
    .phone > div:has(> .cover-row) {
      grid-template-columns: repeat(auto-fit, minmax(max(min(100%, var(--kartu-min)), (100% - (var(--kolom) - 1) * var(--gap)) / var(--kolom) - 1px), 1fr));
    }
  }
}

/* --------------------------------------------------------------------------
   9. Titik henti >= 1024px (3 kolom) — rentang kolom kartu peristiwa
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .dossier .dbody {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   10. Titik henti >= 1366px (4 kolom)
   -------------------------------------------------------------------------- */
@media (min-width: 1366px) {
  .dossier img {
    grid-column: span 2;
  }

  .dossier .dbody {
    grid-column: span 2;
  }
}

/* --------------------------------------------------------------------------
   11. CSS View Transitions (antar-halaman, MPA)
   Peramban yang belum mendukung cukup mengabaikan blok ini.
   Nama transisi harus unik per halaman: tiap halaman hanya punya satu.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.topbar {
  view-transition-name: swara-topbar;
}

.bottomnav {
  view-transition-name: swara-bottomnav;
}

.article h1,
.dossier h1 {
  view-transition-name: swara-judul-artikel;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
}

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

/* --------------------------------------------------------------------------
   12. Penyesuaian mode gelap untuk elemen baru lapisan ini
   (di mode gelap --navy hampir hitam, jadi teks aktif memakai --gold)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  body.dark .cats .cat.active {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold);
  }

  body.dark .witem {
    box-shadow: none;
  }

  body.dark .witem.hot {
    box-shadow: inset 0 3px 0 var(--gold);
  }
}

/* --------------------------------------------------------------------------
   13. Aksesibilitas: penanda fokus papan ketik (tidak muncul saat sentuh/klik)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.witem:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}