/* 93-dash-nav.css — navegação premium entre seções do dashboard */
/* ── O DECK DE CARDS ───────────────────────────────────────────────────
   Esta barra já foi uma fita de âncoras de ~30px. Com o dashboard em
   sanfona — uma seção aberta por vez — ela passou a ser a ÚNICA porta
   para três quartos do conteúdo, e uma fita fina não é lida como porta:
   o usuário não clica no que não parece clicável, e conclui que o
   dashboard encolheu. Um card alto, com o indicador-chave da seção e
   arte de fundo na cor dela, diz "eu sou o conteúdo" sem legenda.
   Ver o comentário de `d4SelectSec` em js/48-dashboards.js. */
/* A caixa da nav (sticky, fundo sangrado, condensação ao rolar) é de
   94-dash-territorio.css e continua valendo — só o CONTEÚDO dela virou
   deck. É isso que resolve a objeção óbvia a cards altos grudados no
   topo: em repouso eles têm 116px e convidam ao clique; assim que a
   leitura começa, `.d4-scrolled` os condensa numa faixa (regras no fim
   deste arquivo). Card alto para escolher, faixa fina para voltar. */

#dash4-overlay .d3-nav-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

#dash4-overlay .d3-nav-lbl {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

#dash4-overlay .d3-nav-btns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* A CÉLULA embrulha o card e o crédito. O botão deixou de ser o item da
   grade: se o crédito ficasse dentro dele, seria alvo de clique, e um
   crédito que abre a seção ao ser tocado impede exatamente o que ele
   existe para permitir — chegar à página do autor. */
#dash4-overlay .d3-nav-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#dash4-overlay .d3-nav-cell .d3-nav-btn { flex: 1 1 auto; }

/* CRÉDITO DA FOTO — obrigação de licença, não enfeite.
   Duas das quatro imagens são CC BY-SA e as outras duas CC BY: todas
   exigem atribuição, e as duas primeiras exigem também que o recorte seja
   oferecido sob a mesma licença. Por isso a licença aparece junto do nome,
   e o nome leva à página de origem no Commons.
   Discreto, mas não escondido: 9px em cinza baixo cumpre o "sem competir
   com o card" sem cair no que a licença chamaria de crédito inacessível.
   `opacity` mais alta no hover para quem for de fato ler. */
#dash4-overlay .d3-nav-cred {
  margin-top: 5px;
  padding: 0 2px;
  font-family: var(--body);
  font-size: 9px;
  line-height: 1.35;
  color: var(--t3, rgba(255,255,255,.38));
  /* QUEBRA, e não corta. Reticências num crédito são o mesmo que crédito
     nenhum — "Felipe Valduga from Porto Ale…" não identifica ninguém, e a
     licença pede o nome do autor, não o começo dele. No telefone o card tem
     169px e esse nome pede duas linhas; deixá-lo quebrar custa ~11px e
     mantém a atribuição inteira. No desktop cabe numa linha e nada muda. */
  white-space: normal;
  overflow-wrap: anywhere;
  transition: color .18s ease;
}
#dash4-overlay .d3-nav-cred a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
#dash4-overlay .d3-nav-cred:hover { color: rgba(255,255,255,.72); }
#dash4-overlay .d3-nav-cred:hover a { border-bottom-color: rgba(255,255,255,.4); }

#dash4-overlay .d3-nav-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  /* ALTURA EM VH, e o motivo é o papel do deck: ele é a TELA DE ENTRADA do
     dashboard, não um índice discreto acima do conteúdo. Ocupando ~metade da
     janela, os quatro cards empurram o resto para baixo da dobra — quem abre
     escolhe um assunto antes de ver número nenhum, que é o remédio para o
     excesso de informação simultânea.
     Os limites em px são para os extremos: em tela baixa, 46vh viraria um card
     espremido onde o título não cabe; em monitor grande, um pôster de 600px
     que empurra a leitura longe demais. */
  min-height: clamp(230px, 46vh, 430px);
  padding: 16px 16px 17px;
  border-radius: 15px;
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--display);
  transition: transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease,
              box-shadow .2s ease, color .2s ease;
}

/* ── ARTE DE FUNDO ─────────────────────────────────────────────────────
   Gerada em CSS, sem arquivo. É o padrão porque o projeto não tem pasta
   de mídia: um card que depende de um .jpg inexistente nasce quebrado, e
   o deploy já pesa 128 MB. O brilho sai de `--nav-c`, então os quatro
   cards se distinguem pela cor da própria seção, e a malha diagonal dá a
   textura. Trocar por foto/vídeo é acrescentar `midia:` no item da nav
   (js/48-dashboards.js) — a camada `.d3-nav-mid` entra por cima desta. */
#dash4-overlay .d3-nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 100% at 100% 0%,
      color-mix(in srgb, var(--nav-c, #38bdf8) 42%, transparent) 0%,
      transparent 62%),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  opacity: .55;
  transition: opacity .25s ease;
}
/* Com foto, a arte de fundo sai: eram duas camadas disputando o mesmo espaço,
   e o gradiente dela somava mais escurecimento sobre a imagem. */
#dash4-overlay .d3-nav-btn:has(.d3-nav-mid)::before { opacity: 0; }

/* Foto ou vídeo, quando o item da nav trouxer `midia`. Cobre o card
   inteiro e fica ATRÁS do texto; o véu de `::after` é o que mantém o
   título legível sobre qualquer imagem. */
#dash4-overlay .d3-nav-mid {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 0.34 + véu de card inteiro escurecia DUAS vezes, e o resultado era foto
     que não se via. A legibilidade do título não precisa vir da opacidade da
     imagem: ela vem do véu, que agora se concentra no terço de baixo (ver
     `::after`). Em cima, onde não há texto, a foto aparece. */
  opacity: .62;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
/* MARCA D'ÁGUA — o mesmo ícone do rodapé, grande e apagado, sangrando no
   canto. Existe porque o card tem 430px de altura e o conteúdo ocupa os 100
   de baixo: sem nada no meio, dois terços do card ficam em branco e o
   conjunto lê como inacabado, não como espaço de respiro.
   É a solução PROVISÓRIA: assim que um item da nav ganhar `midia`, a foto
   assume esse papel e esta marca sai (regra logo abaixo). */
#dash4-overlay .d3-nav-marca {
  position: absolute;
  z-index: -1;
  right: -14%;
  top: 6%;
  width: 62%;
  max-width: 210px;
  color: var(--nav-c, #fff);
  opacity: .10;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
#dash4-overlay .d3-nav-marca svg { width: 100%; height: auto; stroke-width: 1.1; }
#dash4-overlay .d3-nav-btn:hover .d3-nav-marca { opacity: .16; transform: scale(1.05); }
#dash4-overlay .d3-nav-btn.on .d3-nav-marca { opacity: .18; }
/* Com foto ou vídeo no card, a marca sai de cena: as duas juntas viram ruído. */
#dash4-overlay .d3-nav-btn:has(.d3-nav-mid) .d3-nav-marca { display: none; }
/* Condensado não tem altura para ela. */
#dash4-overlay.d4-scrolled .d3-nav-marca { display: none; }

#dash4-overlay .d3-nav-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* O VÉU SEGUE O TEXTO, não o card. Antes ele cobria de baixo a cima com
     18% de escurecimento até no topo — somado à opacidade da imagem, a foto
     virava uma mancha. Agora é opaco onde o título e o selo estão, e some por
     completo acima da metade: é lá que a imagem tem de ser vista. */
  background:
    /* Faixa no TOPO, onde fica o número da seção. Ela nasceu de uma medição:
       com a foto clareada, o "02" sobre o mural media 1,1:1 de contraste, o
       "03" 1,4:1 e o "04" 1,8:1 — o mínimo legível é 4,5:1. Só o card 01
       escapava, e por acaso: a foto dele é escura justo ali.
       Escurecer o topo resolve os quatro sem depender do que a imagem tem em
       cada um, que é o que uma sombra de texto faria pela metade. */
    linear-gradient(to bottom,
      rgba(6, 11, 20, .95) 0%, rgba(6, 11, 20, .82) 7%,
      rgba(6, 11, 20, .38) 14%, rgba(6, 11, 20, 0) 23%),
    /* E a faixa de baixo, do título e do selo. */
    linear-gradient(to top,
      rgba(6, 11, 20, .94) 0%, rgba(6, 11, 20, .74) 24%,
      rgba(6, 11, 20, .28) 52%, rgba(6, 11, 20, 0) 76%);
}

#dash4-overlay .d3-nav-btn:hover {
  color: #ffffff;
  border-color: var(--nav-c, rgba(255, 255, 255, 0.35));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
#dash4-overlay .d3-nav-btn:hover::before { opacity: .8; }
#dash4-overlay .d3-nav-btn:hover .d3-nav-mid { opacity: .82; transform: scale(1.04); }

#dash4-overlay .d3-nav-btn.on {
  color: #ffffff;
  border-color: var(--nav-c, #38bdf8);
  box-shadow: 0 0 0 1px var(--nav-c, #38bdf8),
              0 12px 30px color-mix(in srgb, var(--nav-c, #38bdf8) 30%, transparent);
}
#dash4-overlay .d3-nav-btn.on::before { opacity: 1; }
#dash4-overlay .d3-nav-btn.on .d3-nav-mid { opacity: .88; }

/* A faixa da cor da seção no topo do card selecionado — o mesmo sinal que
   o cabeçalho da seção aberta usa, para amarrar deck e conteúdo. */
#dash4-overlay .d3-nav-btn.on .d3-nn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--nav-c, #38bdf8);
}

#dash4-overlay .d3-nav-btn .d3-nn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--nav-c, var(--muted));
  letter-spacing: .08em;
  margin-bottom: auto;
}

#dash4-overlay .d3-nav-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  margin-bottom: 4px;
  color: var(--nav-c, #fff);
  background: color-mix(in srgb, var(--nav-c, #38bdf8) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-c, #38bdf8) 34%, transparent);
  line-height: 1;
}
/* O markup traz <svg width="13">; o atributo perde para o CSS. Escalar aqui
   evita mexer nos quatro itens do JS e mantém a escala junto do resto do
   card — condensado, a regra de 94-dash-territorio.css encolhe a caixa e o
   ícone acompanha. */
#dash4-overlay .d3-nav-ic svg { width: 21px; height: 21px; }
#dash4-overlay.d4-scrolled .d3-nav-ic svg { width: 13px; height: 13px; }

#dash4-overlay .d3-nav-tit {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  white-space: normal;
}

/* Cada botao carrega os DOIS rotulos — o longo e o curto — e a folha
   escolhe qual aparece. Fica no CSS, e nao num `if` de largura no JS,
   porque o dashboard e remontado a cada troca de recorte: um `if` de
   largura teria de ser reavaliado a cada giro de tela. */
#dash4-overlay .d3-nav-curto {
  display: none;
}

#dash4-overlay .d3-nav-badge {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  color: var(--nav-c, var(--text));
  border: 1px solid color-mix(in srgb, var(--nav-c, #38bdf8) 40%, transparent);
}

/* Quem prefere menos movimento não recebe o zoom da mídia nem o salto. */
@media (prefers-reduced-motion: reduce) {
  .d3-nav-btn, .d3-nav-mid { transition: none; }
  #dash4-overlay .d3-nav-btn:hover { transform: none; }
  #dash4-overlay .d3-nav-btn:hover .d3-nav-mid { transform: none; }
}

/* ── A SANFONA ─────────────────────────────────────────────────────────
   Uma seção aberta por vez, em QUALQUER largura. A fechada sai inteira,
   cabeçalho incluído: com o deck de cards fazendo de índice, deixar
   quatro cabeçalhos órfãos empilhados seria um segundo índice, pior que
   o primeiro. No telefone css/99a-responsivo.css ainda tem regras para
   esta mesma sanfona — são anteriores e continuam válidas; o que mudou é
   que ela deixou de ser exclusiva do telefone. */
#dash4-overlay .d3-sec:not(.d4-aberta) {
  display: none;
}
#dash4-overlay .d2-sec-head {
  cursor: pointer;
}

.d3-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.d3-sec {
  scroll-margin-top: 80px;
}

.d3-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all 0.18s ease;
}

.d3-top:hover {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

@media(max-width: 860px) {
  .d3-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .d3-nav-btns {
    justify-content: center;
  }
  .d3-nav-right {
    justify-content: center;
  }
}