/* ── mobile.css ─────────────────────────────────────────────────
   All responsive overrides. Edit this file for mobile tweaks.
   Breakpoints: 768px (tablet/phone), 480px (small phone).
──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Layout ─────────────────────────────────────────────── */
  .container { padding: 0 1rem; }
  .section    { padding: 3rem 0; }
  .section--lg { padding: 4rem 0; }

  /* Collapse all inline two-column grids used in page templates */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1.2fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns:1.5fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* Named two-col class */
  .two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero { padding: 3.5rem 0 3rem; }
  .hero-content { max-width: 100%; }
  .hero-sub { font-size: 1rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* ── Meeting card ───────────────────────────────────────── */
  .meeting-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.25rem;
    max-width: 100%;
  }

  /* ── Components ─────────────────────────────────────────── */
  .membership-box { padding: 1.25rem; }
  .officer-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .date-grid      { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .vote-links     { grid-template-columns: 1fr !important; }
  .form-row       { grid-template-columns: 1fr !important; }

  /* ── Turnstile ──────────────────────────────────────────── */
  .cf-turnstile {
    transform: scale(0.88);
    transform-origin: left top;
    margin-bottom: -8px;
  }
}

@media (max-width: 480px) {

  /* ── Typography ─────────────────────────────────────────── */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.4rem; }

  /* ── Components ─────────────────────────────────────────── */
  .officer-grid { grid-template-columns: 1fr !important; }
  .date-grid    { grid-template-columns: 1fr !important; }
}