:root{
    --theme-dark: #000;
    --theme-light: #FFF;
    --theme-mid: #999;
    --theme-highlight: #f5c246;

    --transition-stndrd: 200ms ease;
    --transition-quick: 20ms ease;
    
    /* Thumbs size/count */
    --thumbs-h: 140px;
    --thumb-gap: 6px;
    --thumbs-visible: 7;

    /* Universal UI tokens */
    --ui-mobile-portrait-mult: 1;

    /* Controls */
    --ui-control-size: 60px;

    /* Spacing */
    --ui-space-sm: 8px;
    --ui-space-md: 24px;
    --ui-space-lg: 40px;

    /* Positional tuning */
    --ui-controls-center-y: 43%;

    /* Typography scaling */
    --ui-font-scale: 1;
}

@media (max-width: 1400px){
    :root{
        --thumbs-visible: 5;
    }
}

@media (max-width: 640px) and (orientation: portrait) {
    :root {
        /* “mode” multiplier (only if you use it) */
        --ui-mobile-portrait-mult: 0.86;

        /* Component tokens */
        --thumbs-visible: 3;

        --ui-control-size: 35px;
        --ui-space-md: 16px;
        --ui-font-scale: 0.92;
    }
}


/* ============================= */

body {
    font-size: calc(1rem * var(--ui-font-scale));
    background: var(--theme-dark);
}

.gallery__wrapper {
    position: relative;
    width: 63%;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    margin: 40px auto;
}

@media (max-width: 640px) and (orientation: portrait) {
    .gallery__wrapper {
        width: 100%;
    }
}

.gallery__wrapper img{
    -webkit-user-drag: none;
    user-select: none;
}

.gallery__main {
    margin: 0 0 8px 0;
}

.gallery__main--holder {
    position: relative;
    width: 100%;
}

.gallery__main h2.img__title {
    position: relative;
    width: 100%;
    text-align: center;
    color: var(--theme-light);
}

.gallery__main .img__holder {
    position: relative;
    width: 100%;
    aspect-ratio: 5/4;
    overflow-x: hidden;
    overflow-y: visible;
    touch-action: pan-y;
}

@media (max-width: 640px) and (orientation: portrait) {
    .gallery__main .img__holder {
        aspect-ratio: 1/1;
    }
}

.gallery__main .img__holder ul.img__lrg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    inset: 0;
    will-change: transform;
}

/* .gallery__main .img__holder ul.img__lrg li {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    padding: 0;
    box-sizing: border-box; 
} */

.gallery__main .img__holder ul.img__lrg li {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    /* Remove or reduce padding to 0 */
    padding: 0; 
    box-sizing: border-box;
    /* Ensure no overflow from the LI itself */
    overflow: hidden; 
}

.gallery__main .img__holder ul.img__lrg li img {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
    /* opacity: 0; */
    transition: var(--transition-quick);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* .gallery__main .img__holder ul.img__lrg li.is-active img {
    opacity: 1;
} */

.gallery__thumbs--holder {
    height: var(--thumbs-h);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery__thumbs--holder::-webkit-scrollbar {
    display: none;
}

ul.gallery__thumbs {
    display: flex;
    gap: var(--thumb-gap);
    height: 50%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.gallery__thumbs li {
    flex: 0 0 auto;
    height: 100%;
    width: calc(
        (100% - (var(--thumb-gap) * (var(--thumbs-visible) - 1)))
        / var(--thumbs-visible)
    );
    opacity: .6;
    scroll-snap-align: start;
    transition: var(--transition-stndrd);
}

ul.gallery__thumbs li.is-active {
    opacity: 1;
}

ul.gallery__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* let the LI receive the swipe */
}

/* ---------- Control buttons (stable + reusable) ---------- */

.gallery__main .gallery__controls {
    position: absolute;
    width: calc(100% + 160px);
    left: -80px;
    top: var(--ui-controls-center-y);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 9999;
}

@media (max-width: 640px){
    .gallery__main .gallery__controls {
        top: 125%;
        width: 80%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

.gallery__ctrl {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 12px;
    margin: 0;
    line-height: 0;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) and (orientation: portrait) {
    .gallery__ctrl {
        padding: 12px 0;
    }
}

/* keep a visible, accessible focus state */
.gallery__ctrl:focus-visible {
    outline-offset: 4px;
}

/* icon sizing */
.ctrl__btn {
    width: var(--ui-control-size);
    height: auto;
    display: block;
}

.ctrl__btn .ctrl__icon--outline {
    fill: none;
    stroke: var(--theme-light);
    stroke-width: 20;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.2;
}

.ctrl__btn .ctrl__icon--stroke {
    fill: none;
    stroke: var(--theme-highlight);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* mirror for next */
.ctrl__btn--mirrored {
    transform: scaleX(-1);
    transform-origin: 50% 50%;
}

/* ---------- Hover nudge (use transform, not margin = no layout shift) ---------- */

.gallery__ctrl--prev {
    transform: translateX(0);
    transition: var(--transition-stndrd);
}

.gallery__ctrl--next {
    transform: translateX(0);
    transition: var(--transition-stndrd);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gallery__ctrl--prev,
    .gallery__ctrl--next{
        transition: none;
    }
}