/**********************************************---***********************
    File name: page-picture.css
    Site: al-porto.org

    Copyright 2024 Michael J. Miller, All rights reserved

    Purpose: layout of high res picture viewer

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------
    5/6/24      3.0a        created.

************************************************************************/
@layer page {
    html {
        background-color: #000;
    }
    body {
        background-color: #000;
    /*    --top-pos: calc(50% - 3rem);*/
        --top-pos: 40vh;
    }
    header, footer {
        display: none;
    }
    .page-close {
        background-color: white;
        z-index: 2;
        height: 2lh;
    }
    #counter {
        position: relative;
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        width: max-content;
        z-index: 3;
        background-color: rgba(240, 255, 240, .8);
        border-radius: 4px;
        padding: .25em 1em;
        margin: 1rem auto;
    }
    #back-link {
        position: fixed;
        left: 0;
        margin-left: 1rem;
        background-color: #000;
        color: #fff;
        padding: 2px .25rem;
        border-radius: 4px;
        border: none;
        z-index: 3;
    }
    #back-link a {
        color: #fff;
    }
    #back-button, #forward-button {
        position: fixed;
        top: var(--top-pos);
        font-size: 36px;
        padding: 12px;
    }

    #back-button {
        left: 6px;
    }
    #forward-button {
        right: 6px;
    }
    #back-button i:hover, #forward-button i:hover {
        color: cornflowerblue;
        background-color:  transparent;
    }
/*
    #back-button button, #forward-button button {
        font-size: 36px;
        padding: 12px;
    }
*/
    #photo-viewer {
        display: flex;
        position: fixed;
        flex-flow: row nowrap;
        overflow: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        top: 0;
        left: 0;
        align-items: flex-start;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        height: 98vh;
    }
    figure {
        margin: 0 auto;
        max-height: 100%;
        text-align: center;
        display: block;
        scroll-snap-align: center;
        min-width: 100vw;
        object-fit: cover;
    /*    border: thin dotted white;*/
    }
    figcaption {
        text-align: center;
        font-size: small;
        padding: 0;
        color: white;
        margin-top: .25em;
    }
    figure img {
        min-width: 100%;
        min-height: 100%;
    }

    #photo-viewer img {
        border-radius: 8px;
        max-width: 100%;
        max-height: 92vh;
        object-fit: contain;
        overflow: hidden;
    }
    /*
    *
    *  rules for media queries
    *
    */
    @media (max-width: 768px) {
        #photo-viewer {
            display: flex;
            position: fixed;
            flex-flow: row nowrap;
            overflow: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            top: 0;
            left: 0;
            align-items: flex-start;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            width: 100%;
            height: 98vh;
        }
        figure {
            display: block;
            scroll-snap-align: center;
            min-width: 100vw;
            min-height: 100vh;

            text-align: center;
            object-fit: cover;
        }
        figcaption {
            margin-top: -2rem;
        }
        figure img {
            min-width: 100%;
            min-height: 100%;
        }
    }
}