/* ==========================================================
   SAGE MUSEUM CARD — FINAL EXHIBIT POLISH V5
   Real Museum source remains untouched.
   Left: framed artifact
   Right: museum placard
   ========================================================== */


.feature-panel[data-panel-id="museum"] {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 41%)
        minmax(0, 59%) !important;

    gap:
        10px !important;

    width:
        100% !important;

    height:
        100% !important;

    padding:
        7px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            145deg,
            #090b0e 0%,
            #030405 52%,
            #080a0d 100%
        ) !important;

    border:
        1px solid rgba(161,171,183,.48) !important;

    border-radius:
        7px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 0 20px rgba(0,0,0,.68),
        0 4px 14px rgba(0,0,0,.34) !important;
}


/* ==========================================================
   LEFT — ARTIFACT FRAME
   ========================================================== */

.feature-panel[data-panel-id="museum"]
.feature-art {

    position:
        relative !important;

    inset:
        auto !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;

    border:
        1px solid rgba(182,191,202,.55) !important;

    border-radius:
        3px !important;

    background:
        linear-gradient(
            145deg,
            #272c31 0%,
            #0e1115 42%,
            #20252a 100%
        ) !important;

    box-shadow:
        inset 0 0 0 3px #07090b,
        inset 0 0 0 4px rgba(188,197,208,.20),
        inset 0 0 17px rgba(0,0,0,.90),
        0 3px 10px rgba(0,0,0,.50) !important;
}


/*
   Dark inner mat surrounding the museum photograph.
*/

.feature-panel[data-panel-id="museum"]
.feature-art::before {

    content:
        "" !important;

    position:
        absolute !important;

    inset:
        7px !important;

    z-index:
        1 !important;

    pointer-events:
        none !important;

    background:
        #101317 !important;

    border:
        1px solid rgba(199,205,213,.27) !important;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.72) !important;
}


.feature-panel[data-panel-id="museum"]
.feature-art-symbol {

    display:
        none !important;
}


/* ==========================================================
   REAL MUSEUM PHOTOGRAPH
   ========================================================== */

.feature-panel[data-panel-id="museum"]
.feature-panel-custom-image {

    position:
        absolute !important;

    inset:
        12px !important;

    width:
        calc(100% - 24px) !important;

    height:
        calc(100% - 24px) !important;

    display:
        block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    object-fit:
        cover !important;

    object-position:
        50% 50% !important;

    /*
       The Met image itself contains large pale margins.
       This enlarges the actual object while keeping the
       real source photograph intact.
    */

    transform:
        scale(1.46) !important;

    transform-origin:
        center center !important;

    filter:
        brightness(.97)
        contrast(1.05) !important;

    background:
        #dadbd8 !important;

    border:
        1px solid rgba(235,238,240,.62) !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.46) !important;

    z-index:
        2 !important;
}


/* ==========================================================
   RIGHT — EXHIBIT PLACARD
   ========================================================== */

.feature-panel[data-panel-id="museum"]
.feature-content {

    position:
        relative !important;

    inset:
        auto !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        flex-start !important;

    width:
        auto !important;

    height:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;

    padding:
        3px 5px 3px 1px !important;

    overflow:
        hidden !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    z-index:
        5 !important;
}


/* Museum eyebrow */

.feature-panel[data-panel-id="museum"]
[data-panel-eyebrow] {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 0 5px !important;

    padding:
        0 0 5px !important;

    border-bottom:
        1px solid rgba(178,188,199,.28) !important;

    color:
        rgba(190,199,210,.86) !important;

    font-size:
        .55rem !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .085em !important;

    text-transform:
        uppercase !important;
}


/* Artifact title */

.feature-panel[data-panel-id="museum"]
[data-panel-title] {

    display:
        -webkit-box !important;

    width:
        100% !important;

    margin:
        0 0 5px !important;

    overflow:
        hidden !important;

    color:
        #f2f0eb !important;

    font-size:
        .84rem !important;

    font-weight:
        700 !important;

    line-height:
        1.06 !important;

    letter-spacing:
        -.01em !important;

    text-wrap:
        balance !important;

    -webkit-line-clamp:
        3 !important;

    -webkit-box-orient:
        vertical !important;

    text-shadow:
        0 1px 4px rgba(0,0,0,.92) !important;
}


/* Culture / era */

.feature-panel[data-panel-id="museum"]
[data-panel-status] {

    display:
        block !important;

    width:
        100% !important;

    margin:
        0 0 5px !important;

    overflow:
        hidden !important;

    color:
        rgba(192,200,210,.88) !important;

    font-size:
        .57rem !important;

    line-height:
        1.15 !important;

    white-space:
        nowrap !important;

    text-overflow:
        ellipsis !important;
}


/* Small Museum description */

.feature-panel[data-panel-id="museum"]
[data-panel-description] {

    display:
        -webkit-box !important;

    width:
        100% !important;

    margin:
        0 0 6px !important;

    overflow:
        hidden !important;

    color:
        rgba(225,228,232,.82) !important;

    font-size:
        .59rem !important;

    line-height:
        1.22 !important;

    -webkit-line-clamp:
        2 !important;

    -webkit-box-orient:
        vertical !important;
}


/* ==========================================================
   VIEW IN MUSEUM
   ========================================================== */

.feature-panel[data-panel-id="museum"]
[data-panel-action] {

    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    align-self:
        flex-start !important;

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        auto 0 0 !important;

    padding:
        5px 9px !important;

    color:
        rgba(244,245,246,.96) !important;

    background:
        linear-gradient(
            180deg,
            #171b20 0%,
            #080a0d 100%
        ) !important;

    border:
        1px solid rgba(184,194,205,.52) !important;

    border-radius:
        3px !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025) !important;

    font-size:
        .57rem !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .035em !important;

    white-space:
        nowrap !important;

    text-transform:
        uppercase !important;
}


/*
   Only a tiny hover refinement.
   No overlay. No blackout. No movement.
*/

.feature-panel[data-panel-id="museum"]:hover {

    border-color:
        rgba(190,199,210,.62) !important;
}


.feature-panel[data-panel-id="museum"]
[data-panel-action]:hover {

    background:
        #20252b !important;

    border-color:
        rgba(224,229,235,.76) !important;
}


/* ==========================================================
   DESTROY OLD OVERLAY BEHAVIOR
   ========================================================== */

.feature-panel[data-panel-id="museum"]
.feature-content,

.feature-panel[data-panel-id="museum"]:hover
.feature-content,

.feature-panel[data-panel-id="museum"]:focus-within
.feature-content {

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;
}


.feature-panel[data-panel-id="museum"],
.feature-panel[data-panel-id="museum"] *,
.feature-panel[data-panel-id="museum"] *::before,
.feature-panel[data-panel-id="museum"] *::after {

    animation:
        none !important;
}


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

@media (max-width: 700px) {

    .feature-panel[data-panel-id="museum"] {

        grid-template-columns:
            minmax(0, 40%)
            minmax(0, 60%) !important;

        gap:
            7px !important;

        padding:
            6px !important;
    }

    .feature-panel[data-panel-id="museum"]
    .feature-panel-custom-image {

        transform:
            scale(1.40) !important;
    }

    .feature-panel[data-panel-id="museum"]
    [data-panel-title] {

        font-size:
            .76rem !important;

        -webkit-line-clamp:
            3 !important;
    }

    .feature-panel[data-panel-id="museum"]
    [data-panel-description] {

        -webkit-line-clamp:
            1 !important;
    }
}

/* ============================================================
   SAGE MUSEUM DREAMSCAPE PLACARD V1
   ============================================================ */

.feature-panel[data-panel-id="museum"] .feature-content {
    isolation: isolate;
    background:
        linear-gradient(
            90deg,
            rgba(2,3,5,.91) 0%,
            rgba(2,3,5,.78) 48%,
            rgba(2,3,5,.70) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,3,5,.38) 0%,
            rgba(2,3,5,.70) 100%
        ),
        url("/static/images/dashboard/textures/sage-museum-dreamscape.jpg")
        center center / cover no-repeat !important;
}

.feature-panel[data-panel-id="museum"] .feature-content > * {
    position: relative;
    z-index: 2;
}

/* SAGE_MUSEUM_DREAMSCAPE_PLACARD_V1 END */

/* SAGE MUSEUM DREAMSCAPE VISIBILITY V2 */
.feature-panel[data-panel-id="museum"] .feature-content {
    background:
        linear-gradient(
            90deg,
            rgba(2,3,5,.78) 0%,
            rgba(2,3,5,.60) 48%,
            rgba(2,3,5,.52) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,3,5,.24) 0%,
            rgba(2,3,5,.54) 100%
        ),
        url("/static/images/dashboard/textures/sage-museum-dreamscape.jpg")
        center center / cover no-repeat !important;
}
/* SAGE_MUSEUM_DREAMSCAPE_VISIBILITY_V2 END */

/* SAGE MUSEUM DREAMSCAPE FINAL V3 */
.feature-panel[data-panel-id="museum"] .feature-content {
    background:
        linear-gradient(
            90deg,
            rgba(2,3,5,.68) 0%,
            rgba(2,3,5,.48) 48%,
            rgba(2,3,5,.40) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2,3,5,.16) 0%,
            rgba(2,3,5,.44) 100%
        ),
        url("/static/images/dashboard/textures/sage-museum-dreamscape.jpg")
        center center / cover no-repeat !important;
}
/* SAGE_MUSEUM_DREAMSCAPE_FINAL_V3 END */