/* Gallery Slider Custom Styles (Glide.js) */

.gallery-section .gallery-slider {
    position: relative;
    padding-bottom: 40px; /* Space for pagination */
}

/* Navigation Arrows */
.gallery-section .glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 10;
    color: #ef5350;
    transition: all 0.3s ease;
}

.gallery-section .glide__arrow:hover {
    background-color: #ef5350;
    color: #fff;
}

.gallery-section .glide__arrow--left {
    left: 10px;
}

.gallery-section .glide__arrow--right {
    right: 10px;
}

.gallery-section .glide__arrow i {
    font-size: 20px;
    font-weight: bold;
}

/* Pagination Bullets */
.gallery-section .glide__bullets {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    margin-top: 20px;
    max-width: 100%;
    overflow: hidden; /* Hide extra bullets */
    justify-content: center;
}

.gallery-section .glide__bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: 2px solid #ef5350;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevent shrinking */
    display: none; /* Hide all by default */
}

/* Show only active and surrounding bullets (simulated logic for "5 max") 
   Since CSS cannot detect "active +/- 2", we can only limit the total visible if we don't use JS.
   However, the user wants "max 5 visible".
   
   A pure CSS solution for "active +/- 2" is not possible without JS updating classes.
   But we can use a simpler approach: 
   If we want to strictly follow "max 5 visible" and functional navigation,
   usually we need JS to translate the bullets container or show/hide specific ones.
   
   For now, I will modify the JS to handle the "active class" and surrounding visibility,
   OR I can just hide the bullets entirely if there are too many and rely on arrows?
   The user asked for "5 puntitos visibles".
   
   Let's try a CSS trick: 
   If we can't do dynamic "active +/- 2", we can at least limit the width of the container
   and center the active one? No, that requires JS to scroll the bullets.
   
   Let's implement a JS enhancement in functions.js to handle this "dynamic pagination"
   similar to Instagram or other modern sliders.
   
   For this step, I will prepare the CSS to support the JS change.
*/

.gallery-section .glide__bullet {
    display: block; /* Reset to block for JS control */
    transform: scale(0.6);
    opacity: 0.5;
}

.gallery-section .glide__bullet--active {
    background-color: #ef5350;
    transform: scale(1);
    opacity: 1;
}

/* Intermediate sizes for a "worm" effect if we wanted, but let's stick to simple visibility first */

/* Slides */
.gallery-section .glide__track {
    overflow: hidden;
}

.gallery-section .glide__slides {
    display: flex; /* Ensure slides are flex items to stretch */
    align-items: stretch; /* Stretch slides to equal height */
}

.gallery-section .glide__slide {
    height: auto;
    display: flex; /* Make slide a flex container */
    flex-direction: column;
    /* Removed width: auto to let Glide control widths but keep our image sizing */
}

.gallery-section .gallery-item {
    margin: 0;
    flex: 1; /* Grow to fill slide height */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-section .gallery-item .gallery-thumb {
    height: 350px; /* Set a fixed height */
    width: 100%; /* Ensure it fills the slide width that Glide assigns */
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Remove black background */
}

.gallery-section .gallery-item .gallery-thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.gallery-section .gallery-item .gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* This prevents the image from being cut */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-section .gallery-item .gallery-thumb:hover img {
    transform: scale(1.05);
}