/**
 * Photo Slideshow - Scoped Frontend CSS
 */

.photo-slideshow-wrapper {
    position: relative;
    width: 100%;
    margin: 25px 0;
    box-sizing: border-box;
}

.photo-slideshow-wrapper * {
    box-sizing: border-box;
}

/* Core slider container override */
.photo-slideshow.swiper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden !important;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
}

.photo-slideshow__container.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

/* Individual Slides */
.photo-slideshow__slide.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* Slid image tag */
.photo-slideshow__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    transition: opacity 0.3s ease;
}

/* Prev / Next buttons custom styling */
.photo-slideshow-wrapper .swiper-button-prev,
.photo-slideshow-wrapper .swiper-button-next {
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.45);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background-color 0.25s, transform 0.25s, opacity 0.25s;
    user-select: none;
    z-index: 10;
}

.photo-slideshow-wrapper .swiper-button-prev:hover,
.photo-slideshow-wrapper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

.photo-slideshow-wrapper .swiper-button-prev::after,
.photo-slideshow-wrapper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 900;
}

/* Reposition navigation buttons slightly outside on wide containers if needed, 
   but for now we place them neatly inside the boundaries to avoid overflow issues in Divi */
.photo-slideshow-wrapper .swiper-button-prev {
    left: 15px;
}

.photo-slideshow-wrapper .swiper-button-next {
    right: 15px;
}

/* Disabled buttons */
.photo-slideshow-wrapper .swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Pagination styling */
.photo-slideshow-wrapper .swiper-pagination.swiper-pagination-bullets {
    position: relative;
    bottom: 0 !important;
    margin-top: 20px;
    text-align: center;
    line-height: 1;
    z-index: 10;
}

.photo-slideshow-wrapper .swiper-pagination-bullet {
    background: #000000;
    opacity: 0.15;
    width: 8px;
    height: 8px;
    margin: 0 5px !important;
    display: inline-block;
    border-radius: 50%;
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.photo-slideshow-wrapper .swiper-pagination-bullet-active {
    background: #c29d53; /* Warm gold highlight accent to fit clean, elegant aesthetic */
    opacity: 1;
    transform: scale(1.2);
}

/* Empty State Styling */
.photo-slideshow-empty-notice {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* ==========================================================================
   MARQUEE MODE
   ========================================================================== */

.photo-slideshow-marquee-wrapper {
    overflow: hidden !important;
}

.photo-slideshow__marquee {
    width: 100%;
    overflow: hidden !important;
    position: relative;
}

/* The scrolling track — two duplicate sets side by side */
.photo-slideshow__marquee-track {
    display: flex;
    width: max-content; /* let it be as wide as both sets combined */
    will-change: transform;
}

/* Each set of slides */
.photo-slideshow__marquee-set {
    display: flex;
    flex-shrink: 0;
    gap: var(--ps-marquee-gap, 20px);
    padding-right: var(--ps-marquee-gap, 20px); /* keep gap at wrap point */
}

/* Individual marquee image item */
.photo-slideshow__marquee-item {
    flex-shrink: 0;
    height: 280px; /* consistent row height */
    overflow: hidden;
    border-radius: 2px;
}

.photo-slideshow__marquee-item .photo-slideshow__image {
    width: auto;
    height: 100%;
    aspect-ratio: unset;
    max-width: none;
    display: block;
    object-fit: cover;
}

/* Animation keyframes */
@keyframes ps-marquee-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* -50% scrolls exactly one set */
}

@keyframes ps-marquee-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Applied via JS using inline animation-name + animation-duration */
.photo-slideshow__marquee-track.is-animating-rtl {
    animation-name: ps-marquee-rtl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.photo-slideshow__marquee-track.is-animating-ltr {
    animation-name: ps-marquee-ltr;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Pause on hover */
.photo-slideshow__marquee:hover .photo-slideshow__marquee-track {
    animation-play-state: paused;
}

/* Responsive: shrink height on mobile */
@media (max-width: 768px) {
    .photo-slideshow__marquee-item {
        height: 180px;
    }
}