/* ============================================================
   SJ WEBDEV SERVICES — responsive.css
   Breakpoints: 1024 (tablet) / 768 (mobile) / 540 (small)
   ============================================================ */

/* ---------- Large tablet ---------- */
@media (max-width: 1024px) {
  .trust-grid,
  .card-grid,
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  .split,
  .contact-grid,
  .svc { grid-template-columns: 1fr; }
  .svc__head { position: static; }
  .svc__cols { gap: 1.6rem 2rem; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }

  .lightbox__panel { grid-template-columns: 1fr; max-width: 520px; }
  .lightbox__media { aspect-ratio: 8/5; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root { --nav-h: 84px; }

  /* keep the larger logo from overflowing the slimmer mobile bar */
  .nav__logo img { height: 64px; }
  .nav.is-scrolled .nav__logo img { height: 56px; }

  /* nav -> drawer */
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; top: 0; right: 0; z-index: 999;
    height: 100dvh; width: min(82vw, 340px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .25rem;
    padding: calc(var(--nav-h) + 1.5rem) 1.5rem 2rem;
    background: var(--white);
    box-shadow: -20px 0 60px -20px rgba(14,15,18,.3);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }
  body.menu-open .nav__menu { transform: none; }
  .nav__link { padding: .9rem 1rem; font-size: 1.05rem; border-radius: 12px; }
  .nav__link::after { display: none; }
  .nav__link.is-active { background: var(--blue-tint); }
  .nav__cta { margin: 1rem 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }

  /* hero */
  .hero__meta { gap: 1.4rem 2rem; }
  .hero__slash.thick { display: none; }

  /* grids collapse */
  .trust-grid,
  .card-grid,
  .portfolio-grid,
  .why-list,
  .svc__cols { grid-template-columns: 1fr; }

  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__row .field { margin-bottom: 1.1rem; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: .4rem; }

  .timeline::before { left: 23px; }
  .tl-item { grid-template-columns: 48px 1fr; gap: 1.1rem; }
  .tl-item__dot { width: 48px; height: 48px; }

  .tquote .mark { font-size: 3rem; }
}

/* ---------- Small phones ---------- */
@media (max-width: 540px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .filters { gap: .45rem; }
  .filter { font-size: .76rem; padding: .5rem .9rem; }
  .tslider__nav { gap: .8rem; }
}