/* ============================================================
   Rust Buddy — Responsive CSS
   Single source of truth for all mobile layout overrides.
   Linked by every page AFTER its inline <style> block so
   these rules win without needing !important.
   ============================================================ */

@media (max-width: 767px) {
  html, body { height: auto; overflow-y: auto; }
  .site-header { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
  .site-header-left { flex: 1; min-width: 0; }
  .nav-links { width: 100%; justify-content: center; gap: 8px; }
  .nav-link { padding: 5px 8px; }
  .exercise-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 16px;
    gap: 8px;
  }
  .ex-btn { flex-shrink: 0; padding: 7px 14px; font-size: 13px; }
  .page-body { flex: none; padding: 20px 16px 48px; overflow: visible; }
  .hero-title { font-size: clamp(32px, 8vw, 68px); }
  .products-section { grid-template-columns: 300px; justify-content: center; gap: 20px; }
  .hero { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; gap: 16px; }
  .cards-section { padding-left: 16px; padding-right: 16px; }
  .cards-grid { justify-content: center; }
  .main { padding: 16px; }
  .tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 12px 16px; flex-shrink: 0; font-size: 12px; }
  .exercise-split { grid-template-columns: 1fr; height: auto; max-height: none; }
  .exercise-left { border-right: none; border-bottom: 1px solid var(--color-border); }
  .exercise-right { height: 450px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
  .exercise-right iframe { flex: 1; min-height: 0; width: 100%; max-height: 100%; }
  .page-header { flex-direction: column; padding: 24px 16px 28px; gap: 12px; align-items: flex-start; }
  .page-header-right { max-width: 100%; }
  .article-header, .article-section { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-header { padding: 16px 24px; }
  .hero { padding-left: 24px; padding-right: 24px; }
  .cards-section { padding-left: 24px; padding-right: 24px; }
}
/* Rust Buddy responsive system - v1 */