/**
 * All breakpoint overrides in one place.
 * Mobile-first: base styles are for small screens; here we adjust for larger.
 */

@media (max-width: 720px) {
  .nav {
    padding: 0 var(--sp-4);
  }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-4);
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 8px 24px hsla(28, 40%, 8%, 0.18);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--ease-slow), opacity var(--ease-slow), visibility var(--ease-slow);
    z-index: 99;
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-links a {
    padding: var(--sp-4);
    border-radius: var(--radius-sm);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  #home {
    padding: var(--nav-h) var(--sp-4) 0;
  }

  section {
    padding: var(--sp-16) var(--sp-4);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .placeholder-grid {
    grid-template-columns: 1fr;
  }

  footer {
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: var(--sp-3);
  }

  .nav-links a {
    font-size: 0.75rem;
  }
}