/* ==========================================================================
   NX FOOTER GRID SYSTEM
   Pasang di Container Grid pembungkus kolom-kolom footer
   ========================================================================== */

/* 1. Footer 3 Kolom (Kolom 1 Lebar 50%, Kolom 2 & 3 masing-masing 25%) */
.nx-grid-footer-3 {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0px !important;
}

/* 2. Footer 4 Kolom (Kolom 1 Lebar 40%, Kolom 2, 3, 4 masing-masing 20%) */
.nx-grid-footer-4 {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0px !important;
}

/* Responsivitas Otomatis */
@media (max-width: 991px) {
  /* Tablet: Kolom 1 membentang penuh di atas (span 2), Kolom Navigasi 2 & 3 sejajar di bawah */
  .nx-grid-footer-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
  .nx-grid-footer-3 > :first-child {
    grid-column: span 2 !important;
  }

  .nx-grid-footer-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

@media (max-width: 640px) {
  /* Mobile: Semua kolom bertumpuk 1 baris ke bawah */
  .nx-grid-footer-3,
  .nx-grid-footer-4 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .nx-grid-footer-3 > :first-child {
    grid-column: span 1 !important;
  }
}