/* =====================================================================
   SCRIPTORIUM — ILLUMINATED ALIGNMENT FIX + RAIL BACKGROUND v1.3
   ---------------------------------------------------------------------
   Load AFTER:
     illuminated-page-background.css

   This pass focuses only on the remaining right-edge detail:
   - top-right and bottom-right illuminated corners move further RIGHT
   - the right floral band also moves right with them
   - a soft parchment fade is added so the right ornaments do not look
     abruptly chopped
   - left side geometry from v1.2 stays intact
   ===================================================================== */


/* =====================================================================
   1. DESKTOP / LEFT-RAIL LAYOUT
   ===================================================================== */

@media (min-width: 768px) {

    body.design-iluminovana {
        --illum-main-left-edge: 70px;
        --illum-main-right-edge: -28px;
        --illum-main-top-edge: 6px;
        --illum-main-bottom-edge: 8px;
    }

    body.design-iluminovana main#main-content {
        background-position:
            left var(--illum-main-left-edge) top var(--illum-main-top-edge),
            right var(--illum-main-right-edge) top var(--illum-main-top-edge),
            left var(--illum-main-left-edge) bottom var(--illum-main-bottom-edge),
            right var(--illum-main-right-edge) bottom var(--illum-main-bottom-edge),
            right -20px top 58%,
            left 68px top 0,
            center,
            center,
            center,
            center,
            center top !important;
    }

    body.design-iluminovana main#main-content::before {
        left: 76px !important;
    }

    body.design-iluminovana main#main-content::after {
        right: 2px !important;
    }

    body.design-iluminovana main#main-content > .screen.active {
        position: relative;
        isolation: isolate;
    }

    body.design-iluminovana main#main-content > .screen.active::before,
    body.design-iluminovana main#main-content > .screen.active::after {
        content: "";
        position: absolute;
        right: -8px;
        width: 122px;
        pointer-events: none;
        z-index: 0;
    }

    body.design-iluminovana main#main-content > .screen.active::before {
        top: 0;
        height: 120px;
        background:
            linear-gradient(
                180deg,
                rgba(239, 231, 210, .00) 0%,
                rgba(239, 231, 210, .00) 58%,
                rgba(239, 231, 210, .20) 84%,
                rgba(239, 231, 210, .42) 100%
            ),
            linear-gradient(
                270deg,
                rgba(239, 231, 210, .00) 0%,
                rgba(239, 231, 210, .00) 46%,
                rgba(239, 231, 210, .18) 74%,
                rgba(239, 231, 210, .34) 100%
            );
    }

    body.design-iluminovana main#main-content > .screen.active::after {
        bottom: 0;
        height: 138px;
        background:
            linear-gradient(
                0deg,
                rgba(239, 231, 210, .00) 0%,
                rgba(239, 231, 210, .00) 54%,
                rgba(239, 231, 210, .18) 78%,
                rgba(239, 231, 210, .36) 100%
            ),
            linear-gradient(
                270deg,
                rgba(239, 231, 210, .00) 0%,
                rgba(239, 231, 210, .00) 44%,
                rgba(239, 231, 210, .18) 72%,
                rgba(239, 231, 210, .34) 100%
            );
    }

    body.design-iluminovana main#main-content > .screen.active > * {
        position: relative;
        z-index: 1;
    }
}


@media (min-width: 768px) and (max-width: 1199px) {
    body.design-iluminovana {
        --illum-main-right-edge: -26px;
    }

    body.design-iluminovana main#main-content {
        background-position:
            left var(--illum-main-left-edge) top var(--illum-main-top-edge),
            right var(--illum-main-right-edge) top var(--illum-main-top-edge),
            left var(--illum-main-left-edge) bottom var(--illum-main-bottom-edge),
            right var(--illum-main-right-edge) bottom var(--illum-main-bottom-edge),
            right -18px top 58%,
            left 68px top 0,
            center,
            center,
            center,
            center,
            center top !important;
    }
}


@media (min-width: 1200px) {
    body.design-iluminovana {
        --illum-main-left-edge: 72px;
        --illum-main-right-edge: -30px;
        --illum-main-top-edge: 7px;
        --illum-main-bottom-edge: 10px;
    }

    body.design-iluminovana main#main-content::before {
        left: 78px !important;
    }

    body.design-iluminovana main#main-content::after {
        right: 2px !important;
    }

    body.design-iluminovana main#main-content > .screen.active::before,
    body.design-iluminovana main#main-content > .screen.active::after {
        right: -10px;
        width: 128px;
    }
}


@media (max-width: 767px) {
    body.design-iluminovana main#main-content {
        background-position:
            left 10px top 6px,
            right -4px bottom 10px,
            right -18px top 68%,
            center,
            center,
            center,
            center top !important;
    }
}


@media (min-width: 768px) {

    body.design-iluminovana .main-nav {
        background:
            url('/rooms/illum-corner-tl.webp'),
            url('/rooms/illum-corner-bl.webp'),
            url('/rooms/illum-gold-vine.webp'),
            url('/rooms/parchment-texture.webp'),
            radial-gradient(
                ellipse at 46% 18%,
                rgba(126, 78, 39, .05),
                transparent 40%
            ),
            radial-gradient(
                ellipse at 34% 82%,
                rgba(96, 58, 31, .045),
                transparent 36%
            ),
            linear-gradient(
                180deg,
                rgba(255,250,233,.16) 0%,
                rgba(255,250,233,.05) 28%,
                rgba(118,77,36,.03) 100%
            ),
            linear-gradient(
                180deg,
                #d7c08a 0%,
                #cab078 38%,
                #d4bc86 67%,
                #bda16a 100%
            ) !important;

        background-repeat:
            no-repeat,
            no-repeat,
            repeat-y,
            repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat !important;

        background-position:
            left -6px top -2px,
            left -4px bottom 6px,
            left -10px top 0,
            center top,
            center,
            center,
            center,
            center !important;

        background-size:
            82px auto,
            84px auto,
            28px auto,
            360px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100% !important;
    }
}


@media (max-width: 767px) {
    body.design-iluminovana .main-nav {
        background:
            linear-gradient(
                180deg,
                rgba(196, 154, 70, .30) 0 2px,
                transparent 2px 5px
            ),
            url('/rooms/parchment-texture.webp'),
            linear-gradient(
                180deg,
                #d8c28d 0%,
                #c9ad72 100%
            ) !important;

        background-repeat:
            no-repeat,
            repeat,
            no-repeat !important;

        background-position:
            center,
            center top,
            center !important;

        background-size:
            100% 100%,
            300px auto,
            100% 100% !important;
    }
}


body.design-iluminovana .main-nav,
body.design-iluminovana main#main-content {
    background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana .main-nav,
    body.design-iluminovana main#main-content,
    body.design-iluminovana main#main-content::before,
    body.design-iluminovana main#main-content::after,
    body.design-iluminovana main#main-content > .screen.active::before,
    body.design-iluminovana main#main-content > .screen.active::after {
        transition: none !important;
    }
}