/* ==========================================================================
   EPIK LEADERS - EVENEMENTS-ACTUALITES (EVENTS) PAGE STYLES
   ========================================================================== */

/* ==========================================================================
   FILTER BUTTONS
   ========================================================================== */

/* Filter button styles */
.filter-button {
    padding : .25rem 1rem ;
    flex-shrink: 0;
    border-radius: 5px; /* Less rounded corners */
    background: #D9D9D9; /* Light gray background */
    color: #1F2937; /* Darker text for readability */
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent; /* Default transparent border */
    display: flex; /* Use flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding: 0; /* Remove default padding as width/height are fixed */
}

.filter-button:hover {
    background-color: #C0C0C0; /* Slightly darker gray on hover */
}

.filter-button.active {
    background-color: #B5252C; /* Red when active */
    color: white;
    border-color: #B5252C; /* Red border */
}

/* ==========================================================================
   EVENT CARDS
   ========================================================================== */

/* Event Card Styles */
.event-card {
    background-color: #fff;
    border-radius: 1rem; /* rounded-2xl */
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    position: relative; /* Important for absolute positioning of children */
    height: 400px; /* Fixed height for the card to contain image and content */
}

.event-card-image-container {
    width: 100%;
    height: 100%; /* Take full height of the card */
    background-position: center;
    background-size: cover;
    position: absolute; /* Position over the card */
    top: 0;
    left: 0;
    z-index: 1; /* Below content and button */
}

.event-card-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); /* Gradient overlay for text readability */
    z-index: 2; /* Above image, below content */
}

.event-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    color: white; /* Text color for content over image */
    z-index: 3; /* Above image and overlay */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-end; /* Push content to the bottom */
}

/* ==========================================================================
   EVENT CARD CONTENT ELEMENTS
   ========================================================================== */

/* Updated Event Card Title Styles */
.event-card-title {
    color: #FFF;
    font-family: "Open Sans", sans-serif; /* Applied Open Sans */
    font-size: 31.844px; /* Specific font size */
    font-style: normal;
    font-weight: 600; /* Applied font weight */
    line-height: normal;
    max-width: 550.444px; /* Max width for responsiveness */
    word-break: break-word; /* Ensures long words break */
    margin-bottom: 0.5rem; /* Added margin back for spacing with description */
}

/* Updated Event Card Description Styles */
.event-card-description {
    color: #FFF; /* White color */
    font-family: "Open Sans", sans-serif; /* Applied Open Sans */
    font-size: 16.377px; /* Specific font size */
    font-style: normal;
    font-weight: 400; /* Applied font weight */
    line-height: normal;
    max-width: 550.444px; /* Max width for responsiveness */
    word-break: break-word; /* Ensures long words break */
}

/* ==========================================================================
   EVENT CARD TAGS
   ========================================================================== */

.event-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem; /* Added margin-top to separate from description */
}


/* ==========================================================================
   EVENT CARD BUTTON
   ========================================================================== */


   
.event-card-button:hover {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly more visible on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.event-card-button svg {
    width: 24px; /* Icon size */
    height: 24px;
    color: #FFFFFF; /* White arrow icon */
}

/* ==========================================================================
   RESPONSIVE GRID
   ========================================================================== */

/* Adjust grid for 2 columns on all screens wider than small */
@media (min-width: 768px) { /* For medium (md) and large (lg) screens */
    #events-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 767px) { /* For small screens (sm) and below */
    #events-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 column */
    }
}