/* =====================================================================
   SCRIPTORIUM — ILLUMINATED MAJOR VIGNETTE v1.1
   ---------------------------------------------------------------------
   Reusable visual layer for REAL major tabs/subtabs.

   Pilot locations:
   - Pracovna -> Cellarium
   - Pracovna -> Athanor
   - Zahrada -> Dvůr
   - Scriptorium -> Opisování rukopisů
   - Knihovna -> Knihy

   This stylesheet assumes:
   - illuminated.css
   - illuminated-foundation.css
   - illuminated-room-hero.css
   - illuminated-responsive-polish.css

   Presentation only. No JS, state, routing or gameplay changes.
   ===================================================================== */

body.design-iluminovana {
    --illum-vignette-h-wide: 174px;
    --illum-vignette-h-mid: 150px;
    --illum-vignette-h-phone: 108px;
    --illum-vignette-border: rgba(175, 132, 62, .70);
    --illum-vignette-border-soft: rgba(175, 132, 62, .32);
}

/* ---------------------------------------------------------------------
   Core component
   --------------------------------------------------------------------- */

body.design-iluminovana .illum-major-vignette {
    position: relative;
    isolation: isolate;
}

body.design-iluminovana .illum-major-vignette::before {
    content: "";
    display: block;

    width: 100%;
    height: var(--illum-vignette-h-wide);

    box-sizing: border-box;
    margin: 2px 0 15px;

    border:
        1px
        solid
        var(--illum-vignette-border);

    border-radius: 3px;

    background-image:
        linear-gradient(
            180deg,
            rgba(20, 12, 7, .02) 0%,
            rgba(20, 12, 7, 0) 46%,
            color-mix(in srgb, var(--bg-parchment) 10%, transparent) 68%,
            color-mix(in srgb, var(--bg-parchment) 56%, transparent) 86%,
            var(--bg-parchment) 100%
        ),
        linear-gradient(
            90deg,
            rgba(19, 11, 6, .11) 0%,
            rgba(19, 11, 6, 0) 24%,
            rgba(19, 11, 6, 0) 76%,
            rgba(19, 11, 6, .08) 100%
        ),
        var(--illum-vignette-image);

    background-repeat: no-repeat;
    background-size: cover;
    background-position:
        center,
        center,
        var(--illum-vignette-position, center center);

    box-shadow:
        inset 0 0 0 3px rgba(249, 230, 182, .05),
        inset 0 -15px 22px
            color-mix(in srgb, var(--bg-parchment) 42%, transparent),
        0 3px 8px rgba(27, 15, 8, .10);

    pointer-events: none;
}

/* Small illuminated corner marks. */
body.design-iluminovana .illum-major-vignette::after {
    content: "❧";
    position: absolute;

    top: 8px;
    right: 12px;

    z-index: 1;

    color: rgba(205, 164, 83, .74);
    font-family: Georgia, serif;
    font-size: 1.18rem;
    line-height: 1;

    text-shadow:
        0 1px 0 rgba(255,255,255,.15),
        0 1px 2px rgba(37,19,9,.20);

    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Asset mapping
   --------------------------------------------------------------------- */

body.design-iluminovana [data-illum-vignette="cellarium"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/cellarium.webp");
    --illum-vignette-position: center 61%;
}

body.design-iluminovana [data-illum-vignette="athanor"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/athanor.webp");
    --illum-vignette-position: center 58%;
}


body.design-iluminovana [data-illum-vignette="saeculum"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/saeculum.webp");
    --illum-vignette-position: center center;
}


body.design-iluminovana [data-illum-vignette="foculus"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/foculus.webp");
    --illum-vignette-position: center center;
}


body.design-iluminovana [data-illum-vignette="templum"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/templum.webp");
    --illum-vignette-position: center center;
}


body.design-iluminovana [data-illum-vignette="infirmarium"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/infirmarium.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="dvur"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/dvur.webp");
    --illum-vignette-position: center center;
}


body.design-iluminovana [data-illum-vignette="zahony"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/zahony.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="sad"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/sad.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="apiarium"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/apiarium.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="piscina"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/piscina.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="pole"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/pole.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="vinohrad"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/vinohrad.webp");
    --illum-vignette-position: center center;
}

/* ---------------------------------------------------------------------
   Artwork Pack 03 — Scriptorium major vignettes
   Consolidated hotfix: restores all approved L1 artwork hooks.
   --------------------------------------------------------------------- */

body.design-iluminovana [data-illum-vignette="research"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/research.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="tasks"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/denni-rad.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="codex"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/codex.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="notebooks"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/zapisniky.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="calendarium"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/calendarium.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="persona"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/persona.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="porta"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/porta.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="commitments"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/zakazky.webp");
    --illum-vignette-position: center center;
}

body.design-iluminovana [data-illum-vignette="opisovani"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/opisovani.webp");
    --illum-vignette-position: center 52%;
}

body.design-iluminovana [data-illum-vignette="knihy"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/knihy.webp");
    --illum-vignette-position: center 54%;
}

body.design-iluminovana [data-illum-vignette="iching"] {
    --illum-vignette-image:
        url("/ui/illuminated/vignettes/iching.webp");
    --illum-vignette-position: center center;
}

/* ---------------------------------------------------------------------
   Scriptorium Pack 03 layout
   --------------------------------------------------------------------- */
body.design-iluminovana #screen-lore #lore-content-wrapper > .illum-major-vignette {
    margin-top: 8px !important;
}

/* Výzkum is an existing desktop CSS grid. Keep the headline above all cards. */
@media (min-width: 768px) {
    body.design-iluminovana #lore-research-content.illum-major-vignette::before {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
}


/* ---------------------------------------------------------------------
   Opisování already has rich artwork deeper in the screen.
   Keep its headline vignette calmer so the page does not repeat itself.
   --------------------------------------------------------------------- */

body.design-iluminovana [data-illum-vignette="opisovani"]::before {
    height: 142px;
    margin-bottom: 11px;
    opacity: .93;
}


/* ---------------------------------------------------------------------
   Medium layouts
   --------------------------------------------------------------------- */

@media (min-width: 601px) and (max-width: 1199px) {

    body.design-iluminovana .illum-major-vignette::before {
        height: var(--illum-vignette-h-mid);
        margin-bottom: 13px;
    }

    body.design-iluminovana [data-illum-vignette="opisovani"]::before {
        height: 132px;
    }
}


/* ---------------------------------------------------------------------
   Portrait / phone
   Deliberately short: this is a headline vignette, NOT a second hero.
   --------------------------------------------------------------------- */

@media (max-width: 600px) {

    body.design-iluminovana .illum-major-vignette::before {
        height: var(--illum-vignette-h-phone);

        margin:
            0
            0
            10px;

        border-left-color: var(--illum-vignette-border-soft);
        border-right-color: var(--illum-vignette-border-soft);

        background-image:
            linear-gradient(
                180deg,
                rgba(20, 12, 7, .01) 0%,
                rgba(20, 12, 7, 0) 42%,
                color-mix(in srgb, var(--bg-parchment) 16%, transparent) 68%,
                color-mix(in srgb, var(--bg-parchment) 66%, transparent) 88%,
                var(--bg-parchment) 100%
            ),
            var(--illum-vignette-image);

        box-shadow:
            inset 0 0 0 2px rgba(249, 230, 182, .04),
            0 2px 5px rgba(27, 15, 8, .08);
    }

    body.design-iluminovana .illum-major-vignette::after {
        top: 6px;
        right: 9px;
        font-size: 1rem;
        opacity: .76;
    }

    body.design-iluminovana [data-illum-vignette="cellarium"] {
        --illum-vignette-position: center 64%;
    }

    body.design-iluminovana [data-illum-vignette="athanor"] {
        --illum-vignette-position: center 60%;
    }


    body.design-iluminovana [data-illum-vignette="saeculum"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/saeculum-mobile.webp");
        --illum-vignette-position: center center;
    }


    body.design-iluminovana [data-illum-vignette="foculus"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/foculus-mobile.webp");
        --illum-vignette-position: center center;
    }


    body.design-iluminovana [data-illum-vignette="templum"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/templum-mobile.webp");
        --illum-vignette-position: center center;
    }


    body.design-iluminovana [data-illum-vignette="infirmarium"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/infirmarium-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="dvur"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/dvur-mobile.webp");
        --illum-vignette-position: center center;
    }


    body.design-iluminovana [data-illum-vignette="zahony"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/zahony-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="sad"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/sad-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="apiarium"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/apiarium-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="piscina"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/piscina-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="pole"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/pole-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="vinohrad"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/vinohrad-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="research"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/research-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="tasks"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/denni-rad-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="codex"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/codex-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="notebooks"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/zapisniky-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="calendarium"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/calendarium-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="persona"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/persona-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="porta"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/porta-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="commitments"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/zakazky-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="iching"] {
        --illum-vignette-image:
            url("/ui/illuminated/vignettes/iching-mobile.webp");
        --illum-vignette-position: center center;
    }

    body.design-iluminovana [data-illum-vignette="opisovani"]::before {
        height: 98px;
    }

    body.design-iluminovana [data-illum-vignette="knihy"] {
        --illum-vignette-position: center 53%;
    }
}


/* ---------------------------------------------------------------------
   Very small displays
   --------------------------------------------------------------------- */

@media (max-width: 360px) {

    body.design-iluminovana {
        --illum-vignette-h-phone: 92px;
    }

    body.design-iluminovana [data-illum-vignette="opisovani"]::before {
        height: 88px;
    }
}


/* ---------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana .illum-major-vignette::before {
        transition: none !important;
    }
}

/* =====================================================================
   SCRIPTORIUM — LEGACY ROOT HERO NEUTRALIZATION
   Pack 03 uses per-tab vignettes instead of the obsolete Scriptorium
   root hero. Scoped to #screen-lore only.
   ===================================================================== */

body.design-iluminovana #screen-lore:not(.illum-room--hero-ready)::before,
body.design-iluminovana #screen-lore:not(.illum-room--hero-ready)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.design-iluminovana #screen-lore:not(.illum-room--hero-ready)
    > .screen-header-row {
    min-height: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

body.design-iluminovana #screen-lore:not(.illum-room--hero-ready)
    > .screen-header-row::before {
    content: none !important;
    display: none !important;
}

body.design-iluminovana #screen-lore:not(.illum-room--hero-ready)
    > .screen-header-row h2 {
    color: var(--ink-primary) !important;
    font-size: 1.5em !important;
    letter-spacing: .02em !important;
    text-shadow: none !important;
}