/* ======================================= */
/* MEDIA QUERY per Responsività (Mobile) */
/* RISOLUZIONE DEL PROBLEMA DI SOVRAPPOSIZIONE */
/* ======================================= */

@media screen and (max-width: 768px) {
    .progetti-table-container {
        padding: 10px;
        width: 95%; 
    }

.progetti-table-container h2 {
    color: #0D1B2A;
    font-weight: 600;
    font-size: 1.5rem;
    /* CAMBIAMENTO: Allineamento al centro */
    text-align: center; 
}

    /* Nascondi le intestazioni della tabella sul mobile */
    .progetti-table-container thead {
        display: none;
    }

    /* Trasforma le righe in blocchi (tipo card) */
    .progetti-table-container table,
    .progetti-table-container tbody,
    .progetti-table-container tr {
        display: block;
        width: 100%;
    }
    
    .progetti-table-container tr {
        margin-bottom: 20px; /* Aumenta spazio tra le card */
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: white !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* Stile per le celle (dati) */
    .progetti-table-container td {
        display: flex; /* CAMBIAMENTO CHIAVE: Usa Flexbox */
        justify-content: space-between; /* Sposta etichetta a sinistra e valore a destra */
        align-items: center;
        text-align: right;
        padding: 10px ; /* Aggiungi padding laterale */
        position: relative;
        border: none;
        border-bottom: 1px dotted #eee;
    }

    /* Rimuoviamo il td:before e usiamo il data-label in modo nativo con Flexbox */
    .progetti-table-container td:before {
        content: attr(data-label);
        /* Rimuoviamo width, position e padding-right inutili */
        text-align: left;
        font-weight: 600; /* Leggermente più grassetto per l'etichetta */
        color: #005EE9; /* Colore più scuro per l'etichetta */
        flex-shrink: 0; /* Impedisce all'etichetta di restringersi */
        margin-right: 15px; /* Spazio tra etichetta e dato */
    }
    
    /* Stili specifici per il contenuto del dato */
    .progetti-table-container td {
        text-align: right;
        /* Rimuoviamo padding-left: 50%; */
    }
    
    /* Il contenuto del dato (il testo lungo) */
    .progetti-table-container td:not(:before) {
        text-align: right;
        /* Permette al testo di andare a capo correttamente */
        word-wrap: break-word; 
        overflow-wrap: break-word; 
        max-width: 100%;
        color: #005EE9; /* Mettiamo il dato in evidenza con il blu */
        font-weight: 500;
    }

    .progetti-table-container tbody tr:last-child td {
        border-bottom: 1px dotted #eee; /* Mantieni bordo tra i campi */
    }
    .progetti-table-container tbody tr:last-child td:last-child {
        border-bottom: none; /* Rimuovi il bordo dall'ultimo elemento della card */
    }
    
}