/* =========================
   SECÇÃO
   ========================= */
.torneios-section{
  background:#000;
  color:#fff;
  scroll-margin-top:120px;
  padding:0 60px 120px;
}
.torneios-section h2{
  font-size:28px;
  margin-bottom:40px;
  font-weight:700;
}
.torneios-section h2 span{
  border-left:4px solid #e11b22;
  padding-left:10px;
}

/* =========================
   VARS GERAIS
   ========================= */
:root{
  --card-pad:14px;          /* padding base dos cards */
  --badge-font:1rem;        /* tamanho do texto/emoji das badges */
  --badge-pad-y:.38rem;     /* padding vertical das badges */
  --badge-pad-x:.7rem;      /* padding horizontal das badges */
  --badge-gap:.45rem;       /* espaço entre badges */
}

/* =========================
   MAPA
   ========================= */
#map-torneios{
  width:80%;
  height:650px;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
  display:block;
  margin-inline:auto;
}

/* =========================
   POPUP LEAFLET
   ========================= */
.leaflet-container .popup-torneio .leaflet-popup-content-wrapper,
.leaflet-container .popup-torneio .leaflet-popup-tip{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.leaflet-container .popup-torneio .leaflet-popup-content-wrapper{
  position:relative;
  width:clamp(260px,92vw,420px);
  max-height:80vh;
  padding:0;
  overflow:hidden;
}
.leaflet-container .popup-torneio .leaflet-popup-content{ margin:0!important; }
.popup-multi{
  max-height:min(56vh,420px);
  overflow:auto;
}
.leaflet-container .popup-torneio a.leaflet-popup-close-button{
  color:#fff!important;
  text-shadow:0 0 6px rgba(0,0,0,.8);
  top:6px;
  right:6px;
}
.popup-wrap{ position:relative; }
.popup-close{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px; line-height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff; font-size:18px; font-weight:800;
  cursor:pointer; z-index:1000;
}
.popup-close:hover{ background:rgba(0,0,0,.75); }

/* Garantir que o popup fica acima de camadas/controles do Leaflet */
.leaflet-container .leaflet-popup{ z-index:10000; }

/* Desktop: scroll limpo dentro do popup */
@media (min-width:577px){
  .popup-multi{
    scrollbar-gutter:stable both-edges;
    padding-right:10px;
    box-sizing:content-box;
  }
  .popup-multi::-webkit-scrollbar{ width:10px; }
  .popup-multi::-webkit-scrollbar-track{ background:transparent; }
  .popup-multi::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }
  .popup-multi::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.28); }
}

/* =========================
   CARDS E LISTAS
   ========================= */
.tour-card.card{
  background:#111318;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  color:#f7f7f8;
}
.tour-sep{
  border:0; height:1px; margin:.5rem 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}

/* Badges de medalhas (cores) */
.badge-gold  { background:#2a1f00; color:#ffd666; border:1px solid #4b3a00; }
.badge-silver{ background:#212225; color:#e5e5e5; border:1px solid #3a3b3f; }
.badge-bronze{ background:#2a1b12; color:#e5a46d; border:1px solid #4a2d1f; }
.badge-medal { font-weight:800; }

/* Lista de categorias */
.list-group-item{
  background:transparent;
  border-color:rgba(255,255,255,.08);
  color:#e6e6ee;
  padding:.5rem .75rem;
}
.cat-name{ font-weight:700; }

/* Quebra de linhas longas */
.card-title, .list-group-item{ word-break:break-word; }

/* Meta (cidade · data) numa linha com corte elegante */
.card-meta{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}

/* =========================
   LAYOUT DO CARD
   ========================= */
/* Modo compacto por defeito */
.card-body-stack{
  display:flex;
  flex-direction:column;
  padding:var(--card-pad);
  gap:.25rem;
}

/* Modo alto (quando precisa colar badges ao fundo) – adicionar .is-tall via JS */
.card-body-stack.is-tall{
  position:relative;
  padding-bottom:calc(var(--card-pad) + 30px); /* espaço p/ badges fixas */
  min-height:clamp(84px,10vh,122px);
}
.card-title{ display:block; width:100%; }

/* Badges (topo do card) */
.card-badges{
  display:flex;
  gap:var(--badge-gap);
  flex-wrap:wrap;
}
.card-badges .badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--badge-font);
  line-height:1;
  padding:var(--badge-pad-y) var(--badge-pad-x);
  border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  border-width:1.5px; /* harmoniza com estilos individuais */
}
/* Quando .is-tall: coladas ao fundo à esquerda */
.card-body-stack.is-tall .card-badges{
  position:absolute;
  left:var(--card-pad);
  bottom:var(--card-pad);
  margin:0;
}

/* Badges maiores nas listas de categorias */
.list-group-item .d-flex.gap-1{ gap:.45rem; }
.list-group-item .badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem;
  line-height:1;
  padding:.34rem .62rem;
  border-radius:999px;
  border-width:1.5px;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}

/* =========================
   RESPONSIVO
   ========================= */
@media (max-width:992px){
  .torneios-section{ padding:0 24px 84px; }
  .torneios-section h2{ font-size:24px; margin-bottom:24px; }
  .torneios-section h2 span{ border-left-width:3px; padding-left:8px; }
  #map-torneios{ height:56vh; min-height:380px; border-radius:14px; }
}

@media (max-width:576px){
  .torneios-section{ scroll-margin-top:80px; padding:0 14px 72px; }
  .torneios-section h2{ font-size:20px; margin-bottom:16px; }
  .torneios-section h2 span{ border-left-width:3px; padding-left:8px; }

  #map-torneios{
    width:100%;
    height:58vh; min-height:320px; border-radius:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
  }

  .leaflet-container .popup-torneio .leaflet-popup-content-wrapper{
    width:84vw; max-height:72vh;
  }

  .popup-multi{ max-height:52vh; }
  .list-group-item{ padding:.45rem .6rem; }
  .badge-medal{ font-size:.85rem; }
  body{ overflow-x:hidden; }
  .popup-close{ top:4px; right:4px; width:26px; height:26px; line-height:26px; font-size:16px; }

  /* ajustes mobile */
  :root{ --card-pad:12px; }
  .card-body-stack.is-tall{ padding-bottom:calc(var(--card-pad) + 28px); min-height:clamp(72px,9vh,110px); }

  /* Badges um pouco mais contidas no mobile */
  :root{
    --badge-font:.95rem;
    --badge-pad-y:.34rem;
    --badge-pad-x:.62rem;
    --badge-gap:.4rem;
  }
  .list-group-item .d-flex.gap-1{ gap:.4rem; }
  .list-group-item .badge{ font-size:.9rem; padding:.3rem .54rem; }
}