/* Upcoming Events Section */
.section-upcoming-events {
    padding-bottom: 15px;
}

.section-upcoming-events svg {
    display: block;
    width: 100%;
    height: 150px;
    margin-top: -130px;
    z-index: -1;
    fill: var(--secondary);
    display: none;
}

.events {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.event {
    /* background: rgba(0,0,0,0.05); */
    /* background: var(--dark);
    color: white; */
    /* background: white; */
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    transition-duration: 0.2s;

    display: flex;
    flex-direction: column; /* Stack children (image container, content wrapper) vertically */
    height: 100%; /* Ensure the .event card itself tries to fill its grid cell height if possible */
}

/* Image container */
.event > div:nth-child(1) {
    border-width:10px;
    border-style: solid;
    /* position: relative; */
}

/* Description container */
.event > div:nth-child(3) {
    padding: 10px 20px;
}

.event-title {
    font-family: 'Balto-Medium';
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 0.5px;
}

.event-date,
.event-location, 
.event-description-details {
    white-space: pre-line; /* This is key: sequences of white space are collapsed. 
                              Lines are broken at newline characters. */
    word-break: break-word;  /* Ensures long words without spaces also wrap */
    overflow-wrap: break-word; /* Modern equivalent of word-break */
    font-size: 0.9rem; /* Or your desired size */
    line-height: 1.5;  /* Adjust for readability */
    color: #555;      /* Or your desired color */
    margin-top: 10px; /* Add some space above the description */
}

.event-location {
    color: #676767;
    margin-top: 2px;
}

.event-date {
    color: #676767;
    margin-top: 7px;
}

.event-location {
    color: #676767;
    margin-top: 2px;
}

.event-button {
    font-family: 'Balto-Medium';
    font-size: 18px;
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
    transition-duration: 0.2s;
}

.event-button:hover {
    background: #0a8353;
}

/* About Us Section */
.section-about-us {
    background: linear-gradient(to top right, var(--primary), #23382e);
    padding: 20px;
    color: white;
}

.stripe-pattern {
    background: url("/static/images/stripe_pattern.png") repeat-x;
    background-size: 100px auto;
    height: 100px;
}

.about-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
    line-height: 110%;
}

.about-split p {
    margin-bottom: 10px;
}

.about-split img {
    border-radius: 10px;
    width: 45%;
    /* this code needs improvement */
    flex-grow: 1;
    flex-shrink: 0;
}

.about-split div {
    margin-left: 50px;
}

@media screen and (max-width: 800px) {
    .events {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
}

@media screen and (max-width: 500px) {
    .events {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 10px;
    }

    .events > .event:not(:last-child) {
        margin-bottom: 15px;
    }
}

.event-item {
    border: 1px solid #e0e0e0; /* Lighter border */
    border-radius: 8px;
    margin-bottom: 25px;
    overflow: hidden; 
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: box-shadow 0.3s ease-in-out;
}

.event-item:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.event-image-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Container for the event image - this controls the aspect ratio */
.event-image-container {
    border-color: white;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
}

/* The actual <img> tag for the event banner */
.event-banner-img {
    width: 100%;
    height: 100%; /* Make image fill the container defined above */
    object-fit: fill; /* This is the magic property!
                          - cover: Fills the container, maintains aspect ratio, crops if necessary.
                          - contain: Fits entire image within container, maintains aspect ratio, may leave empty space (letterboxing).
                          - fill: Stretches to fill, may distort aspect ratio (usually not desired).
                          - scale-down: Like 'contain' if image is larger, or 'none' (original size) if smaller.
                       */
    object-position: center; /* How the image is positioned if 'cover' or 'contain' results in cropping/letterboxing (e.g., center, top, bottom) */
    display: block; /* Removes any extra space below the image if it's treated as inline */
    border-radius: 10px;
    border-width: 10px;
}

.event-border-content {
    border-width: 3px;
    border-top-style: solid;
    border-top-color: black;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
}

/* Content section of the event item */
.event-item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 20px; /* More padding */
}

.event-item-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.6em; /* Slightly larger title */
    font-weight: 600;
}
.event-item-content h3 a {
    text-decoration: none;
    color: #2c3e50; /* Darker, more professional color */
}
.event-item-content h3 a:hover {
    color: #0056b3; /* Standard link hover blue */
}

.event-item-content p {
    font-size: 0.95em;
    color: #555;
    margin-bottom: 8px;
    line-height: 1.5;
}

.clickable-event-card:hover {
    /* box-shadow: 0 8px 16px rgba(0,0,0,0.2); */ /* Optional hover effect */
    cursor: pointer; /* Already added by JS, but can be here too */
}