/* =========================================================
   ELECTROMATIONS HOME MAGAZINE
   File: public/assets/css/custom/home-magazine.css
   ========================================================= */

.em-magazine-home {
    --em-paper: #fffefa;

    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 8px 18px 4px;
    overflow: clip;
    box-sizing: border-box;

    background:
        linear-gradient(
            rgba(238, 243, 247, .48),
            rgba(238, 243, 247, .58)
        ),
        url('/assets/img/home-magazine-bg.png')
            center center / cover no-repeat,
        #edf2f6;
}

.em-magazine-home *,
.em-magazine-home *::before,
.em-magazine-home *::after {
    box-sizing: border-box;
}

/* ---------- Book stage ---------- */

.em-magazine-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1600px;
    min-width: 0;

    margin: 0 auto;
    padding: 0 48px 5px;
    overflow: visible;
}

/* ---------- Book shell ---------- */

.em-book-shell {
    position: relative;
    isolation: isolate;
    z-index: 1;

    width: 100%;
    max-width: 1200px;
    min-width: 0;

    margin: 0 auto;

    perspective: 2200px;
    transform-style: preserve-3d;

    filter: drop-shadow(
        0 12px 14px rgba(20, 34, 47, .13)
    );
}

#emMagazineBook {
    position: relative;
    z-index: 1;

    width: 100%;
    margin: 0 auto;

    transform-style: preserve-3d;
}

#emMagazineBook .stf__parent {
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    filter: drop-shadow(0 3px 3px rgba(14, 28, 42, .12));
}

/* ---------- Individual pages ---------- */

.em-mag-page {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;
    min-width: 0;

    overflow: hidden;
    padding: 0;

    border: 1px solid #d4cec2;
    background: var(--em-paper);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.em-image-page {
    background: var(--em-paper);
}

/* Images fill their pages without adding extra elements */

.em-magazine-page-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Empty pages prepared for future images */

.em-blank-page {
    background:
        linear-gradient(
            90deg,
            rgba(26, 39, 50, .045),
            transparent 8%,
            transparent 92%,
            rgba(26, 39, 50, .035)
        ),
        #fffefa;
}

/* Keep page surfaces consistent */

#emMagazineBook .stf__item {
    background: #fffefa;
}

/* ---------- Subtle center fold on desktop ---------- */

@media (min-width: 1025px) {
    #emMagazineBook .stf__parent::after {
        content: "";

        position: absolute;
        z-index: 20;

        top: 0;
        bottom: 0;
        left: 50%;

        width: 34px;

        pointer-events: none;
        transform: translateX(-50%);

        background: linear-gradient(
            90deg,
            rgba(20, 30, 39, .10),
            rgba(255, 255, 255, .16) 42%,
            rgba(20, 30, 39, .07) 70%,
            transparent
        );
    }
}

/* ---------- Previous / next buttons ---------- */

.em-book-control {
    position: absolute;
    top: 50%;
    z-index: 30;

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

    width: 38px;
    height: 52px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(125, 143, 157, .3);
    border-radius: 5px;

    color: #365268;
    background: rgba(255, 255, 255, .92);

    box-shadow:
        0 5px 15px rgba(25, 43, 59, .10);

    font-size: 20px;
    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.em-book-prev {
    left: 0;
}

.em-book-next {
    right: 0;
}

.em-book-control:hover {
    color: #fff;
    background: #176b9e;

    box-shadow:
        0 7px 18px rgba(25, 43, 59, .16);
}

.em-book-control:focus-visible {
    outline: 3px solid rgba(34, 184, 199, .45);
    outline-offset: 3px;
}

/* ---------- Tablets ---------- */

@media (min-width: 561px) and (max-width: 1024px) {
    .em-magazine-home {
        padding: 8px 8px 3px;
    }

    .em-magazine-stage {
        padding: 0 40px 3px;
    }

    .em-book-shell {
        max-width: 760px;
    }

    #emMagazineBook .stf__parent::after {
        display: none !important;
    }

    .em-book-control {
        width: 34px;
        height: 44px;
    }
}

/* ---------- Phones ---------- */

@media (max-width: 560px) {
    .em-magazine-home {
        padding: 6px 0 2px;
        overflow: clip;

        background:
            linear-gradient(
                rgba(238, 243, 247, .48),
                rgba(238, 243, 247, .58)
            ),
            url('/assets/img/home-magazine-bg.png')
                center top / cover no-repeat,
            #edf2f6;
    }

    .em-magazine-stage {
        padding: 0 34px 2px;
    }

    .em-book-shell {
        width: 100%;
        max-width: 320px;

        filter: drop-shadow(
            0 10px 12px rgba(20, 34, 47, .16)
        );
    }

    #emMagazineBook .stf__parent::after {
        display: none !important;
    }

    .em-book-control {
        width: 30px;
        height: 40px;

        border-radius: 8px;
        font-size: 17px;
    }

    .em-book-prev {
        left: 1px;
    }

    .em-book-next {
        right: 1px;
    }
}

/* ---------- Very narrow phones ---------- */

@media (max-width: 360px) {
    .em-magazine-stage {
        padding-right: 30px;
        padding-left: 30px;
    }

    .em-book-shell {
        max-width: 300px;
    }

    .em-book-control {
        width: 27px;
        height: 36px;
        font-size: 15px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .em-magazine-home *,
    .em-magazine-home *::before,
    .em-magazine-home *::after {
        transition-duration: .01ms !important;
    }
}