/* =============================================================================
   SILVER AUTO ELECTRIC AND AC REPAIRING — DOHA, QATAR
   Responsive Media Queries & Mobile Perfection (No Overlapping Elements)
   Targeting: 320px, 375px, 390px, 430px, 768px, 1024px, 1280px, 1440px, 1920px
   ============================================================================= */

/* --- Large Desktops (1440px - 1920px) --- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1320px;
  }
  .hero-section {
    min-height: 88vh;
  }
}

/* --- Standard Desktops & Laptops (1025px - 1280px) --- */
@media (max-width: 1280px) {
  .desktop-nav {
    gap: 4px;
  }
  .desktop-nav-item a {
    padding: 8px 10px;
    font-size: 0.88rem;
  }
  .brand-logo-img {
    height: 46px;
    max-width: 240px;
  }
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Tablets & Small Laptops (769px - 1024px) --- */
@media (max-width: 1024px) {
  .desktop-nav {
    display: none; /* Switch to hamburger menu */
  }
  .hamburger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .problems-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
  .contact-layout-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .welcome-image-wrap img {
    height: 380px;
  }
}

/* --- Mobile Landscape & Large Phones (431px - 768px) --- */
@media (max-width: 768px) {
  .topbar {
    display: none; /* Hide topbar on mobile to eliminate clutter */
  }
  :root {
    --header-main-height: 70px;
    --container-padding: 18px;
  }
  .brand-logo-img {
    height: 42px;
    max-width: 210px;
  }
  .header-action-group .btn-book-header {
    display: none; /* Rely on mobile drawer CTA and floating WhatsApp */
  }
  .section {
    padding: 60px 0;
  }
  .section-header {
    margin-bottom: 40px;
  }
  .hero-section {
    min-height: auto;
    padding: 70px 0 60px 0;
  }
  .hero-stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .timeline-grid {
    grid-template-columns: 1fr;
  }
  .problems-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid-2col {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 24px 18px;
  }
  .welcome-highlights-list {
    grid-template-columns: 1fr;
  }
  .cta-banner-wrap {
    padding: 40px 20px;
  }
  .cta-banner-actions {
    flex-direction: column;
    width: 100%;
  }
  .cta-banner-actions .btn {
    width: 100%;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom-bar {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

/* --- Standard Mobile Phones (375px - 430px: iPhone 13/14/15, Samsung Galaxy) --- */
@media (max-width: 430px) {
  :root {
    --container-padding: 16px;
    --header-main-height: 64px;
  }
  .brand-logo-img {
    height: 38px;
    max-width: 190px;
  }
  .section-title {
    font-size: 1.7rem;
  }
  .hero-title {
    font-size: 2.1rem;
    letter-spacing: -0.5px;
  }
  .hero-subtitle {
    font-size: 1.05rem;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .floating-whatsapp-btn {
    width: 52px;
    height: 52px;
    bottom: 18px;
    right: 16px;
  }
  .floating-whatsapp-btn svg {
    width: 30px;
    height: 30px;
  }
  .whatsapp-tooltip {
    display: none; /* Avoid overlay on small touchscreens */
  }
  .service-card-image {
    height: 180px;
  }
}

/* --- Compact Mobile Screens (320px: iPhone SE, older Android) --- */
@media (max-width: 360px) {
  :root {
    --container-padding: 12px;
  }
  .brand-logo-img {
    height: 34px;
    max-width: 165px;
  }
  .btn {
    padding: 10px 18px;
    font-size: 0.88rem;
  }
  .hero-title {
    font-size: 1.85rem;
  }
  .form-card {
    padding: 18px 12px;
  }
}

/* Touch target accessibility for all mobile sizes */
@media (pointer: coarse) {
  .btn, .filter-btn, .desktop-nav-item a, .mobile-nav-item a, .faq-question-btn {
    min-height: 44px;
  }
}