/* ================================================================
   GRILLA DE EVENTOS
   ================================================================ */
.ale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
}

/* Responsive adjustment for larger screens if needed */
@media (min-width: 768px) {
    .ale-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* ================================================================
   TARJETA (CARD)
   ================================================================ */
.ale-card {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Optional: add a subtle shadow or border if needed, similar to Elementor widgets */
    /* box-shadow: 0px 4px 15px rgba(0,0,0,0.05); */
    /* border-radius: 8px; */
}

/* Imagen de la tarjeta */
.ale-card-image {
    width: 100%;
    /* Ajustar este padding-top (aspect-ratio) según se necesite, ej: 100% para cuadrada, 75% para 4:3 */
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Contenido de la tarjeta */
.ale-card-content {
    padding: 1.25rem 0 0 0;
    /* Espaciado interno guiado por la imagen adjunta */
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Título de la tarjeta */
.ale-card-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    /* Letra bien gruesa como en la imagen */
    color: #000000;
    line-height: 1.2;
    text-align: left;
    font-family: inherit;
    /* Hereda fuente del tema, pero prioriza un estilo bold */
}

/* Acciones (Botones) */
.ale-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* ================================================================
   BOTONES
   ================================================================ */
.ale-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    /* Letra un poco más gruesa (bold) */
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    /* Bordes algo redondeados (approx 8px) */
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
}

.ale-btn:hover {
    text-decoration: none;
    opacity: 0.9;
    transform: translateY(-1px);
}

.ale-btn:active {
    transform: translateY(0);
}

/* Botón Amarillo */
.ale-btn-yellow {
    background-color: #fce444;
    /* color aproximado del botón amarillo */
    color: #0d3278;
    /* texto en azul oscuro para buen contraste */
}

.ale-btn-yellow:hover {
    background-color: #e5cd3a;
    color: #0a275c;
}

/* Botón Azul Oscuro */
.ale-btn-blue {
    background-color: #0f3478;
    /* color aproximado del botón azul */
    color: #ffffff;
}

.ale-btn-blue:hover {
    background-color: #0c2b64;
    color: #ffffff;
}