/* ==========================================================
   MM_PPL — MULTIMEDIJA PRVA PLOVBA
   2026 migration of the original MM_PPL stylesheet.
   Structure/layout values are preserved unless a change is
   required by the consolidated Razor markup.
========================================================== */

/* ==========================================================
   APPLICATION SHELL
========================================================== */

.MM_PPL .prezrti-shell {
    --shell_side_L: 0;
}

.MM_PPL .l_panel {
    display: none;
}

.MM_PPL .c_panel {
    padding: 0;
}

/* ==========================================================
   PAGE
========================================================== */



    .MM_PPL .mp_page.mp_page_gregor {
        background-image: url('/media/images/layout/mm_ppl/clan_03_ozadje.webp');
        background-size: 50px 50px;
    }
    .MM_PPL .mp_page.mp_page_klemen {
        background-image: linear-gradient(rgba(15, 15, 15, 0.66), rgba(15, 15, 15, 0.66)), url('/media/images/layout/mm_ppl/clan_01_ozadje.webp');
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.7;
    }
    .MM_PPL .mp_page.mp_page_bostjan {
        background-image: url('/media/images/layout/mm_ppl/clan_07_ozadje.webp');
        background-size: 100px 100px;
    }
    .MM_PPL .mp_page.mp_page_martin {
        background-image: url('/media/images/layout/mm_ppl/clan_04_ozadje.webp');
        background-size: 100px 100px;
    }
    /* ==========================================================
   BACKGROUNDS
========================================================== */
    .MM_PPL .mp_page .mp_background,
    .MM_PPL .mp_page .mp_background_main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }


    .MM_PPL .mp_page.mp_page_all {
        background-image: url('/media/images/layout/mm_ppl/gumb_06_ozadje.webp');
    }

    .MM_PPL .mp_page.mp_page_history {
        background-image: url('/media/images/layout/mm_ppl/gumb_03_ozadje.webp');
    }

    .MM_PPL .mp_page .mp_background_members {
        background-image: url('/media/images/layout/ss_ppl/clan_00_ozadje.webp');
    }

    .MM_PPL .mp_page .mp_background_klemen {
        background-color: var(--color_Goldenrod);
    }

    .MM_PPL .mp_page .mp_background_gregor {
        background-image: url('/media/images/layout/mm_ppl/clan_03_ozadje.webp');
        background-size: 50px 50px;
    }

    .MM_PPL .mp_page .mp_background_bostjan {
        background-image: url('/media/images/layout/mm_ppl/clan_07_ozadje.webp');
        background-size: 50px 50px;
    }

    .MM_PPL .mp_page .mp_background_martin {
        background-image: url('/media/images/layout/mm_mlj/besedila_02_ozadje.webp');
    }

    .MM_PPL .mp_page.mp_page_photo {
        background-color: var(--color_Black);
        background-image: none;
    }

    .MM_PPL .mp_page .mp_background_thanks {
        background-image: url('/media/images/layout/ss_ppl/gumb_07_ozadje.webp');
        background-size: 100px 100px;
    }

    .MM_PPL .mp_page .mp_background_all {
        background-image: url('/media/images/layout/ss_ppl/gumb_08_ozadje.webp');
        background-size: 100px 100px;
    }
        .MM_PPL .mp_page.mp_page_lyrics, 
        .MM_PPL .mp_page.mp_page_lyric {
            background-color: var(--color_White);
            background-image: none;
        }
        /* ==========================================================
   HEADER
========================================================== */

.MM_PPL .mp_page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: var(--space_3) 15%;
    background-image: url("/media/images/layout/mm_ppl/gumb_05_ozadje.webp");
    background-size: 100px 100px;
    background-repeat: repeat;
}

    .MM_PPL .mp_page .mp_header {
        flex: 0 0 40%;
        width: 100%;
        min-height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .MM_PPL .mp_page .mp_header a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .MM_PPL .mp_page .mp_header img {
            width: auto;
            height: 95%;
        }   
        /* ==========================================================
   COMMON CONTENT
========================================================== */

        .MM_PPL .mp_page .mp_content {
            width: 100%;
        }

        .MM_PPL .mp_entity_link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /* ==========================================================
   MAIN PAGE — 2 ROWS × 3 COLUMNS
   The original PHP used six image buttons. The consolidated
   Razor markup contains them directly, so grid reproduces the
   intended 3 + 3 arrangement without changing the HTML.
========================================================== */

        .MM_PPL .mp_page .mp_content_main {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            padding: var(--space_2);
        }

            .MM_PPL .mp_page .mp_content_main > div {
                min-width: 0;
            }

            .MM_PPL .mp_page .mp_content_main a {
                display: block;
                width: 100%;
            }

            .MM_PPL .mp_page .mp_content_main img {
                display: block;
                width: 100%;
                height: auto;
            }
        /* ==========================================================
   HISTORY
========================================================== */

        .MM_PPL .mp_page .mp_content_history {
            height: 100%;
        }

        .MM_PPL .mp_page_history h1 {
            padding-left: var(--space_6);
        }

        .MM_PPL .mp_page_history .mp_text > ul {
            list-style-type: disc;
            padding-left: var(--space_6);
        }

        .MM_PPL .mp_page .mp_content_history li {
            list-style: disc;
            font-size: var(--font_size_18);
            text-align: justify;
            padding-bottom: var(--space_2);
        }

        .MM_PPL .mp_page .mp_content_history .mp_text {
            height: 100%;
            overflow-y: auto;
            padding-bottom: var(--space_8);
            scrollbar-width: none;
        }

            .MM_PPL .mp_page .mp_content_history .mp_text::-webkit-scrollbar {
                display: none;
            }
        /* ==========================================================
   MEMBERS
========================================================== */
        .MM_PPL .mp_page_gregor .mp_header,
        .MM_PPL .mp_page_bostjan .mp_header,
        .MM_PPL .mp_page_klemen .mp_header,
        .MM_PPL .mp_page_martin .mp_header {
            width: 100%;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: start;
            column-gap: var(--space_2);
            height: auto;
            min-height: 0;
            flex: 0 0 auto;
            padding: 0;
            padding-bottom: var(--space_4);
        }

        .MM_PPL .mp_page .mp_header .mp_image {
            grid-column: 1;
        }

            .MM_PPL .mp_page .mp_header .mp_image img {
                display: block;
                width: auto;
                height: auto;
            }

        .MM_PPL .mp_page .mp_header h1 {
            grid-column: 2;
            margin: 0;
            padding-top: var(--space_1);
            justify-self: start;
        }

        .MM_PPL .mp_page .mp_header .mp_entity_link {
            grid-column: 3;
            justify-self: end;
            align-self: start;
            margin: 0;
        }

        .MM_PPL .mp_page .mp_content_members {
            display: flex;
            flex-direction: column;
        }

            .MM_PPL .mp_page .mp_content_members h1 {
                width: 100%;
                padding: var(--space_4);
                color: var(--color_Red);
                font-size: var(--space_16);
                text-align: center;
            }

            .MM_PPL .mp_page .mp_content_members .mp_text {
                display: grid;
                grid-template-columns: repeat(2, max-content);
                justify-content: center;
                gap: 0;
                padding-top: var(--space_4);
            }

                .MM_PPL .mp_page .mp_content_members .mp_text > div {
                    height: var(--space_37_5);
                }

                    .MM_PPL .mp_page .mp_content_members .mp_text > div:nth-child(odd) {
                        text-align: end;
                    }

            .MM_PPL .mp_page .mp_content_members .mp_member_klemen {
                margin-left: calc(var(--space_4) * -0.1);
            }
        /* ==========================================================
   MEMBER DETAIL
========================================================== */

        .MM_PPL .mp_page .mp_content_klemen,
        .MM_PPL .mp_page .mp_content_gregor,
        .MM_PPL .mp_page .mp_content_bostjan {
            color: var(--color_White);
        }

            .MM_PPL .mp_page .mp_content_klemen h1,
            .MM_PPL .mp_page .mp_content_gregor h1,
            .MM_PPL .mp_page .mp_content_bostjan h1 {
                text-transform: uppercase;
            }

            .MM_PPL .mp_page .mp_content_klemen p,
            .MM_PPL .mp_page .mp_content_gregor p,
            .MM_PPL .mp_page .mp_content_bostjan p {
                font-size: var(--font_size_20);
            }

            .MM_PPL .mp_page .mp_content_klemen li {
                list-style: disc;
            }
        /* ==========================================================
   LYRICS
========================================================== */

        .MM_PPL .mp_page_lyric .mp_entity_link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            z-index: 5;
        }

        .MM_PPL .mp_page .mp_content_lyrics {
            position: relative;
        }

        .MM_PPL .mp_page .mp_content_lyric h5 {
            padding: 0 0 var(--space_4);
            color: var(--color_Blue);
        }

            .MM_PPL .mp_page .mp_content_lyric h5:has(+ h5) {
                padding: 0;
            }

.MM_PPL .mp_page .mp_content_lyrics .mp_text a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: var(--space_1_2);
    color: var(--color_Blue);
    font-family: var(--font_Roboto);
    font-size: var(--font_size_32);
    text-align: center;
    text-transform: uppercase;
}

        .MM_PPL .mp_page_lyrics .mp_text div img {
            display: block;
            max-width: 100%;
            height: auto;
            margin-inline: auto;
        }


        .MM_PPL .mp_page_lyric {
            position: relative;
        }

            .MM_PPL .mp_page_lyric .mp_content_lyric {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: hidden;
                padding: var(--space_3) 20%;
            }

        .MM_PPL .lyrics_text {
            overflow: auto;
        }
        /* ==========================================================
   PHOTOS
========================================================== */
        .MM_PPL .mp_page .mp_content_photo {
            height: 100vh;
        }

            .MM_PPL .mp_page .mp_content_photo h1 {
                width: 100%;
                padding: 1rem;
                color: var(--color_White);
                text-align: center;
                text-transform: uppercase;
            }

            .MM_PPL .mp_page .mp_content_photo .mp_text {
                width: 100%;
                height: 100vh;
                overflow-y: auto;
                text-align: center;
                scrollbar-width: none;
            }

                .MM_PPL .mp_page .mp_content_photo .mp_text::-webkit-scrollbar {
                    display: none;
                }
        /* ==========================================================
   THANKS
========================================================== */

        .MM_PPL .mp_page .mp_content_thanks {
            overflow-y: auto;
            scrollbar-width: none;
        }

            .MM_PPL .mp_page .mp_content_thanks::-webkit-scrollbar {
                display: none;
            }

            .MM_PPL .mp_page .mp_content_thanks h2 {
                padding: var(--space_8);
                padding-left: 0;
                text-transform: uppercase;
            }

            .MM_PPL .mp_page .mp_content_thanks h5 {
                padding-bottom: var(--space_4);
            }

            .MM_PPL .mp_page .mp_content_thanks .mp_text > div img {
                float: left;
                width: var(--space_16);
                padding-right: var(--space_4);
            }

            .MM_PPL .mp_page .mp_content_thanks .mp_text p {
                padding-bottom: var(--space_4);
                line-height: var(--space_6);
                text-align: justify;
            }

            .MM_PPL .mp_page .mp_content_thanks .mp_text li {
                line-height: var(--space_8);
            }

            .MM_PPL .mp_page .mp_content_thanks .mp_text > img {
                width: var(--space_14);
            }
        /* ==========================================================
   ALL / CONTACT
========================================================== */

        .MM_PPL .mp_page .mp_content_all .mp_text {
            position: relative;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .MM_PPL .mp_page .mp_content_all p {
            padding-top: var(--space_4);
            font-size: var(--font_size_18);
            text-align: center;
        }

            .MM_PPL .mp_page .mp_content_all p img {
                display: block;
                max-width: 100%;
                height: auto;
                margin-inline: auto;
            }
        /* ==========================================================
   FOOTER
========================================================== */

        .MM_PPL .mp_footer {
            width: 100%;
            text-align: center;
        }

            .MM_PPL .mp_footer h1 {
                margin: 0;
                font-family: var(--font_BeeBopp);
                color: var(--color_Blue);
            }
        /* ==========================================================
   RESPONSIVE — original breakpoints preserved
========================================================== */

@media screen and (max-width: calc(var(--space_4) * 64)) {
    .MM_PPL .mp_page {
        padding: var(--space_3) 10%;
    }

        .MM_PPL .mp_page .mp_content_klemen p,
        .MM_PPL .mp_page .mp_content_gregor p,
        .MM_PPL .mp_page .mp_content_bostjan p,
        .MM_PPL .mp_page .mp_content_martin p {
            font-size: var(--font_size_18);
        }
}

@media screen and (max-width: 48rem) {
    .MM_PPL .c_panel .mp_page {
        padding: var(--space_3);
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .MM_PPL .mp_page .mp_header {
        padding: 0;
        flex: 0 0 auto;
    }

            .MM_PPL .mp_page .mp_header a {
                height: 100%;
            }

    .MM_PPL .mp_page .mp_content_main {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
            .MM_PPL .mp_page .mp_content_members {
                height: 100%;
                display: block;
            }

                .MM_PPL .mp_page .mp_content_members .mp_text {
                    width: 100%;
                    height: 100%;
                    display: block;
                    overflow-y: auto;
                    padding-top: 1vh;
                    padding-bottom: 45vh;
                    scrollbar-width: none;
                }

                    .MM_PPL .mp_page .mp_content_members .mp_text::-webkit-scrollbar {
                        display: none;
                    }

                    .MM_PPL .mp_page .mp_content_members .mp_text > div {
                        width: 100%;
                        height: var(--space_51);
                    }

                    .MM_PPL .mp_page .mp_content_members .mp_text img {
                        width: 100%;
                        height: auto;
                    }

            .MM_PPL .mp_page .mp_content_photo .mp_text img {
                width: 100%;
            }

            .MM_PPL .mp_page .mp_content_klemen .mp_text,
            .MM_PPL .mp_page .mp_content_gregor .mp_text,
            .MM_PPL .mp_page .mp_content_bostjan .mp_text,
            .MM_PPL .mp_page .mp_content_martin .mp_text {
                height: 100%;
                overflow-y: auto;
                padding-bottom: 20vh;
                scrollbar-width: none;
            }

                .MM_PPL .mp_page .mp_content_klemen .mp_text::-webkit-scrollbar,
                .MM_PPL .mp_page .mp_content_gregor .mp_text::-webkit-scrollbar,
                .MM_PPL .mp_page .mp_content_bostjan .mp_text::-webkit-scrollbar,
                .MM_PPL .mp_page .mp_content_martin .mp_text::-webkit-scrollbar {
                    display: none;
                }

            .MM_PPL .mp_page .mp_content_lyrics .besedilo {
                max-height: 75%;
                overflow: auto;
                scrollbar-width: none;
            }

                .MM_PPL .mp_page .mp_content_lyrics .besedilo::-webkit-scrollbar {
                    display: none;
                }
}