/* ===========================================================================
   responsive.css — breakpoint overrides (load last)
   =========================================================================== */

@media(max-width:860px){
  .nav,.head .status{display:none}
  .burger{display:flex}
  .grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:340px}
  .process{grid-template-columns:1fr 1fr}
  .tools-grid{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr 1fr}
  .cblock{grid-template-columns:1fr}
  .cplates{grid-template-columns:1fr}
}
/* case-study multi-column blocks stack under ~720px */
@media(max-width:720px){
  .cb-split{grid-template-columns:1fr}
  .cb-duo{grid-template-columns:1fr;gap:1.6rem}
  .cb-def{grid-template-columns:1fr;gap:0.5rem}
  .cb-def-tag{padding-top:0}
  .cb-gallery.cols-3{grid-template-columns:repeat(2,1fr)}
  .cb-gallery.cols-nw{grid-template-columns:1fr}
  /* toggle-gallery: cols-3 -> cols-2 under 720, then cols-1 under 480 (higher specificity wins over the 560 rule below) */
  .cb-toggle-gallery .cb-gallery.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.process{grid-template-columns:1fr}.tools-grid{grid-template-columns:1fr}.evt-row{grid-template-columns:1fr;gap:0.5rem}.evt-result{text-align:left}.cb-gallery.cols-2,.cb-gallery.cols-3{grid-template-columns:1fr}}
@media(max-width:480px){.cb-toggle-gallery .cb-gallery.cols-3{grid-template-columns:1fr}}