/* =========================================================
   MODERNFLAT - GLOBAL PAGE WIDTH
   Header + Main Content + Publisher Footer
   ========================================================= */

.u-container,
.c-header__container,
.c-publisher-footer,
.c-publisher-footer__container {
    width: 95%;
    max-width: 1600px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   PUBLISHER FOOTER
   ========================================================= */

/*
 * Seluruh blok footer mengikuti lebar halaman jurnal.
 */
.c-publisher-footer {
    width: 95%;
    max-width: 1600px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/*
 * Container di dalam footer menggunakan seluruh
 * lebar .c-publisher-footer.
 *
 * Karena parent sudah dibatasi 95% / 1600px,
 * container tidak perlu menggunakan 95% lagi.
 */
.c-publisher-footer__container {
    width: 100%;
    max-width: none;

    margin-left: auto;
    margin-right: auto;

    padding-left: 16px;
    padding-right: 16px;

    box-sizing: border-box;
}


/*
 * Section menggunakan seluruh ruang yang tersedia.
 */
.c-publisher-footer__section {
    width: 100%;
    max-width: none;

    box-sizing: border-box;
}


/*
 * Menu footer menggunakan seluruh lebar section.
 */
.c-publisher-footer__menu {
    width: 100%;
    max-width: none;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

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

    .u-container,
    .c-header__container,
    .c-publisher-footer {
        width: 96%;
    }

}


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

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

    .c-publisher-footer {
        width: 100%;
        max-width: none;
    }

    .c-publisher-footer__container {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

}

/* =========================================================
   MODERNFLAT - PUBLISHER FOOTER MENU
   Proportional spacing for wider layout
   ========================================================= */


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

.c-publisher-footer__menu {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

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

    .c-publisher-footer__menu {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 32px;
        row-gap: 24px;

        /* Disable original multi-column layout */
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }

}


/* ---------------------------------------------------------
   DESKTOP
   Journal | Services | Policies | Network | Company
   --------------------------------------------------------- */

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

    .c-publisher-footer__menu {
        display: grid;

        /*
         * Five equal-width columns.
         * Each menu receives 20% of available footer space.
         */
        grid-template-columns: repeat(5, minmax(0, 1fr));

        /*
         * Gap grows according to viewport width,
         * but never smaller than 32px or larger than 64px.
         */
        column-gap: clamp(32px, 3vw, 64px);

        row-gap: 0;

        width: 100%;
        max-width: none;

        margin-left: auto;
        margin-right: auto;

        box-sizing: border-box;

        /*
         * Disable original CSS multi-column layout.
         */
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;

        -webkit-column-gap: normal;
        -moz-column-gap: normal;
    }


    /*
     * Each menu group occupies one complete grid column.
     */
    .c-publisher-footer__menu-group {
        width: 100%;

        margin-left: 0;
        padding-left: 0;
        padding-bottom: 0;

        overflow: visible;

        box-sizing: border-box;
    }

}