/* 
 * PixelForge - Responsive CSS Rules
 * Breakpoints specified: 320px, 375px, 390px, 414px, 480px, 576px, 768px, 992px, 1024px, 1280px, 1440px, 1920px
 */

/* ==========================================
   Mobile-First Default Style adjustments
   ========================================== */
.container {
  padding: 0 var(--space-sm);
}

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

/* Navbar hamburger visibility */
.hamburger {
  display: flex;
}

.nav-links {
  display: none;
}

.nav-actions .btn-secondary {
  display: none; /* Hide primary call to action button on extra small screens */
}

/* ==========================================
   Breakpoint: 320px (Tiny mobile)
   ========================================== */
@media (min-width: 320px) {
  /* Minimal spacing adjustments */
}

/* ==========================================
   Breakpoint: 375px (Compact Mobile)
   ========================================== */
@media (min-width: 375px) {
  /* Small screens optimization */
}

/* ==========================================
   Breakpoint: 390px (Medium Mobile)
   ========================================== */
@media (min-width: 390px) {
  /* Modern iPhones styling */
}

/* ==========================================
   Breakpoint: 414px (Large Mobile)
   ========================================== */
@media (min-width: 414px) {
  /* iPhone Plus / Max sizing */
}

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

/* ==========================================
   Breakpoint: 576px (Small Tablets)
   ========================================== */
@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 - Portrait)
   ========================================== */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-lg);
  }

  .nav-actions .btn-secondary {
    display: inline-flex; /* Show action button */
  }

  /* Grid structures default to two columns */
  .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 (Tablets - Landscape / 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: 1280px (Desktops)
   ========================================== */
@media (min-width: 1280px) {
  /* Fine-tuning margins and font scales */
}

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

/* ==========================================
   Breakpoint: 1920px (Ultra-wide Desktops)
   ========================================== */
@media (min-width: 1920px) {
  /* Extra spacing for ultra-wide screen visual balance */
}