/**
 * Catalog lot-card image gallery (Settings -> Features -> "Browse lot images
 * in the catalog"). Only loaded when the option is on.
 *
 * Sits inside the existing .bp-lot__wrp-image box and reuses .bp-lot__image for
 * each slide, so slide sizing is inherited from the theme's own card styles and
 * the card's height never changes.
 */

.bp-lot-gallery {
    position: relative;
    overflow: hidden;
}

.bp-lot-gallery__track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slides stack; only the active one is shown. Cross-fade keeps the card calm
   in a grid of many lots — a sliding track would draw the eye across cards. */
.bp-lot-gallery__slide {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    /* contain, never cover: a buyer paging through a lot's photos has to see
       the whole of each one. Cropping to fill the card hides exactly the detail
       (hallmarks, signatures, damage) they are paging through to inspect.
       !important because some card layouts set background-size on
       .bp-lot__image, which the slides also carry. */
    background-size: contain !important;
    background-position: center center;
    background-repeat: no-repeat;
}

/* The first slide stays in normal flow so the card keeps its height — several
   card layouts size .bp-lot__image with a percentage padding-bottom, which an
   absolutely-positioned element would not provide. Remaining slides overlay it. */
.bp-lot-gallery__slide:first-child {
    position: relative;
}

.bp-lot-gallery__slide:not(:first-child) {
    position: absolute;
    inset: 0;
}

.bp-lot-gallery__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ---- Arrows ---- */
.bp-lot-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #222;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
    opacity: 0;
    transition: opacity .18s ease, background-color .18s ease;
}

.bp-lot-gallery__nav--prev { left: 8px; }
.bp-lot-gallery__nav--next { right: 8px; }

.bp-lot-gallery:hover .bp-lot-gallery__nav,
.bp-lot-gallery:focus-within .bp-lot-gallery__nav {
    opacity: 1;
}

.bp-lot-gallery__nav:hover { background: #fff; }

.bp-lot-gallery__nav:focus-visible {
    opacity: 1;
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Touch devices have no hover, and arrows are the only affordance there. */
@media (hover: none) {
    .bp-lot-gallery__nav { opacity: 1; }
}

/* ---- Dots ---- */
.bp-lot-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0 28px;
    flex-wrap: wrap;
    pointer-events: none;
}

.bp-lot-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color .18s ease, transform .18s ease;
}

.bp-lot-gallery__dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

.bp-lot-gallery__dot:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Beyond ~8 photos the dot row becomes noise; the counter still conveys depth. */
.bp-lot-gallery[data-bp-many] .bp-lot-gallery__dots { display: none; }

/* ---- Image count badge ---- */
.bp-lot-gallery__count {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 600;
    pointer-events: none;
}

.bp-lot-gallery__count::before {
    content: "";
    width: 9px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .bp-lot-gallery__slide,
    .bp-lot-gallery__nav,
    .bp-lot-gallery__dot {
        transition: none;
    }
}
