/* ============================================================
   ZEE RENDERS — Responsive layers
   Large desktop → desktop → laptop → tablet → mobile
   ============================================================ */

/* Large desktop */
@media (min-width: 1800px) { :root { --pad: 6rem; } }

/* Laptop */
@media (max-width: 1200px) {
  .work-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer .display { grid-column: 1/-1; }
}

/* Tablet */
@media (max-width: 900px) {
  :root { --nav-h: 70px; }
  .nav { display: none; }
  .burger { display: block; }
  body.no-cursor .cursor-dot, .cursor-dot, .cursor-ring { display: none; }

  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-img { max-width: 480px; }
  .contact-grid { grid-template-columns: 1fr; }
  .pd-meta-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-hero { height: 60vh; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --pad: 1.25rem; }
  .section { padding-block: 4rem; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; margin-bottom: 2.5rem; }

  .work-grid, .work-grid.cols-3 { grid-template-columns: 1fr; gap: 1rem; }
  .project-card, .project-card.big { aspect-ratio: 4/5; }
  .project-card__meta { opacity: 1; transform: none; }
  .project-card__view { opacity: 1; transform: scale(1); width: 46px; height: 46px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .service-item { grid-template-columns: 60px 1fr; }
  .service-arrow { display: none; }
  .service-desc { grid-column: 1/-1; }

  .form-row.two { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .pd-meta-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-nav { flex-direction: column; }
  .pd-nav .next { text-align: left; align-items: flex-start; }

  .lb-prev { left: 0.8rem; } .lb-next { right: 0.8rem; }
  .lb-close { top: 1rem; right: 1rem; }
  .toast-wrap { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { min-width: 0; width: 100%; }
}

/* Touch devices — disable custom cursor entirely */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}