/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

/* HERO SECTION */
.hero-s {
    position: relative;
    width: 100%;
    height: 50vh;
    background: url('../images/hero/events-hero.avif') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-s .hero-title {
    position: static;
    margin: 0;
    padding: 0;
    font-size: clamp(2rem, 5vw, 5rem);
    line-height: 1.2;
    color: #f5f5f5;
    text-shadow: none;
}

/* COMING UP SECTION */
.event-section {
    background: url("../images/backgrounds/image0.avif") center/cover no-repeat;
    padding: 2rem;
}

/* Event Section Title - Left aligned */
.event-section-title {
    display: inline-block;
    font-size: 42px;
    font-weight: bold;
    color: #70d644;
    font-family: 'League Spartan', sans-serif;
    margin-bottom: 40px;
    border-bottom: 2px solid #70d644;
    padding-bottom: 4px;
}

/* Dynamic Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-dialog {
    background: #fff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 800px;
    position: relative;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

#modal-output .modal-dialog {
    overflow: hidden;
}

#modal-output .modal-body {
    overflow-y: auto;
    padding-right: 0.5rem;
}

#modal-output .modal-body .modal-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 8px;
    object-fit: cover;
}

#modal-output .modal-body .modal-desc {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    line-height: 1.6;
    color: #333;
    margin-top: 0.5rem;
}

#modal-output .modal-body {
    padding: 1rem 0;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
}

.event-card {
    background: white;
    border: none;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 6px;
    overflow: hidden;
}

.event-image {
    height: 400px;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid #ccc;
}

.event-info {
    padding: 20px;
}

.event-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #222;
}

.event-date {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin-bottom: 5px;
}

.event-desc {
    font-size: 14px;
    color: #666;
}

.event-link {
    text-decoration: none;
    border-radius: 6px;
    color: inherit;
    display: block;
    cursor: pointer;
}

.event-link:hover .event-card {
    transform: translateY(-6px);
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
    border-radius: 6px;
}

/* VOLUNTEERING SECTION */
.volunteer-form-section {
    padding: 60px 40px;
    text-align: center;
    background: url("../images/backgrounds/image1.avif") center/cover no-repeat;
}

.volunteer-title {
    font-size: 48px;
    font-weight: 900;
    color: rgb(112, 214, 68);
    margin-bottom: 40px;
    text-align: center;
}

.volunteer-form {
    max-width: 850px;
    margin: 0 auto;
    padding: 40px;
    background: #f8f8f8;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center;
}

.volunteer-form input,
.volunteer-form select {
    padding: 14px 18px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    font-size: 16px;
    flex: 1 1 200px;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.7);
    transition: border 0.2s ease, background 0.2s ease;
    box-shadow: none;
}

.volunteer-form input:focus,
.volunteer-form select:focus {
    outline: none;
    border: 2px solid #e26c1f;
    background: rgba(255, 255, 255, 0.9);
}

.volunteer-submit {
    padding: 18px 36px;
    background-color: #91d75a;
    border: none;
    border-radius: 12px;
    color: whitesmoke;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.volunteer-submit:hover {
    background-color: #77bc47;
}

@media screen and (max-width: 900px) {
    .event-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .event-grid {
        grid-template-columns: 1fr;
    }
}