/* ===================================================================
   O feed da Home do corretor.

   Nasceu do <style> inline de docs/mockups/home-feed.html, que sempre
   disse que viraria este arquivo (docs/ESPECIFICACAO-FEED-DA-HOME.md,
   secao 8).

   O que NAO mora aqui: nada do card. O cartao (`.feed-post`), o
   esqueleto, a esteira apagada durante a troca de filtro e as quatro
   acoes (`.feed-acao` e companhia) estao todos em css/feed.css, porque
   a aba Publicacoes dos tres perfis desenha os mesmos cards
   (js/feed-nucleo.js). Duplicar aqui seria ter dois lugares para mudar
   a mesma coisa, e um deles ficaria para tras.

   O que sobra e o que so a Home tem: os chips do filtro e as duas
   colunas da tela. Este arquivo e carregado so pela Home.
   =================================================================== */

/* Chips do filtro do feed. */
.feed-chip {
  flex-shrink: 0;
  padding: .375rem 1rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--color-outline-variant));
  background: rgb(var(--color-surface-container-lowest));
  color: rgb(var(--color-on-surface-variant));
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.feed-chip:hover {
  border-color: rgb(var(--color-secondary));
  color: rgb(var(--color-secondary));
}

.feed-chip:focus-visible {
  outline: 2px solid rgb(var(--color-secondary));
  outline-offset: 2px;
}

.feed-chip-ativo {
  background: rgb(var(--color-secondary));
  border-color: rgb(var(--color-secondary));
  color: #fff;
}

/* O chip ativo ja esta pintado de secondary; o hover nao pode
   despinta-lo de volta para a cor de texto. */
.feed-chip-ativo:hover {
  color: #fff;
}

/* A coluna rola por dentro quando passa da altura da tela. Sem o
   flex-shrink: 0 o flex-col espreme os cards para caber e corta o
   conteudo deles pela metade. */
.central-coluna > * { flex-shrink: 0; }

/* Modulo da Central Inteligente na coluna lateral: o mesmo conteudo de
   hoje, so que empilhado em lista no lugar do carrossel horizontal. */
.central-lateral {
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 1rem;
  overflow: hidden;
}

/* As fotos do post nao estao aqui: elas sao um carrossel proprio, em
   css/galeria-post.css, porque a mesma galeria aparece no feed e na aba
   Publicacoes dos tres perfis. */