/* =====================================================================
   SCRIPTORIUM — ILLUMINATED MOBILE RESPONSIVE FIX v1
   ---------------------------------------------------------------------
   Load AFTER:
     illuminated-scribal-traces.css

   Purpose:
   - do NOT touch the already-good desktop / wide-tablet layout
   - fix the illuminated page edges on smaller displays
   - make the manuscript corners align to the real visible mobile page
   - keep bottom ornaments clear of the mobile dock
   ===================================================================== */


/* =====================================================================
   1. MOBILE / SMALL DISPLAY PAGE GEOMETRY
   ===================================================================== */

@media (max-width: 767px) {

    body.design-iluminovana {
        --illum-mobile-left-edge: 4px;
        --illum-mobile-right-edge: -4px;
        --illum-mobile-top-edge: 4px;
        --illum-mobile-bottom-edge: calc(74px + env(safe-area-inset-bottom));
    }

    body.design-iluminovana main#main-content {
        /*
           Rebuild the mobile page ornament layout explicitly so it does
           not inherit desktop-ish edge logic.
        */
        background-image:
            /* top-left */
            url('/rooms/illum-corner-tl.webp'),

            /* top-right */
            url('/rooms/illum-corner-tr.webp'),

            /* bottom-left (kept above bottom dock) */
            url('/rooms/illum-corner-bl.webp'),

            /* bottom-right (kept above bottom dock) */
            url('/rooms/illum-corner-br.webp'),

            /* soft right-side floral marginalia */
            url('/rooms/illum-floral-spray.webp'),

            /* subtle age stain */
            radial-gradient(
                ellipse at 78% 30%,
                rgba(116, 72, 37, .060) 0%,
                rgba(116, 72, 37, .025) 18%,
                transparent 39%
            ),

            /* faint diagonal parchment shift */
            linear-gradient(
                155deg,
                rgba(255,248,220,.12) 0%,
                rgba(255,248,220,.07) 45%,
                rgba(113, 72, 37, .032) 45.4%,
                transparent 46%
            ),

            /* edge age */
            linear-gradient(
                90deg,
                rgba(80, 44, 22, .040),
                transparent 7%,
                transparent 94%,
                rgba(80, 44, 22, .038)
            ),

            /* base paper */
            url('/rooms/parchment-texture.webp') !important;

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

        background-position:
            left var(--illum-mobile-left-edge) top var(--illum-mobile-top-edge),
            right var(--illum-mobile-right-edge) top var(--illum-mobile-top-edge),
            left var(--illum-mobile-left-edge) bottom var(--illum-mobile-bottom-edge),
            right var(--illum-mobile-right-edge) bottom var(--illum-mobile-bottom-edge),
            right -18px top 68%,
            center,
            center,
            center,
            center top !important;

        background-size:
            78px auto,
            74px auto,
            72px auto,
            76px auto,
            116px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            430px auto !important;
    }

    /* Page rules align to the mobile manuscript window. */
    body.design-iluminovana main#main-content::before {
        left: 4px !important;
        top: 10px;
        bottom: calc(86px + env(safe-area-inset-bottom));
        opacity: .44;
    }

    body.design-iluminovana main#main-content::after {
        right: 4px !important;
        top: 24px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        opacity: .34;
    }
}


/* =====================================================================
   2. NARROW PHONES
   A little less ornament, slightly tighter fitting.
   ===================================================================== */

@media (max-width: 520px) {

    body.design-iluminovana {
        --illum-mobile-left-edge: 2px;
        --illum-mobile-right-edge: -2px;
        --illum-mobile-top-edge: 3px;
        --illum-mobile-bottom-edge: calc(72px + env(safe-area-inset-bottom));
    }

    body.design-iluminovana main#main-content {
        background-position:
            left var(--illum-mobile-left-edge) top var(--illum-mobile-top-edge),
            right var(--illum-mobile-right-edge) top var(--illum-mobile-top-edge),
            left var(--illum-mobile-left-edge) bottom var(--illum-mobile-bottom-edge),
            right var(--illum-mobile-right-edge) bottom var(--illum-mobile-bottom-edge),
            right -22px top 69%,
            center,
            center,
            center,
            center top !important;

        background-size:
            68px auto,
            66px auto,
            64px auto,
            68px auto,
            106px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            390px auto !important;
    }

    body.design-iluminovana main#main-content::before {
        left: 3px !important;
        bottom: calc(84px + env(safe-area-inset-bottom));
    }

    body.design-iluminovana main#main-content::after {
        right: 3px !important;
        bottom: calc(86px + env(safe-area-inset-bottom));
    }

    /* Tone down scribal traces slightly on the smallest screens. */
    body.design-iluminovana main#main-content > .screen.active > .screen-header-row::before {
        opacity: .48;
    }

    body.design-iluminovana main#main-content > .screen.active > .filter-bar:first-of-type::before,
    body.design-iluminovana main#main-content > .screen.active > .filter-bar:first-of-type::after {
        opacity: .58;
    }
}


/* =====================================================================
   3. SHORT LANDSCAPE PHONES / SMALL TABLETS
   Still under desktop threshold, but with more horizontal room.
   ===================================================================== */

@media (min-width: 521px) and (max-width: 767px) {

    body.design-iluminovana main#main-content {
        background-size:
            82px auto,
            78px auto,
            74px auto,
            80px auto,
            122px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            470px auto !important;
    }
}


/* =====================================================================
   4. ACCESSIBILITY
   ===================================================================== */

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