/* Mobile-specific styles and overrides */

/* Prevent horizontal scrolling on all devices */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Fix road animation overflow */
.road-break {
  max-width: 100vw;
  overflow: hidden;
}

.road-animation {
  max-width: 100vw;
  overflow: hidden;
}

.road {
  max-width: 100vw;
}

@media (max-width: 768px) {
  /* Base mobile defaults: show the full image, never crop */
  .hero,
  .reviews,
  .contact,
  .why-choose {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #0b0b0b;
  }
  /* Fix background attachment issues on mobile */
  .hero,
  .contact,
  .why-choose {
    background-attachment: scroll !important;
  }

  /* iOS/Safari smoothing */
  @supports (-webkit-touch-callout: none) {
    .reviews,
    .contact,
    .why-choose {
      -webkit-background-size: contain;
      background-size: contain;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform;
    }
  }

  .reviews {
    background-image: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(30, 69, 153, 0.9) 100%
      ),
      url("https://www.hounddogstowing.com/assets/images/DSC0508-HDR.webp");
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover, contain !important;
    background-attachment: scroll !important;
  }

  .contact {
    background-image: linear-gradient(
        rgba(20, 20, 20, 0.7),
        rgba(20, 20, 20, 0.7)
      ),
      url("https://www.hounddogstowing.com/assets/images/truckdemo.webp");
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover, contain !important;
    background-attachment: scroll !important;
  }

  .why-choose {
    background-image: linear-gradient(
        rgba(20, 20, 20, 0.7),
        rgba(20, 20, 20, 0.7)
      ),
      url("https://www.hounddogstowing.com/assets/images/towtruckspano-Edit-3.jpg");
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover, contain !important;
    background-attachment: scroll !important;
  }

  /* Additional mobile-specific adjustments */
  .container {
    padding: 0 1rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  .service-card,
  .location-card {
    margin-bottom: 1rem;
  }

  .road-animation {
    height: 150px;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }

  .tow-truck {
    height: 80px;
    bottom: 15px;
  }

  /* Fix grid overflow on mobile */
  .reviews-grid-modern {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .reviews-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }

  /* Ensure footer images don't overflow */
  .footer-col img {
    max-width: 100% !important;
    height: auto;
  }

  /* Fix services grid for mobile */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  /* Ensure all images scale properly */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Fix any wide elements */
  .hero-logo img {
    max-width: 280px;
    width: 100%;
  }

  /* Adjust padding for sections */
  section {
    padding: 3rem 0;
  }

  /* Fix footer bottom flex wrap */
  .footer-bottom {
    padding: 1rem 0;
    gap: 0.75rem;
    font-size: 0.9rem;
  }

  .footer-bottom p {
    white-space: normal;
  }

  /* Ensure buttons don't overflow */
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Fix hero buttons for mobile */
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}

/* iPad & similar tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  /* iPad: Force contain behavior with small images to test */
  .hero {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url("/images/AllTrucks.jpg?format=3000w") center center no-repeat !important;
    background-size: contain !important;
    -webkit-background-size: contain !important;
    background-attachment: scroll !important;
    background-color: #0b0b0b !important;
  }

  .reviews {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(30, 69, 153, 0.9) 100%
      ),
      url("https://www.hounddogstowing.com/assets/images/DSC0508-HDR.webp")
        center center no-repeat !important;
    background-size: contain !important;
    -webkit-background-size: contain !important;
    background-attachment: scroll !important;
    background-color: #0b0b0b !important;
  }

  .contact {
    background: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.7)),
      url("https://www.hounddogstowing.com/assets/images/truckdemo.webp")
        center center no-repeat !important;
    background-size: contain !important;
    -webkit-background-size: contain !important;
    background-attachment: scroll !important;
    background-color: #0b0b0b !important;
  }

  .why-choose {
    background: linear-gradient(rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.7)),
      url("https://www.hounddogstowing.com/assets/images/towtruckspano-Edit-3.jpg")
        center center no-repeat !important;
    background-size: contain !important;
    -webkit-background-size: contain !important;
    background-attachment: scroll !important;
    background-color: #0b0b0b !important;
  }

  /* iPad-specific adjustments - more desktop-like spacing */
  .container {
    padding: 0 2rem;
  }

  .reviews-grid-modern {
    grid-template-columns: 1fr 1fr !important;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Small mobile devices */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .why-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce spacing on very small screens */
  .container {
    padding: 0 0.75rem;
    max-width: 100%;
  }

  /* Ensure hero content fits */
  .hero-logo img {
    max-width: 220px;
  }

  .hero-title {
    font-size: 1.75rem;
    word-wrap: break-word;
  }

  .hero-subtitle {
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  /* Fix review cards */
  .review-card-modern {
    padding: 1.5rem 1rem;
  }

  /* Adjust section headers */
  .section-header h2 {
    font-size: 1.75rem;
    word-wrap: break-word;
  }

  .section-header p {
    font-size: 1rem;
    padding: 0 0.5rem;
  }

  /* Ensure footer content doesn't overflow */
  .footer-col {
    width: 100%;
  }

  .footer-col img {
    max-width: 180px !important;
  }

  /* Fix social links */
  .social-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}