/* BR Times — World map (homepage) (portado 1:1 do bundle BR Times Design System) */

/* ── Contêiner principal ──────────────────────────────────────── */
.brt-worldmap {
  position: relative; /* âncora para tooltip desktop e controles mobile */
  margin-top: 24px;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-sizing: border-box;
}

/* ── SVG ──────────────────────────────────────────────────────── */
.brt-worldmap__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  color: var(--fg);
}

/* ── Pontos coloridos por país ────────────────────────────────── */
/* fill é inline (por país); apenas opacidade aqui */
.brt-worldmap__dots circle {
  opacity: 0.82;
}
/* Modo escuro: escurece + dessatura a camada inteira */
html.dark .brt-worldmap__dots {
  filter: brightness(0.62) saturate(0.8);
}

/* ── Pins secundários ─────────────────────────────────────────── */
.brt-worldmap__pin-sec {
  cursor: pointer;
  outline: none;
}
.brt-worldmap__pin-sec-dot {
  fill: var(--fg);
  opacity: 0.55;
  transition: r 0.15s ease, opacity 0.15s ease;
}
.brt-worldmap__pin-sec-dot.is-hover,
.brt-worldmap__pin-sec:focus-visible .brt-worldmap__pin-sec-dot {
  opacity: 1;
  r: 4;
}

/* ── Pins primários ───────────────────────────────────────────── */
.brt-worldmap__pin {
  cursor: pointer;
  outline: none;
}
.brt-worldmap__pin-halo {
  fill: var(--fg);
  opacity: 0;
  transition: opacity 0.15s ease, r 0.2s ease;
}
.brt-worldmap__pin-dot {
  fill: var(--fg);
  transition: r 0.15s ease, fill 0.15s ease;
}
.brt-worldmap__pin.is-hover .brt-worldmap__pin-halo,
.brt-worldmap__pin:focus-visible .brt-worldmap__pin-halo {
  opacity: 0.18;
}
.brt-worldmap__pin:focus-visible .brt-worldmap__pin-halo {
  opacity: 0.28;
}
.brt-worldmap__pin.is-hover .brt-worldmap__pin-dot,
.brt-worldmap__pin:focus-visible .brt-worldmap__pin-dot {
  fill: var(--accent);
}

/* ── Tooltip SVG simples (mobile) ────────────────────────────── */
/* Usado apenas internamente quando há hover em mobile */
.brt-worldmap__tip-bg {
  fill: var(--fg);
}
.brt-worldmap__tip-text {
  fill: var(--bg);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.01em;
}

/* ── Tooltip HTML rico (desktop) — nome do país + "Ver notícias" */
.brt-worldmap__rtip {
  position: absolute;
  width: 252px;
  padding: 12px 14px 10px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.18),
              0 4px 12px -4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 5;
  /* Âncora padrão: acima do pin (a base do card toca a ponta do pin) */
  transform: translateY(calc(-100% - 18px));
  animation: brt-rtip-in 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
.brt-worldmap__rtip.is-below {
  /* Vira abaixo quando não há espaço acima */
  transform: translateY(18px);
}
@keyframes brt-rtip-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Seta — triângulo diagonal (borda+fundo) alinhado ao pin */
.brt-worldmap__rtip::after {
  content: "";
  position: absolute;
  left: var(--rtip-arrow-x, 50%);
  width: 10px;
  height: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.brt-worldmap__rtip:not(.is-below)::after {
  bottom: -6px;
  border-top: 0;
  border-left: 0;
}
.brt-worldmap__rtip.is-below::after {
  top: -6px;
  border-bottom: 0;
  border-right: 0;
}

/* Cabeçalho do tooltip */
.brt-worldmap__rtip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.brt-worldmap__rtip-country {
  font: 700 14px/1.2 var(--font-sans);
  color: var(--fg);
  letter-spacing: -0.005em;
}
.brt-worldmap__rtip-label {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Lista das últimas notícias do país (até 3) */
.brt-worldmap__rtip-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brt-worldmap__rtip-list li {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.brt-worldmap__rtip-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.brt-worldmap__rtip-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.brt-worldmap__rtip-eyebrow {
  font: 700 9px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.brt-worldmap__rtip-date {
  font: 500 10px/1 var(--font-sans);
  color: var(--fg-muted);
  white-space: nowrap;
}
.brt-worldmap__rtip-title {
  font: 600 12px/1.3 var(--font-sans);
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Labels de país (sempre visíveis sob cada pin) ────────────── */
.brt-worldmap__label {
  fill: var(--fg);
  opacity: 0.78;
  font: 600 7.5px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  /* Halo sólido que fura o padrão de pontos */
  paint-order: stroke fill;
  stroke: var(--bg);
  stroke-width: 6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
html.dark .brt-worldmap__label {
  opacity: 0.85;
  stroke-width: 7px;
}

/* ── Mobile: pan + zoom ───────────────────────────────────────── */
.brt-worldmap--mobile {
  position: relative;
}
.brt-worldmap--mobile .brt-worldmap__svg {
  /*
   * touch-action: none desabilita scroll nativo do browser enquanto o dedo
   * está sobre o mapa. O usuário pode rolar a página fora do mapa; dentro do
   * mapa o pan é capturado pelo JS via Pointer Events.
   * Trade-off: mantido igual ao JSX original.
   */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.brt-worldmap--mobile .brt-worldmap__svg:active {
  cursor: grabbing;
}

/* ── Controles mobile (+/−/centralizar) ──────────────────────── */
.brt-worldmap__controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.brt-worldmap__ctrl {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.brt-worldmap__ctrl:hover  { background: var(--surface); }
.brt-worldmap__ctrl:active { background: var(--border); }