/* =====================================================
   J-T3G / RCF INDONESIA
   MOBILE LAYOUT REPAIR
   ===================================================== */

/* Pastikan semua elemen menghitung ukuran dengan benar */
html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* =====================================================
   MOBILE: MAKSIMALKAN LEBAR HALAMAN
   ===================================================== */

@media only screen and (max-width: 767px) {

    /* Halaman utama OJS */
    .pkp_structure_page {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        overflow: visible !important;
    }

    /* Header */
    .pkp_structure_head,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Logo / banner */
    .pkp_site_name img,
    .pkp_site_name a img,
    .pkp_site_name_wrapper img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    /* Container navigasi */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Area isi halaman */
    .pkp_structure_content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px 12px 30px !important;
        overflow: visible !important;
    }

    /* Container Bootstrap/PKP */
    .pkp_structure_content > .container,
    .pkp_structure_content .container,
    .pkp_structure_content .container-fluid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Baris utama */
    .pkp_structure_content > .row,
    .pkp_structure_content .container > .row,
    .pkp_structure_content .container-fluid > .row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Kolom utama dan sidebar */
    .pkp_structure_main,
    .pkp_structure_sidebar {
        display: block !important;
        float: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    .pkp_structure_main {
        margin-bottom: 25px !important;
    }

    .pkp_structure_sidebar {
        margin-top: 20px !important;
    }

    /* Kolom Bootstrap hanya di dalam layout konten OJS */
    .pkp_structure_content .row > [class*="col-"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* =================================================
       HOMEPAGE INTRODUCTION
       ================================================= */

    .homepage_about,
    .homepage_about .row,
    .homepage_about [class*="col-"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Susun tabel pengenalan secara vertikal */
    .homepage_about table,
    .homepage_about tbody,
    .homepage_about tr,
    .homepage_about td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Gambar cover jurnal */
    .homepage_about img,
    .obj_issue_toc .cover img,
    .obj_issue_summary .cover img {
        display: block !important;
        width: auto !important;
        max-width: 75% !important;
        height: auto !important;
        max-height: 360px !important;
        margin: 12px auto 20px !important;
    }

    /* Teks homepage */
    .homepage_about p,
    .pkp_structure_main p {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-align: left !important;
    }

    /* Daftar Focus and Scope */
    .homepage_about ul,
    .homepage_about ol {
        max-width: 100% !important;
        padding-left: 22px !important;
    }

    /* Sidebar */
    .pkp_block {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
    }

    .pkp_block img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Current Issue */
    .obj_issue_toc,
    .obj_issue_summary {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Jangan biarkan gambar/tabel melampaui layar */
    .pkp_structure_main img,
    .pkp_structure_main table,
    .pkp_structure_main iframe {
        max-width: 100% !important;
    }

}

/* =====================================================
   HP KECIL
   ===================================================== */

@media only screen and (max-width: 480px) {

    .pkp_structure_content {
        padding: 12px 10px 25px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        padding: 0 !important;
    }

    .pkp_structure_main p,
    .homepage_about p {
        font-size: 13px !important;
    }

    .homepage_about img,
    .obj_issue_toc .cover img,
    .obj_issue_summary .cover img {
        max-width: 80% !important;
    }

    .pkp_block {
        padding: 12px !important;
    }

}

/* =====================================================
   TABLET
   ===================================================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .pkp_structure_page {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}