/* ================================================================
   popup.css - POPUP PENGUMUMAN BERANDA (Revisi 82 - WIREFRAME)

   Berkas ini MENUMPANG sistem modal yang sudah ada di
   assets/modal.css: .modal / .modal-veil / .modal-box /
   .modal-head / .modal-body / .modal-foot / .modal-x.
   Akibatnya animasi buka-tutup, selubung gelap, tombol ESC, dan
   klik-selubung TIDAK ditulis ulang di sini - semuanya sudah
   diurus assets/ui.js bagian 2. Yang ditambah hanya gaya khas isi
   pengumuman, semua berawalan .pop-

   Perilaku: assets/popup.js
   Markup  : partials/18-popup.html
   ================================================================ */

/* ---------- kotak pengumuman ----------
   Lebih lega dari modal biasa (520 -> 560) dan - ini yang penting -
   TIDAK PERNAH MENGGULIR. assets/modal.css memberi semua modal
   "max-height:86vh; overflow:auto"; untuk pengumuman aturan itu
   dimatikan karena bilah gulir pada popup terasa seperti cacat
   tampilan, bukan fitur. Konsekuensinya isi popup wajib pendek:
   header, gambar, judul, tombol. Kalau nanti perlu paragraf
   panjang, tempatnya di halaman berita - bukan di popup.

   Isi disusun sebagai kolom flex supaya saat layar pendek yang
   mengalah adalah GAMBAR (mengecil), bukan tombol (terpotong). */
#modal-pengumuman .modal-box{width:min(560px,100%);max-height:88vh;
  overflow:hidden;display:flex;flex-direction:column}
#modal-pengumuman .modal-head{flex:none}
#modal-pengumuman .modal-body{flex:1 1 auto;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;padding:16px 22px 20px}

/* ---------- area poster ----------
   Saat wireframe: kotak garis putus-putus bertuliskan ukuran yang
   dibutuhkan. Begitu gambar sungguhan dipasang, hapus <span
   class="pop-poster-tanda"> dan kelas .kosong pada .pop-poster. */
.pop-poster{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);background:var(--soft);
  /* flex:0 1 auto + max-height = gambar inilah yang mengalah saat
     layar pendek; object-fit:cover menjaga gambar tidak gepeng */
  flex:0 1 auto;min-height:110px;max-height:min(315px,42vh)}
.pop-poster.kosong{border:1px dashed var(--seam);display:grid;place-items:center;text-align:center}
.pop-poster img{width:100%;height:100%;object-fit:cover;display:block}
.pop-poster-tanda{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ink3);line-height:1.9}
.pop-poster-tanda b{display:block;font-family:var(--font-ui);font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--ink2)}

/* ---------- teks ---------- */
.pop-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 8px}
.pop-chip{font-family:var(--font-mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-strong)}
.pop-tanggal{font-size:11.5px;color:var(--ink3)}
.pop-judul{margin:13px 0 0;font-size:17.5px;font-weight:800;letter-spacing:-.015em;
  line-height:1.3;color:var(--ink);flex:none;
  /* dibatasi 2 baris: judul dari admin bisa sepanjang apa pun,
     dan tanpa batas ini ia mendorong tombol keluar kotak */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop-teks{margin:0;font-size:13px;line-height:1.68;color:var(--ink2)}

/* ---------- tombol aksi ---------- */
.pop-aksi{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0 0;flex:none}
.pop-btn{appearance:none;border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700;
  padding:11px 18px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s ease}
.pop-btn:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.pop-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pop-btn.hantu{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pop-btn.hantu:hover{background:var(--soft)}
.pop-btn svg{width:15px;height:15px;flex:none}

/* ---------- ponsel: pengumuman naik dari bawah jadi lembar ----------
   Pola lembar (sheet) dipilih karena kotak tengah pada layar sempit
   sering terpotong bila papan ketik atau bilah peramban muncul. */
@media (max-width:560px){
  #modal-pengumuman{place-items:end center;padding:0}
  #modal-pengumuman .modal-box{width:100%;max-height:92vh;
    border-radius:22px 22px 0 0;transform:translateY(26px)}
  #modal-pengumuman.open .modal-box{transform:none}
  /* gagang tarik, penanda visual bahwa ini lembar bawah */
  #modal-pengumuman .modal-head::before{content:"";position:absolute;top:8px;left:50%;
    width:44px;height:4px;margin-left:-22px;border-radius:99px;background:var(--line)}
  #modal-pengumuman .modal-head{position:relative;padding-top:22px}
  .pop-poster{aspect-ratio:4/3;max-height:min(300px,34vh)}
  .pop-aksi{flex-direction:column-reverse}
  .pop-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .pop-btn{transition:none}
  .pop-btn:hover{transform:none}
}