/* ==========================================================
   QVSTAMPS ILLUSTRATED GUIDES
   ========================================================== */

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    min-height:100vh;

    margin:0;
    padding:0;

    background:
        linear-gradient(
            rgba(25,42,40,.36),
            rgba(25,42,40,.36)
        ),
        url("/images/DISPLAY/ask_background.png")
        center top / cover fixed;

    background-color:#263f3d;

    color:#1E2832;

    font-family:Arial, Helvetica, sans-serif;
}
body.guide-is-open{
    overflow:hidden;
}

.guides-page{
    width:100%;

    padding:1px 0 60px;
}

/* ==========================================================
   INTRODUCTION PANEL
   ========================================================== */

.guides-introduction{
    position:relative;

    width:min(940px, calc(100% - 40px));

    margin:0 auto 30px;
    padding:24px 34px 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255,252,244,0.97),
            rgba(241,226,197,0.96)
        );

    border:1px solid rgba(169,125,30,0.82);
    border-radius:13px;

    box-shadow:
        0 10px 27px rgba(43,31,14,0.16),
        inset 0 1px 0 rgba(255,255,255,0.72);

    text-align:center;
}

.guides-introduction::before{
    content:"";

    position:absolute;
    inset:7px;

    border:1px solid rgba(169,125,30,0.26);
    border-radius:8px;

    pointer-events:none;
}



.guides-introduction h2{
    position:relative;
    z-index:1;

    margin:0 0 9px;

    color:#0B2038;

    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(23px, 2.3vw, 31px);
    line-height:1.2;
    font-weight:400;
}

.guides-introduction p{
    position:relative;
    z-index:1;

    max-width:750px;

    margin:0 auto;

    color:#3C342A;

    font-family:Georgia, "Times New Roman", serif;
    font-size:17px;
    line-height:1.5;
}

/* ==========================================================
   GUIDE GALLERY
   ========================================================== */

.image-container{
    width:min(1600px, calc(100% - 50px));

    margin:0 auto;

    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(270px, 1fr));

    align-items:start;

    gap:27px;
}

.image-box{
    position:relative;

    min-width:0;

    padding:5px;

    background:
        linear-gradient(
            145deg,
            #F8F2E5,
            #E8D9BC
        );

    border:1px solid rgba(75,58,31,.72);
    border-radius:8px;

    box-shadow:
        0 7px 18px rgba(27,22,13,.28),
        inset 0 1px 0 rgba(255,255,255,.65);

    cursor:zoom-in;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.image-box::before{
    display:none;
}

.image-box img{
    position:relative;
    z-index:1;

    width:100%;
    height:auto;

    display:block;

    border-radius:4px;

    object-fit:contain;
}

.image-box:hover{
    transform:translateY(-4px);

    border-color:#8F6A25;

    box-shadow:
        0 13px 27px rgba(25,20,11,.34),
        0 0 0 1px rgba(181,138,43,.22);
}

.image-box:focus-visible{
    outline:4px solid #A97D1E;
    outline-offset:4px;
}

/* ==========================================================
   FULLSCREEN VIEWER
   ========================================================== */

.fullscreen-backdrop{
    position:fixed;
    inset:0;

    z-index:9000;

    display:none;

    background:rgba(5,8,10,0.78);

    backdrop-filter:blur(2px);
}

.guide-is-open .fullscreen-backdrop{
    display:block;
}

.image-box.fullscreen{
    position:fixed;
    inset:0;

    z-index:9010;

    width:100vw;
    height:100vh;

    padding:60px 34px 76px;

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

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;

    cursor:zoom-out;

    transform:none;
}

.image-box.fullscreen::before{
    display:none;
}

.image-box.fullscreen img{
    width:auto;
    height:auto;

    max-width:calc(100vw - 68px);
    max-height:calc(100vh - 136px);

    object-fit:contain;

    border:1px solid rgba(213,192,138,0.78);
    border-radius:9px;

    box-shadow:
        0 18px 55px rgba(0,0,0,0.70),
        0 0 0 5px rgba(255,255,255,0.05);
}

.fullscreen-close{
    position:fixed;
    top:16px;
    right:18px;

    z-index:9030;

    display:none;
    align-items:center;
    gap:8px;

    padding:9px 15px;

    background:
        linear-gradient(
            #FFF9EA,
            #E8D5AE
        );

    color:#071A2D;

    border:2px solid #A97D1E;
    border-radius:8px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,0.42);
}

.fullscreen-close span{
    font-size:25px;
    line-height:.7;
}

.fullscreen-close.is-visible{
    display:flex;
}

.fullscreen-close:hover{
    filter:brightness(1.06);
}

.fullscreen-close:focus-visible{
    outline:3px solid #FFF;
    outline-offset:3px;
}

.fullscreen-message{
    position:fixed;
    bottom:18px;
    left:50%;

    z-index:9030;

    display:none;

    padding:10px 18px;

    transform:translateX(-50%);

    background:rgba(7,26,45,0.93);
    color:#FFF8E8;

    border:1px solid rgba(213,192,138,0.78);
    border-radius:7px;

    font-size:15px;
    line-height:1.3;
    font-weight:700;

    text-align:center;

    box-shadow:0 5px 18px rgba(0,0,0,0.44);
}

.fullscreen-message.is-visible{
    display:block;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:900px){

    .guides-page{
        padding-bottom:40px;
    }

    .guides-introduction{
        margin-bottom:24px;
        padding:22px 26px 20px;
    }

    .guides-introduction p{
        font-size:16px;
    }

    .image-container{
        width:calc(100% - 34px);

        grid-template-columns:
            repeat(auto-fit, minmax(230px, 1fr));

        gap:20px;
    }
}

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

@media (max-width:600px){

    body{
        background-attachment:scroll;
    }

    .guides-introduction{
        width:calc(100% - 22px);

        margin-bottom:20px;
        padding:21px 18px 18px;
    }

    .guides-introduction h2{
        font-size:23px;
    }

    .guides-introduction p{
        font-size:15px;
        line-height:1.45;
    }

    .image-container{
        width:calc(100% - 22px);

        grid-template-columns:1fr;

        gap:18px;
    }

    .image-box{
        padding:7px;
    }

    .image-box.fullscreen{
        padding:58px 12px 76px;
    }

    .image-box.fullscreen img{
        max-width:calc(100vw - 24px);
        max-height:calc(100vh - 134px);
    }

    .fullscreen-close{
        top:11px;
        right:11px;
    }

    .fullscreen-message{
        width:calc(100% - 24px);

        bottom:12px;

        font-size:13px;
    }
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    .image-box{
        transition:none;
    }

    .image-box:hover{
        transform:none;
    }
}