/**
 * Momentum Fitness - Responsive Normalization
 * Standardizes all breakpoints and responsive behavior
 */

/* ============================================
   STANDARD BREAKPOINTS
   ============================================
   Mobile:     max-width: 768px
   Tablet:     769px - 1024px
   Desktop:    min-width: 1025px
   ============================================ */

/* Mobile First - Base Styles */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

video {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    width: 100%;
}

/* Cards - Mobile First (only for mobile) */
@media (max-width: 768px) {
    .service-card,
    .package-card,
    .blog-card,
    .team-card,
    .trainer-profile-card,
    .advantage-card,
    .testimonial-card,
    .faq-item,
    .contact-info-card,
    .service-preview-card {
        width: 100%;
        max-width: 100%;
        padding: 1.25rem;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

/* Desktop: Cards should be controlled by grid, not forced to 100% */
@media (min-width: 769px) {
    .service-card,
    .package-card,
    .blog-card,
    .team-card,
    .trainer-profile-card,
    .contact-info-card {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Carousel cards - Keep their original min-width/max-width on desktop */
    .advantage-card,
    .testimonial-card,
    .faq-item,
    .service-preview-card {
        /* Don't override - let original CSS rules apply */
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        box-sizing: border-box;
    }
    
    /* Specific carousel card widths - Desktop */
    #advantagesCarousel .advantage-card {
        min-width: 320px !important;
        max-width: 320px !important;
        width: 320px !important;
    }
    
    .testimonials-section .testimonial-card {
        min-width: 350px !important;
        max-width: 350px !important;
        width: 350px !important;
    }
    
    .service-preview-card {
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
    
    /* FAQ items in carousel - Desktop */
    .faq-section .faq-item,
    #faqCarousel .faq-item {
        min-width: 380px !important;
        max-width: 380px !important;
        width: 380px !important;
    }
    
    /* Package cards in carousel - Desktop */
    .packages-detail-section .package-card {
        min-width: 380px !important;
        max-width: 380px !important;
        width: 380px !important;
    }
}

/* Grids - Mobile First (Single Column) - Only for mobile */
@media (max-width: 768px) {
    .about-content,
    .services-grid,
    .team-grid,
    .packages-grid,
    .blog-grid,
    .features-grid,
    .vision-mission-grid,
    .stats-grid,
    .trainers-profile-grid,
    .contact-info-grid,
    .contact-map-info-grid,
    .packages-preview-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
    }
}

/* Container - Mobile First */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* ============================================
   TABLET (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding: 0 1.5rem;
    }

    .about-content,
    .services-grid,
    .team-grid,
    .packages-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .packages-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   DESKTOP (min-width: 1025px)
   ============================================ */
@media (min-width: 1025px) {
    .container {
        max-width: 1300px;
        padding: 0 20px;
    }

    .about-content,
    .services-grid,
    .team-grid,
    .packages-grid,
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .packages-preview-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-map-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* ============================================
   LARGE DESKTOP (min-width: 1400px)
   ============================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }
}