/* ═══════════════════════════════════════════════
   Responsive Styles
   File: assets/css/responsive.css
═══════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .activities-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Small Tablet / Large Phone ── */
@media (max-width: 900px) {
  .main-wrap { grid-template-columns: 1fr; }
  .sidebar { order: -1; display: grid; grid-template-columns: 1fr 1fr; }
  .about-intro { grid-template-columns: 1fr; }
  .vision-mission { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr 1fr; }
  .obj-grid { grid-template-columns: 1fr; }

  /* Mobile nav */
  .hamburger { display: block; }
  .nav-list { display: none; flex-direction: column; width: 100%; }
  .nav-list.open { display: flex; }
  .nav-list > li > a { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .dropdown { position: static; box-shadow: none; border-top: none; background: rgba(0,0,0,.15); border-radius: 0; display: none; }
  .has-dropdown.open .dropdown { display: block; }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.open > a { color: var(--gold-light); }
  .dropdown li a { color: #aec6e8 !important; background: transparent !important; border-bottom-color: rgba(255,255,255,.05) !important; padding-left: 32px !important; }
  .dropdown li a:hover { color: var(--white) !important; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .header-contact { display: none; }
  .logo-circle { width: 56px; height: 56px; }
  .site-header h1 { font-size: 16px; }
  .slide-content { padding: 24px 20px; }
  .slide-content h2 { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .activities-grid { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .sidebar { display: flex; flex-direction: column; }
  .bene-list { gap: 8px; }
  .top-left span:last-child { display: none; }
  .footer-bottom-links { gap: 10px; }
}

@media (max-width: 400px) {
  .org-label { display: none; }
  .slider-btn { width: 36px; height: 36px; font-size: 16px; }
}