/* ==========================================================================
   RESISTOR LAB — Responsive layer
   Breakpoints tested at 1920 / 1440 / 1024 / 768 / 480 / 390 / 375
   ========================================================================== */

/* ----- ≤1024px: tablet ----- */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 460px; }
  .calc-grid { grid-template-columns: 1fr; }
  .result-panel { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .header-instructor { display: none; }
}

/* ----- ≤900px: nav collapses to hamburger ----- */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 8px 20px 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  .main-nav.open { opacity: 1; transform: translateY(0); visibility: visible; }
  .main-nav a { padding: 13px 10px; font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .main-nav a:last-child { border-bottom: none; }
}

/* ----- ≤768px ----- */
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 48px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .color-grid { grid-template-columns: repeat(4, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-stats-row { gap: 20px; }
  .ref-table th:nth-child(5), .ref-table td:nth-child(5) { display: none; }
  .footer-top { flex-direction: column; }
}

/* ----- ≤480px: mobile ----- */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  .card { padding: 20px; }
  .brand-name { display: none; }
  .result-value { font-size: 1.9rem; }
  .color-grid { grid-template-columns: repeat(3, 1fr); }
  .difficulty-options { flex-direction: column; align-items: stretch; }
  .difficulty-card { width: 100%; }
  .quiz-stats-row { flex-wrap: wrap; }
  .calc-line { font-size: 0.92rem; }
  .hero-heading { font-size: 2rem; }
}

/* No horizontal scroll, anywhere, ever */
html, body { max-width: 100%; overflow-x: hidden; }