/* ============================================================
   PEARL RIVERA — E-Brochure Page
   ============================================================ */

/* ---- Page layout ---- */
.brochure-page {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #fff;
}

.brochure-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.brochure-wave {
    position: absolute;
    bottom: 250px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    display: block;
}

.brochure-icons-row {
    position: absolute;
    bottom: 250px;
    left: 0;
    right: 0;
    margin: 0 40px;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
}

.brochure-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.brochure-icon-wrap--md {
    flex: 1;
    max-width: 280px;
    width: 18%;
    align-self: flex-start;
    margin-top: 75px;
}
.brochure-icon-wrap--lg {
    flex: 1.5;
    max-width: 420px;
    width: 28%;
    margin-bottom: 130px;
}
.brochure-icon-wrap--xl {
    flex: 3;
    max-width: calc(100dvh - 300px);
    width: 54%;
}

.brochure-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    transition: opacity var(--transition-base);
}

.brochure-icon--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.brochure-icon-wrap {
    cursor: pointer;
}

.brochure-icon-wrap:hover .brochure-icon {
    animation: brochure-bounce 0.4s ease-out;
}

@keyframes brochure-bounce {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.92);
    }
    60% {
        transform: scale(1.06);
    }
    80% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

.brochure-icon-wrap:hover .brochure-icon--hover {
    opacity: 1;
}

.brochure-icon-wrap:hover .brochure-icon--normal {
    opacity: 0;
}

/* ============================================================
   Modal + Flipbook
   ============================================================ */

.brochure-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* The nav bar is absolutely positioned at `bottom: 10px`, so it
       doesn't claim any flow space. Reserve a vertical band for it via
       padding-bottom so the centered wrap + bottom-anchored nav form a
       visually balanced unit (the wrap sits roughly at the optical
       center of the area above the nav bar). The padding also collapses
       the available height for the wrap via its own max-height. */
    padding-bottom: 80px;
    box-sizing: border-box;
}

.brochure-modal[hidden] {
    display: none;
}

.brochure-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 0;
}

.brochure-modal__close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.brochure-modal__close:hover {
    background: rgba(0, 0, 0, 0.65);
}

.brochure-modal__close:focus-visible {
    outline: 2px solid #fadca5;
    outline-offset: 2px;
}

/* book-wrap fills available space with aspect-ratio kept (landscape spread).
   The modal is a flex container with justify-content/align-items: center,
   so this wrap ends up centered in the modal automatically. */
.brochure-modal__book-wrap {
    position: relative;
    z-index: 1;
    width: min(1600px, calc(100vw - 8px), calc((100dvh - 60px) * 1000 / 500));
    height: min(calc(100dvh - 60px), calc((100vw - 8px) * 500 / 1000));
    max-height: calc(100dvh - 60px);
    max-width: min(1600px, calc(100vw - 8px));
    border-radius: 0px;
    margin: auto;
    align-content: center;
}

/* StPageFlip turns the host into position:absolute and sets inline
   width/height. Horizontally center it inside the wrap (the wrap itself
   is already centered in the modal by flex). */
.brochure-modal__book.stf__parent,
.stf__parent {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

.brochure-modal__book {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.brochure-modal__book .page {
    width: 100%;
    height: 100%;
    background: #ffffff;
}

.brochure-modal__book-wrap--gallery {
    /* Gallery viewers carry pre-sized raster images at ~1.534:1. We
       compute the largest box that fits the viewport AND keeps the
       image's aspect ratio, so the WHOLE image is visible without
       cropping. Width and height formulas mirror each other through
       the ratio 800:525, which approximates the real image ratio
       (2048:1335) closely enough for any viewport size. The background
       is black so any letterbox pixels (from object-fit: contain when
       the wrap and image ratios drift by subpixel) blend with the
       image's own black border. */
    width: min(1400px, calc(100vw - 32px), calc((100dvh - 160px) * 800 / 525));
    height: min(calc(100dvh - 160px), calc((100vw - 32px) * 525 / 800));
    max-width: min(1400px, calc(100vw - 32px));
    max-height: calc(100dvh - 160px);
    background: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brochure-modal__book-wrap--gallery .brochure-modal__book,
.brochure-modal__book-wrap--gallery .stf__parent {
    /* In gallery mode the book host fills its wrap so the <img> at
       100% of the host renders the full raster. Without the wrap
       being definitively sized (which the min() formula guarantees)
       the chain would collapse to 0.
       NOTE: we deliberately do NOT set border-radius or overflow:hidden
       here. The wrap already clips with border-radius:10px;overflow:hidden,
       and stacking another rounded clip at the host level causes the
       corners to misalign (one side looks "bitten off") because the
       inner radius is computed against a smaller box and doesn't sit
       flush with the wrap's radius under subpixel transform/flex. */
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.brochure-modal__gallery-img {
    /* Inside the gallery wrap the <img> fills the wrap completely and
       lets object-fit handle the actual raster. Since the wrap is
       already sized to the image's aspect ratio via min(..., ratio),
       100% fill renders the whole image without crop or letterbox.
       The wrap clips with its own border-radius:10px;overflow:hidden,
       so the img itself stays radius:0 to avoid double-rounded corners
       that would visibly "bite" under subpixel rendering. */
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
    user-select: none;
    -webkit-user-drag: none;
    animation: brochureGalleryFadeIn 0.25s ease;
}

@keyframes brochureGalleryFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.brochure-modal__book .page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    user-select: none;
    -webkit-user-drag: none;
}

/* Keep StPageFlip parent centered (it is position:absolute inside the
   relative wrap, and flex centering on the wrap does not affect it). */
.brochure-modal__book.stf__parent,
.stf__parent {
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
}

.brochure-modal__nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.brochure-modal__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.brochure-modal__btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.3px;
    transition: background 0.15s ease;
}

.brochure-modal__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.18);
}

.brochure-modal__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.brochure-modal__btn:focus-visible,
.brochure-modal__page-input:focus-visible {
    outline: 2px solid #fadca5;
    outline-offset: 2px;
}

.brochure-modal__page-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
}

.brochure-modal__page-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.brochure-modal__page-input {
    width: 40px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.brochure-modal__page-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.brochure-modal__noscript {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — icons */
@media (max-width: 1024px) {
    .brochure-icons-row {
        margin: 0 20px;
        bottom: 45%;
    }

    .brochure-wave {
        bottom: calc(45% + 50px);
    }

    .brochure-icon-wrap--lg {
        margin-bottom: 30px;
    }

    .brochure-icon-wrap--md {
        margin-top: 30px;
    }
}

/* Mobile — modal */
@media (max-width: 768px) {
    .brochure-modal__book-wrap {
        width: calc(100vw - 8px);
        height: calc((100vw - 8px) * 500 / 1000);
    }

    .brochure-modal__book-wrap--gallery {
        width: calc(100vw - 16px);
        height: calc((100vw - 16px) * 525 / 800);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 160px);
    }

    .brochure-modal__book.stf__parent,
    .stf__parent,
    #brochureModalBook.stf__parent {
        min-width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        width: calc(100vw - 8px) !important;
        min-height: 0 !important;
        max-height: calc((100vw - 8px) * 500 / 1000) !important;
        height: calc((100vw - 8px) * 500 / 1000) !important;
        margin: 0 auto !important;
        left: -4px !important;
        right: 0 !important;
    }

    .brochure-modal__close {
        top: 10px;
        right: 14px;
    }

    .brochure-modal__nav {
        bottom: 8px;
    }

    .brochure-modal__controls {
        gap: 4px;
        padding: 5px 8px;
    }

    .brochure-modal__page-form {
        padding: 0 6px;
        gap: 4px;
    }

    .brochure-modal__page-label {
        display: none;
    }

    .brochure-modal__page-input {
        width: 34px;
    }

    .brochure-modal__btn {
        padding: 0 6px;
        font-size: 10px;
    }
}

@media (max-width: 520px) {
    .brochure-modal__controls {
        width: auto;
    }

    .brochure-modal__page-form {
        flex: 0 0 auto;
    }
}