/* Responsive Design - Mobile First */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  .paradigmi-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .matrice-domini {
    max-width: 500px;
  }

  .portale-layout {
    grid-template-columns: 1fr;
  }

  .portale-image-area {
    position: static;
    order: -1;
  }

  .conclusione-cta-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta-card.cta-featured {
    transform: scale(1);
  }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
  /* Typography adjustments */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }

  /* Navigation */
  .navbar {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .nav-links {
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Hero */
  .hero {
    min-height: 80vh;
    padding: var(--space-lg) var(--space-sm);
  }

  .stat-number {
    font-size: 3rem;
  }

  .hero-statistic {
    padding: var(--space-md);
  }

  /* Grids to single column */
  .key-elements-grid,
  .domini-cards,
  .use-case-gallery,
  .strategie-grid {
    grid-template-columns: 1fr;
  }

  /* Matrice 2x2 remains 2x2 but smaller */
  .matrice-domini {
    max-width: 100%;
  }

  .quadrante {
    min-height: 150px;
    padding: var(--space-sm);
  }

  .quadrante-icon {
    font-size: 2rem;
  }

  .quadrante h3 {
    font-size: 1.125rem;
  }

  /* Livelli */
  .livello-header {
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
  }

  .livello-number {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  /* Pro/Con grid */
  .pro-con {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Conclusione CTAs */
  .conclusione-cta-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .global-footer nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }
}

/* Small mobile: < 480px */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-sm);
  }

  section {
    padding: var(--space-lg) 0;
  }

  .matrice-comuni {
    gap: 1px;
  }

  .quadrante {
    min-height: 120px;
    padding: var(--space-xs);
  }

  .quadrante-icon {
    font-size: 1.75rem;
    margin-bottom: var(--space-xs);
  }

  .quadrante h3 {
    font-size: 1rem;
  }

  .quadrante p {
    font-size: 0.8rem;
  }

  .use-case-gallery {
    grid-template-columns: 1fr;
  }

  .portale-cta {
    padding: var(--space-md);
  }

  .conclusione-text {
    font-size: 1rem;
  }
}