/* ============== CINEMA MODAL ============== */
.cinema-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 10, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: cinemaIn 0.3s ease;
  cursor: zoom-out;
  overflow-y: auto;
}
@keyframes cinemaIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Stage: landscape → coluna, portrait → linha ── */
.cinema-stage {
  position: relative; z-index: 2;
  cursor: default;
  display: flex; flex-direction: column;
  gap: 0;
  width: min(84vw, 960px);
  animation: stageIn 0.4s 0.1s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}
.cinema-stage.portrait {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 56px);
  width: min(88vw, 1100px);
}
@keyframes stageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tela de vídeo ── */
.cinema-screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.cinema-screen.portrait {
  width: auto;
  height: min(76vh, 700px);
  aspect-ratio: 9/16;
}
.cinema-screen iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; border: 0;
}

/* placeholder se vimeoId vazio */
.cinema-placeholder { position: relative; width: 100%; height: 100%; }
.cinema-placeholder .video-still { width: 100%; height: 100%; aspect-ratio: auto !important; }
.cinema-marker {
  position: absolute; left: 24px; top: 24px;
  display: flex; flex-direction: column; gap: 8px;
  color: var(--color-sand); z-index: 2;
}
.cinema-marker .caption { color: var(--color-red); }
.cinema-marker code {
  font-family: 'Courier New', monospace; font-size: 11px;
  background: rgba(0,0,0,0.6); padding: 6px 10px;
  color: rgba(242,234,219,0.85); letter-spacing: 0.05em;
}

/* ── Painel de informação ── */
.cinema-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4vw;
  padding: 22px 0 0;
  color: var(--color-sand);
}
.cinema-stage.portrait .cinema-info {
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 0 0;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.cinema-info-main { flex: 1; min-width: 0; }

.cinema-client {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,234,219,0.45);
  margin-bottom: 10px;
}
.cinema-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 56px);
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--color-sand);
  word-break: break-word;
}
.cinema-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(242,234,219,0.6);
  margin-top: 14px;
  max-width: 54ch;
}
.cinema-info-side {
  flex-shrink: 0;
  padding-top: 6px;
}
.cinema-tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242,234,219,0.35);
  white-space: nowrap;
}

/* ── Botão fechar ── */
.cinema-close {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(242,234,219,0.25);
  border-radius: 999px;
  color: rgba(242,234,219,0.7);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.cinema-close:hover {
  background: rgba(242,234,219,0.08);
  border-color: rgba(242,234,219,0.5);
  color: var(--color-sand);
}

/* ============== CARD HOVER PREVIEW ============== */
.video-card { position: relative; overflow: hidden; }
.video-card-preview {
  position: absolute; inset: 0;
  pointer-events: none;
  animation: previewIn 0.3s ease;
}
.video-card-preview iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
@keyframes previewIn { from { opacity: 0; } to { opacity: 1; } }

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
  .cinema-stage { width: 94vw; }
  .cinema-stage.portrait {
    flex-direction: column;
    width: min(78vw, 360px);
  }
  .cinema-screen.portrait { height: auto; width: 100%; }
  .cinema-stage.portrait .cinema-info { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  /* ITEM 6 — folga no modal de vídeo no mobile */
  .cinema-modal { padding: 12px; }
  .cinema-close { top: 14px; right: 14px; padding: 8px 12px; font-size: 10px; }
  .cinema-info { gap: 16px; padding-top: 16px; }
  .cinema-desc { font-size: 13px; line-height: 1.55; }
}