/* ============================================================
   RESPONSIVE — Mobile & Tablet
   ============================================================ */

/* ─── Tablet (≤1024px) ─── */
@media (max-width: 1024px) {
  :root {
    --sp-8: 1.5rem;
  }

  /* Nav size reduction */
  .nav-link.active { font-size: clamp(1.2rem, 3.5vw, 1.8rem); }
}

/* ─── Mobile (≤768px) ─── */
@media (max-width: 768px) {
  :root {
    --sp-8: 1.25rem;
  }

  /* Hide desktop nav */
  #arc-nav     { display: none; }
  #theme-toggle { display: none; }
  .corner-tagline { display: none; }

  /* Show hamburger */
  #hamburger {
    display: flex;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Header: compact */
  #site-header {
    padding: 0 var(--sp-4);
    height: 4rem;
  }

  .header-tagline { display: none; }

  .social-links { display: none; }

  /* Footer bar */
  #site-footer-bar {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    bottom: var(--sp-3);
    left: 0;
    right: 0;
    text-align: center;
  }

  /* Homepage loop */
  .project-card {
    width: clamp(200px, 75vw, 340px);
  }

  .card-image img {
    height: clamp(160px, 50vw, 260px) !important;
  }

  /* CTA */
  .home-cta {
    padding: var(--sp-16) var(--sp-6);
    min-height: 60vh;
  }

  /* Projects page */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .proj-filters {
    gap: var(--sp-3);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .proj-header { padding: var(--sp-12) var(--sp-4) var(--sp-8); }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card { padding: var(--sp-6); }

  /* About */
  .about-hero { padding: var(--sp-12) var(--sp-4) var(--sp-8); }
  .about-content { padding: 0 var(--sp-4) var(--sp-12); }
  .about-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form  { padding: var(--sp-8) var(--sp-4); }

  /* Preloader */
  .preloader-wordmark { font-size: 1.5rem; }

  /* Btn */
  .btn { padding: 0.8em 1.5em; font-size: var(--text-sm); }

  /* Buttons side by side on small screens */
  .home-cta-actions { flex-direction: column; gap: var(--sp-3); }
}

/* ─── Small mobile (≤480px) ─── */
@media (max-width: 480px) {
  .project-card {
    width: clamp(180px, 82vw, 310px);
  }

  .card-image img {
    height: clamp(140px, 52vw, 240px) !important;
  }
}

/* ─── Landscape mobile ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .home-main { height: 100vh; }

  .project-card { width: clamp(160px, 35vh, 300px); }

  .card-image img {
    height: clamp(120px, 60vh, 260px) !important;
  }

  #arc-nav { bottom: var(--sp-4); }
}