/* Alle bekende zones blijven als gekleurde kaarten zichtbaar wanneer de PTZ beweegt. */
@media (min-width: 801px) and (min-height: 650px) {
  html,body {height:auto;overflow-x:hidden;overflow-y:auto}
  body,main {display:block}
  main {min-height:100vh}
  .camera-grid iframe,.camera-grid video {height:min(42vh,460px)}
  .thermal-grid {height:auto;grid-auto-rows:auto;align-items:stretch}
  .thermal-card {height:auto;min-height:310px}
}
.thermal-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,16em),1fr));gap:8px}
.thermal-card {min-width:0}
.region-title {min-width:0;overflow-wrap:anywhere}
.region-title small {display:block;margin-top:0.25em;color:#a8c8d2;font-size:0.55em;letter-spacing:0.1em}
.thermal-card.inactive {opacity:0.42;border-color:color-mix(in srgb,var(--accent),#7b8991 50%);box-shadow:none}
.thermal-card.inactive .temperature {color:#cad5db}
.thermal-card.inactive .audio-switch {display:none}
.thermal-card.inactive .alarm-row small {color:#9eacb5}
.status.inactive {width:auto;min-width:4.4em;height:auto;padding:0.55em 0.6em;border-radius:0.35em;background:#30414b;color:#d3e0e5;box-shadow:none;font-size:0.72em;white-space:nowrap}
@media(min-width:1200px){.thermal-grid {grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:1199px){.thermal-grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:450px) and (max-width:699px){.thermal-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:449px){.thermal-grid {grid-template-columns:minmax(0,1fr)}}