/* ========================================
   RESPONSIVE DEVICE-SPECIFIC FIXES
   Works with react-responsive hook
   ======================================== */

/* Base mobile styles */
@media (max-width: 767px) {
  /* Hero sections - mobile optimized */
  .hero-section,
  .services-hero-section {
    min-height: 65vh !important;
    height: auto !important;
    padding: 20vh 4vw 6vh !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-content,
  .services-hero-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 2vw !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-title,
  .services-hero-title {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }

  .hero-description {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* Search container - mobile */
  .search-container {
    margin-top: 2.5rem !important;
    margin-bottom: 2rem !important;
    padding: 0 4vw !important;
  }

  .search-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search-input {
    font-size: 1rem !important;
    padding: 0.875rem 0.75rem !important;
  }

  .search-btn {
    min-width: 5rem !important;
    font-size: 0.875rem !important;
    padding: 0.875rem 0.5rem !important;
  }

  .search-btn span {
    font-size: 0.875rem !important;
  }

  /* Products grid - now handled by mobile-first-responsive.css with auto-fit */
  /* Removed fixed breakpoints - using fluid grid instead */

  .product-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .product-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  .product-name {
    font-size: clamp(0.75rem, 3vw, 0.9375rem) !important;
    padding: 0.75rem 0.5rem !important;
  }

  /* Services cards - mobile */
  .service-cards-section {
    margin-top: 1.5rem !important;
    padding: 0 4vw 2rem !important;
  }

  .services-page-card {
    padding: 1.5rem 1rem !important;
    margin-bottom: 1rem !important;
    min-height: auto !important;
  }

  .service-card-title {
    font-size: clamp(1.125rem, 4.5vw, 1.375rem) !important;
    margin-bottom: 0.75rem !important;
  }

  .service-card-description {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    line-height: 1.5 !important;
  }

  /* Contact form - mobile */
  .home-contact-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4vw !important;
  }

  .home-contact-form .form-group {
    margin-bottom: 1.75rem !important;
  }

  .home-contact-form .form-control {
    font-size: 1rem !important;
    padding: 0.875rem 0.5rem !important;
    min-height: 3rem !important;
  }

  .home-contact-form textarea.form-control {
    min-height: 7rem !important;
    padding: 0.875rem 0.5rem !important;
  }

  .home-contact-btn {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.0625rem !important;
    min-height: 3.25rem !important;
    border-radius: 1.625rem !important;
    justify-content: center !important;
  }

  /* Filter buttons - mobile */
  .filter-section {
    margin: 2rem 0 1.5rem !important;
    padding: 0 3vw !important;
  }

  .filter-buttons {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .filter-btn {
    font-size: clamp(0.75rem, 3vw, 0.875rem) !important;
    padding: 0.625rem 1rem !important;
    min-height: 2.75rem !important;
  }

  /* Container fixes */
  .container-fluid.px-5 {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}

/* Small mobile specific (320px - 374px) */
@media (max-width: 374px) {
  .hero-title,
  .services-hero-title {
    font-size: 1.25rem !important;
  }

  .hero-description {
    font-size: 0.875rem !important;
  }

  .search-btn {
    min-width: 4.5rem !important;
  }

  .search-btn span {
    display: none !important;
  }

  .product-name {
    font-size: 0.75rem !important;
    padding: 0.625rem 0.375rem !important;
  }

  .filter-btn {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* Medium mobile (375px - 575px) */
@media (min-width: 375px) and (max-width: 575px) {
  .hero-section,
  .services-hero-section {
    min-height: 68vh !important;
  }
}

/* Large mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  /* Product grid now handled by mobile-first-responsive.css */

  .hero-section,
  .services-hero-section {
    min-height: 70vh !important;
  }
}

/* Landscape mode - mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-section,
  .services-hero-section {
    min-height: 85vh !important;
    padding: 15vh 4vw 4vh !important;
  }

  .hero-title,
  .services-hero-title {
    font-size: 1.375rem !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-description {
    font-size: 0.9375rem !important;
    margin-bottom: 0.75rem !important;
  }

  .search-container {
    margin-top: 1.5rem !important;
  }
}

/* Tablet styles (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Product grid now handled by mobile-first-responsive.css */

  .hero-section,
  .services-hero-section {
    min-height: 60vh !important;
    padding: 18vh 5vw 8vh !important;
  }

  .service-cards-section {
    margin-top: -4rem !important;
  }
}

/* Desktop styles (1024px+) */
@media (min-width: 1024px) {
  /* Product grid now handled by mobile-first-responsive.css */

  .service-cards-section {
    margin-top: -8rem !important;
  }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  /* Product grid now handled by mobile-first-responsive.css */
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  .btn,
  .filter-btn,
  .search-btn,
  .product-card {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
  }

  .product-card:active {
    transform: scale(0.98) !important;
  }

  .filter-btn:active,
  .search-btn:active,
  .home-contact-btn:active {
    transform: scale(0.95) !important;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 767px) {
    body {
      padding-left: env(safe-area-inset-left) !important;
      padding-right: env(safe-area-inset-right) !important;
    }

    .hero-section,
    .services-hero-section,
    .search-container,
    .products-section,
    .service-cards-section {
      padding-left: max(env(safe-area-inset-left), 4vw) !important;
      padding-right: max(env(safe-area-inset-right), 4vw) !important;
    }
  }
}