/* ========== Adaptive CSS Grid system ========== */

:root {
  --ph-gap: clamp(12px, 2vw, 24px);
  --ph-card-min: 260px;
  --ph-card-min-sm: 200px;
}

/* Utility grids */
.ph-grid {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ph-card-min)), 1fr));
}

.ph-grid-sm {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ph-card-min-sm)), 1fr));
}

.ph-grid-2 {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-grid-3 {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ph-grid-4 {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ph-grid-dense {
  grid-auto-flow: dense;
}

.ph-span-2 { grid-column: span 2; }
.ph-span-3 { grid-column: span 3; }
.ph-span-full { grid-column: 1 / -1; }

/* Existing page grids — adaptive */
.members-grid,
.gal-grid,
.srv-grid {
  display: grid !important;
  gap: var(--ph-gap) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

.stats-section .container {
  display: grid !important;
  gap: var(--ph-gap) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
}

.home-grid .container {
  display: grid !important;
  gap: var(--ph-gap) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

/* Profile / cabinet stats */
.cab-stats,
.cab-grid,
.cab-links {
  display: grid !important;
  gap: clamp(8px, 2vw, 16px) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
}

/* Chat voice users */
.voice-stage {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)) !important;
}

/* News / admin cards if used */
.news-grid,
.admin-cards,
.row.g-3.admin-like {
  display: grid;
  gap: var(--ph-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Breakpoints — refine spans and columns */
@media (max-width: 991.98px) {
  .ph-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ph-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ph-span-2,
  .ph-span-3 {
    grid-column: span 1;
  }
}

@media (max-width: 576px) {
  .ph-grid-2,
  .ph-grid-3,
  .ph-grid-4 {
    grid-template-columns: 1fr;
  }

  .members-grid,
  .gal-grid,
  .srv-grid,
  .home-grid .container {
    grid-template-columns: 1fr !important;
  }

  .stats-section .container,
  .cab-stats,
  .cab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  .stats-section .container,
  .cab-stats,
  .cab-grid {
    grid-template-columns: 1fr !important;
  }
}