/* Mobile overrides: reduce padding, margins, static font sizes */
/* Only affects small viewports; desktop unchanged */

@media (max-width: 640px) {
  body { padding: 0; }
  .main-container { padding: 0 12px 24px; }

  /* Generic spacing reductions */
  .board-wrapper,
  .post-detail-wrapper,
  .profile-container,
  .card,
  .comments-section { padding: 20px 14px !important; }

  .top-bar { gap: 8px !important; margin-bottom: 18px !important; }
  .nav-btn, .btn { padding: 8px 16px !important; font-size: 0.75em !important; }
  .view-btn { padding: 8px 16px !important; }

  /* Hero banner */
  .hero-banner { grid-template-columns: 1fr; padding: 22px 16px !important; gap: 16px !important; }
  .hero-left, .hero-center, .hero-right { gap: 12px !important; }
  .hero-illustration { width: 120px !important; height: 120px !important; }
  .brand-title { font-size: 1.8em !important; letter-spacing: 2px !important; }
  .preference-banner { font-size: 0.7em !important; letter-spacing: 2px !important; }

  /* Typography scaling */
  h1 { font-size: 1.6em !important; }
  h2 { font-size: 1.3em !important; }
  h3 { font-size: 1.1em !important; }
  p, li, span, small { font-size: 0.85em !important; }

  /* Footer */
  .footer { padding: 18px 0 !important; }
  .footer-link { padding: 6px 14px !important; font-size: 0.7em !important; }

  /* Forms */
  input, select, textarea { padding: 8px 10px !important; font-size: 0.8em !important; }
  .form-group { margin-bottom: 12px !important; }
  .form-section { margin-bottom: 20px !important; padding-bottom: 14px !important; }

  /* Cards */
  .card { padding: 20px 16px !important; }

  /* Messages */
  .messages { padding: 8px 12px !important; }
  .messages .message { padding: 10px 12px !important; margin: 6px 0 !important; font-size: 0.75em !important; }

  /* Post detail */
  .post-card { padding: 20px 16px !important; }
  .post-meta { gap: 6px !important; }
  .post-header { padding-bottom: 10px !important; }

  /* Comments */
  .comment { padding: 10px 12px !important; margin-top: 12px !important; }
  .comment-input-group textarea { min-height: 70px !important; }
  .comment-actions { margin-top: 10px !important; }
  .replies { padding-left: 12px !important; }

  /* Profile */
  .profile-header { padding: 20px 16px !important; margin-bottom: 20px !important; }
  .ads-grid { gap: 14px !important; }
  .ad-card { padding: 14px 12px !important; }
  .ad-info h3 { margin-bottom: 6px !important; font-size: 0.95em !important; }

  /* Manage / Create ads */
  .media-grid { gap: 10px !important; }

  /* Floating menu */
  .nav-panel { width: 80vw !important; bottom: 80px !important; right: 10vw !important; padding: 12px 14px !important; }
  .nav-panel-links li a { padding: 6px 8px !important; font-size: 0.75em !important; }
  .floating-menu-toggle { width: 50px !important; height: 50px !important; }
}

@media (max-width: 480px) {
  .hero-illustration { width: 100px !important; height: 100px !important; }
  .brand-title { font-size: 1.5em !important; }
  .nav-btn, .btn { font-size: 0.7em !important; }
  h1 { font-size: 1.4em !important; }
  h2 { font-size: 1.15em !important; }
  h3 { font-size: 1em !important; }
  p, li, span, small { font-size: 0.8em !important; }
}