/* =========================================================
   MOBILE -> DESKTOP-LIKE OVERRIDES
   Obiettivo: avvicinare la vista mobile a quella desktop
   mantenendo leggibilità e touch target accessibili.
   ========================================================= */

/* ---------- TABLET / DESKTOP RIDOTTO (481px - 768px) ---------- */
@media (max-width: 768px) and (min-width: 481px) {
  /* Mantieni nav orizzontale anche su tablet */
  .navbar-nav {
    display: flex !important;
    gap: 1.25rem !important;
  }
  .navbar-nav a {
    font-size: 0.85rem !important;
  }
  .hamburger {
    display: none !important;
  }
  .navbar-cta {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem !important;
  }

  /* Griglie a 2 colonne come mini-desktop */
  .services-grid,
  .features-grid,
  .values-grid,
  .team-grid,
  .benefits-grid,
  .stats-grid,
  .contact-grid,
  .gallery-grid,
  .footer-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero: mantieni layout ampio */
  .hero-content {
    max-width: 90vw !important;
  }
}

/* ---------- SMARTPHONE (fino a 480px) ---------- */
@media (max-width: 480px) {
  /* Navbar: logo più piccolo, CTA compatta ma nav classica */
  .navbar-content {
    padding: 0.75rem 1rem !important;
    height: 60px !important;
  }
  .navbar-logo-img {
    height: 44px !important;
  }
  .navbar-cta {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.8rem !important;
    min-height: 40px !important;
  }

  /* Griglie: 2 colonne anche su smartphone dove possibile */
  .services-grid,
  .features-grid,
  .values-grid,
  .benefits-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.85rem !important;
  }

  /* Stats in 2 colonne (invece di 1 stackata) */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Cards più compatte ma leggibili */
  .service-card,
  .feature-card,
  .value-card,
  .benefit-card,
  .gallery-item {
    padding: 1rem !important;
  }
  .service-card h3,
  .feature-card h3,
  .value-card h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  .service-card p,
  .feature-card p,
  .value-card p {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  /* Hero proporzionato come desktop ma più stretto */
  .hero {
    min-height: 85vh !important;
  }
  .hero-content {
    max-width: 95vw !important;
    padding: 1rem !important;
  }
  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
  }
  .hero-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .hero-buttons .btn {
    flex: 1 1 140px !important;
    padding: 0.65rem 0.8rem !important;
    font-size: 0.85rem !important;
  }

  /* Sezioni: padding ridotto ma presente */
  .section {
    padding: 2.5rem 0 !important;
  }
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Tipografia coerente con desktop */
  h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
  }

  /* Contact section: ancora 1 colonna ma compatto */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Footer: 2 colonne invece di 1 */
  .footer-columns {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Carousel/galleria: immagini più larghe */
  .carousel-img,
  .gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Form preventivo: 2 colonne dove ci stanno */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .form-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Timeline orizzontale: card più strette ma scrollabili */
  .htimeline-step {
    flex: 0 0 82vw !important;
  }

  /* Buttons sempre comodi al tocco */
  .btn {
    min-height: 44px !important;
    padding: 0.7rem 1.1rem !important;
    font-size: 0.9rem !important;
  }
}

/* ---------- IMMAGINI: regole globali sicure ---------- */
img {
  max-width: 100%;
  height: auto;
}

.carousel-img,
.gallery-item img,
.team-photo,
.service-image {
  object-fit: cover;
  width: 100%;
}

/* Previeni overflow orizzontale su mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}