/* ============================================
   RESPONSIVE - Mobile First
   Breakpoints: 576px | 768px | 992px | 1200px
   ============================================ */

/* ---- BASE (mobile < 576px) ---- */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }

.navbar-nav { display: none; }
.hamburger   { display: flex; }

.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; justify-content: center; }

/* ---- SM: 576px ---- */
@media (min-width: 576px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
}

/* ---- MD: 768px ---- */
@media (min-width: 768px) {
  .grid-2  { grid-template-columns: repeat(2, 1fr); }
  .grid-3  { grid-template-columns: repeat(2, 1fr); }
  .grid-4  { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid  { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; }
}

/* ---- LG: 992px ---- */
@media (min-width: 992px) {
  .grid-3  { grid-template-columns: repeat(3, 1fr); }
  .grid-4  { grid-template-columns: repeat(4, 1fr); }
  .stats-grid   { grid-template-columns: repeat(4, 1fr); }
  .footer-grid  { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }

  /* Show desktop nav, hide hamburger */
  .navbar-nav { display: flex; }
  .hamburger   { display: none; }
  .mobile-nav  { display: none !important; }
}

/* ---- XL: 1200px ---- */
@media (min-width: 1200px) {
  .container { padding: 0 var(--space-xl); }
}

/* ---- Print ---- */
@media print {
  .navbar, .footer, #back-to-top { display: none; }
  body { padding-top: 0; }
}