﻿/* Kontajner last10Content */

#last10Content {

    display: flex; /* Flexbox */

    flex-direction: column; /* Riadky idú pod seba */

    gap: 0px; /* Rozostupy medzi riadkami */

    padding: 5px; /* Vnútorné odsadenie */

    border-radius: 10px; /* Zaoblené rohy */

   min-height: 100px; /* Minimálna výška riadku (prispôsobiť výške obrázkov + textu) */
}



/* Každý riadok */

#last10Content div {

    display: flex; /* Flexbox */

    align-items: center; /* Zarovnanie textu na stred obrázka */

    gap: 10px; /* Priestor medzi obrázkom a textom */

    padding: 0px; /* Vnútorné odsadenie pre každý riadok */

    border-radius: 5px; /* Zaoblené rohy riadkov */

}



/* Time */

#last10Content .time {

    font-size: 16px; /* Veľkosť písma */

    color: #000; /* Jemne sivá farba */

    width: 60px; /* Pevná šírka pre čas */

    text-align: center; /* Zarovnanie na stred */

}



/* Obrázok */

#last10Content img {

    width: 80px; /* Pevná šírka obrázka */
    height: 80px; /* Pevná výška obrázka */
    object-fit: cover; /* Orezanie obrázka */
    border-radius: 8px; /* Zaoblené rohy */
    margin-left: 0px; /* Odsadenie od okraja */
    border: 2px solid #ccc; /* Rámček okolo obrázka */
    transition: transform 0.3s ease, z-index 0.3s ease;
    transform-origin: left center;
}

#last10Content img:hover {
    transform: scale(3.2);
    transform-origin: left center;
    z-index: 10;
    position: relative;

}



/* Textový kontajner pre artist a title */

#last10Content .text {

    display: flex; /* Flexbox */

    flex-direction: column; /* Riadky pod sebou */

    gap: 0px; /* Rozostup medzi artist a title */

}



/* Umelec */

#last10Content .artist {

    font-weight: bold; /* Tučný text pre umelca */

    font-size: 16px; /* Veľkosť písma */

    width: 400px; /* Pevná šírka pre umelca */

    word-wrap: break-word; /* Zalomenie dlhých slov */

    overflow: visible; /* Zabezpečí, že obsah nie je orezaný */

}



/* Názov */

#last10Content .title {

    font-weight: normal; /* Normálny text pre názov */

    font-size: 16px; /* Veľkosť písma */

    width: 400px; /* Pevná šírka pre názov */

    word-wrap: break-word; /* Zalomenie dlhých slov */

    overflow: visible; /* Zabezpečí, že obsah nie je orezaný */

}



/* Duration */

#last10Content .duration {

    font-size: 16px; /* Menšie písmo */

    color: #000; /* Jemná farba */

    width: 40px; /* Pevná šírka pre trvanie skladby */

    text-align: center; /* Zarovnanie na stred */

}



/* Rok */

#last10Content .year {

    font-size: 16px; /* Menšie písmo */

    color: #000; /* Jemná sivá */

    width: 40px; /* Pevná šírka pre rok */

    text-align: center; /* Zarovnanie na stred */

}



/* Jazyk */

#last10Content .lang {

    font-size: 12px; /* Menšie písmo */

    font-style: italic; /* Kurzíva pre jazyk */

    color: #666; /* Jemná farba */

    width: 60px; /* Pevná šírka pre jazyk */

    text-align: center; /* Zarovnanie na stred */

    display: none;

}



/* Responzivita: Text pod obrázok na menších obrazovkách */

@media (max-width: 768px) {

    #last10Content div {

        flex-direction: column; /* Text pod obrázok */

        align-items: center; /* Zarovnanie na stred */

    }



    #last10Content img {

        margin-bottom: 10px; /* Odsadenie medzi obrázkom a textom */

    }



    #last10Content .info {

        text-align: center; /* Text na stred */

    }

}

