/* ============================================================
Project : Compro Doodle
Module  : Page
File    : event.css
Version : 1.0.0
Author  : Doodle Engineering
============================================================ */


/* ============================================================
   EVENT PAGE
============================================================ */

.event-page{

    width:100%;

    background:
        var(--color-background);

}


/* ============================================================
   EVENT CONTAINER
============================================================ */

.event-container{

    width:100%;

    max-width:
        var(--container-xl);

    margin-inline:auto;

    padding-inline:
        var(--space-24);

}


/* ============================================================
   EVENT HEADER
============================================================ */

.event-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    padding-top:
        var(--space-64);

    padding-bottom:
        var(--space-48);

    text-align:center;

}


/* ============================================================
   EVENT EYEBROW
============================================================ */

.event-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:
        var(--space-32);

    padding-inline:
        var(--space-16);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-accent-gold-light);

    color:
        var(--color-accent-gold);

    font-size:
        var(--font-xs);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

    letter-spacing:
        var(--tracking-wide);

    text-transform:
        uppercase;

}


/* ============================================================
   EVENT TITLE
============================================================ */

.event-title{

    margin:
        var(--space-16)
        0
        var(--space-8);

    color:
        var(--color-text);

    font-size:
        var(--font-4xl);

    font-weight:
        var(--font-bold);

    line-height:
        var(--line-tight);

}


/* ============================================================
   EVENT SUBTITLE
============================================================ */

.event-subtitle{

    max-width:
        var(--container-md);

    margin:0;

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-md);

    font-weight:
        var(--font-regular);

    line-height:
        var(--line-relaxed);

}


/* ============================================================
   EVENT GALLERY
============================================================ */

.event-gallery{

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-24);

    padding-bottom:
        var(--space-96);

}


/* ============================================================
   EVENT GALLERY ITEM
============================================================ */

.event-gallery-item{

    position:relative;

    width:100%;

    aspect-ratio:
        4 / 3;

    margin:0;

    overflow:hidden;

    border-radius:
        var(--radius-lg);

    background:
        var(--color-surface-alt);

    box-shadow:
        var(--shadow-sm);

}


/* ============================================================
   EVENT GALLERY IMAGE
============================================================ */

.event-gallery-item img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform var(--transition-normal);

}


/* ============================================================
   EVENT GALLERY TRIGGER
============================================================ */

.event-gallery-trigger {

    display:block;

    width:100%;

    height:100%;

    padding:0;

    border:0;

    margin:0;

    background:transparent;

    cursor:pointer;

    color:inherit;

    font:inherit;

    text-align:inherit;

}

.event-gallery-trigger:focus-visible {

    outline:
        var(--border-width-normal)
        solid
        var(--color-primary);

    outline-offset:
        var(--space-4);

}


/* ============================================================
   EVENT LIGHTBOX
============================================================ */

.event-lightbox {

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        var(--space-24);

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);

    z-index:var(--z-modal);

}

.event-lightbox.is-open {

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}


/* ============================================================
   LIGHTBOX BACKDROP
============================================================ */

.event-lightbox-backdrop {

    position:absolute;

    inset:0;

    background:
        color-mix(
            in srgb,
            var(--color-text) 92%,
            transparent
        );

}


/* ============================================================
   LIGHTBOX DIALOG
============================================================ */

.event-lightbox-dialog {

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:
        var(--container-xl);

    max-height:100%;

    z-index:1;

}


/* ============================================================
   LIGHTBOX IMAGE
============================================================ */

.event-lightbox-image {

    display:block;

    width:auto;

    max-width:100%;

    height:auto;

    max-height:
        calc(100vh - (var(--space-48) * 2));

    object-fit:contain;

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-md);

}


/* ============================================================
   LIGHTBOX CLOSE BUTTON
============================================================ */

.event-lightbox-close {

    position:absolute;

    top:
        calc(var(--space-16) * -1);

    right:
        calc(var(--space-16) * -1);

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        var(--space-48);

    height:
        var(--space-48);

    padding:0;

    border:
        var(--border-width-normal)
        solid
        var(--color-surface);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font-size:
        var(--font-2xl);

    line-height:1;

    cursor:pointer;

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        background-color var(--transition-normal);

}

.event-lightbox-close:hover {

    transform:
        scale(1.04);

}

.event-lightbox-close:focus-visible {

    outline:
        var(--border-width-normal)
        solid
        var(--color-primary);

    outline-offset:
        var(--space-4);

}


/* ============================================================
   BODY LOCK
============================================================ */

body.event-lightbox-open {

    overflow:hidden;

}


/* ============================================================
   LIGHTBOX MOBILE
============================================================ */

@media (max-width: 767px) {

    .event-lightbox {

        padding:
            var(--space-16);

    }

    .event-lightbox-image {

        max-height:
            calc(100vh - (var(--space-32) * 2));

        border-radius:
            var(--radius-md);

    }

    .event-lightbox-close {

        top:
            var(--space-8);

        right:
            var(--space-8);

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .event-lightbox {

        transition:none;

    }

    .event-lightbox-close {

        transition:none;

    }

}


/* ============================================================
   EVENT GALLERY HOVER
============================================================ */

@media (hover:hover){

    .event-gallery-item{

        transition:
            box-shadow var(--transition-normal),
            transform var(--transition-normal);

    }

    .event-gallery-item:hover{

        transform:
            translateY(calc(var(--space-4) * -1));

        box-shadow:
            var(--shadow-md);

    }

    .event-gallery-item:hover img{

        transform:
            scale(1.02);

    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.event-gallery-item:focus-within{

    outline:
        var(--border-width-normal)
        solid
        var(--color-primary);

    outline-offset:
        var(--space-4);

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px){

    .event-container{

        padding-inline:
            var(--space-16);

    }

    .event-gallery{

        gap:
            var(--space-16);

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px){

    .event-container{

        padding-inline:
            var(--space-16);

    }

    .event-header{

        padding-top:
            var(--space-48);

        padding-bottom:
            var(--space-32);

    }

    .event-title{

        margin-top:
            var(--space-12);

        font-size:
            var(--font-3xl);

    }

    .event-subtitle{

        font-size:
            var(--font-sm);

    }

    .event-gallery{

        grid-template-columns:
            1fr;

        gap:
            var(--space-16);

        padding-bottom:
            var(--space-64);

    }

    .event-gallery-item{

        aspect-ratio:
            4 / 3;

        border-radius:
            var(--radius-md);

    }

}