/* Gallery Page Styles */

.gallery-wrapper {
    margin: 1.5rem;
    display: flex;
    justify-content: center;
    /* background: var(--gradient-dark); */
}

/* Main gallery container - max height prevents overflow on wide screens */
.gallery-container {
    width: 100%;
    max-height: calc(100vh - 8rem);
    aspect-ratio: 16 / 9;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

/* When height-constrained, width adjusts to maintain aspect ratio */
@supports (aspect-ratio: 16 / 9) {
    .gallery-container {
        width: auto;
        max-width: 100%;
    }
}

/* Main viewer: fixed 16:9 box */
.gallery-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: var(--gradient-light);
    border-radius: var(--radius1);
}

/* Image fits inside */
.gallery-image img#mainImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius1);
}

/* Prev/Next buttons - pill style matching joinUs */
.gallery-image .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 20px;
    cursor: pointer;

    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 999px;
    color: white;
    display: grid;
    place-items: center;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    outline: none;
}

.gallery-image .nav:hover,
.gallery-image .nav:focus-visible {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.gallery-image .nav:active {
    transform: translateY(-50%) scale(0.98);
}

.gallery-image .nav.prev {
    left: 10px;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.gallery-image .nav.next {
    right: 10px;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

/* Grey out the nav button when disabled */
.gallery-image .nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Top overlay (counter + jump + play/pause) */
.gallery-image .overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: white;
}

/* Counter text styling */
.gallery-image .overlay #counter {
    background: rgba(0, 0, 0, 0.55);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.gallery-image .overlay .right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Style for the image number input field */
.gallery-image .overlay .right input[type="number"] {
    width: 70px;
    padding: 8px 12px;
    font-size: 14px;

    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 999px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    outline: none;

    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.gallery-image .overlay .right input[type="number"]:focus {
    background: rgba(0, 0, 0, 0.75);
}

/* Go button */
.gallery-image .overlay .right button:first-of-type {
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;

    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 999px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transition: background 160ms ease, box-shadow 160ms ease;

    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.gallery-image .overlay .right button:first-of-type:hover {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Play/Pause button */
.gallery-image .overlay button.play {
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;

    background: rgba(0, 0, 0, 0.55);
    border: 0;
    border-radius: 999px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    transition: background 160ms ease, box-shadow 160ms ease;

    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.gallery-image .overlay button.play:hover {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}