/* Shared styling for the Pierre's Theatre camera pages.
   Served from the VPS, so real stylesheets are fine here - the theatre's
   website only ever embeds these pages as an iframe. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  background: #fff;
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 10px; }

/* Full-bleed variant, used by the embedded street page: no page padding and no
   card chrome, so the pictures get every pixel the iframe has. */
.wrap.full { max-width: none; padding: 0; }
.wrap.full .card { border: 0; border-radius: 0; }

.grid { display: grid; gap: 8px; }
.grid.stack { grid-template-columns: 1fr; }              /* one above the other */
.grid:not(.stack) { grid-template-columns: 1fr 1fr; }    /* side by side */
@media (max-width: 700px) { .grid:not(.stack) { grid-template-columns: 1fr; } }

.card { position: relative; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; overflow: hidden; }

/* The label sits on the picture rather than above it. A separate header bar
   costs a strip of height on every camera, which is exactly the space the
   video wants. */
.label {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(112, 0, 0, .85); color: #fff;
  padding: .3rem .62rem; border-radius: 4px;
  font-size: .8rem; font-weight: 600; line-height: 1;
  display: flex; align-items: center; gap: .45rem;
  pointer-events: none;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #d8a0a0; flex: none; }
.dot.live { background: #63e08a; }

/* Street page (.minimal): the view speaks for itself, so the camera name comes
   off and only the live dot stays. No pill behind it - a dark ring plus a shadow
   is what keeps a bare dot readable over a bright noon sky and a dark night
   scene alike. */
.minimal .label { background: none; padding: 0; top: 12px; left: 12px; }
.minimal .name { display: none; }
.minimal .dot {
  width: 10px; height: 10px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 1px 4px rgba(0, 0, 0, .7);
}

/* Aspect ratio is set per camera from the page's CAMERAS list, so the 4:3
   camera is not letterboxed into a 16:9 box and wasting height. */
.stage { position: relative; aspect-ratio: 16 / 9; background: #111; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #111; display: block; }

.overlay {
  position: absolute; inset: 0; background: #111; color: #ddd;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; font-size: 1rem; line-height: 1.45;
}
.overlay[hidden] { display: none; }
.overlay small { display: block; color: #888; font-size: .8rem; margin-top: .35rem; }

.spin {
  width: 20px; height: 20px; border: 2px solid #444; border-top-color: #bbb;
  border-radius: 50%; animation: spin 900ms linear infinite; margin-bottom: .6rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Standalone (non-embedded) pages get a page heading. */
.pagehead { max-width: 1400px; margin: 0 auto; padding: 18px 10px 0; }
.pagehead h1 { font-size: 1.4rem; color: #1a1a1a; margin: 0 0 .2rem; font-weight: 600; }
.pagehead p { font-size: 1rem; color: #666; margin: 0; line-height: 1.5; }
.footnote { max-width: 1400px; margin: 0 auto; padding: 0 10px 16px; font-size: .8rem; color: #888; font-style: italic; }