/* --- EVENT PAGE SPECIFIC STYLES --- */

.event-hero {
    max-width: 1600px;
    margin: 0 auto;
    padding: 160px 8% 4rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.event-hero-title-wrap {
    max-width: 900px;
}

/* --- CONSISTENT HERO TYPOGRAPHY & MASKS --- */

.event-hero-title {
    font-family: "Manrope", sans-serif;
    font-weight: 600;
    /* Lowered the fluid font size so the long first line fits nicely */
    font-size: clamp(1.8rem, 4.5vw, 4rem); 
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--dark);
    
    /* Stack the new hero-lines on top of each other */
    display: flex;
    flex-direction: column; 
    gap: 0.1em; /* Adds a tiny bit of vertical breathing room between the two lines */
}

/* New class for the line wrappers */
.hero-line {
    display: flex;
    /* Keeps words wrapping safely if a user views on an extremely narrow mobile screen */
    flex-wrap: wrap; 
    align-items: baseline !important;
}

.event-word-wrap {
    display: inline-flex;
    overflow: hidden;
    /* Adds breathing room inside the mask so the italic 'l' and 'C' don't clip */
    padding-right: 0.2em; 
    padding-left: 0.05em;
    /* Compensates for the added padding to maintain clean gap spacing */
    margin-right: -0.12em; 
}

.event-word-inner {
    display: inline-block;
    will-change: transform;
}

.event-word-inner.evt-plain {
    font-family: "neue-haas-grotesk-display" !important; 
    font-style: normal !important;
    font-weight: 600;
    letter-spacing: 1px;
}

.event-word-inner.evt-serif {
    font-family: "playfair-display" !important; 
    font-style: italic !important; 
    font-weight: 400;
    color: var(--maroon);
    /* Micro-adjusts the Playfair font vertically to line up perfectly with the sans-serif text */
    position: relative;
    top: -0.03em; 
}

.event-hero-subtext {
    margin-top: 1.5rem; /* Standard separation spacing */
    opacity: 0.6;
    font-weight: 500;
    font-size: clamp(.85rem, 1vw, 1rem);
    line-height: 1.4;

    
}
/* Cinematic Cover Setup */
.cinematic-cover-wrapper {
    position: relative;
    /* Crucial: Allows absolute children to align correctly */
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: 24px;
    overflow: hidden;
    /* Clips the extra image bleed */
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .cinematic-cover-wrapper {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 450px) {
    .cinematic-cover-wrapper {
        border-radius: 12px;
    }
}

.cinematic-cover-img {
    position: absolute;
    top: -10%;
    /* Pulls the image up so 10% of the extra bleed is hidden at the top */
    left: 0;
    width: 100%;
    height: 120%;
    /* Makes the image 20% taller than the box */
    object-fit: cover;
    will-change: transform;
}

/* Two Column Presentation Grid */
.event-body-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 8% 6rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

@media (max-width: 992px) {
    .event-body-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.event-meta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding-right: 2rem;
}

@media (max-width: 992px) {
    .event-meta-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-right: 0;
        padding-bottom: 2rem;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 3rem;
    }
}

.meta-item h4 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.meta-item p {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark);
}

.event-description-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 1.15rem;
    line-height: 1.65;
    color: #444;
}

.event-description-content .lead-text {
    font-size: 1.4rem;
    color: var(--dark);
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Smooth Scroll Animation optimization */
.event-meta-sidebar .meta-item,
.event-description-content > *,
.section-divider-title {
    will-change: transform, opacity;
}

/* --- COMPACT HIGH-END PHOTO MOSAIC --- */

.event-gallery-section {
    max-width: 1600px;
    margin: 0 auto;
    padding: 6rem 8% 120px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.section-divider-title {
    margin-bottom: 3rem;
}

.section-divider-title h2 {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 600;
    letter-spacing: 1px;
}

.section-divider-title h2 span {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--maroon);
}

.section-divider-title p {
    opacity: 0.5;
    margin-top: 0.5rem;
}

/* --- STRICT BENTO-BOX PHOTO MOSAIC --- */

/* Mobile First Grid: 1 Column
  Instead of aspect ratios, we set a locked row height.
*/
.modern-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(250px, 60vw, 400px);
    /* Beautifully tall on mobile */
    gap: 0.8rem;
    grid-auto-flow: dense;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--glass);
    border: 1px solid rgba(0, 0, 0, 0.03);
    opacity: 0;
    transform: translateY(40px);

    /* Base unit takes up 1 column and 1 row */
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Forces the image to perfectly fill whatever slot the grid assigns it */
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: zoom-in;
}

.gallery-item:hover img {
    transform: scale(1.03);
}

/* Tablet Grid: 2 Columns 
  We reduce the row height so they remain sleek rectangles.
*/
@media (min-width: 600px) {
    .modern-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(180px, 25vw, 250px);
    }

    /* On tablet, large blocks look great taking up the whole row */
    .gallery-item.item-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item.item-wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item.item-tall {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* Desktop Grid: 4 Columns
  The math here creates the perfect flush rectangle.
*/
@media (min-width: 1024px) {
    .modern-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: clamp(160px, 15vw, 280px);
        /* Locks the height of 1 unit */
    }

    .gallery-item.item-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item.item-wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-item.item-tall {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* --- LIGHTBOX STYLES --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(139, 139, 139, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    display: flex;
    align-items: center;     /* Centers image vertically */
    justify-content: center;  /* Centers image horizontally */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Pulled out of the layout flow so it doesn't push the image down */
.lightbox-close-hint {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Manrope", sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    color: var(--dark);
    pointer-events: none;
    text-align: center;
    width: 100%;
}

.lightbox-img {
    max-width: 90%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    border-radius:8px;
}