/* 
 * Responsive gallery styles for the website
 * Handles gallery layouts and miss list displays
 */

/* Base responsive gallery styles */
#profile-list li img {
    max-width: 100%;
    height: auto;
}

/* Medium screens / tablets (up to 992px) */
@media screen and (max-width: 992px) {

    /* Adjust miss list layout */
    #profile-list li {
        width: 25%;
        box-sizing: border-box;
        padding: 5px;
    }

    #gallery ul.gallery-list li {
        width: 25% !important;
    }

    #profile-list li a {
        width: 100%;
        height: auto;
    }

    #profile-list li img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 130/145;
    }

    /* Adjust miss list info box */
    #profile-list li span {
        width: 100%;
        box-sizing: border-box;
    }

    /* Adjust main miss display */
    #miss-main {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }

    #miss-main a {
        width: 100%;
        height: auto;
    }

    #miss-main img {
        width: 100%;
        height: auto;
    }

    /* Adjust latest miss display */
    #miss-latest {
        width: 100%;
        float: none;
    }

    #miss-latest ul {
        display: flex;
        flex-wrap: wrap;
    }

    #miss-latest li {
        width: 33.33%;
        box-sizing: border-box;
        padding: 5px;
    }

    #miss-latest li a {
        width: 100%;
        height: auto;
    }

    #miss-latest li img {
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 130/145;
    }
}

/* Small screens / mobile (up to 768px) */
@media screen and (max-width: 768px) {

    /* Adjust miss list to 3 columns */
    #profile-list li {
        width: 33.33%;
    }

    #gallery ul.gallery-list li {
        width: 33.33% !important;
    }

    /* Adjust winners display */
    #miss-winners ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #miss-winners ul li {
        float: none;
        width: 80%;
        max-width: 300px;
        margin: 0 auto 20px;
    }

    #miss-winners ul li a {
        width: 100%;
        height: auto;
    }

    #miss-winners ul li img {
        width: 100%;
        height: auto;
    }

    /* Adjust winners photo */
    #winners-photo {
        display: flex;
        flex-direction: column;
    }

    #winners-photo img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    #winners-list {
        width: 100%;
    }

    /* Adjust winners gallery */
    #winners-gallery table {
        width: 100%;
    }

    #winners-gallery table td {
        display: block;
        width: 100%;
        text-align: center;
        padding: 5px 0;
    }

    #winners-gallery table td.label {
        text-align: center;
    }

    #winners-gallery table td img {
        max-width: 100%;
        height: auto;
    }
}

/* Extra small screens (up to 480px) */
@media screen and (max-width: 480px) {

    /* Adjust miss list to 2 columns */
    #profile-list li {
        width: 50%;
    }

    /* Adjust latest miss to 2 columns */
    #miss-latest li {
        width: 50%;
    }

    #gallery ul.gallery-list li {
        width: 50% !important;
    }

    /* Adjust winners display for very small screens */
    #miss-winners ul li {
        width: 100%;
    }

    /* Simplify winners table */
    #winners-list table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 8px 5px;
    }

    #winners-list table td.label {
        font-weight: bold;
    }

    #winners-photo #winners-list {
        padding: 0 !important;
    }
}