/* =========================================================
   SIGILLI NASCOSTI
========================================================= */

.myoo-seal,
.myoo-seal:link,
.myoo-seal:visited{
    font-size:.55rem;
    color:#fff !important;
    text-decoration:none !important;
    cursor:pointer;
    transition:color .25s ease, text-shadow .25s ease;
}

.myoo-seal:hover,
.myoo-seal:focus{
    color:#d8b15a !important;
    text-shadow:0 0 6px rgba(216,177,90,.7);
}


/* =========================================================
   OVERLAY
========================================================= */

.myoo-treasure-overlay{
    position:fixed;
    inset:0;
    z-index:9999;

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

    padding:20px;
    background:rgba(0,0,0,.85);
}

.myoo-treasure-overlay.is-open{
    display:flex;
}


/* =========================================================
   CONTENITORE DEL POPUP
========================================================= */

.myoo-treasure-scroll{
    --parchment-edge:63px;

    position:relative;

    width:min(1050px,calc(100vw - 40px));
    max-height:90vh;

    color:#2f2114;
    background:transparent;
    border:0;

    box-shadow:0 24px 70px rgba(0,0,0,.65);

    overflow:hidden;
}


/* =========================================================
   CARTA DI RISO 9-SLICE
========================================================= */

.myoo-parchment{
    position:absolute;
    inset:0;
    z-index:0;

    display:grid;

    grid-template-columns:
        var(--parchment-edge)
        minmax(0,1fr)
        var(--parchment-edge);

    grid-template-rows:
        var(--parchment-edge)
        minmax(0,1fr)
        var(--parchment-edge);

    pointer-events:none;
}

.myoo-parchment > div{
    min-width:0;
    min-height:0;

    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
}

.myoo-parchment-11{
    grid-column:1;
    grid-row:1;
    background-image:url('/library/images/parchment/parchment-11.webp');
}

.myoo-parchment-12{
    grid-column:2;
    grid-row:1;
    background-image:url('/library/images/parchment/parchment-12.webp');
}

.myoo-parchment-13{
    grid-column:3;
    grid-row:1;
    background-image:url('/library/images/parchment/parchment-13.webp');
}

.myoo-parchment-21{
    grid-column:1;
    grid-row:2;
    background-image:url('/library/images/parchment/parchment-21.webp');
}

.myoo-parchment-22{
    grid-column:2;
    grid-row:2;
    background-image:url('/library/images/parchment/parchment-22.webp');
}

.myoo-parchment-23{
    grid-column:3;
    grid-row:2;
    background-image:url('/library/images/parchment/parchment-23.webp');
}

.myoo-parchment-31{
    grid-column:1;
    grid-row:3;
    background-image:url('/library/images/parchment/parchment-31.webp');
}

.myoo-parchment-32{
    grid-column:2;
    grid-row:3;
    background-image:url('/library/images/parchment/parchment-32.webp');
}

.myoo-parchment-33{
    grid-column:3;
    grid-row:3;
    background-image:url('/library/images/parchment/parchment-33.webp');
}


/* =========================================================
   CONTENUTO
========================================================= */

.myoo-treasure-scroll-inner{
    position:relative;
    z-index:1;

    max-height:90vh;
    overflow-y:auto;

    padding:
        calc(var(--parchment-edge) + 18px)
        calc(var(--parchment-edge) + 26px)
        calc(var(--parchment-edge) + 24px);

    text-align:center;
}

.myoo-treasure-kicker{
    margin:0 45px 10px;

    color:#745121;

    font-size:.9rem;
    line-height:1.4;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.myoo-treasure-scroll h2{
    margin:0 45px 14px;

    color:#2f2114;

    font-size:clamp(2rem,4vw,3.6rem);
    line-height:1.08;
    font-weight:500;
}

.myoo-treasure-message{
    max-width:760px;
    margin:0 auto 30px;

    color:#352719;

    font-size:1.05rem;
    line-height:1.55;
}

.myoo-treasure-content{
    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(280px,.8fr);

    gap:32px;
    align-items:center;

    text-align:left;
}

.myoo-treasure-preview{
    width:100%;
}

.myoo-treasure-image{
    display:block;

    width:100%;
    height:auto;
    max-height:430px;

    object-fit:cover;

    border:1px solid rgba(96,65,31,.42);

    box-shadow:0 12px 28px rgba(70,40,15,.24);
}

.myoo-treasure-story{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.myoo-treasure-story h3{
    margin:0 0 12px;

    color:#2f2114;

    font-size:clamp(1.35rem,2.4vw,1.7rem);
    line-height:1.25;
    font-weight:500;
}

.myoo-treasure-story p{
    margin:0;

    color:#352719;

    font-size:1rem;
    line-height:1.7;
}


/* =========================================================
   CHIUSURA
========================================================= */

.myoo-treasure-close{
    position:absolute;
    top:28px;
    right:31px;
    z-index:5;

    width:38px;
    height:38px;
    padding:0;

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

    border:1px solid rgba(92,57,22,.42);
    border-radius:50%;

    background:rgba(255,255,255,.3);
    color:#2f2114;

    font-size:29px;
    line-height:1;

    cursor:pointer;
}

.myoo-treasure-close:hover,
.myoo-treasure-close:focus{
    background:#2e2014;
    color:#f3d893;
}


/* =========================================================
   PULSANTE
========================================================= */

.myoo-treasure-button{
    align-self:flex-start;

    margin-top:2rem;
    padding:13px 28px;

    border:1px solid #6e471b;

    background:#2e2014;
    color:#f3d893;

    font-size:1rem;

    cursor:pointer;

    box-shadow:0 6px 14px rgba(54,31,12,.22);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.myoo-treasure-button:hover,
.myoo-treasure-button:focus{
    background:#b8893f;
    color:#1f160e;
    transform:translateY(-2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px){

    .myoo-treasure-overlay{
        padding:10px;
        align-items:flex-start;
    }

    .myoo-treasure-scroll{
        --parchment-edge:34px;

        width:100%;
        max-height:calc(100dvh - 20px);

        margin:auto 0;
    }

    .myoo-treasure-scroll-inner{
        max-height:calc(100dvh - 20px);

        padding:58px 28px 52px;
    }

    .myoo-treasure-close{
        top:17px;
        right:17px;

        width:34px;
        height:34px;

        font-size:26px;
    }

    .myoo-treasure-kicker{
        margin:0 28px 9px;

        font-size:.72rem;
        letter-spacing:.11em;
    }

    .myoo-treasure-scroll h2{
        margin:0 16px 13px;

        font-size:clamp(1.75rem,9vw,2.5rem);
    }

    .myoo-treasure-message{
        margin-bottom:24px;

        font-size:.95rem;
        line-height:1.5;
    }

    .myoo-treasure-content{
        grid-template-columns:1fr;
        gap:24px;
    }

    .myoo-treasure-image{
        max-height:none;
    }

    .myoo-treasure-story{
        align-items:stretch;
    }

    .myoo-treasure-story h3{
        font-size:1.35rem;
    }

    .myoo-treasure-story p{
        font-size:.96rem;
        line-height:1.65;
    }

    .myoo-treasure-button{
        align-self:center;

        width:100%;
        max-width:300px;

        margin-top:1.5rem;

        text-align:center;
    }
}

@media (max-width:420px){

    .myoo-treasure-scroll{
        --parchment-edge:28px;
    }

    .myoo-treasure-scroll-inner{
        padding:52px 22px 46px;
    }

    .myoo-treasure-close{
        top:14px;
        right:14px;
    }
}