/* 
 * Business Website Collection Vol. 1 - Responsive Layout CSS Rules
 */

.container {
  padding: 0 var(--space-sm);
}

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

.hamburger {
  display: flex;
}

.nav-links {
  display: none;
}

.nav-actions .btn-secondary {
  display: none;
}

/* Breakpoint 480px */
@media (min-width: 480px) {
  .container {
    padding: 0 var(--space-md);
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Breakpoint 576px */
@media (min-width: 576px) {
  .section {
    padding: var(--space-xxl) 0;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer-about {
    grid-column: span 2;
  }
}

/* Breakpoint 768px (Tablets) */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }

  .nav-actions .btn-secondary {
    display: inline-flex;
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* Breakpoint 992px (Large Tablets / Netbooks) */
@media (min-width: 992px) {
  .hamburger {
    display: none;
  }

  .nav-links {
    display: flex;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  .footer-about {
    grid-column: span 1;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Breakpoint 1024px (Laptops) */
@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Breakpoint 1440px */
@media (min-width: 1440px) {
  .container {
    padding: 0;
  }
}

/* Touch targets security constraints */
@media (max-width: 767px) {
  .btn, .theme-toggle, input, textarea, select {
    min-height: 48px;
  }
}