/* Stable desktop stage fits every scene in full. Controls have their own
   space, so they never cover the cinema screen or the Qolsys panel. */
.scene { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); height: auto; }
.scene::after { display: none; }
.scene-photograph { grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 3 / 2; align-self: center; background: #111; }
.scene .scene-photograph > #scene-image { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.scene .scene-overlay { grid-column: 1; grid-row: 1; position: relative; inset: auto; padding: 38px 32px; align-self: center; background: #151515; }
.scene .eyebrow { margin-bottom: 15px; }
.scene h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); margin-bottom: 16px; }
.scene .scene-message { margin-bottom: 22px; }
.scene .scene-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scene .scene-buttons button { padding: 11px 8px; min-height: 44px; font-size: .75rem; }
.scene .scene-hint { font-size: .75rem; margin-top: 17px; }
@media (max-width: 1100px) {
  .scene { display: block; height: auto; }
  .scene-photograph { aspect-ratio: auto; }
  .scene .scene-photograph > #scene-image { width: 100%; height: auto; }
  .scene .scene-overlay { padding: 30px 28px; }
  .scene .scene-buttons { display: flex; flex-wrap: wrap; }
  .scene .scene-buttons button { padding-inline: 18px; }
}
@media (max-width: 650px) {
  .scene .scene-overlay { padding: 25px 22px; }
  .scene .eyebrow { margin-bottom: 12px; }
  .scene h2 { font-size: 1.45rem; margin-bottom: 12px; }
  .scene .scene-message { margin-bottom: 18px; }
  .scene .scene-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .scene .scene-buttons button { padding: 10px 8px; min-height: 44px; font-size: .75rem; }
  .scene .scene-hint { margin-top: 15px; }
}