/* ============================================================
   RESPONSIVE — tablet & desktop compositions
   ============================================================ */

@media (max-width: 639px) {
  .hero::after {
    background: linear-gradient(to top, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.4) 30%, rgba(10,10,10,0) 58%);
  }
}

@media (min-width: 640px) {
  .cat-tiles { grid-template-columns: repeat(2, 1fr); }
  .story-pair { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-field.is-wide, .form-submit, .form-notice { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .nav-desktop { display: flex; }
  .menu-toggle { margin-left: 2.25rem; }

  /* editorial grid: asymmetric 12-col composition */
  .egrid { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .egrid-item { grid-column: span 12; }
  .egrid-item:nth-child(6n + 1) { grid-column: 1 / 9; }
  .egrid-item:nth-child(6n + 2) { grid-column: 9 / 13; margin-top: clamp(2rem, 6vw, 5rem); }
  .egrid-item:nth-child(6n + 3) { grid-column: 2 / 7; }
  .egrid-item:nth-child(6n + 4) { grid-column: 8 / 13; margin-top: clamp(2rem, 6vw, 5rem); }
  .egrid-item:nth-child(6n + 5) { grid-column: 1 / 8; }
  .egrid-item:nth-child(6n + 6) { grid-column: 8 / 13; margin-top: clamp(2rem, 6vw, 5rem); }

  .project-meta { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 5fr 7fr; }
  .service { grid-template-columns: 1fr 1.4fr; align-items: baseline; }
  .contact-grid { grid-template-columns: 1fr 1.6fr; }
}

@media (min-width: 1024px) {
  .project-meta { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1440px) {
  .section, .page-head, .footer-inner, .header-inner, .filters { padding-left: 4rem; padding-right: 4rem; }
  .story-block, .story-pair { padding-left: 4rem; padding-right: 4rem; }
  .story-block.is-full, .story-block.is-pano { padding-left: 0; padding-right: 0; }
}

@media (min-width: 1920px) {
  .section-inner, .page-head-inner { max-width: 1760px; margin-left: auto; margin-right: auto; }
}