/* events.css - Styles specific to the events listing page */

.event-list {
    margin-top: 40px; /* Space below the H1 title */
}

.event-summary-item {
    display: flex; /* Image on left, text on right */
    background-color: var(--accent-color); /* Use light gray background */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure image corners adhere to border-radius */
    margin-bottom: 35px; /* Space between event items */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    transition: box-shadow 0.3s ease;
    border: 1px solid #ddd; /* Add a light border */
}

.event-summary-item:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); /* Enhance shadow on hover */
}

.event-summary-image {
    flex: 0 0 250px; /* Fixed width for the image area */
    max-width: 250px; /* Prevent exceeding the width */
    /* Let height be auto or set fixed height */
    /* Example fixed height: */
    height: 200px;
    object-fit: cover; /* Cover the area, cropping if needed */
    display: block; /* Remove potential extra space */
}

.event-summary-content {
    flex: 1; /* Text content takes the remaining space */
    padding: 20px 30px; /* Padding inside the text area */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Vertically center content if needed */
}

.event-summary-title {
    margin: 0 0 5px 0; /* Remove default margin top, add space below */
    font-size: 1.7em; /* Prominent title */
    color: var(--primary-color);
    line-height: 1.3;
}

/* Style the link within the title */
.event-summary-title a {
    text-decoration: none;
    color: inherit; /* Inherit the color from the h2 */
    transition: color 0.3s ease;
}

.event-summary-title a:hover {
    color: var(--secondary-color); /* Change color on hover */
    text-decoration: underline;
}

.event-summary-date {
    color: var(--gray); /* Use gray color */
    font-size: 0.9em;
    margin-bottom: 15px;
    font-style: italic;
}

.event-summary-text {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 0; /* Remove margin if date provides enough space */
}


/* --- Responsive Adjustments for Events Page --- */
/* (Keeping these separate, even if general responsiveness is ignored for now) */

@media (max-width: 768px) {
    .event-summary-item {
        flex-direction: column; /* Stack image on top of text */
    }

    .event-summary-image {
        flex-basis: auto; /* Reset flex basis */
        width: 100%; /* Make image full width */
        max-width: 100%; /* Override fixed width */
        height: 220px; /* Adjust height for full width */
        /* Reset fixed width */
        /* flex: 0 0 auto;  -- Alternative reset */
    }

    .event-summary-content {
        padding: 25px 20px; /* Adjust padding */
    }

    .event-summary-title {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .event-summary-title {
        font-size: 1.4em;
    }
    .event-summary-image {
        height: 180px; /* Slightly shorter on very small screens */
    }
    .event-summary-content {
        padding: 20px 15px;
    }
}