/* ==========================================================================
   RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */

/* Tablet (768px and up) */
@media screen and (min-width: 768px) {
  :root {
    --spacing-md: 2.5rem;
    --spacing-lg: 5rem;
    --spacing-xl: 10rem;
    --header-height: 90px;
  }

  html {
    font-size: 16px;
  }
}

/* Desktop (1024px and up) */
@media screen and (min-width: 1024px) {
  :root {
    --spacing-md: 3rem;
    --spacing-lg: 6rem;
    --spacing-xl: 12rem;
    --header-height: 100px;
    --container-padding: 3rem;
  }
}

/* Large Desktop (1440px and up) */
@media screen and (min-width: 1440px) {
  :root {
    --container-padding: 4rem;
  }
}

/* ==========================================================================
   MOBILE NAV — Hamburger Button
   ========================================================================== */

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  color: var(--token-white);
  transition: color var(--transition-fast);
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.navbar.is-scrolled .mobile-menu-btn { color: var(--token-dark); }

/* Mobile nav dropdown accordion */
.nav-mobile-open .nav-item { position: static; width: 100%; }
.nav-mobile-open .has-dropdown > .nav-link { display: flex; justify-content: space-between; align-items: center; }
.nav-mobile-open .nav-dropdown {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: hidden;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--token-beige);
  border-radius: 8px;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  min-width: unset !important;
}
.nav-mobile-open .nav-item.dropdown-open .nav-dropdown {
  max-height: 400px;
  visibility: visible;
  pointer-events: auto;
  padding: 6px !important;
}
.nav-mobile-open .nav-dropdown .nav-dropdown-item { color: var(--token-dark); font-size: 0.9375rem; }

/* Mobile nav panel */
.nav-mobile-open .nav-links {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--token-white);
  padding: 32px;
  gap: 20px;
  border-bottom: 1px solid var(--token-gray-light);
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.nav-mobile-open .nav-link {
  color: var(--token-dark) !important;
  font-size: 1.125rem;
  opacity: 1 !important;
}

/* ==========================================================================
   MOBILE (max 768px)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Nav --- */
  .mobile-menu-btn { display: flex; }
  .nav-btn { display: none; }

  /* --- Spacing --- */
  :root {
    --section-pad-y: 80px;
    --section-pad-y-sm: 60px;
    --section-pad-x: 20px;
  }

  /* --- Hero --- */
  .hero { padding-top: calc(var(--header-height) + 40px); padding-bottom: 60px; }
  .hero-top { gap: 20px !important; }

  /* --- Flex Split --- */
  .flex-split { flex-direction: column; gap: 24px; align-items: flex-start !important; }

  /* --- Stats --- */
  .stats-row { margin-top: 60px; }

  /* --- Project row --- */
  .project-row .project-img-wrapper { display: none; }

  /* --- Masonry Grid --- */
  .masonry-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .masonry-item { grid-column: unset !important; }

  /* --- Double CTA --- */
  .double-cta { grid-template-columns: 1fr; }
  .cta-card { padding: 60px 32px; gap: 32px; }

  /* --- Gallery Grid --- */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .gallery-item { grid-column: unset !important; }

  /* --- Filter tabs --- */
  .filter-tab { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
  .filter-tabs { margin-bottom: 40px; }

  /* Gallery section flex layout --- */
  .section .container > div[style*="display: flex"][style*="gap: 80px"] {
    flex-direction: column;
    gap: 0 !important;
  }

  /* --- Experience Layout --- */
  .experience-layout {
    height: auto;
    min-height: unset;
    padding: 80px 20px;
    flex-direction: column;
    text-align: left;
  }
  .experience-img-left,
  .experience-img-right { display: none; }

  /* --- H-Slider (disable GSAP pin wrapper issues) --- */
  .h-slider-wrapper {
    flex-wrap: wrap;
    width: 100% !important;
    transform: none !important;
    gap: 24px;
    padding: 0 20px 20px;
  }
  .h-slider-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .h-spacer { display: none !important; }

  /* --- Product cards (prodotti/index.html) --- */
  .product-card-grid {
    grid-template-columns: 1fr !important;
  }
  .product-card-grid > div[style*="aspect-ratio: 4/3"] {
    aspect-ratio: 16/9 !important;
  }
  .product-card-grid > div[style*="padding: 80px 60px"] {
    padding: 48px 32px !important;
  }

  /* --- Split Layout --- */
  .split-left, .split-right { padding: 48px 32px !important; }

  /* --- Contact section --- */
  .contact-grid { padding-top: 60px !important; }

  /* --- Masonry quote --- */
  .masonry-quote { padding: 40px 24px !important; }

  /* --- Section inset --- */
  .section-inset { padding: 0 20px; }

  /* --- Footer --- */
  footer .flex-split { flex-direction: column; gap: 24px; }

  /* --- Image banner aspect ratio --- */
  .section-sm .container > div[style*="aspect-ratio: 21/9"] {
    aspect-ratio: 4/3 !important;
  }

  /* --- Sector card grid (settori.html) --- */
  .sector-card-grid { grid-template-columns: 1fr; gap: 24px; }
  .sector-card-grid .sector-card-box[style*="grid-column: 1 / -1"] {
    grid-column: unset !important;
  }

  /* --- Sector cards content padding (home + settori) --- */
  .sector-card-content { padding: 24px; gap: 14px; }
  .sector-card-img { height: 180px; }

  /* --- Services grid --- */
  .services-grid { grid-template-columns: 1fr; gap: 24px; }

  /* --- Feature grid (already has its own 768 breakpoint in style.css) --- */

  /* --- Footer --- */
  .footer-top { flex-direction: column; gap: 48px; }
  .footer-nav { gap: 28px; }
  .footer-col { min-width: calc(50% - 14px); }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; padding: 48px 0; }

}

/* ==========================================================================
   Reduces Motion Request fallback
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}