/* Reusable photo slider widget (PF-2504 / PF-2505).
   Used on Buy Passes, Photo Upsell, and Swag via templates/components/family_photo_slider.html.

   Per PF-2504 this is a multi-photo carousel: ~3 photos visible at a time, sliding left to
   right, with dot indicators. Peeking a sliver of the next photo is deliberate -- it signals
   the strip scrolls. Photo count per view steps down on narrower screens. */
.family-photo-slider {
    position: relative;
    width: 100%;
    margin: 1rem auto 1.25rem;
    --fps-visible: 3.2;
    --fps-gap: 10px;
}

/* Viewport clips the strip; the strip itself is translated horizontally. */
.family-photo-slider__viewport { overflow: hidden; }

.family-photo-slider__track {
    display: flex;
    gap: var(--fps-gap);
    transition: transform .45s ease;
    will-change: transform;
}

.family-photo-slider__slide {
    flex: 0 0 calc((100% - (var(--fps-visible) - 1) * var(--fps-gap)) / var(--fps-visible));
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f3f5;
}

.family-photo-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Arrows sit just inside the viewport edges. */
.family-photo-slider__arrow {
    position: absolute;
    top: calc(50% - 18px);
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    color: #333;
    font-size: 17px;
    line-height: 34px;
    cursor: pointer;
    z-index: 2;
}
.family-photo-slider__arrow:hover { background: #fff; }
.family-photo-slider__arrow[disabled] { opacity: 0; pointer-events: none; }
.family-photo-slider__arrow--prev { left: -6px; }
.family-photo-slider__arrow--next { right: -6px; }

.family-photo-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.family-photo-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
}
.family-photo-slider__dot.is-active { background: var(--medium, #0d6efd); transform: scale(1.25); }

@media (max-width: 991px) { .family-photo-slider { --fps-visible: 2.2; } }
@media (max-width: 575px) { .family-photo-slider { --fps-visible: 1.15; } }