/* Percurso editorial: os quadros sugerem uma sequência sem um fio literal. */
.video-showcase {
  --video-gold: #c6aa6a;
  width: min(80vw, 73.75rem);
  margin-inline: auto;
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(7rem, 14vw, 12rem);
}

.video-showcase-copy {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: clamp(4rem, 8vw, 7rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.video-showcase-copy > span {
  padding-top: 0.25rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.video-showcase-copy h3 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1;
}

.video-showcase-copy p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  line-height: 1.5;
}

.video-stack {
  --video-card-width: min(34vw, 31rem);
  --video-stack-half: min(40vw, 36.875rem);
  --video-connector-gap: clamp(1.25rem, 1.95vw, 1.75rem);
  --video-connector-length: max(1.25rem, calc(var(--video-stack-half) - var(--video-card-width) - var(--video-connector-gap)));
  --video-line-start: 0px;
  --video-line-travel: 100%;
  position: relative;
  isolation: isolate;
  display: grid;
  row-gap: clamp(5rem, 10vw, 9rem);
  overflow: visible;
  background: transparent;
}

/* A linha principal é quase imperceptível quando a página está parada. */
.video-stack::before {
  position: absolute;
  top: var(--video-line-start);
  left: 50%;
  z-index: 0;
  width: 1px;
  height: var(--video-line-travel);
  background: linear-gradient(to bottom, transparent, rgba(198, 170, 106, 0.35) 4%, rgba(198, 170, 106, 0.35) 96%, transparent);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.video-card {
  position: relative;
  z-index: 1;
  width: var(--video-card-width);
  aspect-ratio: 0.9;
  margin: 0;
  background: #000;
}

.video-card:nth-child(odd) { justify-self: start; }
.video-card:nth-child(even) { justify-self: end; }

/* Segmentos curtos deixam a ligação implícita e não tocam nos vídeos. */
.video-card::after {
  position: absolute;
  top: 50%;
  width: var(--video-connector-length);
  height: 1px;
  content: "";
  pointer-events: none;
}

.video-card:nth-child(odd)::after {
  left: calc(100% + var(--video-connector-gap));
  background: linear-gradient(to right, transparent, rgba(198, 170, 106, 0.35) 25%, rgba(198, 170, 106, 0.5));
}

.video-card:nth-child(even)::after {
  right: calc(100% + var(--video-connector-gap));
  background: linear-gradient(to left, transparent, rgba(198, 170, 106, 0.35) 25%, rgba(198, 170, 106, 0.5));
}

/* O losango marca o encontro de cada trabalho com o eixo central. */
.video-card::before {
  position: absolute;
  top: calc(50% - 2px);
  z-index: 2;
  width: 4px;
  height: 4px;
  border: 1px solid rgba(225, 201, 142, 0.68);
  background: var(--bg);
  content: "";
  pointer-events: none;
  transform: rotate(45deg);
}

.video-card:nth-child(odd)::before {
  left: calc(100% + var(--video-connector-gap) + var(--video-connector-length) - 2px);
}

.video-card:nth-child(even)::before {
  right: calc(100% + var(--video-connector-gap) + var(--video-connector-length) - 2px);
}

.video-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.video-card-copy {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1rem);
  left: 0;
  z-index: 3;
  display: grid;
  gap: 0.25rem;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.video-card-copy small {
  color: var(--video-gold);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-card-copy strong {
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 560;
}

@media (max-width: 760px) {
  .video-showcase {
    width: 86vw;
    padding-block: 4rem 6rem;
  }

  .video-showcase-copy {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.5rem;
    margin-bottom: 4rem;
  }

  .video-showcase-copy h3 { font-size: 1.5rem; }
  .video-showcase-copy p { font-size: 0.75rem; }

  .video-stack {
    --video-card-width: 62.4vw;
    --video-mobile-gap: 8rem;
    --video-mobile-offset: calc(86vw - var(--video-card-width));
    row-gap: var(--video-mobile-gap);
  }

  .video-card { aspect-ratio: 0.9; }

  /* Liga o centro inferior ao centro superior do próximo quadro alternado. */
  .video-stack::before { display: none; }
  /* Mesmo losango e brilho do desktop, no encontro com a descida seguinte. */
  .video-card:nth-child(odd)::before {
    display: block;
    top: calc(100% + var(--video-mobile-gap) * 0.25 - 2px);
    left: calc(50% + var(--video-mobile-offset) - 2px);
    right: auto;
  }
  .video-card:nth-child(even)::before {
    display: block;
    top: calc(100% + var(--video-mobile-gap) * 0.25 - 2px);
    right: calc(50% + var(--video-mobile-offset) - 2px);
    left: auto;
  }
  .video-card:nth-child(n)::after {
    display: block;
    top: 100%;
    left: 50%;
    right: auto;
    width: calc(var(--video-mobile-offset) + 1px);
    height: var(--video-mobile-gap);
    background:
      linear-gradient(to bottom, rgba(198, 170, 106, 0.12), rgba(198, 170, 106, 0.35)) left top / 1px 25% no-repeat,
      linear-gradient(to right, rgba(198, 170, 106, 0.35), rgba(198, 170, 106, 0.5)) left 25% / 100% 1px no-repeat,
      linear-gradient(to bottom, rgba(198, 170, 106, 0.35) 70%, rgba(198, 170, 106, 0.12)) right bottom / 1px 75% no-repeat;
  }
  .video-card:nth-child(even)::after {
    left: auto;
    right: 50%;
    transform: scaleX(-1);
  }
  .video-card:last-child::before,
  .video-card:last-child::after { display: none; }

  .video-card-copy {
    right: auto;
    max-width: 100%;
    padding: 0 0.5rem 0 0;
    background: var(--bg);
  }
  .video-card-copy strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .video-card.is-connector-lit::before { animation: video-node-light 450ms ease-out; }
}

@keyframes video-node-light {
  0%, 100% { background: var(--bg); box-shadow: 0 0 0 transparent; }
  35% { background: #e1c98e; box-shadow: 0 0 8px rgba(225, 201, 142, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .video-showcase,
  .video-showcase * {
    animation: none !important;
    transition: none !important;
  }

  .video-card::before { animation: none !important; }
}