/* SGIN Mobile-Responsive Layout (v1.0)
   Three breakpoints:
     - ≤900px: tablet — relax max-widths, reduce side padding
     - ≤700px: mobile — hamburger nav, single-column grids
     - ≤480px: small mobile — full-bleed cards, larger touch targets
*/

/* ── Viewport hint (added via JS too, in case <meta> missing) ── */

/* Make every card-like grid responsive */
@media (max-width: 900px) {
  .page { padding: 16px !important; max-width: 100% !important; }
  #sgn-site-header-inner { padding: 0 16px; }
  #sgn-sgincamenu > div { padding: 0 16px !important; }
  .sh { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sh > div:last-child { width: 100%; }
  /* Capability grid: relax to 2 cols on tablet */
  #sgn-cap-members-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; }
  #sgn-cap-others-grid  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  /* Members directory grids */
  #sgn-md-members, #sgn-md-partners, #sgn-md-ecosystem {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
  /* Welcome cards */
  .sgn-welcome-card { padding: 14px !important; }
}

@media (max-width: 700px) {
  /* Hide the SGIN top mini-menu (it goes into the hamburger drawer instead) */
  #sgn-sgincamenu { display: none !important; }

  /* Show hamburger control */
  #sgn-hamburger { display: flex !important; }

  /* Nav tabs collapse into a hamburger drawer */
  .nav, .tn {
    overflow: visible !important;
  }
  .tn {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  /* Hide the inline nav tabs until drawer opens */
  body.sgn-mobile .nt:not(.sgn-mobile-keep) {
    display: none !important;
  }
  /* When drawer is open, show every tab full-width */
  body.sgn-mobile.sgn-nav-open .nt {
    display: flex !important;
    width: 100%;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 0 !important;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start !important;
  }
  body.sgn-mobile.sgn-nav-open #sgn-nav-signout {
    margin-left: 0 !important;
    border-radius: 0 !important;
  }
  body.sgn-mobile.sgn-nav-open #sgn-signin-cta {
    margin-left: 0 !important;
    border-radius: 0 !important;
  }

  /* Single-column grids on mobile */
  #sgn-cap-members-grid,
  #sgn-cap-others-grid,
  #sgn-md-members, #sgn-md-partners, #sgn-md-ecosystem,
  #page-welcome > div > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }

  /* Welcome hero shrinks */
  #page-welcome > div > div:first-child {
    padding: 20px !important;
  }
  #page-welcome h1 { font-size: 1.3rem !important; }

  /* Footer: stack center-aligned */
  #sgn-footer {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 24px 16px !important;
  }

  /* Buttons: bigger touch targets */
  .btn, button.btn, .btn-s, button.btn-s, button {
    min-height: 44px;
    padding: 11px 18px !important;
  }

  /* Modal: full-screen on mobile */
  .modal, .sgin-modal, .md-modal, #sg-modal, #memberDetailModal,
  [class*="modal"][style*="block"] {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow-y: auto !important;
  }
  .modal-overlay, .sgin-modal-overlay {
    padding: 0 !important;
  }

  /* Inputs: bigger */
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px;
    padding: 11px 12px !important;
  }
  textarea { min-height: 90px; }

  /* Capability picker: stack each row */
  .sgn-cap-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .sgn-cap-row > label:first-child { width: 100%; }

  /* Profile fields: full-width vertical */
  .fg {
    width: 100% !important;
  }
  .fg input, .fg select, .fg textarea {
    width: 100% !important;
  }

  /* Admin: stack the inbox/admin tables */
  #sgn-admin-list table { font-size: .82rem; }
  #sgn-admin-list th, #sgn-admin-list td { padding: 6px 8px !important; }

  /* Calendar grid: shrink cell font */
  #sgn-cal-grid-wrap table th,
  #sgn-cal-grid-wrap table td {
    padding: 4px !important;
    font-size: .75rem !important;
  }
  #sgn-cal-grid-wrap td > div:first-child { font-size: .82rem !important; }

  /* AI Search panel: full width */
  #page-msearch > div { padding: 0 !important; }

  /* Site header: stack vertically */
  #sgn-site-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  #sgn-site-header-tag {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: .9rem;
  }
}

@media (max-width: 480px) {
  /* Tightest mobile */
  .page { padding: 12px !important; }
  .sh .st, .st { font-size: 1.3rem !important; }
  .sh .ss { font-size: .85rem !important; }

  /* Capability cards more compact */
  .sgn-cap-card, .sgn-cap-member, .sgn-cap-nonmember {
    padding: 12px !important;
  }
  /* Site header — drop the BETA tag size slightly */
  #sgn-beta-badge { font-size: .65rem !important; padding: 2px 6px !important; }

  /* Footer admin link wrap nicely */
  #sgn-footer { font-size: .85rem !important; gap: 6px !important; }

  /* Calendar event tiles even more compact */
  #sgn-cal-grid-wrap td { height: 68px !important; }
}

/* Hamburger button (placed by JS, hidden on desktop) */
#sgn-hamburger {
  display: none;
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  background: rgba(11,61,107,.92);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
#sgn-hamburger:hover { background: #117A65; }
body.sgn-mobile.sgn-nav-open #sgn-hamburger { background: #117A65; }
body.sgn-mobile.sgn-nav-open #sgn-hamburger::before { content: '✕'; }
body.sgn-mobile #sgn-hamburger::before { content: '☰'; }