/* Ajuste de posicionamento das setas do carrossel.
   A navegação é irmã da viewport, portanto as setas precisam ser posicionadas
   em relação à própria barra de navegação, não à viewport. */
.carousel-navigation {
  position: relative;
  min-height: 54px;
}

.carousel-navigation .carousel-nav {
  top: 50%;
  z-index: 1;
}

.carousel-navigation .carousel-prev {
  left: 12px;
}

.carousel-navigation .carousel-next {
  right: 12px;
}

.carousel-navigation .carousel-indicators {
  padding-left: 42px;
  padding-right: 42px;
}

/* Artes renderizadas só fazem parte das etapas posteriores à renderização.
   Em preparação, aprovados e falhos o card continua sendo editorial/estado,
   sem exibir o preview da arte. */
#contentsSection:not(:has(#statusTabs [data-status="rendered"].active, #statusTabs [data-status="scheduled"].active, #statusTabs [data-status="published"].active)) .rendered-preview {
  display: none;
}

/* ============================================================
   CARROSSEL DE ARTES RENDERIZADAS
   ============================================================
   Cada arte ocupa o mesmo espaço da viewport. Apenas a arte ativa fica
   visível; as demais permanecem ocultas para evitar a pilha vertical.
   As setas ficam nas laterais da imagem e continuam funcionando pelo JS.
*/
.rendered-carousel-preview {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px 52px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.rendered-carousel-viewport {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.rendered-carousel-image {
  display: none;
  width: min(100%, 420px);
  height: auto;
  margin: 0 auto;
}

.rendered-carousel-image.active {
  display: block;
}

.rendered-carousel-navigation {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.rendered-carousel-navigation button {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--muted-strong);
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

.rendered-carousel-navigation button:hover:not(:disabled) {
  background: #fff;
}

.rendered-carousel-navigation button:disabled {
  opacity: .45;
}

@media (max-width: 680px) {
  .rendered-carousel-preview {
    padding-left: 44px;
    padding-right: 44px;
  }

  .rendered-carousel-navigation {
    padding-left: 6px;
    padding-right: 6px;
  }
}