/* Hub de Material — só o que é desta página. Os tokens, o fundo, os chips,
   o selo e o botão de tema vêm todos do styles.css, que carrega antes. */

.pagina--hub { max-width: 560px; }


/* ---------- título e subtítulo ---------- */

.hub__titulo {
  margin: 0 0 10px;
  color: var(--shiro);
  font-family: var(--titulo);
  font-size: clamp(1.75rem, 7vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.hub__titulo em { color: var(--akai); font-style: normal; }

.hub__subtitulo {
  margin: 0 0 22px;
  color: var(--haiiro);
  font-size: .94rem;
}

.hub__subtitulo strong { color: var(--ink-soft); font-weight: 500; }

/* ---------- busca ---------- */

.busca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--kuro);
  transition: border-color .2s var(--ease);
}

.busca:focus-within { border-color: var(--akai); }

.busca svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--haiiro);
  stroke-width: 2;
  stroke-linecap: round;
}

.busca input {
  width: 100%;
  padding: 13px 0;
  border: 0;
  background: none;
  color: var(--shiro);
  font: inherit;
  font-size: .92rem;
  outline: none;
}

.busca input::placeholder { color: var(--haiiro); }
.busca input::-webkit-search-cancel-button { filter: invert(.6); }

/* ---------- contador ---------- */

.contador {
  margin: 14px 0 12px;
  color: var(--haiiro);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contador b { color: var(--shiro); font-weight: 500; }

/* ---------- filtros ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 26px;
}

.filtro {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--kuro);
  color: var(--haiiro);
  font-family: var(--mono);
  font-size: .74rem;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease);
}

.filtro:hover { border-color: var(--border-2); color: var(--shiro); }

.filtro[aria-pressed="true"] {
  border-color: transparent;
  background: var(--akai);
  color: var(--sumi);
  font-weight: 500;
}

/* ---------- vitrine do topo: "Mais vistos" ou "Comece por aqui" ----------
   Mesma caixa nos dois casos. Com número de visualização ela fica mais
   alta, porque ganha a coluna da direita; sem número, vira uma lista
   enxuta com seta. */

.vitrine {
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--kuro-2);
}

.vitrine__rotulo {
  margin: 0 0 10px;
  color: var(--akai);
  font-family: var(--titulo);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.vitrine__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: .9rem;
  transition: color .2s var(--ease);
}

.vitrine__item:hover { color: var(--shiro); }
.vitrine__item:hover .vitrine__seta { transform: translateX(3px); }

.vitrine__pos {
  flex: none;
  width: 16px;
  color: var(--akai);
  font-family: var(--titulo);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.vitrine__titulo {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Com visualizações o título ganha duas linhas em vez de reticências —
   o número já ocupa a direita, e cortar o título ali empobrece demais. */
.vitrine--vistos .vitrine__titulo {
  overflow: visible;
  white-space: normal;
  line-height: 1.3;
}

.vitrine__views {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.vitrine__views b {
  color: var(--shiro);
  font-family: var(--titulo);
  font-size: 1.25rem;
  font-weight: 700;
}

.vitrine__views small {
  color: var(--haiiro);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .04em;
}

.vitrine__seta {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--haiiro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s var(--ease);
}

/* contagem discreta no card da lista */
.item__views {
  margin-left: auto;
  color: var(--haiiro);
  font-family: var(--mono);
  font-size: .68rem;
  white-space: nowrap;
}

/* ---------- lista de materiais ---------- */

.lista-hub {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--kuro);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.item:hover { border-color: var(--border-2); transform: translateY(-1px); }
.item:hover .item__seta { stroke: var(--akai); transform: translateX(3px); }

.item__texto { flex: 1; min-width: 0; }

.item__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.item__data {
  color: var(--haiiro);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
}

.item__titulo {
  margin: 0 0 5px;
  color: var(--shiro);
  font-family: var(--titulo);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}

.item__resumo {
  margin: 0 0 10px;
  color: var(--haiiro);
  font-size: .88rem;
  line-height: 1.45;
}

.item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* As palavras-chave são o que o visitante varre antes de ler o resumo —
   então vão na cor de destaque, não em cinza. Azul e não amarelo: o amarelo
   já carrega significado na página de bio ("Em breve"), e repetir a mesma
   cor com outro sentido ensina errado. */
.item__tag {
  color: var(--akai);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
}

.item__seta {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--haiiro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s var(--ease), stroke .2s var(--ease);
}

/* ---------- estados vazios ---------- */

.aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  text-align: center;
}

.aviso__texto { margin: 0; color: var(--haiiro); font-size: .92rem; }

/* Mesmo contorno escuro dos outros botões do site. */
.aviso__acao {
  padding: 9px 20px;
  border: 1px solid rgba(225, 233, 244, .17);
  border-radius: 999px;
  background: rgba(3, 5, 7, .32);
  color: var(--ink-soft);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .18s var(--press), border-color .18s var(--press),
              color .18s var(--press), transform .18s var(--press);
}

.aviso__acao:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(225, 233, 244, .36);
  color: var(--shiro);
}

.aviso__acao:active { transform: scale(.98); transition-duration: 70ms; }

:root[data-tema="claro"] .aviso__acao {
  background: rgba(16, 24, 34, .035);
  border-color: #C9D6E3;
  color: #44525F;
  box-shadow: none;
}

:root[data-tema="claro"] .aviso__acao:hover {
  background: rgba(16, 24, 34, .06);
  border-color: #9FB2C4;
  color: #101822;
}

.vazio {
  margin: 0;
  padding: 36px 20px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  color: var(--haiiro);
  text-align: center;
}

/* Produtos e serviços, ainda fechados. A aparência do bloco é compartilhada
   com a página de bio e mora no styles.css; aqui fica só o que separa a
   seção da lista de materiais, que é coisa desta página. */

.secao--bloqueada {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.secao__nota {
  margin: -4px 0 16px;
  color: var(--haiiro);
  font-size: .86rem;
}

.rodape { margin-top: 34px; }