/* ==========================
   PLAYLIST DETAIL HEADER
   ========================== */


.sv_playlist_detail_header {
    width: 100%;
}


    .sv_playlist_detail_header h2 {
        margin: 0;
    }



/* ==========================
   PLAYLIST DETAIL
   ========================== */


.sv_playlist_detail {
    display: grid;
    grid-template-columns: minmax(0, 35%) minmax(0, 43%) minmax(0, 22%);
    grid-template-rows: auto auto;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: fit-content;
}



/* samo za live */


.sv_playlist_detail_only {
    overflow-y: auto;
}


    .sv_playlist_detail_only::-webkit-scrollbar {
        display: none;
    }



/* ==========================
   COVER
   ========================== */


.sv_playlist_detail_cover {
    position: relative;
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    height: 100%;
}


    .sv_playlist_detail_cover > img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }



    /* ==========================
   CAROUSEL
   ========================== */


    .sv_playlist_detail_cover ul {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }


.carousel_slide {
    position: absolute;
    display: flex;
    inset: 0;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    transition-delay: 200ms;
    pointer-events: none;
}


    .carousel_slide[data-active] {
        opacity: 1;
        pointer-events: auto;
    }


    .carousel_slide img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
    }

/* ==========================
   CAROUSEL NAVIGATION
   ========================== */

.sv_playlist_detail_navigation {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 72%; /* <-- tukaj sedaj premikaš celoten blok */
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--space_3);
    padding-right: var(--space_3);
    gap: var(--space_3);
}



/* ==========================
   CAROUSEL BUTTONS
   ========================== */

.sv_playlist_detail_cover_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space_10);
    height: var(--space_10);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color_RockBlue);
    color: var(--color_LunarGreen);
    cursor: pointer;
    flex-shrink: 0;
}


    .sv_playlist_detail_cover_button .svg_icon {
        width: var(--space_5);
        height: var(--space_5);
    }


    .sv_playlist_detail_cover_button.prev .svg_icon {
        transform: rotate(270deg);
    }


    .sv_playlist_detail_cover_button.next .svg_icon {
        transform: rotate(90deg);
    }



/* ==========================
   CAROUSEL LOCATION
   ========================== */

.sv_playlist_detail_location {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space_12);
    height: var(--space_12);
    border-radius: 50%;
    background-color: var(--color_RockBlue);
    color: var(--color_LunarGreen);
    font-family: var(--font_Roboto);
    flex-shrink: 0;
}
/* ==========================
   DOWNLOAD
   ========================== */


.sv_playlist_detail_download {
    position: absolute;
    display: flex;
    top: var(--space_2);
    right: var(--space_2);
    z-index: 10;
    justify-content: center;
    align-items: center;
    width: var(--space_10);
    height: var(--space_10);
    background-color: var(--color_RockBlue);
    border-radius: 50%;
}


    .sv_playlist_detail_download a {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .sv_playlist_detail_download .svg_icon {
        width: var(--space_5);
        height: var(--space_5);
    }





/* ==========================
   TRACKS
   ========================== */


.sv_playlist_detail_tracks {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    padding-left: var(--space_3);
}


    .sv_playlist_detail_tracks h3 {
        width: 100%;
        margin: 0;
        border-bottom: var(--space_0_5) solid var(--color_LunarGreen);
    }


    .sv_playlist_detail_tracks ul {
        width: 100%;
        height: fit-content;
        margin: 0;
        padding: 0;
        list-style: none;
    }


        .sv_playlist_detail_tracks ul li {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: var(--space_0_5) 0;
            border-bottom: var(--space_0_25) solid var(--color_LunarGreen);
        }


            .sv_playlist_detail_tracks ul li > span {
                flex: 0 0 var(--space_5);
                width: var(--space_5);
                text-align: right;
            }


            .sv_playlist_detail_tracks ul li a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: var(--space_2);
                width: 100%;
                min-width: 0;
                padding-left: var(--space_3);
                color: var(--color_LunarGreen);
            }


                .sv_playlist_detail_tracks ul li > a,
                .sv_playlist_detail_track ul {
                    display: grid;
                    grid-template-columns: minmax(0, 1fr) auto;
                    gap: var(--space_2);
                    width: 100%;
                    min-width: 0;
                    color: inherit;
                    text-decoration: none;
                }

                .sv_playlist_detail_tracks ul li > a {
                    cursor: pointer;
                }

                    .sv_playlist_detail_tracks ul li > a:hover,
                    .sv_playlist_detail_tracks ul li > a:focus-visible {
                        color: var(--color_Green);
                    }

                .sv_playlist_detail_tracks ul li a span:first-child {
                    min-width: 0;
                    overflow-wrap: anywhere;
                    transition: transform 200ms ease;
                }


                .sv_playlist_detail_tracks ul li a span:last-child {
                    flex-shrink: 0;
                }


                .sv_playlist_detail_tracks ul li a:hover span:first-child {
                    transform: translateX(5%);
                }



/* ==========================
   INFO
   ========================== */


.sv_playlist_detail_info {
    display: flex;
    grid-column: 3;
    grid-row: 1 / span 2;
    min-width: 0;
    min-height: 0;
    margin-left: var(--space_3);
    padding: var(--space_3);
    background-color: var(--color_RockBlue);
}


    .sv_playlist_detail_info ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .sv_playlist_detail_info li {
        padding-top: var(--space_2);
    }


        .sv_playlist_detail_info li:first-child {
            padding-top: 0;
        }


    .sv_playlist_detail_info h4 {
        margin: 0;
        font-weight: 900;
    }


    .sv_playlist_detail_info li > a,
    .sv_playlist_detail_info li > span {
        display: block;
        width: fit-content;
    }


    .sv_playlist_detail_info li > a {
        transition: transform 200ms ease;
    }


        .sv_playlist_detail_info li > a:hover {
            transform: translateX(8%);
        }



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


.sv_playlist_detail_footer {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 2;
    justify-content: space-evenly;
    align-items: center;
    gap: var(--space_2);
    height: fit-content;
    padding-top: var(--space_5);
    font-weight: 600;
}

    .sv_playlist_detail_footer a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color_LunarGreen);
    }


    .sv_playlist_detail_footer .svg_icon {
        width: var(--space_5);
        height: var(--space_5);
    }


.sv_playlist_detail_footer_compilation {
    display: flex;
    grid-column: 1 / span 2;
    flex-direction: column;
}

    .sv_playlist_detail_footer_compilation p {
        flex: 1;
        text-indent: var(--space_2);
    }


    .sv_playlist_detail_footer p {
        padding-bottom: var(--space_2);
    }
    /* ==========================
   TABLET
   ========================== */


    @media only screen and (max-width: 64em) {

        .SS_VCM .sv_playlist {
            aspect-ratio: auto;
            overflow: visible;
        }

        .c_panel:has(.sv_playlist_detail) {
            overflow-y: auto;
        }


        .sv_playlist_detail {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto auto;
            min-height: 0;
            padding-bottom: var(--space_3);
        }

        .sv_playlist_detail_cover {
            grid-column: 1 / 3;
            grid-row: 1;
            height: auto;
        }


            .sv_playlist_detail_cover > img {
                width: 100%;
                max-width: 100%;
                max-height: none;
                object-fit: contain;
            }


            .sv_playlist_detail_cover ul {
                width: 100%;
                aspect-ratio: auto;
                height: 50REM;
            }

        .carousel_slide {
            height: 100%;
        }

            .sv_playlist_detail_tracks {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
            }


        .sv_playlist_detail_info {
            grid-column: 2;
            grid-row: 2;
        }


            .sv_playlist_detail_footer {
                grid-column: 1 / 3;
                grid-row: 3;
            }
        }
    /* ==========================
   MOBILE
   ========================== */


    @media only screen and (max-width: 48em) {

        .sv_playlist_detail {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto auto auto;
            min-height: 0;
            overflow: visible;
        }


        .sv_playlist_detail_cover {
            grid-row: 1;
        }


            .sv_playlist_detail_cover > img {
                width: 100%;
                max-height: none;
            }


            .sv_playlist_detail_cover ul {
                height: 100vw;
                max-height: 100vh;
            }


        .sv_playlist_detail_tracks {
            grid-column: 1 / 3;
            grid-row: 2;
            width: 100%;
            min-width: 0;
            padding-left: 0;
            padding-bottom: var(--space_4);
        }

            .sv_playlist_detail_tracks ul {
                padding-left: 0;
            }

        .sv_playlist_detail_info {
            grid-column: 1;
            grid-row: 3;
            margin-left: 0;
            padding: var(--space_3);
        }

        .sv_playlist_detail_footer {
            grid-column: 2;
            grid-row: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            padding: var(--space_3);
        }


        .sv_playlist_detail_cover_button {
            width: var(--space_8);
            height: var(--space_8);
        }


            .sv_playlist_detail_cover_button .svg_icon {
                width: var(--space_4);
                height: var(--space_4);
            }


        .sv_playlist_detail_location {
            width: var(--space_10);
            height: var(--space_10);
        }


        .sv_playlist_detail_download {
            width: var(--space_8);
            height: var(--space_8);
        }


            .sv_playlist_detail_download .svg_icon {
                width: var(--space_4);
                height: var(--space_4);
            }
    }