/* ==========================================================================
   Bloque de fecha (día grande rojo + mes pequeño en mayúsculas)
   --------------------------------------------------------------------------
   Reemplaza el patrón inline:
     <div style="min-width: 60px;">
       <span style="line-height: 1;">DD</span>
       <span style="font-size: 0.7rem;">MMM</span>
     </div>

   Uso:
     <div class="race-date-block bg-light rounded p-2 text-center border">
       <span class="race-date-block__day">@day</span>
       <span class="race-date-block__month">@month</span>
     </div>

   Variante con altura ajustada al contenido (para cards más altos):
     class="race-date-block race-date-block--fit"
   ========================================================================== */

.race-date-block {
    min-width: 60px;
}

.race-date-block--fit {
    height: fit-content;
}

.race-date-block__day {
    display: block;
    line-height: 1;
    color: var(--danger-color);
    font-weight: 700;
    font-size: 1.5rem; /* equivalente a fs-4 */
    margin-bottom: 0;
}

.race-date-block__month {
    display: block;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
}