/* --- Gallery Container --- */
.agm-gallery-frontend {
    position: relative; /* Needed for absolute positioning of navigation */
    overflow: hidden; /* Crucial: Hides images outside the view */
    max-width: 100%; /* Ensure it doesn't overflow parent */
    margin: 0 auto; /* Center the gallery */
    box-sizing: border-box; /* Include padding/border in element's total width/height */
    /* Height is set dynamically by PHP, e.g., style="height: 500px;" */
     height: 100% !important;
}

.agm-gallery-container {
    display: flex; /* Arranges slides in a row */
    height: 100%; /* Takes full height of agm-gallery-frontend */
    transition: transform 0.5s ease-in-out; /* Smooth slide transition */
    /* Will be translated horizontally by JavaScript */
}

.agm-slide {
    flex: 0 0 33.333%; /* Makes each slide take exactly 1/3 of the container width */
    max-width: 33.333%; /* Ensure it respects the flex basis */
    height: 100%; /* Takes full height of agm-gallery-container */
    box-sizing: border-box;
    padding: 10px; /* Space between slides */
    display: flex; /* For content alignment within the slide */
    flex-direction: column;
    justify-content: space-between; /* Push image to top, caption to bottom */
    text-align: center;
    background-color: #f0f0f0; /* Optional: background for each slide */
    border: 1px solid #e0e0e0; /* Optional: border for each slide */
}

.agm-slide-image {
    max-width: 100%;
    height: 100%; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center image horizontally */
    object-fit: contain; /* Ensures image fits within its boundaries without cropping */
    flex-grow: 1; /* Allows image to take up available space */
}

.agm-caption {
    padding: 10px 5px;
    font-size: 0.9em;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    border-top: 1px solid #ccc;
    margin-top: 10px; /* Space between image and caption */
}

.agm-no-images-message {
    text-align: center;
    padding: 20px;
    font-style: italic;
    color: #777;
    width: 100%; /* Ensure message spans the full width */
}

/* --- Navigation Buttons --- */
.agm-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px; /* Padding for buttons from edges */
    box-sizing: border-box;
    z-index: 10; /* Ensure buttons are above images */
}

.agm-nav-top {
    top: 10px; /* Position at the top */
}

.agm-nav-bottom {
    bottom: 10px; /* Position at the bottom */
}

.agm-nav button {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.agm-nav button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* --- Responsive Adjustments for Navigation & Slides --- */

@media (max-width: 992px) {
    .agm-slide {
        flex: 0 0 50%; /* 2 columns on medium screens */
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .agm-slide {
        flex: 0 0 100%; /* 1 column on smaller screens */
        max-width: 100%;
    }
    .agm-nav button {
        padding: 8px 12px;
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .agm-slide {
        padding: 5px;
    }
    .agm-caption {
        font-size: 0.8em;
    }
}