/**
 * Mapa interativo da rota — item "Altimetria e Mapa da Rota" de
 * Informações da Etapa. Mobile-first de propósito (2026-09-14): a
 * maioria do acesso a essa aba é celular (confirmado no GA4 do site),
 * então todo tamanho/toque parte do celular e só GANHA espaço em telas
 * maiores, nunca o contrário.
 *
 * 2026-09-14 (revisão): card de entrada virou ÍCONE da modalidade (não
 * mais foto/thumb) e o modal passou a reunir TUDO num lugar só — mapa,
 * gráfico de elevação, estatísticas E a imagem oficial do perfil de
 * altimetria — pedido do usuário depois de testar a versão em 2 seções
 * separadas ("tem como as imagens das altimetrias ficarem dentro do
 * modal junto com o mapa e as outras informações?").
 */

.rota-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 640px) {
  .rota-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .rota-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

.rota-card {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: 100%; padding: 1.1rem .6rem .9rem; margin: 0;
  background: #111; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  cursor: pointer; text-align: center;
  font-family: 'Montserrat', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.rota-card:hover, .rota-card:focus-visible { border-color: #ffcc00; }
.rota-card__icone {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,204,0,.1); color: #ffcc00;
}
.rota-card__icone svg { width: 28px; height: 28px; }
.rota-card__label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; font-weight: 700; font-size: .82rem; line-height: 1.25;
}
.rota-card__label small {
  color: rgba(255,255,255,.5); font-weight: 600; font-size: .68rem;
}

/* ---------- Modal (mesma técnica de scroll-lock já usada no site) ---------- */
.rota-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0a0a;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.rota-modal.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.rota-modal__header {
  flex: 0 0 auto; display: flex; align-items: center; gap: .6rem;
  padding: .8rem .9rem; background: #111; border-bottom: 1px solid rgba(255,255,255,.08);
}
.rota-modal__title { flex: 1 1 auto; min-width: 0; }
.rota-modal__title strong { display: block; color: #fff; font-size: 1rem; font-weight: 800; font-family: 'Montserrat', sans-serif; }
.rota-modal__title span { display: block; color: rgba(255,255,255,.5); font-size: .72rem; }
.rota-modal__close {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; color: #fff; font-size: 1.4rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rota-modal__close:hover { background: rgba(255,255,255,.16); }

/* Faixa de estatísticas — sempre visível, acima do mapa, nunca precisa
   rolar pra ver o essencial (distância/ganho são a 1ª coisa que importa). */
.rota-modal__stats {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.08);
}
.rota-stat {
  background: #111; padding: .55rem .5rem; text-align: center;
}
.rota-stat__valor { display: block; color: #ffcc00; font-size: 1.05rem; font-weight: 800; font-family: 'Montserrat', sans-serif; line-height: 1.1; }
.rota-stat__label { display: block; color: rgba(255,255,255,.5); font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.rota-stat--estimado .rota-stat__valor::after {
  content: '*'; color: rgba(255,204,0,.6); font-size: .7em; margin-left: 2px;
}
.rota-modal__aviso-estimativa {
  flex: 0 0 auto; padding: .35rem .9rem; background: #1a1a1a;
  color: rgba(255,255,255,.4); font-size: .62rem; text-align: center;
}

/* Corpo do modal ROLA — agora junta mapa + gráfico + imagem oficial do
   perfil de altimetria, conteúdo demais pra caber tudo fixo numa tela
   de celular. Header/stats ficam fixos acima, o botão de GPX fixo abaixo. */
.rota-modal__body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* Mapa — de volta ao formato HORIZONTAL (altura fixa, mais largo que alto)
   dentro do corpo rolável. O formato vertical deixava a "zona do mapa"
   grande demais pra rolar; a solução real pro conflito de gesto foi
   desligar o arrasto do mapa (ver rota-interativa.js) e sincronizar o
   toque no mapa com o ponto no gráfico, então não depende mais do
   tamanho do mapa pra funcionar bem. */
.rota-modal__mapa-wrap {
  position: relative; width: 100%;
}
.rota-modal__mapa {
  height: 240px; width: 100%;
}
@media (min-height: 700px) {
  .rota-modal__mapa { height: 300px; }
}

/* Legenda fixa sobre o mapa — mostra "toque num ponto" por padrão e o
   km/altitude do ponto tocado depois (ver destacarPonto() no JS). */
.rota-modal__mapa-legenda {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 650;
  padding: .5rem .7rem; border-radius: 6px;
  background: rgba(10,10,10,.75); backdrop-filter: blur(2px);
  color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .74rem;
  text-align: center; pointer-events: none;
}

/* Marcador do ponto selecionado (sincronizado com o gráfico) — maior e
   com um anel branco pulsante, se destaca dos marcadores de km. */
.rota-marker--selecao {
  width: 14px; height: 14px; border-radius: 50%;
  background: #ffffff; border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 4px rgba(255,255,255,.35);
}

/* Botão de compartilhar — bem visível, entre o mapa e a altimetria (pedido
   do usuário 2026-09-14), faixa cheia com contraste forte pra não passar
   despercebido nessa posição de transição entre as duas seções. */
.rota-modal__compartilhar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .85rem 1rem; margin: 0; border: none; cursor: pointer;
  background: #ffcc00; color: #0a0a0a;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em;
  min-height: 46px; /* alvo de toque confortável */
}
.rota-modal__compartilhar:hover { background: #e6b800; }
.rota-modal__compartilhar svg { flex-shrink: 0; }

/* Imagem oficial do perfil de altimetria — vem LOGO abaixo do mapa (sem
   o gráfico entre os dois), pedido do usuário: "a imagem da altimetria
   abaixo do mapa, pq fica um espaço escuro e depois que entra a
   altimetria" — o gráfico interativo agora vem depois da imagem. */
.rota-modal__imagem {
  padding: .9rem .9rem .5rem;
  background: #111;
}

/* Gráfico de elevação — altura fixa e previsível (Chart.js precisa de
   container com altura definida, senão cresce sem limite). */
.rota-modal__elevacao {
  height: 130px; padding: .8rem .9rem .4rem;
  background: #111; border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 640px) {
  .rota-modal__elevacao { height: 160px; }
}
.rota-modal__imagem-titulo {
  display: block; color: rgba(255,255,255,.55); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  margin-bottom: .55rem;
}
.rota-modal__imagem-foto {
  position: relative;
}
.rota-modal__imagem img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
}
/* Linha "você está aqui" sobre a FOTO oficial de altimetria — sincronizada
   com o toque no mapa/gráfico (posição em % calibrada pra moldura real da
   foto, ver IMAGEM_INICIO_FRAC/IMAGEM_FIM_FRAC em rota-interativa.js). */
.rota-modal__imagem-linha {
  position: absolute; top: 4%; bottom: 4%; width: 3px;
  background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  transform: translateX(-50%);
  display: none; pointer-events: none;
}
.rota-modal__imagem-linha::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2px solid #0a0a0a;
}
.rota-modal__imagem-linha.is-visivel { display: block; }

/* Ações — botão de GPX sempre alcançável com o polegar, faixa fixa embaixo
   (não deixa o usuário ter que rolar até o fim pra achar o download). */
.rota-modal__acoes {
  flex: 0 0 auto; padding: .7rem .9rem; padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  background: #111; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: .6rem;
}
.rota-modal__gpx {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .75rem 1rem; background: #ffcc00; color: #0a0a0a; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .03em; border-radius: 6px;
  min-height: 44px; /* alvo de toque confortável */
}
.rota-modal__gpx:hover { background: #e6b800; }

/* Marcador de largada/chegada no mapa (ícone customizado leve, sem
   depender do PNG padrão do Leaflet, que pesa e não combina com o site). */
.rota-marker {
  width: 16px; height: 16px; border-radius: 50%; border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
}
.rota-marker--largada { background: #2ecc40; }
.rota-marker--chegada { background: #dc2828; }
.rota-marker--km {
  /* cor de fundo vem inline por marcador (ver PALETA_KM em rota-interativa.js) */
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid #0a0a0a;
}
.leaflet-popup-content-wrapper { background: #111; color: #fff; font-family: 'Montserrat', sans-serif; }
.leaflet-popup-tip { background: #111; }