/* ── responsive.css ─────────────────────────────── */
/* Mobile-first: base styles = mobile (<600px)
   Then progressively enhance for tablet and desktop */

/* ──────────────────────────── MOBILE (<600px) ─── */
@media (max-width: 599px) {

  :root { --nav-height: 60px; }

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

  /* Navbar */
  .navbar__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: var(--color-white);
    padding: var(--space-8) var(--space-6) var(--space-10);
    border-top: 1px solid rgba(0,0,0,.07);
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-default);
    z-index: 999;
  }
  .navbar__links.open { transform: translateX(0); }
  .navbar__links a     { font-size: var(--text-lg); }
  .navbar__links .btn--nav {
    width: 100%;
    justify-content: center;
    padding: var(--space-4);
  }
  .navbar__burger { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + var(--space-10)); padding-bottom: var(--space-16); }
  .hero__content { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__visual   { order: -1; }
  .hero__img-placeholder { aspect-ratio: 16/9; }
  .hero__floating-card--1 { left: 8px; }
  .hero__floating-card--2 { right: 8px; }
  .hero__scroll-hint { display: none; }
  .hero__sub { font-size: var(--text-base); }

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

  /* About */
  .about__grid { grid-template-columns: 1fr; }
  .about__visual { order: -1; }
  .about__badge { right: var(--space-4); bottom: -16px; }

  /* Portfolio */
  .portfolio__grid { grid-template-columns: 1fr; }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; }
  .contact__form  { padding: var(--space-6); }
  .contact__socials { flex-wrap: wrap; }

  /* Trust bar */
  .trust-bar__inner { flex-wrap: wrap; gap: var(--space-8); justify-content: center; padding-block: var(--space-10); }
  .trust-bar__sep   { display: none; }

  /* Testimonials */
  .testimonials__grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ──────────────────────── TABLET (600–1023px) ─── */
@media (min-width: 600px) and (max-width: 1023px) {

  :root { --nav-height: 64px; }

  /* Navbar */
  .navbar__links {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-white);
    padding: var(--space-8) var(--space-8) var(--space-10);
    border-top: 1px solid rgba(0,0,0,.07);
    box-shadow: var(--shadow-xl);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-default);
    z-index: 999;
    gap: var(--space-6);
  }
  .navbar__links.open { transform: translateX(0); }
  .navbar__burger      { display: flex; }
  .navbar__links .btn--nav {
    padding: var(--space-4) var(--space-8);
  }

  /* Hero */
  .hero__content { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .hero__scroll-hint { display: none; }

  /* Services */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* About */
  .about__grid { gap: var(--space-10); }

  /* Portfolio */
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact__grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ─────────────────────────── DESKTOP (≥1024px) ─ */
@media (min-width: 1024px) {
  /* All desktop styles are in the base CSS files */

  /* Ensure burger is hidden on desktop */
  .navbar__burger { display: none; }
  .navbar__links  { display: flex !important; transform: none !important;
                    position: static; box-shadow: none; border: none;
                    flex-direction: row; padding: 0; background: transparent; }
}