/* ==========================
   INDEX SECTION CARDS (Calendario - Classifica - Sponsor)
========================== */
.row.hero-section-cards {
    display: flex;
    flex-wrap: nowrap;       /* mantiene le colonne in linea su desktop */
    gap: 1rem;
}

/* Colonne tutte flex verticali */
.row.hero-section-cards > .col-md-4 {
    display: flex;
    flex-direction: column;
}

/* Card occupano tutta l’altezza della colonna */
.row.hero-section-cards > .col-md-4 > .card {
    flex: 1;
    min-width: 0;             /* evita overflow */
}

/* ==========================
   CLASSIFICA COMPATTA
========================== */
.hero-table tbody tr {
    height: 30px;
}

.hero-table th, .hero-table td {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

.hero-table-card .card-body h3 {
    margin-bottom: 0.5rem;
}

/* ==========================
   SPONSOR CARD - allineamento e immagine
========================== */
.hero-sponsor-card .card-body {
    text-align: left;        /* allinea il titolo a sinistra */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-sponsor-card h3.card-title {
    margin-bottom: 0.75rem; /* stesso spazio dei titoli degli altri card */
}

.hero-sponsor-card img {
    width: 100%;             /* occupa tutta la larghezza della card */
    height: auto;            /* mantiene le proporzioni */
    object-fit: contain;     /* non taglia l'immagine */
    display: block;
    margin: 0 auto;          /* centra orizzontalmente */
}

/* Riduce l'altezza delle righe della classifica */
.hero-table-card table.hero-table tbody tr {
    height: 30px; /* o 28px a seconda di quanto vuoi comprimere */
}

/* ==========================
   MOBILE (max-width: 576px)
   Calendario / Classifica / Sponsor
========================== */
@media (max-width: 576px) {
    /* Permette alle colonne di andare in colonna verticale */
    .row.hero-section-cards {
        flex-wrap: wrap !important; /* consente wrapping */
    }

    .row.hero-section-cards > .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem;
    }
}

/* ==========================
   CLASSIFICA - STICKY SOLO MOBILE
========================== */
@media (max-width: 576px) {

    .table-responsive {
        overflow-x: auto;
        position: relative;
    }

    table {
        min-width: 300px; /* forza scroll solo su mobile */
        border-collapse: separate;
        border-spacing: 0;
    }

    .sticky-col {
        position: sticky;
        background: #fff;
        z-index: 2;
    }

    .sticky-col-1 {
        left: 0;
        min-width: 10px;
        text-align: center;
        z-index: 4;
    }

    .sticky-col-2 {
        left: 20px;
        min-width: 60px;
        z-index: 4;
    }

    /* riga Napoli */
    .table-primary .sticky-col {
        background-color: #cfe2ff !important;
    }
}