/* ============================================================
   RESPONSIVE — Media Queries & Utilities
   Tested breakpoints: 320, 375, 430, 768, 1366, 1920px
   ============================================================ */

/* ===== DISPLAY UTILITIES ===== */
.d-none  { display: none; }
.d-flex  { display: flex; }
.d-grid  { display: grid; }
.d-block { display: block; }
@media (min-width: 640px)  { .d-sm-block { display: block !important; } .d-sm-none { display: none !important; } }
@media (min-width: 768px)  { .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } }
@media (min-width: 1024px) { .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } }

/* ===== FLEX UTILITIES ===== */
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ===== TEXT UTILITIES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-white { color: var(--gp-white) !important; }
.text-green { color: var(--gp-green-800); }
.text-teal { color: var(--gp-teal-600); }
.text-saffron { color: var(--gp-saffron-500); }
.text-muted { color: var(--gp-neutral-600); }
.fw-semibold { font-weight: var(--weight-semibold); }
.fw-bold { font-weight: var(--weight-bold); }

/* ===== SPACING UTILITIES ===== */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.py-section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }

/* ===== GRID UTILITIES ===== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 320px (Smallest Phones) ===== */
@media (max-width: 374px) {
  .hero-content h1 { font-size: 1.75rem; }
  .brand-text .name { font-size: 0.9rem; }
  .brand-emblem { width: 40px; height: 40px; font-size: 1.25rem; }
  .topbar-contact { gap: var(--space-3); }
  .topbar-contact span { display: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid .stat-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.15); }
  .members-grid { grid-template-columns: 1fr; }
  .login-card { padding: var(--space-5) var(--space-4); }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .info-stat-grid { grid-template-columns: 1fr 1fr; }
  .govt-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 375-430px (Standard Phones) ===== */
@media (min-width: 375px) and (max-width: 639px) {
  .hero-content h1 { font-size: 2rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .info-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .financial-grid { grid-template-columns: 1fr; }
}

/* ===== 640-767px (Large Phones, Small Tablets) ===== */
@media (min-width: 640px) and (max-width: 767px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .info-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .financial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 768px (Tablets) ===== */
@media (min-width: 768px) {
  .gp-table tbody tr {
    display: table-row;
  }
  .gp-table thead { display: table-header-group; }
  .gp-table td { display: table-cell; }
  .gp-table td::before { display: none; }
  .members-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .info-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .financial-grid { grid-template-columns: repeat(2, 1fr); }
  .identity-row { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .page-banner .page-banner-inner { display: flex; align-items: center; justify-content: space-between; }
}

/* ===== 1024px (Laptops) ===== */
@media (min-width: 1024px) {
  .members-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .info-stat-grid { grid-template-columns: repeat(5, 1fr); }
  .financial-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
  .govt-links-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ===== 1366px (Standard Laptops) ===== */
@media (min-width: 1366px) {
  .container { padding-left: 2.5rem; padding-right: 2.5rem; }
  .members-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ===== 1920px (Large Desktops) ===== */
@media (min-width: 1920px) {
  :root { --container-max: 1440px; }
  .hero-content h1 { font-size: 3.5rem; }
}

/* ===== NO JS FALLBACKS ===== */
.no-js .hero-slide { position: relative; opacity: 1; }
.no-js .gallery-item .gallery-overlay { opacity: 1; }

/* ===== PRINT STYLES ===== */
@media print {
  .site-header, .topbar, .site-footer, .scroll-top-btn,
  .nav-toggle, .hero-dots, .btn-gp { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .gp-table { font-size: 10pt; }
  .page-banner { background: none !important; color: #000 !important; padding: 1rem 0; }
  .page-banner h1 { color: #000 !important; font-size: 18pt; }
}