/* public/css/index.css */

.event-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden flex flex-col;
}

.event-card .image-container {
    @apply relative w-full rounded-t-lg overflow-hidden; /* Asegura position: relative; */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.event-card .image-container img {
    @apply absolute inset-0 w-full h-full object-cover;
}

/* La date-box para .event-card ahora usa los estilos de common.css */

.event-card .content {
    @apply p-4 flex-grow flex flex-col;
}

.event-card .content h2 {
    @apply text-xl font-bold text-gray-800 mb-2;
}

.event-card .content p {
    @apply text-gray-700 text-sm mb-2 flex-grow; /* flex-grow para empujar el botón hacia abajo */
}

.event-card .location-info {
    @apply text-gray-600 text-sm flex items-center mb-4;
}

.event-card .location-info i {
    @apply mr-2;
}

.event-card .price-button-container {
    @apply flex justify-between items-center mt-auto; /* mt-auto para empujar al final */
}

.event-card .price-display {
    @apply text-2xl font-bold text-blue-600;
}

/* La clase .buy-button ahora aplicará sus estilos directamente en el HTML/JS. */
/* Esta definición aquí es solo para referencia o si se desea aplicar estilos adicionales no relacionados con Tailwind. */
.event-card .buy-button {
    /* Estilos de Tailwind aplicados directamente en el HTML/JS */
}