/* Rivera Excavation responsive layout override
   Load this stylesheet after style.css. Desktop styles remain unchanged. */

img,
video {
  max-width: 100%;
}

@media (max-width: 900px) {
  .hero {
    min-height: auto;
    gap: 42px;
    padding: 120px 32px 64px;
  }

  .hero-content {
    max-width: 680px;
  }

  .services,
  .projects,
  .about,
  .contact {
    padding: 76px 32px;
  }

  .service-cards,
  .about-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .service-card,
  .about-card {
    width: auto;
    min-width: 0;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .contact-container {
    gap: 36px;
  }
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  nav {
    min-height: 64px;
    padding: 14px 20px;
  }

  .brand,
  nav h2 {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.1;
  }

  .hero {
    gap: 28px;
    padding: 100px 20px 52px;
  }

  .video-label {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .video-card {
    width: min(100%, 340px);
    height: min(128vw, 500px);
    min-height: 360px;
    border-radius: 18px;
  }

  .video-card video {
    border-radius: 18px;
  }

  .video-card::before {
    inset: -34px;
    filter: blur(50px);
  }

  .video-caption {
    margin-top: 16px;
    font-size: 14px;
  }

  .hero-content h1 {
    font-size: clamp(34px, 10vw, 44px);
    letter-spacing: -1.5px;
    margin-bottom: 18px;
  }

  .hero-subtitle {
    font-size: 17px;
    margin-bottom: 24px;
  }

  .hero-checks {
    align-items: flex-start;
    font-size: 16px;
    gap: 10px;
    margin-bottom: 28px;
    text-align: left;
  }

  .buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .buttons a {
    width: 100%;
  }

  .services,
  .projects,
  .about,
  .contact {
    padding: 60px 20px;
  }

  .section-title h2 {
    font-size: clamp(30px, 9vw, 38px);
    line-height: 1.15;
    margin-bottom: 32px;
  }

  .section-title p {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .service-cards,
  .about-cards,
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .service-card,
  .about-card {
    min-height: 0;
    padding: 26px 22px;
  }

  .service-card h3,
  .project-info h3 {
    font-size: 20px;
  }

  .project-card img {
    height: 240px;
  }

  .project-info {
    padding: 22px;
  }

  .about-text {
    font-size: 17px;
    margin-bottom: 32px;
  }

  .contact-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .contact-info,
  .estimate-form {
    min-width: 0;
  }

  .contact-info h3 {
    font-size: 28px;
  }

  .contact-info p {
    font-size: 16px;
  }

  .contact-details {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .estimate-form input,
  .estimate-form textarea {
    max-width: 100%;
    font-size: 16px; /* prevents iPhone Safari zoom on focus */
  }

  .estimate-form button {
    width: 100%;
  }

  footer {
    padding: 42px 20px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 14px 20px;
  }
}

@media (max-width: 360px) {
  .video-card {
    min-height: 320px;
  }

  .hero-content h1 {
    font-size: 32px;
  }
}