/*
  Responsive overrides — desktop-first base styles, scaled down at each breakpoint.
  Reference: 1440 desktop · 1024 laptop · 768 tablet · 375 mobile.
*/

/* ---------- Laptop (<=1024px) ---------- */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-body {
    grid-template-columns: 1fr 240px;
    gap: var(--space-7);
  }
}

/* ---------- Tablet (<=768px) ---------- */
@media (max-width: 768px) {
  :root {
    --container-padding: var(--space-4);
    --nav-height: 64px;
  }

  section {
    padding-block: var(--space-8);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .about-hero__grid {
    grid-template-columns: 1fr;
  }

  .project-body {
    grid-template-columns: 1fr;
  }

  .project-sidebar {
    position: static;
    order: -1;
  }

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

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

  /* Mobile nav */
  .main-nav {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    background: var(--color-bg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-6) var(--space-5);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-standard);
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .main-nav__link {
    display: block;
    width: 100%;
    padding-block: var(--space-4);
    font-size: var(--fs-body-lg);
    border-bottom: 1px solid var(--color-border);
  }

  .nav-toggle {
    display: flex;
  }

  .icon-menu {
    display: block;
  }

  .icon-close {
    display: none;
  }

  .nav-toggle.is-active .icon-menu {
    display: none;
  }

  .nav-toggle.is-active .icon-close {
    display: block;
  }
}

/* ---------- Mobile (<=480px) ---------- */
@media (max-width: 480px) {
  :root {
    --space-9: 4rem;
    --space-10: 5rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-row .btn {
    justify-content: center;
  }

  .site-footer .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .stack-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .cta-band {
    padding: var(--space-6) var(--space-5);
  }

  .cta-band .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band .btn-row .btn {
    justify-content: center;
  }
}