* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #fafafa;
    margin: 0;
    padding: 0;
}

/* Header */
.header {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header__title {
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.header__subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Grid */
#imageGrid {
    max-width: 935px;
    margin: 0 auto;
}

.grid-item {
    display: block;
    position: relative;
    margin-bottom: 1px;
    transition: transform 0.1s ease;
}

.grid-item:active {
    transform: scale(0.98);
}

.grid-item__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
    background: #f8f9fa;
    border-radius: 3px;
}

.grid-item__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.grid-item:hover .grid-item__image {
    transform: scale(1.03);
}

#showMoreBtn {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 12px 30px;
    box-shadow: 0 4px 15px rgba(131, 58, 180, 0.3);
    transition: all 0.3s ease;
    min-width: 200px;
}

#showMoreBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(131, 58, 180, 0.4);
}

#showMoreBtn:active {
    transform: translateY(0);
}

/* Image page: a slim bar on top, then the image as large as the window allows with Previous/Next at its sides */
.image-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: white;
}

.image-bar__back {
    color: white;
    font-weight: 600;
    text-decoration: none;
}

.image-bar__back:hover {
    color: white;
    text-decoration: underline;
}

.image-bar__position {
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

.image-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
}

/* Width is set inline from the image's aspect ratio so it fills the window height or the available width, whichever is smaller.
   The 5.5rem it leaves is the bar plus the stage padding. */
.image-stage__image {
    justify-self: center;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.image-stage__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: white;
    color: #262626;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.image-stage__nav:hover {
    color: #262626;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.image-stage__nav.disabled {
    opacity: 0.3;
    box-shadow: none;
}

/* Footer */
.footer {
    background: white;
    border-top: 1px solid #dbdbdb;
    margin-top: 60px;
}

.grid-item:focus-visible,
.image-stage__nav:focus-visible,
.image-bar__back:focus-visible {
    outline: 2px solid #0095f6;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .header__title {
        font-size: 2rem;
    }

    .header__subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Phones: the image takes the full width and Previous/Next float over its edges (swiping also works) */
    .image-stage {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        padding: 0.5rem 0.35rem;
    }

    .image-stage__image {
        grid-row: 1;
        grid-column: 1;
    }

    .image-stage__nav {
        position: absolute;
        top: 50%;
        z-index: 1;
        width: 2.5rem;
        height: 2.5rem;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.75);
    }

    .image-stage__nav:hover {
        transform: translateY(-50%);
    }

    .image-stage__nav[rel="prev"],
    .image-stage__nav:first-child {
        left: 0.75rem;
    }

    .image-stage__nav[rel="next"],
    .image-stage__nav:last-child {
        right: 0.75rem;
    }

    .image-stage__nav.disabled {
        display: none;
    }
}