/* =========================================================
   Zoom 1 — imagem que aproxima, com etiquetas sobrepostas
   ========================================================= */

.cajo-tpl--zoom-1 {
	--z1-gap: 40px;
	--z1-radius: 10px;
	--z1-media: 3 / 2;
	--z1-suave: .62;
	--z1-texto: var(--cajo-texto, currentColor);
	--z1-titulo: var(--cajo-titulo, var(--z1-texto));
}

.cajo-tpl--zoom-1 .all-posts-row {
	display: flex;
	gap: var(--z1-gap);
	margin-bottom: var(--z1-gap);
	align-items: stretch;
}

.cajo-tpl--zoom-1 .all-posts-col { flex: 1 1 0; min-width: 0; display: flex; }

.cajo-tpl--zoom-1 .custom-post {
	position: relative;
	display: flex;
	width: 100%;
	background: var(--cajo-fundo, transparent);
	color: var(--z1-texto);
}

.cajo-tpl--zoom-1 .nectar-post-grid-item,
.cajo-tpl--zoom-1 .inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}

/* media */

.cajo-tpl--zoom-1 .nectar-post-grid-item-bg-wrap { position: relative; }

.cajo-tpl--zoom-1 .nectar-post-grid-item-bg {
	position: relative;
	border-radius: var(--cajo-raio, var(--z1-radius));
	box-shadow: var(--cajo-sombra, none);
	overflow: hidden;
}

.cajo-tpl--zoom-1 .nectar-post-grid-item-bg > div[style] { overflow: hidden; border-radius: var(--z1-radius); }

.cajo-wrap.cajo-tpl--zoom-1 .custom-post .background-image-post {
	aspect-ratio: var(--cajo-media-ratio, var(--z1-media)) !important;
	height: var(--cajo-media-altura, auto) !important;
	min-height: 0 !important;
	max-height: none !important;
}

.cajo-tpl--zoom-1 .background-image-post {
	width: 100%;
	background-color: var(--cajo-media, rgba(128,128,128,.14));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.cajo-tpl--zoom-1 .child {
	transition: transform .8s cubic-bezier(.25,.8,.25,1);
	transform-origin: center;
}

.cajo-tpl--zoom-1 .custom-post:hover .child { transform: scale(1.12); }

.cajo-tpl--zoom-1 .bg-wrap-link,
.cajo-tpl--zoom-1 .nectar-post-grid-link { position: absolute; inset: 0; z-index: 3; }

/* etiquetas */

.cajo-tpl--zoom-1 .projetos-cat-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px;
	pointer-events: none;
}

.cajo-tpl--zoom-1 .cat-span {
	padding: 5px 15px;
	border-radius: 100px;
	border: 1px solid var(--cajo-borda, rgba(132, 132, 132, .7));
	background: var(--cajo-tag-fundo, linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(208,208,208,.3) 100%));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: var(--cajo-fs-tag, 13px);
	line-height: 1.6;
	color: var(--cajo-tag-texto, #fff);
}

/* conteúdo */

.cajo-tpl--zoom-1 .content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 0 0;
	flex: 1 1 auto;
}

.cajo-tpl--zoom-1 .projetos-title { margin: 0 !important; }

:where(.cajo-tpl--zoom-1) [class^="titulo-custom-projetos"],
:where(.cajo-tpl--zoom-1) [class*=" titulo-custom-projetos"] {
	color: var(--z1-titulo);
	text-decoration: none;
	font-size: var(--cajo-fs-titulo, 21px);
	line-height: var(--cajo-lh-titulo, 1.25);
	font-weight: 500;
	display: block;
}

:where(.cajo-tpl--zoom-1) [class^="meta-excerpt-projetos"],
:where(.cajo-tpl--zoom-1) [class*=" meta-excerpt-projetos"] {
	font-size: var(--cajo-fs-texto, 14px);
	line-height: 1.55;
	opacity: var(--z1-suave);
	display: block;
}

.cajo-tpl--zoom-1 .cajo-branco [class^="titulo-custom-projetos"] span,
.cajo-tpl--zoom-1 .cajo-branco [class^="meta-excerpt-projetos"] { color: #fff !important; }

/* -----------------------------------------------------------------------
   O tema-filho da República tem "body a.titulo-custom-projetos { color:#000
   !important }" — vinha do tempo em que estes cards estavam sobre fundo
   claro. Num loop sobre preto dava título preto sobre preto: o texto estava
   lá, não se via.

   A regra acima é :where(), de propósito, para não ganhar ao tema; mas um
   !important só se bate com outro. Esta tem mais especificidade (0,3,1)
   do que a do tema (0,1,2) e devolve a decisão a quem manda: o token da
   instância, senão o do template.

   Fica no <a>, não no <span>, para a regra dos tokens (que aponta ao span)
   continuar a ganhar quando alguém escolhe uma cor.
   ----------------------------------------------------------------------- */
.cajo-tpl--zoom-1 .content a[class^="titulo-custom-projetos"],
.cajo-tpl--zoom-1 .content a[class*=" titulo-custom-projetos"] {
	color: var(--cajo-titulo, var(--z1-titulo)) !important;
}

/* =========================================================
   "Ver mais" — texto seguido de um círculo com a seta
   ---------------------------------------------------------
   O botão-comprimido do plugin não serve a este template. Aqui é só
   texto, e o círculo é desenhado com os dois pseudo-elementos: o ::after
   é o aro, o ::before é a seta.

   Porquê dois e não um: a seta é uma máscara, e uma máscara recorta o
   elemento todo — o aro incluído. Separados, o aro fica inteiro e a seta
   acompanha a cor do texto, seja qual for o token.
   ========================================================= */

.cajo-tpl--zoom-1 {
	--z1-more-circulo: 44px;
	--z1-more-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15'/%3E%3Cpath d='M5.5 13l6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");
}

.cajo-tpl--zoom-1 .cajo-more-wrap {
	justify-content: center;
	gap: 32px;
}

.cajo-tpl--zoom-1 .cajo-more,
.cajo-tpl--zoom-1 .cajo-less {
	position: relative;
	height: auto;
	padding: 0 calc(var(--z1-more-circulo) + 18px) 0 0;
	border: 0;
	border-radius: 0;
	background: none;
	gap: 0;
	color: var(--cajo-titulo, var(--z1-titulo));
	font-size: var(--cajo-fs-titulo, 17px);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}

/* o aro */
.cajo-tpl--zoom-1 .cajo-more::after,
.cajo-tpl--zoom-1 .cajo-less::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: var(--z1-more-circulo);
	height: var(--z1-more-circulo);
	transform: translateY(-50%);
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color .25s ease;
}

/* a seta */
.cajo-tpl--zoom-1 .cajo-more::before,
.cajo-tpl--zoom-1 .cajo-less::before {
	content: "";
	position: absolute;
	right: calc(var(--z1-more-circulo) / 2 - 11px);
	top: 50%;
	width: 22px;
	height: 22px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: var(--z1-more-seta) center / contain no-repeat;
	mask: var(--z1-more-seta) center / contain no-repeat;
	transition: transform .25s ease, background-color .25s ease;
	z-index: 1;
}

/* "ver menos" aponta para cima */
.cajo-tpl--zoom-1 .cajo-less::before {
	transform: translateY(-50%) rotate(180deg);
}

.cajo-tpl--zoom-1 .cajo-more:hover,
.cajo-tpl--zoom-1 .cajo-less:hover {
	background: none;
	border: 0;
	color: var(--cajo-titulo, var(--z1-titulo));
}

.cajo-tpl--zoom-1 .cajo-more:hover::before {
	transform: translateY(calc(-50% + 3px));
}

.cajo-tpl--zoom-1 .cajo-less:hover::before {
	transform: translateY(calc(-50% - 3px)) rotate(180deg);
}

/* a carregar: a seta sai da frente e fica só o spinner */
.cajo-tpl--zoom-1 .cajo-more.is-loading::before {
	opacity: 0;
}

.cajo-tpl--zoom-1 .cajo-more .cajo-spinner {
	position: absolute;
	right: calc(var(--z1-more-circulo) / 2 - 9px);
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
}

@media (max-width: 690px) {
	.cajo-tpl--zoom-1 .all-posts-row { flex-wrap: wrap; gap: 24px; }
	.cajo-tpl--zoom-1 .all-posts-col { flex: 1 1 100%; }
}