/* ================================================
   FLUXARI – responsive.css
   Mobile-first: override base (< 768px),
   poi tablet (>= 768px) e desktop (>= 1024px)
   ================================================ */

/* -----------------------------------------------
   BASE – Mobile (< 768px)
   Override degli stili desktop in style.css
   ----------------------------------------------- */

/* Navbar: mostra hamburger, nascondi link */
.nav-links    { display: none; }
.nav-toggle   { display: flex; }

/* Hero: colonna singola */
.hero-container {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.hero-content {
  text-align: center;
  max-width: 100%;
}
.hero-title em { display: inline; }
.hero-subtitle { max-width: 100%; margin-left: auto; margin-right: auto; }
.hero-actions  { justify-content: center; }
.hero-visual   { order: -1; }

/* Nascondi badge flottanti su mobile */
.float-badge--1,
.float-badge--2 { display: none; }

/* Dashboard card: ridotto su mobile */
.dashboard-card { max-width: 100%; }

/* Stats bar: griglia 2x2 */
.stats-container {
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
}
.stat-divider { display: none; }
.stat-number  { font-size: 1.875rem; }

/* Servizi: colonna singola */
.services-grid { grid-template-columns: 1fr; }

/* Soluzioni: colonna singola su mobile */
.solutions-grid { grid-template-columns: 1fr; }

/* Portfolio: card a colonna singola su mobile */
.case-card-inner {
  grid-template-columns: 1fr;
}
.case-content {
  border-right: none;
  border-bottom: 1px solid var(--dust);
  padding: 1.75rem 1.5rem;
}
.case-sidebar {
  padding: 1.75rem 1.5rem;
}

/* Steps: 2 colonne su mobile, nessuna linea */
.steps-line { display: none; }
.steps-grid {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.steps-container { padding-top: 0; }

/* Testimonianze: colonna singola */
.testimonials-grid { grid-template-columns: 1fr; }

/* CTA: bottoni full-width */
.cta-actions {
  flex-direction: column;
  align-items: stretch;
}
.cta-actions .btn { justify-content: center; }

/* CTA form: colonna singola su mobile */
.cta-form-row { grid-template-columns: 1fr; }

/* Footer: stack verticale */
.footer-container {
  flex-direction: column;
  align-items: flex-start;
}
.footer-copy { text-align: left; }

/* -----------------------------------------------
   TABLET (>= 768px)
   ----------------------------------------------- */
@media (min-width: 768px) {

  /* Hero: ripristina 2 colonne */
  .hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .hero-content {
    text-align: left;
    max-width: 560px;
  }
  .hero-title em  { display: block; }
  .hero-actions   { justify-content: flex-start; }
  .hero-visual    { order: 0; }
  .float-badge--1,
  .float-badge--2 { display: flex; }

  /* Stats bar: ripristina riga singola */
  .stats-container {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 1.5rem;
  }
  .stat-divider { display: block; }
  .stat-number  { font-size: 2.25rem; }

  /* Servizi: 2 colonne */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Steps: 4 colonne con linea */
  .steps-container { padding-top: 2.5rem; }
  .steps-line      { display: block; }
  .steps-grid      { grid-template-columns: repeat(4, 1fr); gap: 2rem; }

  /* Testimonianze: 2 colonne */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* CTA: bottoni in riga */
  .cta-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .cta-actions .btn { justify-content: flex-start; }

  /* Footer: riga orizzontale */
  .footer-container {
    flex-direction: row;
    align-items: center;
  }
  .footer-copy { text-align: center; }

  /* Navbar: nascondi ancora hamburger (verrà mostrato fino a 1024px) */
  /* (i link restano nascosti fino a 1024px) */
}

/* -----------------------------------------------
   DESKTOP (>= 1024px)
   ----------------------------------------------- */
@media (min-width: 1024px) {

  /* Navbar: mostra link, nascondi hamburger */
  .nav-links  { display: flex; }
  .nav-toggle { display: none; }

  /* Hero: più spazio tra colonne */
  .hero-container { gap: 5rem; }

  /* Servizi: 3 colonne */
  .services-grid { grid-template-columns: repeat(3, 1fr); }

  /* Testimonianze: 3 colonne */
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------
   LARGE DESKTOP (>= 1280px)
   ----------------------------------------------- */
@media (min-width: 1280px) {
  .container { padding: 0 2rem; }
}

/* -----------------------------------------------
   ACCESSIBILITÀ: riduzione movimenti
   ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}