/*
|--------------------------------------------------------------------------
| Emmaus Event Popup
|--------------------------------------------------------------------------
| Purpose:
| Presentation and responsive behavior for the homepage event popup.
|
| Features:
| - Floating announcement
| - Top-right positioning
| - Image and PDF.js rendering
| - Mobile portrait and landscape support
| - Compatible with Emmaus 0.4 / 0.8 composition scaling
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Popup
|--------------------------------------------------------------------------
*/

.event-popup {
    position: fixed;

    top: 300px;
    right: 30px;

    z-index: 9999;

    width: 750px;
    max-width: calc(100vw - 40px);

    box-sizing: border-box;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    /*
     * Allow interaction with the homepage
     * outside the actual popup content.
     */
    pointer-events: none;
}


.event-popup.is-hidden {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.event-popup__overlay {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Popup Content
|--------------------------------------------------------------------------
*/

.event-popup__content {
    position: relative;

    width: 100%;
    max-width: 100%;

    max-height: calc(100vh - 40px);

    box-sizing: border-box;

    padding: 5px;

    background: #ffffff;

    border-radius: 10px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.30);

    overflow: auto;

    pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Event Image
|--------------------------------------------------------------------------
*/

.event-popup__image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: calc(100vh - 60px);

    object-fit: contain;

    border-radius: 6px;
}


/*
|--------------------------------------------------------------------------
| PDF.js Container
|--------------------------------------------------------------------------
*/

.event-popup__pdf {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
    max-height: calc(100vh - 100px);

    box-sizing: border-box;

    padding: 4px;

    overflow-x: hidden;
    overflow-y: auto;

    background: #ffffff;

    border-radius: 6px;
}


/*
|--------------------------------------------------------------------------
| PDF.js Pages
|--------------------------------------------------------------------------
*/

.event-popup__pdf-page {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 0 auto 8px;

    background: #ffffff;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15);
}


/*
|--------------------------------------------------------------------------
| PDF Loading Message
|--------------------------------------------------------------------------
*/

.event-popup__pdf-loading {
    padding: 15px;

    text-align: center;

    font-size: 14px;

    color: #444444;
}


/*
|--------------------------------------------------------------------------
| PDF Error Message
|--------------------------------------------------------------------------
*/

.event-popup__pdf-error {
    padding: 15px;

    text-align: center;

    font-size: 14px;

    color: #663333;
}


/*
|--------------------------------------------------------------------------
| Hidden Content
|--------------------------------------------------------------------------
*/

.event-popup__pdf[hidden],
.event-popup__image[hidden] {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Close Button
|--------------------------------------------------------------------------
*/

.event-popup__close {
    position: absolute;

    top: 8px;
    right: 8px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.72);
    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    z-index: 2;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.event-popup__close:hover {
    background: rgba(0, 0, 0, 0.9);

    transform: scale(1.05);
}


.event-popup__close:focus-visible {
    outline: 3px solid var(--accent-color);

    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

    .event-popup {
        transition: none;
    }

    .event-popup__close {
        transition: none;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet and Mobile Portrait
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    body.hp-page .event-popup {
        top: 75px;
        right: 15px;

        width: 400px;
        max-width: calc(100vw - 30px);
    }

    body.hp-page .event-popup__content {
        max-height: calc(100vh - 100px);

        padding: 4px;

        border-radius: 8px;
    }

    body.hp-page .event-popup__image {
        max-height: calc(100vh - 120px);

        border-radius: 5px;
    }

    body.hp-page .event-popup__pdf {
        max-height: calc(100vh - 130px);

        border-radius: 5px;
    }

    body.hp-page .event-popup__close {
        top: 6px;
        right: 6px;

        width: 28px;
        height: 28px;

        font-size: 18px;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile Portrait
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) and (orientation: portrait) {

    body.hp-page .event-popup {
        top: 60px;
        right: 10px;

        width: 300px;
        max-width: calc(100vw - 20px);
    }

    body.hp-page .event-popup__content {
        max-height: calc(100vh - 80px);
    }

    body.hp-page .event-popup__image {
        max-height: calc(100vh - 100px);
    }

    body.hp-page .event-popup__pdf {
        max-height: calc(100vh - 120px);
    }

}


/*
|--------------------------------------------------------------------------
| Mobile and Tablet Landscape
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) and (orientation: landscape) {

    body.hp-page .event-popup {
        top: 10px;
        right: 15px;

        width: 350px;
        max-width: calc(100vw - 30px);
    }

    body.hp-page .event-popup__content {
        max-height: calc(100vh - 20px);

        overflow: auto;
    }

    body.hp-page .event-popup__image {
        width: 100%;
        height: auto;

        max-height: calc(100vh - 40px);

        object-fit: contain;
    }

    body.hp-page .event-popup__pdf {
        max-height: calc(100vh - 60px);
    }

}


/*
|--------------------------------------------------------------------------
| Very Short Landscape Screens
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px)
       and (orientation: landscape)
       and (max-height: 450px) {

    body.hp-page .event-popup {
        top: 5px;
        right: 10px;

        width: 300px;
        max-width: calc(100vw - 20px);
    }

    body.hp-page .event-popup__content {
        max-height: calc(100vh - 10px);

        padding: 3px;
    }

    body.hp-page .event-popup__pdf {
        max-height: calc(100vh - 40px);
    }

    body.hp-page .event-popup__image {
        max-height: calc(100vh - 30px);
    }

}