/* =============================================================
   mobile.css — penyelarasan tampilan ponsel (mobile friendly)

   Tujuan: menghilangkan geseran horizontal dan memastikan konten
   dinamis (gambar, tabel, embed video dari editor berita) tidak
   pernah melebar melampaui lebar layar.

   Dimuat SETELAH frontend.css agar aturannya menang tanpa perlu
   !important berlebihan.
   ============================================================= */

/* --- 1. Kunci lebar dokumen -------------------------------------
   Penjaga terakhir bila ada satu elemen nakal yang lolos. Dipasang
   pada html (bukan hanya body) supaya position: sticky di dalam
   halaman tetap berfungsi normal. */
html {
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

/* --- 2. Media tidak boleh melebihi wadahnya ---------------------
   Gambar dan video yang diunggah admin lewat editor sering membawa
   width/height asli yang jauh lebih besar dari layar ponsel. */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    height: auto;
}

/* --- 3. Konten hasil editor (berita, artikel, halaman statis) --- */
.post__text,
.post-content,
.entry-content,
.page-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Tabel dari editor tidak punya pembungkus .table-responsive.
   Beri kemampuan gulir pada tabelnya sendiri agar halaman tetap diam. */
.post__text table,
.post-content table,
.entry-content table,
.page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Embed YouTube/Maps dari editor: jaga rasio dan lebar. */
.post__text iframe,
.post-content iframe,
.entry-content iframe,
.page-content iframe {
    width: 100%;
    max-width: 100%;
}

/* --- 4. Penyesuaian khusus layar sempit ------------------------- */
@media (max-width: 575.98px) {
    /* Kata panjang tanpa spasi (URL, nama berkas) memaksa lebar minimum
       yang lebih besar dari layar. */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    a,
    span,
    td,
    th {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Deretan tombol/aksi agar melipat, bukan memaksa lebar. */
    .hero-actions,
    .quick-actions,
    .btn-group-responsive {
        flex-wrap: wrap;
    }

    /* Judul hero yang sangat besar dipangkas agar proporsional. */
    .hero-title {
        word-break: break-word;
    }
}

/* --- 5. Area geser yang memang disengaja ------------------------
   Bila suatu blok memang perlu digeser (mis. tabel jadwal lebar),
   bungkus dengan .scroll-x agar gulirnya lokal, bukan seluruh halaman. */
.scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}