/* ==========================================================================
   Responsive overrides — mobile-first; tablet & desktop layer on top
   ========================================================================== */

/* ---------- Base (mobile 320–767px) ---------- */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.quick-actions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-action { align-items: center; text-align: center; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.leadership-grid { grid-template-columns: 1fr; }
.value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 374px) {
  .page-container { padding: 12px; }
  .quick-actions-grid { gap: 8px; }
  .stat-card .value { font-size: 20px; }
}

/* ---------- Tablet (768–1023px) ---------- */
@media (min-width: 768px) {
  .page-container { padding: 20px 24px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leadership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .login-page { align-items: center; }
  .hscroll.events-hscroll > * { width: 320px; }
  .bloodgroup-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- Desktop (1024px+) ---------- */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leadership-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-actions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-title { font-size: 24px; }
  .hero-panel { padding: 40px 44px; }
  .hero-panel h1 { font-size: 30px; max-width: 640px; }
  .hero-panel p { font-size: 15px; max-width: 520px; }
  .hero-panel.hero-slider { padding-bottom: 64px; }
  .hero-slides { padding: 0 40px; }
  .hero-nav { width: 38px; height: 38px; }
  .hero-nav.prev { left: 14px; }
  .hero-nav.next { right: 14px; }
  .hero-dots { left: 44px; bottom: 24px; }
  .home-two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
  .hscroll.events-hscroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .bloodgroup-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .members-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
  .profile-hero { display: flex; align-items: center; text-align: left; gap: 24px; padding: 28px 32px; }
  .profile-hero .avatar, .profile-hero .avatar-placeholder { margin: 0; }
  .profile-hero .idrow { justify-content: flex-start; }
  .profile-actions { margin: 0; flex-direction: column; width: 200px; flex-shrink: 0; }
  .event-details-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
}

@media (min-width: 1280px) {
  .leadership-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
  .home-title { font-size: 26px; }
}

/* ---------- Utility: hide/show by breakpoint ----------
   Only ever sets display:none — never forces a "visible" display value,
   so it never fights a component's own display:flex/grid (e.g. .profile-actions,
   .sticky-cta). The element's own class supplies the visible display. */
.hide-mobile { display: none !important; }
@media (min-width: 1024px) {
  .hide-mobile { display: revert !important; }
  .hide-desktop { display: none !important; }
}