/* ===================================================================
   MESHAAL EL CHABAB - RESPONSIVE STYLESHEET
   Breakpoints: 320px, 375px, 430px, 768px, 1024px, 1280px, 1440px+
   =================================================================== */

/* Large Desktops (1280px+) */
@media (min-width: 1280px) {
    .container {
        padding-inline: 2rem;
    }
}

/* Laptops & Standard Desktops (1024px to 1279px) */
@media (max-width: 1279px) {
    .hero-title {
        font-size: 2.3rem;
    }
    
    .home-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .home-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 1.5rem;
    }
}

/* Tablets (768px to 1023px) */
@media (max-width: 1023px) {
    .nav-menu {
        display: none;
    }
    
    .menu-toggle-btn {
        display: flex;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .hero-main-info {
        order: 1;
    }
    
    .announcement-card-wrap {
        order: 2;
    }
    
    .quick-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .main-sections-grid {
        grid-template-columns: 1fr;
    }
    
    .home-activities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .newsletter-footer-card {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .newsletter-form-box {
        max-width: 100%;
    }
    
    .footer-social-wrap {
        align-items: center;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile Devices (max-width: 767px) */
@media (max-width: 767px) {
    .top-bar-inner {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        text-align: center;
    }
    
    .top-contact {
        flex-direction: column;
        gap: 0.35rem;
    }
    
    .hero-title {
        font-size: 1.9rem;
    }
    
    .hero-emblem {
        width: 110px;
        height: 110px;
    }
    
    .hero-subtitle {
        font-size: 1.05rem;
    }
    
    .slide-content-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .slide-image-box img {
        height: 140px;
    }
    
    .slider-nav-btn {
        display: none; /* Rely on touch swipe & dots on mobile */
    }
    
    .quick-info-grid {
        grid-template-columns: 1fr;
    }
    
    .home-activities-grid {
        grid-template-columns: 1fr;
    }
    
    .home-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    
    .newsletter-info-box {
        flex-direction: column;
        text-align: center;
    }
    
    .newsletter-form-box {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .newsletter-input {
        width: 100%;
        text-align: center;
    }
    
    .newsletter-btn {
        width: 100%;
    }
    
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .lightbox-nav-btn {
        width: 38px;
        height: 38px;
    }
    
    .lightbox-nav-btn.prev { right: 0.5rem; }
    .lightbox-nav-btn.next { left: 0.5rem; }
    
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
    
    .toast {
        min-width: unset;
        width: 100%;
    }
}

/* Small Mobiles (320px to 374px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 1.6rem;
    }
    
    .announcement-glass-card {
        padding: 1.25rem;
    }
    
    .brand-text {
        font-size: 1.05rem;
    }
}