/**
 * Widget Image Portfolio.
 *
 * Só carrega nas páginas que usam o widget, via get_style_depends().
 * Nada aqui assume grid, container ou variável do tema — tudo é escopado
 * em .brz-portfolio, e toda custom property nasce na raiz do próprio
 * widget, não num wrapper externo.
 *
 * O arquivo tem duas metades. A primeira é a base: a caixa, os efeitos, o
 * botão e o texto de baixo — tudo escrito para valer com um item ou com
 * muitos, e é ela que o Portfolio Grid reusa por dependência declarada no
 * manifesto. A segunda são os presets dos sete layouts.
 *
 * Quase tudo é CSS puro: sem script, a imagem nasce inteira e visível. O
 * JS entra só no cursor e na inclinação, que CSS não alcança.
 */

.brz-portfolio {
	--brz-portfolio-columns: 3;
	--brz-portfolio-gap: 1rem;
	--brz-portfolio-ratio: 4 / 3;
	--brz-portfolio-radius: 0.5rem;

	--brz-portfolio-origin: center;
	--brz-portfolio-duration: 0.6s;
	--brz-portfolio-ease: cubic-bezier( 0.22, 1, 0.36, 1 );

	--brz-portfolio-overlay: rgba( 0, 0, 0, 0.55 );

	--brz-portfolio-tilt-ease: cubic-bezier( 0.22, 1, 0.36, 1 );

	--brz-portfolio-rest: 0.9;
	--brz-portfolio-rest-image: 1.3;
	--brz-portfolio-scroll-duration: 1s;

	--brz-portfolio-frame-color: #fff;
	--brz-portfolio-frame-size: 30px;

	--brz-portfolio-cursor-size: 6rem;
	--brz-portfolio-cursor-radius: 50%;
	--brz-portfolio-cursor-bg: #111;
	--brz-portfolio-cursor-color: #fff;

	--brz-portfolio-info-gap: 0.35rem;
	--brz-portfolio-info-space: 1.25rem;
	--brz-portfolio-info-align: start;
	--brz-portfolio-label-color: #fff;

	display: block;
	position: relative;
	width: 100%;
}

/* Grid
   ---- */

.brz-portfolio__grid {
	display: grid;
	gap: var( --brz-portfolio-gap );
	grid-template-columns: repeat( var( --brz-portfolio-columns ), minmax( 0, 1fr ) );

	/* O piso existe para o caso degenerado de uma linha só com itens
	   tall: eles têm aspect-ratio auto e não dariam altura nenhuma à
	   linha. Com pelo menos um item normal, quem manda é o aspect-ratio
	   dele. */
	grid-auto-rows: minmax( 4rem, auto );

	list-style: none;
	margin: 0;
	padding: 0;
}

.brz-portfolio__item {
	aspect-ratio: var( --brz-portfolio-ratio );
	min-height: 0;
	min-width: 0;
	position: relative;
}

.brz-portfolio__item--wide {
	aspect-ratio: auto;
	grid-column: span 2;
}

.brz-portfolio__item--tall {
	aspect-ratio: auto;
	grid-row: span 2;
}

/* Span de duas colunas num grid de uma coluna criaria uma coluna
   implícita e estouraria a largura. O breakpoint espelha o mobile padrão
   do Elementor, que é onde o controle de colunas nasce em 1. */
@media ( max-width: 767px ) {

	.brz-portfolio__item--wide,
	.brz-portfolio__item--tall {
		aspect-ratio: var( --brz-portfolio-ratio );
		grid-column: auto;
		grid-row: auto;
	}
}

/* Item
   ---- */

.brz-portfolio__link {
	border-radius: var( --brz-portfolio-radius );
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	width: 100%;
}

/* O a:hover do tema tem um elemento a mais que a classe e trocaria a cor
   de todo o texto herdado do link. */

.brz-portfolio__link:hover {
	color: inherit;
}

.brz-portfolio__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.brz-portfolio__frame {
	display: block;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.brz-portfolio__frame img {
	display: block;
	height: 100%;
	object-fit: cover;
	transform-origin: var( --brz-portfolio-origin );
	transition: transform var( --brz-portfolio-duration ) var( --brz-portfolio-ease );
	width: 100%;
}

/* Efeito: unzoom na rolagem
   ------------------------

   O retrato do layout 1/4/6 do tema: a moldura entra encolhida e a imagem
   dentro dela entra ampliada, e as duas convergem para a escala natural
   conforme o item aparece. Sai da tela, volta ao repouso — é por isso que
   o reveal deste item roda em modo repetido.

   Quem escreve is-brz-animated é o JS. Sem ele nada disto existe: o item
   nasce na escala natural, que é o estado sem nenhuma regra aplicada. */

.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated .brz-portfolio__frame {
	transform: scale( var( --brz-portfolio-rest ) );
	transform-origin: var( --brz-portfolio-origin );
	/* O atraso é o do controle "Animation Delay". */
	transition: transform var( --brz-portfolio-scroll-duration ) ease-out var( --brz-portfolio-pop-delay, 0s );
}

.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated .brz-portfolio__frame img {
	transform: scale( var( --brz-portfolio-rest-image ) );
	transform-origin: center;
	transition: transform var( --brz-portfolio-scroll-duration ) ease-out var( --brz-portfolio-pop-delay, 0s );
}

.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated.is-brz-visible .brz-portfolio__frame,
.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated.is-brz-visible .brz-portfolio__frame img {
	transform: scale( 1 );
}

/* A alternância de canto vem do tema: item par cresce do canto oposto, e a
   fileira deixa de pulsar em uníssono. */
.brz-portfolio--effect-unzoom.brz-portfolio--alternate .brz-portfolio__item:nth-child( 2n ).is-brz-animated .brz-portfolio__frame {
	transform-origin: var( --brz-portfolio-origin-alt, bottom left );
}

/* Efeito: pop na rolagem
   ---------------------

   O layout 2 do tema: o item entra menor, deslocado e transparente, com
   atrasos fora de ordem entre os vizinhos. O tema sorteia o atraso no JS;
   aqui ele sai de uma tabela por posição, que dá a mesma leitura de
   bagunça sem depender de script para calcular nada.

   O atraso de cada item vive em --brz-portfolio-pop-step, e não na
   --brz-portfolio-pop-delay: esta é a do controle "Animation Delay",
   escrita na raiz, e redefini-la no item fazia o valor do controle nunca
   chegar a ninguém. As duas se somam: o controle atrasa a fileira toda, e
   a tabela desencontra os vizinhos. */

.brz-portfolio--effect-pop .brz-portfolio__item.is-brz-animated {
	opacity: 0;
	transform: scale( 0.8 ) translate3d( 0, 50px, 0 );
	transition:
		opacity 0.8s ease-out calc( var( --brz-portfolio-pop-delay, 0s ) + var( --brz-portfolio-pop-step, 0s ) ),
		transform 0.8s ease-out calc( var( --brz-portfolio-pop-delay, 0s ) + var( --brz-portfolio-pop-step, 0s ) );
}

.brz-portfolio--effect-pop .brz-portfolio__item.is-brz-animated.is-brz-visible {
	opacity: 1;
	transform: scale( 1 ) translate3d( 0, 0, 0 );
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 1 ) {
	--brz-portfolio-pop-step: 0.2s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 2 ) {
	--brz-portfolio-pop-step: 0.6s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 3 ) {
	--brz-portfolio-pop-step: 0s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 4 ) {
	--brz-portfolio-pop-step: 0.8s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 5 ) {
	--brz-portfolio-pop-step: 0.4s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 6 ) {
	--brz-portfolio-pop-step: 1s;
}

.brz-portfolio--effect-pop .brz-portfolio__item:nth-child( 7n + 7 ) {
	--brz-portfolio-pop-step: 0.3s;
}

/* Efeito: moldura que fecha
   ------------------------

   O layout 3 do tema: quatro barras crescem das bordas para dentro no
   hover, fechando um quadro sobre a imagem. As verticais são os pseudo do
   frame; as horizontais, os do span de barras. */

.brz-portfolio--effect-frame .brz-portfolio__frame::before,
.brz-portfolio--effect-frame .brz-portfolio__frame::after,
.brz-portfolio--effect-frame .brz-portfolio__bars::before,
.brz-portfolio--effect-frame .brz-portfolio__bars::after {
	background-color: var( --brz-portfolio-frame-color );
	content: "";
	position: absolute;
	transition: height 0.5s ease, width 0.5s ease;
	z-index: 2;
}

.brz-portfolio--effect-frame .brz-portfolio__frame::before,
.brz-portfolio--effect-frame .brz-portfolio__frame::after {
	height: 101%;
	top: -1px;
	width: 0;
}

.brz-portfolio--effect-frame .brz-portfolio__frame::before {
	left: -1px;
}

.brz-portfolio--effect-frame .brz-portfolio__frame::after {
	right: -1px;
}

.brz-portfolio--effect-frame .brz-portfolio__bars {
	display: block;
}

.brz-portfolio--effect-frame .brz-portfolio__bars::before,
.brz-portfolio--effect-frame .brz-portfolio__bars::after {
	height: 0;
	left: -1px;
	width: 101%;
}

.brz-portfolio--effect-frame .brz-portfolio__bars::before {
	top: -1px;
}

.brz-portfolio--effect-frame .brz-portfolio__bars::after {
	bottom: -1px;
}

.brz-portfolio--effect-frame .brz-portfolio__frame:hover::before,
.brz-portfolio--effect-frame .brz-portfolio__frame:hover::after,
.brz-portfolio--effect-frame .brz-portfolio__link:focus-visible .brz-portfolio__frame::before,
.brz-portfolio--effect-frame .brz-portfolio__link:focus-visible .brz-portfolio__frame::after {
	width: var( --brz-portfolio-frame-size );
}

.brz-portfolio--effect-frame .brz-portfolio__frame:hover .brz-portfolio__bars::before,
.brz-portfolio--effect-frame .brz-portfolio__frame:hover .brz-portfolio__bars::after,
.brz-portfolio--effect-frame .brz-portfolio__link:focus-visible .brz-portfolio__bars::before,
.brz-portfolio--effect-frame .brz-portfolio__link:focus-visible .brz-portfolio__bars::after {
	height: var( --brz-portfolio-frame-size );
}

/* Efeito: inclinação 3D
   --------------------

   O ângulo é escrito pelo JS no transform do frame. Sem script o item fica
   na posição neutra, que é o estado natural do elemento — nada some. */

.brz-portfolio--effect-tilt .brz-portfolio__link {
	perspective: 900px;
}

.brz-portfolio--effect-tilt .brz-portfolio__frame {
	transform-style: preserve-3d;
	transition: transform 0.5s var( --brz-portfolio-tilt-ease );
	will-change: transform;
}

/* Enquanto o ponteiro está sobre o item o transform muda a cada quadro, e
   uma transição aí atrasaria o movimento em meio segundo. A classe é
   retirada na saída justamente para a transição voltar e devolver o item à
   posição neutra sem salto. */
.brz-portfolio--effect-tilt .brz-portfolio__frame.is-brz-tilting {
	transition: none;
}

/* Cursor com rótulo
   ----------------

   Só existe no modo 'own', e só o JS o revela: nasce invisível, e sem
   script continua invisível sem estorvar clique nenhum. A posição chega em
   custom property para o CSS seguir dono do transform inteiro. */

.brz-portfolio__cursor {
	align-items: center;
	background-color: var( --brz-portfolio-cursor-bg );
	border-radius: var( --brz-portfolio-cursor-radius );
	color: var( --brz-portfolio-cursor-color );
	display: flex;
	height: var( --brz-portfolio-cursor-size );
	justify-content: center;
	left: calc( var( --brz-portfolio-cursor-size ) / -2 );
	opacity: 0;
	padding: 0.5rem;
	pointer-events: none;
	position: absolute;
	text-align: center;
	top: calc( var( --brz-portfolio-cursor-size ) / -2 );
	transform:
		translate3d( var( --brz-portfolio-cursor-x, 0 ), var( --brz-portfolio-cursor-y, 0 ), 0 )
		scale( 0.4 );
	transition:
		opacity 0.25s ease,
		transform 0.18s ease-out;
	width: var( --brz-portfolio-cursor-size );
	z-index: 3;
}

.brz-portfolio.is-brz-cursor-active .brz-portfolio__cursor {
	opacity: 1;
	transform:
		translate3d( var( --brz-portfolio-cursor-x, 0 ), var( --brz-portfolio-cursor-y, 0 ), 0 )
		scale( 1 );
}

/* O ponteiro do sistema sai de cena só enquanto a pílula está no ar, e só
   sobre a foto — no título e na categoria ele continua sendo o ponteiro
   normal, que é o que se espera de um texto. Preso a uma classe que o JS
   adiciona: sem script o cursor normal nunca some. */
.brz-portfolio.is-brz-cursor-active .brz-portfolio__frame {
	cursor: none;
}

.brz-portfolio__cursor-text {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
}


/* Legenda
   ------- */

.brz-portfolio__caption {
	/* Coluna com um filho só: é o que impede o rótulo de esticar até a
	   largura da imagem. O alinhamento não sai de custom property porque
	   nenhum controle o alimenta — quando houver um, ele volta. */
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	/* A legenda fica por cima da foto. Sem isto ela receberia o ponteiro no
	   lugar da moldura, o hover da moldura cairia, e o botão piscaria a cada
	   movimento. Ela é decoração: o clique é do link, que está por baixo. */
	pointer-events: none;
	text-align: start;
}

.brz-portfolio__label {
	color: var( --brz-portfolio-label-color );
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Texto abaixo da imagem
   ---------------------

   É o bloco .content do tema: título e categoria fora da foto, lidos sem
   depender de hover. Fica dentro do link, então clicar no título abre o
   projeto — e é ele que dá nome ao link quando o botão está desligado. */

.brz-portfolio__info {
	display: flex;
	flex-direction: column;
	gap: var( --brz-portfolio-info-gap );
	padding-block-start: var( --brz-portfolio-info-space );
	text-align: var( --brz-portfolio-info-align );
}

.brz-portfolio__title {
	color: var( --brz-portfolio-info-title-color, inherit );
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.25;
}

.brz-portfolio__meta {
	color: var( --brz-portfolio-info-meta-color, rgba( 0, 0, 0, 0.6 ) );
	color: var( --brz-portfolio-info-meta-color, color-mix( in srgb, currentColor 65%, transparent ) );
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Com texto embaixo, a proporção passa da caixa para a moldura: se ficasse
   na caixa, o título comeria a altura da imagem em vez de somar-se a ela.
   A classe é escrita pelo PHP só quando o bloco existe.

   O texto está fora do link, então a caixa é que empilha os dois — e o
   link volta a ser exatamente a imagem, com o recorte e o arredondamento
   que ele já tinha na base. */

.brz-portfolio--has-info .brz-portfolio__item {
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
}

.brz-portfolio--has-info .brz-portfolio__link {
	flex: none;
	height: auto;
}

.brz-portfolio--has-info .brz-portfolio__frame {
	aspect-ratio: var( --brz-portfolio-ratio );
	height: auto;
}

/* Item alto: a imagem estica pelas duas linhas e o texto fica embaixo. */

.brz-portfolio--has-info .brz-portfolio__item--tall .brz-portfolio__link {
	flex: 1;
	min-height: 0;
}

.brz-portfolio--has-info .brz-portfolio__item--tall .brz-portfolio__frame {
	aspect-ratio: auto;
	height: 100%;
}

/* Legenda sobre a imagem
   --------------------- */

.brz-portfolio--caption-hover .brz-portfolio__caption,
.brz-portfolio--caption-always .brz-portfolio__caption {
	background-image: linear-gradient( to top, var( --brz-portfolio-overlay ), transparent );
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 2;
}

.brz-portfolio--caption-hover .brz-portfolio__caption {
	opacity: 0;
	transform: translate3d( 0, 0.5rem, 0 );
	transition:
		opacity var( --brz-portfolio-duration ) var( --brz-portfolio-ease ),
		transform var( --brz-portfolio-duration ) var( --brz-portfolio-ease );
}

.brz-portfolio--caption-hover .brz-portfolio__frame:hover + .brz-portfolio__caption,
.brz-portfolio--caption-hover .brz-portfolio__link:focus-visible .brz-portfolio__caption {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

/* Sem hover não há como revelar a legenda, e o grid viraria um mosaico de
   imagens mudas. Em tela de toque ela nasce visível. */
@media ( hover: none ) {

	.brz-portfolio--caption-hover .brz-portfolio__caption {
		opacity: 1;
		transform: none;
	}
}

/* Legenda só para leitor de tela
   -----------------------------

   Usada quando o rótulo vai para o ponteiro: nada aparece sobre a imagem,
   e o texto continua no documento dando nome ao link. O recorte de 1px em
   vez de display:none é o que mantém o conteúdo anunciável — o que está
   escondido de verdade, leitor nenhum lê. */

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

/* Estado vazio, só no editor
   ------------------------- */

.brz-portfolio__empty {
	border: 1px dashed currentColor;
	border-radius: 0.5rem;
	margin: 0;
	opacity: 0.6;
	padding: 2rem;
	text-align: center;
}

/* Animação de entrada
   ------------------

   As classes is-brz-animated e is-brz-visible são adicionadas pelo
   brz-reveal.js, nunca pelo PHP: sem JS o conteúdo simplesmente nasce
   visível, e nenhuma falha de script consegue deixar o grid em branco. */

.brz-portfolio.is-brz-animated .brz-portfolio__reveal {
	opacity: 0;
	transform: translate3d( 0, 1rem, 0 );
}

.brz-portfolio.is-brz-animated.is-brz-visible .brz-portfolio__reveal {
	animation: brz-portfolio-reveal 0.5s var( --brz-portfolio-ease ) forwards;

	/* O índice vem inline do PHP e escalona a entrada item a item. O teto
	   impede que um grid longo deixe os últimos itens esperando meio
	   segundo depois de já estarem na tela. */
	animation-delay: min( calc( var( --brz-portfolio-index, 0 ) * 0.06s ), 0.6s );
}

@keyframes brz-portfolio-reveal {

	to {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

/* Movimento reduzido
   ----------------- */

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

	.brz-portfolio__frame img {
		transition: none;
	}

	.brz-portfolio--caption-hover .brz-portfolio__caption {
		transition: none;
	}

	/* O rótulo continua aparecendo: o que sai é o rastro e a escala, que
	   são o movimento. */
	.brz-portfolio__cursor {
		transition: opacity 0.25s ease;
	}

	.brz-portfolio__cursor,
	.brz-portfolio.is-brz-cursor-active .brz-portfolio__cursor {
		transform: translate3d( var( --brz-portfolio-cursor-x, 0 ), var( --brz-portfolio-cursor-y, 0 ), 0 );
	}

	.brz-portfolio--effect-tilt .brz-portfolio__frame {
		transition: none;
	}

	/* Os efeitos de rolagem somem por inteiro: o item fica na escala e na
	   posição naturais, que é onde eles terminariam de qualquer forma. */
	.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated .brz-portfolio__frame,
	.brz-portfolio--effect-unzoom .brz-portfolio__item.is-brz-animated .brz-portfolio__frame img,
	.brz-portfolio--effect-pop .brz-portfolio__item.is-brz-animated {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.brz-portfolio--effect-frame .brz-portfolio__frame::before,
	.brz-portfolio--effect-frame .brz-portfolio__frame::after,
	.brz-portfolio--effect-frame .brz-portfolio__bars::before,
	.brz-portfolio--effect-frame .brz-portfolio__bars::after {
		transition: none;
	}

	.brz-portfolio.is-brz-animated .brz-portfolio__reveal,
	.brz-portfolio.is-brz-animated.is-brz-visible .brz-portfolio__reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Presets dos sete layouts

   Tudo o que um preset escreve é custom property, nunca regra final. É o
   que permite a aba Style sobrescrever qualquer um deles: os controles do
   Elementor escrevem no seletor do wrapper, de especificidade maior.
   ========================================================================== */

/* Uma imagem só não é um grid: sem colunas, sem gap, e sem o piso de
   altura que existe para o caso de uma linha só de itens altos. */

.brz-portfolio--single .brz-portfolio__grid {
	display: block;
	gap: 0;
	grid-auto-rows: auto;
	grid-template-columns: none;
}

.brz-portfolio--single .brz-portfolio__item {
	width: 100%;
}

/* Sem irmãos, o item nunca é par: a alternância de canto do grid não tem
   o que alternar aqui, e a origem sai inteira do controle. */

/* Layout 1 — unzoom, cantos bem arredondados
   ----------------------------------------- */

.brz-portfolio--layout-1 {
	--brz-portfolio-radius: 20px;
}

/* Layout 2 — pop, sem arredondamento
   --------------------------------- */

.brz-portfolio--layout-2 {
	--brz-portfolio-radius: 0;
}

/* Layout 3 — moldura que fecha
   ---------------------------

   O raio fica em zero de propósito: as barras crescem das bordas retas, e
   canto arredondado deixaria uma fresta entre a barra e a borda. */

.brz-portfolio--layout-3 {
	--brz-portfolio-radius: 0;
	--brz-portfolio-frame-color: #fff;
	--brz-portfolio-frame-size: 30px;
}

/* Layout 4 — unzoom, cantos retos
   ------------------------------ */

.brz-portfolio--layout-4 {
	--brz-portfolio-radius: 0;
}

/* Layout 5 — parada, só o rótulo
   -----------------------------

   O original deixa a imagem permanentemente em escala reduzida, e é a
   única coisa que ele faz: sem efeito de entrada, sem hover na imagem. A
   redução aqui é a mesma custom property dos outros layouts, então o
   controle de escala de repouso continua valendo. */

.brz-portfolio--layout-5 {
	--brz-portfolio-radius: 0;
}

.brz-portfolio--layout-5 .brz-portfolio__frame {
	transform: scale( var( --brz-portfolio-rest, 0.9 ) );
	transform-origin: var( --brz-portfolio-origin );
}

/* Layout 6 — unzoom, cantos suaves
   ------------------------------- */

.brz-portfolio--layout-6 {
	--brz-portfolio-radius: 15px;
}

/* Layout 7 — card 3D
   ----------------- */

.brz-portfolio--layout-7 {
	--brz-portfolio-radius: 15px;
}

/* O card do original tem altura mínima: é um cartão, não uma foto solta, e
   abaixo disso a inclinação não tem o que inclinar. */
.brz-portfolio--layout-7 .brz-portfolio__item {
	min-height: 375px;
}