/* --- Event Card Styling --- */

/* Individual event card styling */
.event-card {
    background-color: var(--surface-color); /* Use main theme background */
    border: 1px solid var(--border-color); /* Slightly lighter border than background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adjusted shadow for dark theme */
    overflow: hidden; /* Ensures image corners are rounded */
    display: flex;
    /* Default to row layout for larger screens */
    flex-direction: row;
    align-items: flex-start; /* Align items (image and text) to the top */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; /* Smooth transitions */
    color: var(--dark-color); /* Default light text for card */
}

.event-card:hover {
    transform: translateY(-5px); /* Lift card on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Stronger shadow on hover */
    border-color: var(--secondary-color); /* Aqua for border highlight on hover */
}

/* Event image styling */
.event-image {
    width: 35%; /* Image takes ~1/3 of the card width */
    height: auto; /* Auto height to maintain aspect ratio */
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block; /* Remove extra space below image */
    flex-shrink: 0; /* Prevent image from shrinking */
    /* Remove bottom border, add right border */
    border-right: 1px solid var(--border-color); /* Slightly lighter border than background */
}

/* Container for event text info */
.event-info {
    padding: 1.5rem;
    flex-grow: 1; /* Allows info section to fill remaining space */
    display: flex;
    flex-direction: column;
    /* Ensure text doesn't touch the image border */
    padding-left: 1.5rem;
}

/* Event title styling */
.event-title {
    font-size: 1.4rem; /* Slightly adjusted size */
    color: #FFFFFF; /* Heading Text Color */
    margin-bottom: 0.75rem;
    font-weight: 600;
}

/* Styling for date and location */
.event-date-location {
    font-size: 0.9rem;
    color: var(--tertiary-accent); /* Gold for date/location for subtle emphasis */
    margin-bottom: 1rem;
    line-height: 1.4;
}

.event-date-location strong {
    color: #E0E0E0; /* Main Text Color for strong labels */
}


/* Event description styling */
.event-description {
    font-size: 0.95rem; /* Slightly smaller description */
    color: var(--dark-color); /* Primary text for description */
    line-height: 1.6;
    flex-grow: 1; /* Pushes content down if card heights vary slightly */
    margin-bottom: 0; /* Remove default paragraph margin */
}

/* Style for the reservation button */
.event-reserve-btn {
    margin-top: 1rem; /* Add space above the button */
    align-self: flex-start; /* Align button to the left */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Note: .events-grid container adjustment is in pages/events.css */

    /* Revert card to column layout on smaller screens */
    .event-card {
        flex-direction: column;
    }

    /* Image takes full width again */
    .event-image {
        width: 100%;
        height: 200px; /* Restore fixed height */
        border-right: none; /* Remove right border */
        border-bottom: 1px solid var(--border-color); /* Slightly lighter border than background */
    }

    .event-info {
        padding-left: 1.5rem; /* Keep original padding */
    }

    .event-title {
        font-size: 1.3rem;
    }
}