/* 
 * This CSS controls the visual appearance and animations of the slideshow
 */

 /* Main container for the slideshow */
.slideshow-container {
    position: relative;
    overflow: hidden;
    background: #000;
    margin: 20px auto;
}

/* Responsive sizing when no dimensions specified */
.slideshow-container.slideshow-responsive {
    width: 100%;
    height: 70vh;  /* 70% of viewport height for good proportions */
    max-width: 100%;
}

/* On mobile devices, make responsive slideshows taller */
@media (max-width: 768px) {
    .slideshow-container.slideshow-responsive {
        height: 50vh;  /* 50% of viewport height on mobile */
        margin: 10px 0;  /* Less margin on mobile */
    }
}

/* Loading text shown while images are being fetched */
.slideshow-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
}

/* Container for the image(s) */
.slideshow-images {
    width: 100%;
    height: 100%;
    position: relative;
}

/* The actual image element */
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;  /* Maintains aspect ratio */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;  /* Smooth fade transition */
}

/* Active image is fully visible */
.slideshow-image.active {
    opacity: 1;
    z-index: 2;
}

/* Container for all control buttons */
.slideshow-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;  /* Smooth fade for controls */
}

/* Hide controls when mouse is not over slideshow (desktop only) */
.slideshow-container:not(:hover) .slideshow-controls {
    opacity: 0;
}

/* On mobile devices (screens under 768px), keep controls visible */
@media (max-width: 768px) {
    .slideshow-container:not(:hover) .slideshow-controls {
        opacity: 1;
    }
}

/* Individual button styling */
.slideshow-btn {
    background: rgba(0, 0, 0, 0.7);  /* Semi-transparent black */
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;  /* Makes buttons circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

/* Darken button on hover */
.slideshow-btn:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* Slight scale effect when button is clicked */
.slideshow-btn:active {
    transform: scale(0.95);
}

/* Image counter (e.g., "3 / 10") in top right */
.slideshow-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hide counter when mouse is not over slideshow (desktop only) */
.slideshow-container:not(:hover) .slideshow-counter {
    opacity: 0;
}

/* On mobile, keep counter visible */
@media (max-width: 768px) {
    .slideshow-container:not(:hover) .slideshow-counter {
        opacity: 1;
    }
    
    /* Hide fullscreen button on mobile devices */
    .slideshow-btn.fullscreen-btn {
        display: none;
    }
}

/* Fullscreen mode - make container fill entire screen */
.slideshow-container:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
}

/* Webkit browsers (Chrome, Safari) */
.slideshow-container:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
}

/* Firefox */
.slideshow-container:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0;
}