/* event-detail.css - Styles specific to individual event detail pages */

/* --- Page Header --- */
.event-detail-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
}

.event-detail-title {
    font-size: 2.8em;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.event-meta {
    font-size: 1em;
    color: var(--gray);
    font-style: italic;
}

/* --- General Section Spacing --- */
.event-section {
    margin-bottom: 50px; /* Consistent space between different content sections */
}

/* --- Section Type 1: Detail Slider --- */
.event-detail-slider {
    max-width: 900px; /* Limit slider width */
    margin: 40px auto 50px auto; /* Center slider and add vertical space */
    border-radius: 8px;
    overflow: hidden; /* Clip slides to rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative; /* For button/dot positioning */
    background-color: var(--accent-color); /* BG while loading */
}

/* Use a class specific to this slider's wrapper if needed */
.event-detail-slider .slider {
    display: flex;
    /* Opacity transition setup (like index page) */
    height: 100%; /* Ensure slider div takes height */
    position: relative;
}
.event-detail-slider .slide {
    min-width: 100%;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    background-color: #eee;
}
.event-detail-slider .slide.active {
    opacity: 1;
    z-index: 1;
}
.event-detail-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Button/Dot styling specific to detail slider (or reuse/adapt index styles) */
.event-detail-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 8px 13px; /* Slightly smaller */
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.event-detail-slider .slider-btn:hover { background-color: rgba(0, 0, 0, 0.7); }
.event-detail-slider .prev-btn { left: 10px; }
.event-detail-slider .next-btn { right: 10px; }

.event-detail-slider .slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
}
.event-detail-slider .dot {
    height: 10px; width: 10px; margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.event-detail-slider .dot.active { background-color: var(--white); transform: scale(1.2); }


/* --- Section Type 2 & 3: Left/Right Para --- */
.event-detail-left-para,
.event-detail-right-para {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 35px; /* Space between text and image */
    margin-bottom: 50px; /* Use common section spacing */
}

/* Specific order for right para (image first) */
.event-detail-right-para {
    /* Flex order defaults to HTML order, which is already image first */
}

.event-detail-left-para,
.event-detail-right-para {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 35px; /* Space between text and image wrapper */
    margin-bottom: 50px;
}

.multi {
    display: block !important;
}

/* NEW: Styles for the image wrapper */
.image-wrapper {
    flex-shrink: 0;     /* Prevent wrapper shrinking below min-width */
    min-width: 40%;     /* Wrapper takes AT LEAST 40% of the flex row width */
    max-width: 50%;     /* Wrapper takes AT MOST 50% of the flex row width */
    display: flex;        /* Use flex to easily center the image inside */
    justify-content: center; /* Center image horizontally */
    align-items: center;   /* Center image vertically */
    /* background-color: lightblue; /* Optional: for debugging layout */
}

/* UPDATED: Styles for the image itself (nested inside wrapper) */
.event-inline-image {
    /* Constraints (relative to its container, the wrapper) */
    max-width: 100%;     /* Image can fill the wrapper horizontally */
    max-height: 80vh;   /* Absolute max height for the image */

    /* Sizing & Display */
    width: auto;         /* Let browser scale width based on height */
    height: auto;        /* Let browser scale height based on width */
    display: block;      /* Correct display type */

    /* Aesthetics (Keep these on the image) */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    /* object-fit: none; /* Ensure no object-fit */
}

/* UPDATED: Ensure text content can shrink if needed */
.event-text-content {
    flex: 1;             /* Text takes remaining space */
    min-width: 0;        /* IMPORTANT: Allows text block to shrink below its implicit minimum size */
    /* font-size, line-height etc. */
    font-size: 1.05em;
    line-height: 1.7;
}
.event-text-content h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.5em;
}

.slider{
    min-height: 70vh;
}


.event-text-content p { margin-bottom: 15px; }
.event-text-content p:last-child { margin-bottom: 0; }

/* --- Section Type 4: Full Width Para --- */
.event-detail-full-para {
    max-width: 900px; /* Limit text width for readability */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px; /* Use common section spacing */
}
/* .event-text-content styles above apply here too */


/* --- Responsive Adjustments for Event Detail --- */
@media (max-width: 768px) {
    .event-detail-title {
        font-size: 2.2em;
    }

    .event-detail-left-para,
    .event-detail-right-para {
        flex-direction: column; /* Stack vertically */
        gap: 25px;
    }

    /* Stack image first always on mobile for consistency */
    .event-detail-left-para {
        flex-direction: column-reverse; /* Text below image */
    }
    .event-detail-right-para {
        flex-direction: column; /* Already image above text */
    }


    .event-inline-image {
        flex-basis: auto; /* Reset basis */
        width: 100%; /* Full width */
        max-width: 100%; /* Override desktop width */
        max-height: 350px; /* Prevent excessively tall images */
        object-fit: cover;
    }


    .event-detail-slider .slider-btn {
        padding: 6px 10px;
        font-size: 1.3rem;
    }
    .event-detail-slider .dot {
        height: 8px; width: 8px; margin: 0 4px;
    }
}

@media (max-width: 480px) {
    .event-detail-title {
        font-size: 1.9em;
    }
    .event-text-content {
        font-size: 1em;
    }
    .event-inline-image {
        max-height: 300px;
    }
}