/* =========================================================
   JOHN'S STUFF — PHOTOGRAPHY GALLERY
   ========================================================= */

:root {
    --navy: #0b2942;
    --navy-light: #1c5b84;
    --teal: #2d8ca8;
    --cyan: #55c5d9;
    --page-bg: #edf3f7;
    --text: #1d3242;
}

/* Page */

body {
    background: var(--page-bg) !important;
    color: var(--text) !important;
}

/* Main container */

.container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 30px 40px !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.container > h1 {
    background: linear-gradient(135deg, var(--navy-light), var(--navy)) !important;
    border-radius: 0 0 18px 18px !important;
    padding: 24px 30px !important;
    margin: 0 0 12px 0 !important;
    color: white !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
}

.container > h1 a {
    color: white !important;
    text-decoration: none !important;
}

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

.gallery {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;

    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: both !important;
}

/* =========================================================
   PHOTO CARDS
   ========================================================= */

.gallery .thumbnail,
.gallery figure.gallery__img--main,
.gallery figure.gallery__img--secondary {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    box-sizing: border-box !important;

    background: white !important;
    border-radius: 14px !important;
    overflow: hidden !important;

    box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;

    transition: transform .2s ease, box-shadow .2s ease !important;
}

.gallery .thumbnail:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}

/* =========================================================
   IMAGE
   ========================================================= */

.gallery figure a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    float: none !important;
}

.gallery figure img,
.gallery img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    object-fit: contain !important;
}

/* =========================================================
   CAPTION
   ========================================================= */

.gallery figcaption {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 9px 10px !important;

    background: white !important;
    color: var(--text) !important;

    text-align: center !important;

    font-size: 14px !important;
    line-height: 18px !important;
}

/* =========================================================
   PHOTO GRID — RESPONSIVE
   ========================================================= */

@media screen and (max-width: 900px) {
    .gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .container > h1 {
        font-size: 26px !important;
        padding: 20px !important;
    }
}

@media screen and (max-width: 400px) {
    .gallery {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}