/* =========================================================
   responsive.css — Mobile-first breakpoints
   ========================================================= */

/* --- 768px — tablet and below --- */
@media (max-width: 768px) {
  /* Split-screen stacks vertically on mobile */
  .split-screen {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .panel {
    flex: none;
    height: 50vh;
    min-height: 280px;
    width: 100%;
    padding: 24px;
  }

  .panel:hover {
    flex: none;
  }

  /* Nav links smaller on mobile */
  .nav-links a {
    font-size: 1.8rem;
  }
}

/* --- 480px — small phones --- */
@media (max-width: 480px) {
  .hamburger {
    top: 12px;
    right: 12px;
  }

  /* 45vh (slightly less than 50vh) leaves space for the stacked
     center-text overlay without clipping on very short screens */
  .panel {
    height: 45vh;
  }
}