/* ============================================================
   JIFFY TRICE — On the Road / Archive
   Um cartão de arquivo com a rota inteira no rodapé.
   Assinatura: a trilha de paradas — o modal É o arquivo,
   não a foto de uma noite só.
   ============================================================ */

.road-modal {
  z-index: 190;                 /* acima do dock de áudio (180) */
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.6vw, 40px);
  background: transparent;
}
.road-modal[hidden] { display: none; }
.road-modal .modal-scrim {
  background: rgba(3, 4, 7, .86);
  backdrop-filter: blur(18px) saturate(.7);
  -webkit-backdrop-filter: blur(18px) saturate(.7);
}

/* O dock de música sai de cena enquanto o arquivo está aberto:
   ele já fica inerte, e assim para de cobrir a trilha de rota. */
body.road-open .audio-dock {
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
  transition: opacity 200ms ease, transform 280ms var(--ease-out);
}

.road-modal-mount {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(1180px, 100%);
  /* altura real, não só um teto: é o que dá ao palco um orçamento de
     espaço para crescer (ver .road-card mais abaixo) — sem isto a
     mídia parava do tamanho do próprio conteúdo, bem menor do que
     cabia na tela. */
  height: calc(100dvh - clamp(28px, 5.2vw, 80px));
  max-height: calc(100dvh - clamp(28px, 5.2vw, 80px));
  min-width: 0;
  min-height: 0;
}

/* ---------- cartão ---------- */

.road-card {
  position: relative;
  display: grid;
  /* A coluna do palco não é mais uma fração fixa da largura: min-content
     deixa a trilha encolher até o tanto que a proporção real do arquivo
     pede (ver --road-ratio). Um vídeo vertical vira uma faixa estreita e
     alta em vez de uma moldura larga com vão nas laterais — e a sobra
     de espaço vai para a coluna de texto (1fr), que cresce sozinha. */
  grid-template-columns: minmax(280px, min-content) minmax(340px, 1fr);
  /* a linha "stage body" preenche a altura do cartão (1fr), não só o
     tanto que o conteúdo pede — é essa folga que deixa o vídeo crescer
     de verdade; o rodapé da rota continua do tamanho do próprio texto. */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "stage body"
    "route route";
  min-width: 0;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
  /* Cantos vivem aqui agora, não mais no vídeo: como a mídia preenche
     o palco de ponta a ponta (sem padding), arredondar a moldura dela
     por dentro não fazia mais sentido — quem tinha canto vivo mesmo
     era o próprio cartão. overflow:hidden acima corta a mídia junto. */
  border-radius: 16px;
  color: var(--txt);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .68);
  animation: road-card-in 460ms var(--ease-out) both;
}
.road-card :focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* ---------- fechar ---------- */

.road-close {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 14px;
  color: var(--dim);
  background: rgba(7, 8, 12, .78);
  border: 1px solid var(--line);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color 200ms ease, border-color 200ms ease;
}
.road-close .mono { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.road-close:hover { color: var(--txt); border-color: rgba(180, 196, 255, .38); }

/* ---------- palco da mídia ----------
   As fotos e vídeos do arquivo têm proporções muito diferentes — dos
   vídeos verticais (9:16) às fotos horizontais (até 2662x1498). Em vez
   de um quadro fixo (que sobrava nas laterais do vídeo vertical), o
   palco assume a proporção real de cada arquivo: --road-ratio vem de
   road.js (w/h do evento atual) a cada troca de parada. object-fit
   continua "contain" como segurança, mas na prática a moldura já
   nasce do tamanho certo — não deveria sobrar quase nada para conter. */

.road-stage {
  position: relative;
  grid-area: stage;
  min-width: 0;
  min-height: 0;
  /* teto de altura = a linha inteira (agora 1fr, ver .road-card) — é essa
     folga que faz o vídeo vertical crescer bem além do que o conteúdo
     de texto pediria sozinho. O teto de largura existe só para as fotos
     bem horizontais (El Fortin é 2:1): sem ele, height:100% numa linha
     alta pedia uma largura maior que o cartão inteiro, e o vídeo/foto
     estourava por cima da coluna de texto. Com os dois tetos e nenhuma
     medida travada, o aspect-ratio escolhe o maior tamanho que cabe
     nos dois ao mesmo tempo — cada mídia pega o espaço que sua própria
     proporção permite, nunca mais. */
  max-height: 100%;
  max-width: min(56vw, 760px);
  /* align-self fica no "stretch" padrão de propósito: é o que faz o
     aspect-ratio calcular o maior tamanho que cabe nos dois tetos
     (altura da linha, largura do min(56vw,760px)) — um align-self
     diferente (ex.: center) desliga esse cálculo e a mídia volta a
     nascer do tamanho mínimo da coluna, pequena demais. */
  aspect-ratio: var(--road-ratio, 8 / 5);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(108, 123, 255, .06), transparent 62%),
    #050609;
  border-right: 1px solid var(--line-soft);
  touch-action: pan-y;
}
.road-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: repeating-linear-gradient(
    135deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 6px);
}
.road-stage-inner {
  /* Trilhas definidas (não auto) para que o max-height:100% da imagem
     tenha contra o que resolver — senão foto em pé estoura o palco. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
  /* Sem sangria: o palco já nasce na proporção exata do arquivo
     (--road-ratio, ver .road-stage), então contain preenche a área
     inteira sozinho — a folga aqui só sobrava como moldura preta
     ao redor do vídeo. */
  padding: 0;
}
.road-frame {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  justify-self: center;
  align-self: center;
  object-fit: contain;
  background: #04050a;
  /* Sem cantos, contorno ou sombra próprios: a mídia preenche o palco
     de ponta a ponta (sem padding, ver .road-stage-inner), então
     qualquer moldura aqui ficaria colada exatamente na borda do
     cartão — dobrando um contorno que o próprio .road-card já desenha.
     Quem arredonda e emoldura agora é o cartão, uma vez só. */
}
.road-stage-empty {
  margin: 0;
  color: var(--dim);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- carrossel de mídia (vídeo + foto na mesma parada) ----------
   Setinhas nas bordas e pontos embaixo, igual a um post do Instagram —
   mas trocando o slide dentro do próprio palco, sem mudar de parada.
   O wrapper cobre o palco inteiro e não intercepta clique (pointer-events
   none); só os botões, que são a parte realmente interativa, recebem o
   ponteiro de volta. Fica por cima da textura de scanline (::after) por
   ter z-index explícito — ela não tem, então perde a disputa. */
.road-gallery {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.road-gallery[hidden] { display: none; }

.road-gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--txt);
  background: rgba(7, 8, 12, .7);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.road-gallery-nav:hover { color: #fff; border-color: rgba(180, 196, 255, .4); background: rgba(7, 8, 12, .86); }
.road-gallery-prev { left: 10px; translate: 0 -50%; }
.road-gallery-next { right: 10px; translate: 0 -50%; }

.road-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 7px;
  translate: -50% 0;
  pointer-events: auto;
}
.road-gallery-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  background: rgba(242, 244, 250, .38);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px transparent;
  transition: background-color 180ms ease, transform 180ms ease;
}
.road-gallery-dot:hover { background: rgba(242, 244, 250, .68); }
.road-gallery-dot[aria-selected="true"] {
  background: var(--txt);
  transform: scale(1.3);
}

/* ---------- coluna editorial ---------- */

.road-body {
  grid-area: body;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.road-body-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(62dvh, 540px);
  padding: clamp(52px, 4.6vw, 64px) clamp(26px, 3vw, 48px) clamp(26px, 2.6vw, 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Centra o bloco editorial contra a imagem sem cortar o topo quando
   o texto é maior que a coluna — margin auto, não justify-content. */
.road-text { margin-block: auto; }

.road-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--dim);
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.road-status { color: var(--txt); }
.road-status.is-next { color: var(--neon); }
.road-kicker-sep {
  flex: 1 1 auto;
  height: 1px;
  min-width: 14px;
  background: var(--line);
}
.road-kicker-meta {
  flex: 0 1 auto;
  text-align: right;
  text-transform: none;
  letter-spacing: .08em;
}

.road-title {
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 3.6vw, 4.2rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.road-copy {
  margin: 0 0 28px;
  max-width: 44ch;
  color: rgba(242, 244, 250, .74);
  font-size: clamp(.95rem, 1.05vw, 1.04rem);
  line-height: 1.68;
}
.road-count {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: 0 14px 0 12px;
  color: var(--txt);
  border-right: 1px solid var(--line-soft);
  font-size: .7rem;
  letter-spacing: .14em;
  white-space: nowrap;
}
.road-count span { color: rgba(139, 147, 167, .55); }

/* ---------- trilha de rota (assinatura) ---------- */

.road-route {
  grid-area: route;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  background: rgba(7, 8, 12, .72);
  border-top: 1px solid var(--line);
}
.road-step {
  display: grid;
  place-items: center;
  width: clamp(46px, 4vw, 58px);
  color: var(--dim);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.road-step:first-child { border-right: 1px solid var(--line-soft); }
.road-step:last-child { border-left: 1px solid var(--line-soft); }
.road-step:hover { color: var(--txt); background: rgba(180, 196, 255, .06); }

.road-track {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.road-track::-webkit-scrollbar { display: none; }
.road-stops {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}
.road-stop {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 15px;
  color: var(--dim);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.road-stop-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 147, 167, .42);
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease-out);
}
.road-stop.is-next .road-stop-dot { background: var(--neon); }
.road-stop:hover { color: rgba(242, 244, 250, .86); }
.road-stop:hover .road-stop-dot { background: rgba(242, 244, 250, .7); }
.road-stop[aria-current="true"] { color: var(--txt); }
.road-stop[aria-current="true"] .road-stop-dot {
  transform: scale(1.5);
  background: var(--txt);
  box-shadow: 0 0 0 4px rgba(180, 196, 255, .12);
}
.road-stop.is-next[aria-current="true"] .road-stop-dot {
  background: var(--neon);
  box-shadow: 0 0 0 4px var(--neon-soft), 0 0 18px var(--neon-glow);
}

/* ---------- movimento ---------- */

@keyframes road-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@keyframes road-sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes road-shift-fwd {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes road-shift-back {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
.road-card.is-shifting[data-dir="fwd"] .road-stage-inner,
.road-card.is-shifting[data-dir="fwd"] .road-body-scroll {
  animation: road-shift-fwd 420ms var(--ease-out) both;
}
.road-card.is-shifting[data-dir="back"] .road-stage-inner,
.road-card.is-shifting[data-dir="back"] .road-body-scroll {
  animation: road-shift-back 420ms var(--ease-out) both;
}
.road-card.is-shifting .road-body-scroll { animation-delay: 45ms; }

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* Coluna editorial fica estreita demais antes de 1080 — reequilibra. */
@media (max-width: 1180px) {
  .road-card { grid-template-columns: minmax(240px, min-content) minmax(320px, 1fr); }
  .road-body-scroll { padding-top: clamp(52px, 6vw, 64px); }
}

/* Abaixo de 960 duas colunas deixam de caber, e é também onde o telefone
   entra: tablet e celular passam a usar o mesmo desenho — tela inteira,
   de ponta a ponta. O cartão vira a própria viewport (100dvh, não mais
   "auto"), a mídia cobre tudo (cover, sem moldura) e o texto flutua por
   cima dela perto do rodapé, sobre um degradê. A trilha de paradas
   (route) continua de fora, na própria faixa. */
@media (max-width: 960px) {
  .road-modal { padding: 0; align-items: stretch; }
  .road-modal-mount { width: 100%; height: 100dvh; max-height: 100dvh; }

  /* Mídia e texto passam a dividir a mesma área do grid ("stage"): o
     vídeo cobre a tela inteira, o texto flutua por cima dele perto do
     rodapé, sobre um degradê. A trilha de paradas (route) continua de
     fora, na própria faixa — é o "menos a parte de baixo" do pedido. */
  .road-card {
    height: 100%;
    max-height: 100dvh;
    /* precisa voltar a uma coluna só — sem isto o cartão ainda herda as
       duas colunas do desktop (via o breakpoint de 1180px), e como o
       template de área abaixo só declara um token por linha, tudo
       ("stage"/"route") fica preso na primeira coluna estreita; a
       segunda (1fr) sobra vazia — era o vão preto na sua imagem. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage" "route";
    /* Aqui o cartão É a tela (100dvh/100vw, sem margem do modal ao
       redor) — arredondar deixaria quatro triângulos do fundo do
       modal aparecendo nos cantos. O radius do desktop é só para o
       cartão flutuando com espaço em volta. */
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }

  /* O palco vira a tela inteira — não é mais um quadro que a mídia
     "cabe dentro" (aspect-ratio + contain): aqui a mídia É o fundo,
     cobrindo de ponta a ponta (cover), sem sangria nem moldura. */
  .road-stage {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin-inline: 0;
    border-bottom: 0;
  }
  .road-stage-inner { padding: 0; }
  .road-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
  }

  /* Sem carrossel no telefone: a mídia já é a tela inteira, e a foto
     como segundo slide brigava com o degradê do texto embaixo. Fica só
     o vídeo (primeiro item de "media") — o mesmo dado que já alimenta
     o desktop, só a navegação some aqui. */
  .road-gallery { display: none; }

  /* O texto sai da própria coluna e vira uma camada sobre o vídeo,
     ancorada no rodapé da área do palco (grid-area compartilhada acima).
     pointer-events:none no wrapper deixa o gesto de swipe do palco
     passar por baixo do vazio; só a faixa com o degradê (que realmente
     tem texto) volta a aceitar toque, para dar pra rolar legendas
     longas. */
  .road-body {
    grid-area: stage;
    align-self: end;
    pointer-events: none;
    /* .road-stage é position:relative (logo "posicionado"); um elemento
       posicionado sempre pinta por cima de um estático, não importa a
       ordem no DOM — sem isto o texto nasce atrás do vídeo, invisível
       mesmo com z-index certo. position:relative + z-index tira essa
       ambiguidade: os dois viram "posicionados" e a ordem do DOM (o
       body vem depois do stage no HTML) volta a decidir quem fica em
       cima. */
    position: relative;
    z-index: 1;
  }
  .road-body-scroll {
    /* px/svh, não %: .road-body não tem altura própria definida (ela
       nasce do conteúdo, align-self:end só posiciona), então uma
       porcentagem aqui não tem contra o que resolver. */
    max-height: min(50svh, 400px);
    padding: 72px 20px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(to top,
      rgba(3, 4, 7, .94) 0%,
      rgba(3, 4, 7, .8) 32%,
      rgba(3, 4, 7, .4) 68%,
      transparent 100%);
    pointer-events: auto;
  }
  .road-text { margin-block: 0; }

  .road-count { padding: 0 11px; font-size: .66rem; }
  .road-kicker { flex-wrap: wrap; gap: 8px; font-size: .62rem; }
  .road-kicker-sep { display: none; }
  .road-kicker-meta { flex-basis: 100%; text-align: left; }
  .road-title { font-size: clamp(2rem, 9.5vw, 2.9rem); margin-bottom: 14px; }
  .road-copy { font-size: .95rem; line-height: 1.6; }
  .road-route {
    position: relative;
    z-index: 2;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .road-step { width: 46px; }
  .road-stop { min-height: 50px; padding: 0 13px; font-size: .65rem; }
  .road-close {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    min-height: 38px;
    padding: 0 12px;
  }
}

/* Telefone deitado: sobra largura e falta altura — volta às duas colunas,
   senão a foto fica do tamanho de uma miniatura. */
@media (max-height: 560px) and (min-width: 560px) {
  .road-modal { padding: 8px; align-items: center; }
  .road-modal-mount { height: 100%; max-height: 100dvh; }
  .road-card {
    height: 100%;
    grid-template-columns: minmax(200px, min-content) minmax(260px, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage body" "route route";
  }
  .road-stage {
    aspect-ratio: var(--road-ratio, 8 / 5);
    max-height: 100%;
    max-width: min(52vw, 520px);
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
  }
  .road-body-scroll { max-height: none; padding: 20px 22px 18px; }
  .road-text { margin-block: auto; }
  .road-title { font-size: clamp(1.6rem, 4.4vw, 2.2rem); margin-bottom: 12px; }
  .road-copy { font-size: .9rem; line-height: 1.55; }
  .road-stop { min-height: 46px; }
  .road-step { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .road-card,
  .road-card.is-shifting .road-stage-inner,
  .road-card.is-shifting .road-body-scroll { animation: none; }
  .road-stop-dot { transition: none; }
  body.road-open .audio-dock { transition: none; }
}