/* Import Bebas Neue font */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');



/* Container principale */

.palmares-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



/* Stile per ogni riga */

.palmares-row {

    display: flex;

    align-items: center;

    background-color: #d1d1d1;

    border-radius: 5px;

    padding: 10px;

    margin-bottom: 15px;

    transition: transform 0.2s ease;

}



.palmares-row:hover {

    transform: translateX(5px);

}



/* Indicatore di posizione */

.position-indicator {

    flex: 0 0 60px;

    text-align: center;

}



.medal-icon {

    width: 35px;

    height: 35px;

    object-fit: contain;

}



.position-number {

    font-family: 'Bebas Neue', sans-serif;

    font-size: 28px;

    color: #333;

    display: block;

    line-height: 1;

}



/* Info atleta */

.atleta-info {

    flex: 1;

    font-weight: bold;

    padding: 0 15px;

    min-width: 150px;

}



/* Info gara */

.gara-info {

    flex: 2;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 15px;

}



.country-flag {

    width: 30px;

    height: auto;

    object-fit: contain;

    border-radius: 5px;

}



/* Info tappa */

.tappa-info {

    flex: 0 0 100px;

    text-align: center;

}



/* Info data */

.data-info {

    flex: 0 0 100px;

    text-align: right;

    padding-right: 15px;

}



/* Stili per il contatore */

.palmares-counter {

    display: flex;

    justify-content: space-around;

    align-items: center;

    background-color: #00c1d7;

    color: white;

    padding: 20px;

    border-radius: 5px;

    margin: 20px 0;

    text-align: center;

}



.counter-item {

    padding: 0 20px;

}



.counter-value {

    display: block;

    font-size: 2.5em;

    font-weight: bold;

    line-height: 1;

}



.counter-label {

    display: block;

    font-size: 2em;

    margin-top: 5px;

}



/* Responsive Design */

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

    .palmares-row {

        flex-wrap: wrap;

        gap: 10px;

    }



    .position-indicator {

        flex: 0 0 40px;

    }



    .atleta-info {

        flex: 1 1 100%;

        order: 1;

    }



    .gara-info {

        flex: 1 1 100%;

        order: 2;

    }



    .tappa-info,

    .data-info {

        flex: 1 1 auto;

        order: 3;

    }



    .palmares-counter {

        flex-direction: column;

        gap: 15px;

    }



    .counter-item {

        width: 100%;

        padding: 10px 0;

    }

}



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

    .palmares-container {

        padding: 10px;

    }



    .palmares-row {

        padding: 10px;

    }



    .position-number {

        font-size: 24px;

    }



    .medal-icon {

        width: 30px;

        height: 30px;

    }

}



/* Messaggio quando non ci sono risultati */

.palmares-empty {

    text-align: center;

    padding: 30px;

    background-color: #f5f5f5;

    border-radius: 5px;

    margin: 20px 0;

}



/* Stili per le sezioni */

.palmares-section {

    margin-bottom: 40px;

}



.section-title {

    font-size: 32px;

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid #0066cc;

}



/* Stili specifici per ogni sezione */

.palmares-section.vittorie .section-title {

    color: #FFD700;

    border-color: #FFD700;

}



.palmares-section.podi .section-title {

    color: #0066cc;

    border-color: #0066cc;

}



.palmares-section.top10 .section-title {

    color: #333;

    border-color: #333;

}



/* Stile per l'indicatore Classifica Generale */

.classifica-generale-info {

    flex: 0 0 100px;

    text-align: center;

    font-weight: bold;

    background-color: #00c1d7;

    color: white;

    padding: 4px 8px;

    border-radius: 4px;

    display: inline-block;

    font-size: 0.9em;

    letter-spacing: 1px;

}



/* Responsive per mobile */

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

    .classifica-generale-info {

        flex: 1 1 auto;

        order: 3;

        margin: 5px 0;

    }

}