/**
 * ============================================================
 * GYM BRO — Responsive Stylesheet
 * ============================================================
 * Media queries for all breakpoints:
 * - 1200px (large tablets/small desktops)
 * - 992px  (tablets)
 * - 768px  (large phones/small tablets)
 * - 576px  (phones)
 * ============================================================
 */

/* ═══════════════════════════════════════════════════════════
   MAX-WIDTH: 1200px — Large tablets, small desktops
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

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

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

/* ═══════════════════════════════════════════════════════════
   MAX-WIDTH: 992px — Tablets
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

    /* Navigation — show hamburger, hide desktop nav */
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--primary-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        transition: right 0.4s ease;
        z-index: 999;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .nav-auth {
        display: none;
    }

    .nav-auth-mobile {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 10px;
    }

    /* Grids */
    .grid-3,
    .equipment-grid,
    .plans-grid,
    .testimonials-grid,
    .timings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* About Story */
    .about-story {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-image-placeholder {
        min-height: 300px;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Plans popular card — remove scale on tablet */
    .plan-card.popular {
        transform: none;
    }

    /* Section padding */
    .section {
        padding: 70px 0;
    }

    /* Testimonials full page */
    .testimonials-full-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   MAX-WIDTH: 768px — Large phones, small tablets
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Grids collapse further */
    .grid-3,
    .equipment-grid,
    .plans-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .grid-2,
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }

    .timings-grid {
        grid-template-columns: 1fr;
    }

    .hygiene-grid {
        grid-template-columns: 1fr;
    }

    .contact-info-cards {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom .footer-container {
        flex-direction: column;
        text-align: center;
    }

    /* Section */
    .section {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    /* Hero */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 250px;
    }

    /* CTA Banner */
    .cta-banner {
        padding: 60px 0;
    }

    /* Auth cards */
    .auth-card {
        padding: 30px 20px;
    }

    /* Page header */
    .page-header {
        padding: 120px 0 40px;
    }

    /* Cards compact */
    .card {
        padding: 25px 20px;
    }

    /* Map */
    .map-container iframe {
        height: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════
   MAX-WIDTH: 576px — Phones
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 576px) {

    /* Stats grid stays 2 columns on phones */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 25px 15px;
    }

    .stat-number {
        font-size: 2rem;
    }

    /* Buttons */
    .btn {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    /* Section padding */
    .section {
        padding: 50px 0;
    }

    /* Hero adjustments */
    .hero-logo {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    /* Cards */
    .card {
        padding: 20px 15px;
    }

    /* Plan price */
    .plan-price {
        font-size: 2.5rem;
    }

    /* WhatsApp popup position */
    .whatsapp-popup {
        right: 10px;
        bottom: 95px;
        width: 280px;
    }

    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
        bottom: 20px;
        right: 15px;
    }

    /* Popup */
    .popup-container {
        padding: 30px 20px;
    }

    /* Nav */
    .logo-text {
        font-size: 1.5rem;
    }

    /* Dashboard */
    .dashboard-section {
        padding: 100px 15px 40px;
    }

    /* Legal */
    .legal-section {
        padding: 100px 15px 40px;
    }

    /* Map */
    .map-container iframe {
        height: 250px;
    }

    /* Footer contact */
    .footer-contact li {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — Accessibility
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}