/*** CSS Styles ***/

:root {
    --main-font-size: 16px;
    --min-product-size: 200px;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--main-font-size);
    font-family: sans-serif;
}

body {
    padding: 0;
    margin: 0;
}

/*** LINKS ***/

a {
    color: grey;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

/*** GRID ***/

.grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;

    .item {
        .thumbnail {
            aspect-ratio: auto 16/9;
        }

        .info {
            margin-top: 0.75rem;
        }

        img {
            width: 100%;
            border-radius: 8px;
        }

        a {
            color: grey;
        }

        /* unvisited link */
        a:link {
            text-decoration: none;
        }

        /* visited link */
        a:visited {
            text-decoration: none;
        }

        /* mouse over link */
        a:hover {
            text-decoration: underline;
            filter: brightness(0.6);
        }

        /* selected link */
        a:active {
            text-decoration: underline;
        }
    }
}

/*** Assets List for index2.php ***/
.asset-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-product-size), 1fr));
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.asset {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    text-align: center;
}

.asset img {
    height: auto;
    min-width: var(--min-product-size);
    width: 100%;
    border-radius: 8px;
}

/*** PRODUCT ***/
/*
.product {
    margin: auto;
    padding: 1rem;
    width: 100%;
    max-width: 1280px;

    display: grid;
    */
/*    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); */
/*
    grid-template-columns: 2fr 1fr;
    gap: 1rem;

    .item {
        padding: 1rem;
        background-color: aqua;

        img {
            width: 100%;
            border-radius: 8px;
        }
    }

}
*/

.product {
    margin: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
    width: 100%;
    max-width: 1280px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}



.product .item img {
    width: 100%;
    border-radius: 8px;
}

.product .item h1 {
    font-size: 1.5rem;
    margin: 0;
}

.product .button {
    background-color: gray;
    border: none;
    border-radius: 1rem;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    width: calc(100% - 2rem);
}

.product .button:hover {
    background-color: rgb(92, 92, 92);
    color: white;
}

@media (max-width: 1280px) {
    .product {
        max-width: fit-content;
    }
}

/* Less than mobile */
@media (max-width: 800px) {
    .product {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}


/*** HEADER ***/

.header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 1rem 1rem;

    background: white;
    border-bottom: 1px solid grey;
    /* background-color: dodgerblue; */
    gap: 1rem;

    vertical-align: middle;

    div {
        /*  background-color: #f1f1f1; */
        color: #000;
        font-size: 1rem;
    }

    img {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 1rem;
        vertical-align: middle;
    }
}

/*** HEADER2 for index2.php ***/

.header2 {
    z-index: 1;
    position: sticky;
    top: 0;
    padding: 1.5rem;

    background: white;
    /* border-bottom: 1px solid grey; */
    /* background-color: dodgerblue; */
    text-align: center;
}

.header2 img {
    width: 8rem;
    /*height: 1.5rem;*/
    margin-right: 1rem;
    vertical-align: middle;
    padding: 0;
}

/*** FOOTER ***/

.footer {
    background: white;
    position: sticky;
    bottom: 0;
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    text-align: center;
    color: gray;
}

h1 {
    font-size: 1.25rem;
}

/*** Pagination */

.pagination {
    padding: 3rem 1rem 3rem 1rem;
    text-align: center;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    li {
        display: block;
    }

    li a {
        text-align: center;
        padding: 1rem;
        text-decoration: none;
        border: 1px solid gray;
        border-radius: 50%;
    }

    li a:hover {
        background-color: gray;
        color: white;
    }
}

/*** Navigation ***/

.navigation {
    text-align: center;
}

.navigation .button {
    width: 8rem;
    background-color: gray;
    border: none;
    border-radius: 1rem;
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.navigation .button:hover {
    background-color: rgb(92, 92, 92);
    color: white;
}

.navigation .button-disabled {
    width: 8rem;
    border: 1px solid gray;
    border-radius: 1rem;
    color: gray;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: default;
}

/*
@import "buttons.css";
*/