/* ==========================================================================
   Responsive Breakpoints — MD Electrical Theme
   ========================================================================== */

/* Laptop / Desktop adjustments (<= 1200px) */
@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .hero__title { font-size: var(--font-size-4xl); }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

/* Tablet (<= 992px) */
@media (max-width: 992px) {
    .container { max-width: 720px; }
    
    /* Navigation */
    .primary-nav, .header__cta { display: none; }
    .mobile-toggle { display: flex; }
    .topbar__left { gap: var(--space-md); }

    /* Hero */
    .hero { min-height: 75vh; }
    .hero__title { font-size: var(--font-size-3xl); }
    .hero__description { font-size: var(--font-size-base); }

    /* Sections */
    .section { padding: var(--space-3xl) 0; }
    .product-modal__grid { grid-template-columns: 1fr; }
    .single-layout-grid { grid-template-columns: 1fr !important; }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 1rem; }
    .topbar { display: none; } /* Hide topbar on mobile for clean header */
    
    .site-header { height: 70px; }
    .header__inner { height: 70px; }
    .header__logo img { height: 45px; }

    /* Hero */
    .hero { min-height: 65vh; text-align: center; }
    .hero__subtitle { justify-content: center; }
    .hero__subtitle::before { display: none; }
    .hero__actions { justify-content: center; }

    /* Section Headings */
    .section-heading__title { font-size: var(--font-size-2xl); }

    /* Grids */
    .footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .footer__bottom .container { flex-direction: column; gap: 10px; text-align: center; }
    
    .whatsapp-float { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 24px; }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px) {
    .hero__title { font-size: var(--font-size-2xl); }
    .btn { width: 100%; }
    .hero__actions { flex-direction: column; width: 100%; }
}