/* Image Proportions CSS for jiu-jitsu-adultos.html */

/* Main hero image */
.video-wrapper-2 img,
.video-wrapper-3 img {
    width: 100%;
    height: 50%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    display: block; /* Ensures no extra space */
    border: none; /* Explicitly remove any border */
}

/* GB1, GB2, and other program images */
.gb1-image-container img,
.gb2-image-container img {
    max-width: 700px;
    max-height: 800px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block; /* Ensures no extra space */
    border: none; /* Explicitly remove any border */
}

/* Program item images */
.programa-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block; /* Ensures no extra space */
    border: none; /* Explicitly remove any border */
}

/* Programa item in gb-programas section */
.programa-item .programa-image-container {
    height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 10px 10px 0 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .video-wrapper-2 img,
    .video-wrapper-3 img {
        width: 100%;
        height: 70vh;
        max-height: none;
        object-fit: cover;
        position: relative;
    }
}

@media (max-width: 768px) {
    .video-wrapper-2 img,
    .video-wrapper-3 img {
        width: 100%;
        height: 50vh;
        max-height: none;
        object-fit: cover;
        position: relative;
        top: auto;
        left: auto;
    }
    
    .gb1-image-container img,
    .gb2-image-container img,
    .programa-image {
        max-width: 100%;
        max-height: 400px;
    }
    
    .atleta-photo {
        height: 220px;
        object-position: center;
    }
    
    /* Improved card layout for tablets */
    .atleta-card {
        margin: 0 auto;
        max-width: 450px;
    }
    
    .programa-item {
        margin: 0 auto 30px;
        max-width: 450px;
    }
    
    /* Adjust grid layouts */
    .atletas-grid,
    .programas-grid {
        gap: 20px;
    }
}

/* Additional responsive adjustments for smaller mobile devices */
@media (max-width: 480px) {
    .atleta-photo {
        height: 180px;
    }
    
    .atleta-card {
        max-width: 320px;
        margin: 0 auto 20px;
    }
    
    .programa-item {
        max-width: 320px;
        margin: 0 auto 20px;
    }
    
    .programa-item .programa-image-container {
        height: 180px;
    }
    
    .programa-content {
        padding: 15px;
    }
    
    .programa-title {
        font-size: 1.5rem;
    }
    
    /* Further reduce size for very small screens */
    @media (max-width: 360px) {
        .atleta-photo {
            height: 160px;
        }
        
        .atleta-card {
            max-width: 280px;
        }
        
        .programa-item {
            max-width: 280px;
        }
        
        .programa-item .programa-image-container {
            height: 160px;
        }
    }
}