/**
 * Widget Portfolio Grid.
 *
 * Carrega sempre depois do brz-image-portfolio.css, que o manifesto
 * declara como estilo reusado. É de lá que vem tudo o que desenha um item:
 * a caixa, os sete layouts, a legenda e o cursor. A grade em si também
 * nasceu lá — colunas, gap, spans — porque aquela folha foi escrita para
 * valer com um item ou com muitos.
 *
 * Aqui fica só o que é da grade e não cabia no widget de imagem sozinha:
 * os espaçamentos que cada layout usa no tema de origem. São defaults em
 * custom property, então o controle de gap sobrescreve qualquer um.
 */

/* O tema aperta ou afrouxa a grade conforme o layout: o de cartões 3D
   respira mais que o de molduras, que é praticamente colado. Os valores
   saem das folhas de origem de cada wrapper. */

.brz-portfolio--layout-1 {
	--brz-portfolio-gap: 40px;
}

.brz-portfolio--layout-2 {
	--brz-portfolio-gap: 24px;
}

.brz-portfolio--layout-3 {
	--brz-portfolio-gap: 8px;
}

.brz-portfolio--layout-4,
.brz-portfolio--layout-5 {
	--brz-portfolio-gap: 30px;
}

.brz-portfolio--layout-6 {
	--brz-portfolio-gap: 20px;
}

.brz-portfolio--layout-7 {
	--brz-portfolio-gap: 48px;
}

/* A folga vertical do layout 1 é maior que a horizontal no tema, e é o que
   dá o ritmo de portfólio editorial em vez de mosaico. Fica na regra da
   grade, não na custom property, para o controle de gap continuar mandando
   nos dois eixos quando o cliente o usa. */

.brz-portfolio--layout-1 .brz-portfolio__grid {
	row-gap: calc( var( --brz-portfolio-gap ) * 1.5 );
}

@media ( max-width: 1199px ) {

	.brz-portfolio--layout-1 {
		--brz-portfolio-gap: 30px;
	}
}

/* Barra de filtro.
 *
 * Só a grade tem — o widget de imagem sozinha não tem o que filtrar. As
 * variáveis nascem aqui na raiz do widget, como manda o resto do plugin, e
 * cada uma tem controle no painel que a sobrescreve.
 *
 * Os defaults de cor são propositalmente neutros: 'inherit' para o texto e um
 * cinza translúcido para o fundo da aba ativa. Nada de cor do tema nem de
 * var( --e-global-color-* ) — o vínculo com as Global Colors sai dos controles
 * de cor, e um default opinativo quebraria a barra em metade dos temas. */

.brz-portfolio {
	--brz-portfolio-filter-justify: flex-start;
	--brz-portfolio-filter-gap: 0.5rem;
	--brz-portfolio-filter-spacing: 2rem;

	--brz-portfolio-filter-padding: 0.5rem 1.125rem;
	--brz-portfolio-filter-radius: 999px;

	--brz-portfolio-filter-color: inherit;
	--brz-portfolio-filter-background: transparent;

	/* O hover cai no idle enquanto o cliente não escolher cor: sem isso, abrir
	   a aba Hover no painel e não preencher nada apagaria o texto no ponteiro,
	   porque a var vazia resolveria para nada. */
	--brz-portfolio-filter-color-hover: var( --brz-portfolio-filter-color );
	--brz-portfolio-filter-background-hover: var( --brz-portfolio-filter-background );

	--brz-portfolio-filter-color-active: inherit;
	--brz-portfolio-filter-background-active: rgba( 127, 127, 127, 0.18 );
}

.brz-portfolio__filter {
	margin-bottom: var( --brz-portfolio-filter-spacing );
}

/* O filtro esconde item pelo atributo hidden, e quem o desenha como
   display:none é a folha do navegador — a de menor prioridade que existe.
   Qualquer regra de autor com display no item, do tema ou daqui, venceria, e
   o sintoma seria o filtro clicando sem esconder nada. Declarar explicitamente
   custa uma regra e fecha o caso. */

.brz-portfolio__item[hidden] {
	display: none;
}

.brz-portfolio__filter-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --brz-portfolio-filter-gap );
	justify-content: var( --brz-portfolio-filter-justify );
	list-style: none;
	margin: 0;
	padding: 0;
}

/* appearance e font zerados porque metade das abas é <button>: sem isso o
   navegador desenha o botão com a fonte dele, e as abas sairiam de famílias
   diferentes conforme o termo tenha arquivo ou não. */

.brz-portfolio__filter-link {
	-webkit-appearance: none;
	appearance: none;
	background-color: var( --brz-portfolio-filter-background );
	border: 0;
	border-radius: var( --brz-portfolio-filter-radius );
	color: var( --brz-portfolio-filter-color );
	cursor: pointer;
	display: inline-block;
	font: inherit;
	letter-spacing: inherit;
	padding: var( --brz-portfolio-filter-padding );
	text-align: center;
	text-decoration: none;
	transition:
		background-color var( --brz-portfolio-duration ) var( --brz-portfolio-ease ),
		color var( --brz-portfolio-duration ) var( --brz-portfolio-ease ),
		opacity var( --brz-portfolio-duration ) var( --brz-portfolio-ease );
}

/* A aba inativa recua, mas não some: 0.6 ainda passa em contraste sobre os
   fundos em que o texto do tema já passa. */

.brz-portfolio__filter-link:not( .is-brz-active ) {
	opacity: 0.6;
}

/* O hover é só das abas inativas. A ativa não reage ao ponteiro de propósito:
   ela já é o estado em que a grade está, e acender ao passar o mouse
   prometeria que clicar faria alguma coisa.

   Foco e hover andam juntos porque são a mesma pergunta feita por
   dispositivos diferentes — onde o ponteiro ou o teclado está agora. O
   outline do foco vem à parte, na regra seguinte, e vale também na aba ativa:
   quem navega por teclado precisa enxergar onde está mesmo ali. */

.brz-portfolio__filter-link:not( .is-brz-active ):focus-visible,
.brz-portfolio__filter-link:not( .is-brz-active ):hover {
	background-color: var( --brz-portfolio-filter-background-hover );
	color: var( --brz-portfolio-filter-color-hover );
	opacity: 1;
}

.brz-portfolio__filter-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.brz-portfolio__filter-link.is-brz-active {
	background-color: var( --brz-portfolio-filter-background-active );
	color: var( --brz-portfolio-filter-color-active );
	opacity: 1;
}

/* O estado fica fora da tela e dentro da árvore de acessibilidade: ele existe
   para o leitor de tela anunciar o que mudou, e não para ser lido. */

.brz-portfolio__filter-status {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media ( prefers-reduced-motion: reduce ) {

	.brz-portfolio__filter-link {
		transition: none;
	}
}