/* =========================================================
   Cajo Builder — base
   Tudo o que é aspecto do card vive no style.css do template.
   Aqui fica só a grelha, os filtros, a paginação e os estados.
   ========================================================= */

.cajo-wrap {
	--cajo-cols: 3;
	--cajo-gap: 20px;
	--cajo-radius: 10px;
	/* Os tokens da instância (--cajo-fundo, --cajo-texto…) são injectados no
	   atributo style pelo elemento. Aqui só definimos o que usamos por omissão. */
	--cajo-accent: var(--cajo-destaque, var(--nectar-accent-color, #04e762));
	--cajo-linha: var(--cajo-borda, rgba(128, 128, 128, .25));

	position: relative;
}

/* =========================================================
   Camada de tokens
   =========================================================
   O CSS de um tema costuma ter mais especificidade que o do template
   (".custom-post .background-image-post.artigos" vs ".cajo-tpl--color-1 …"),
   por isso uma custom property sozinha não chegava: o tema ganhava e o token
   não se via.

   Estas regras só existem quando o token está mesmo definido — o PHP põe a
   classe "cajo-tem-…" no wrapper. Sem token, nenhuma regra é escrita e o tema
   continua a mandar, que é o que se quer por omissão.

   Os selectores cobrem as classes de card dos sete templates. Um template
   novo só tem de usar uma destas, ou acrescentar a sua na sua folha.
   ========================================================= */

.cajo-wrap.cajo-tem-fundo .custom-post,
.cajo-wrap.cajo-tem-fundo .related-custom.custom-post,
.cajo-wrap.cajo-tem-fundo .eq-card,
.cajo-wrap.cajo-tem-fundo .cajo-card {
	background: var(--cajo-fundo) !important;
}

.cajo-wrap.cajo-tem-texto .custom-post,
.cajo-wrap.cajo-tem-texto .related-custom.custom-post,
.cajo-wrap.cajo-tem-texto .eq-card,
.cajo-wrap.cajo-tem-texto .cajo-card,
.cajo-wrap.cajo-tem-texto .artigos-exerto,
.cajo-wrap.cajo-tem-texto .meta-excerpt,
.cajo-wrap.cajo-tem-texto [class^="meta-excerpt-projetos"],
.cajo-wrap.cajo-tem-texto .eq-campo,
.cajo-wrap.cajo-tem-texto .ov-excerto,
.cajo-wrap.cajo-tem-texto .data-custom,
.cajo-wrap.cajo-tem-texto .ov-data {
	color: var(--cajo-texto) !important;
}

.cajo-wrap.cajo-tem-titulo .artigos-titulo,
.cajo-wrap.cajo-tem-titulo .titulo-custom span,
.cajo-wrap.cajo-tem-titulo [class^="titulo-custom-projetos"] span,
.cajo-wrap.cajo-tem-titulo .eq-nome,
.cajo-wrap.cajo-tem-titulo .ov-titulo,
.cajo-wrap.cajo-tem-titulo .content p span {
	color: var(--cajo-titulo) !important;
}

.cajo-wrap.cajo-tem-tag-fundo .cat_post,
.cajo-wrap.cajo-tem-tag-fundo .cat-span,
.cajo-wrap.cajo-tem-tag-fundo .ov-etiqueta {
	background: var(--cajo-tag-fundo) !important;
}

.cajo-wrap.cajo-tem-tag-texto .cat_post,
.cajo-wrap.cajo-tem-tag-texto .cat-span,
.cajo-wrap.cajo-tem-tag-texto .ov-etiqueta {
	color: var(--cajo-tag-texto) !important;
}

.cajo-wrap.cajo-tem-media .background-image-post,
.cajo-wrap.cajo-tem-media .eq-media,
.cajo-wrap.cajo-tem-media .ov-media {
	background-color: var(--cajo-media) !important;
}

/* ---------- Estrutura ---------- */

.cajo-wrap.cajo-tem-raio .custom-post,
.cajo-wrap.cajo-tem-raio .related-custom.custom-post,
.cajo-wrap.cajo-tem-raio .eq-card,
.cajo-wrap.cajo-tem-raio .ov-card,
.cajo-wrap.cajo-tem-raio .cajo-card {
	border-radius: var(--cajo-raio) !important;
	overflow: hidden;
}

.cajo-wrap.cajo-tem-borda-largura .custom-post,
.cajo-wrap.cajo-tem-borda-largura .related-custom.custom-post,
.cajo-wrap.cajo-tem-borda-largura .eq-card,
.cajo-wrap.cajo-tem-borda-largura .ov-card,
.cajo-wrap.cajo-tem-borda-largura .cajo-card {
	border-width: var(--cajo-borda-largura) !important;
	border-style: solid !important;
	border-color: var(--cajo-borda, currentColor) !important;
}

.cajo-wrap.cajo-tem-sombra .custom-post,
.cajo-wrap.cajo-tem-sombra .related-custom.custom-post,
.cajo-wrap.cajo-tem-sombra .eq-card,
.cajo-wrap.cajo-tem-sombra .ov-card,
.cajo-wrap.cajo-tem-sombra .cajo-card {
	box-shadow: var(--cajo-sombra) !important;
}

.cajo-wrap.cajo-tem-desfoque .custom-post,
.cajo-wrap.cajo-tem-desfoque .related-custom.custom-post,
.cajo-wrap.cajo-tem-desfoque .eq-card,
.cajo-wrap.cajo-tem-desfoque .cajo-card {
	backdrop-filter: blur(var(--cajo-desfoque)) !important;
	-webkit-backdrop-filter: blur(var(--cajo-desfoque)) !important;
}

.cajo-wrap.cajo-tem-padding .custom-post,
.cajo-wrap.cajo-tem-padding .related-custom.custom-post,
.cajo-wrap.cajo-tem-padding .eq-card,
.cajo-wrap.cajo-tem-padding .cajo-card {
	padding: var(--cajo-padding) !important;
}

/* ---------- Tipografia ---------- */

.cajo-wrap.cajo-tem-fonte-titulo .artigos-titulo,
.cajo-wrap.cajo-tem-fonte-titulo .titulo-custom,
.cajo-wrap.cajo-tem-fonte-titulo .titulo-custom span,
.cajo-wrap.cajo-tem-fonte-titulo [class^="titulo-custom-projetos"],
.cajo-wrap.cajo-tem-fonte-titulo [class^="titulo-custom-projetos"] span,
.cajo-wrap.cajo-tem-fonte-titulo .eq-nome,
.cajo-wrap.cajo-tem-fonte-titulo .ov-titulo,
.cajo-wrap.cajo-tem-fonte-titulo .content p span {
	font-size: var(--cajo-fs-titulo) !important;
}

.cajo-wrap.cajo-tem-entrelinha-titulo .artigos-titulo,
.cajo-wrap.cajo-tem-entrelinha-titulo .titulo-custom,
.cajo-wrap.cajo-tem-entrelinha-titulo .titulo-custom span,
.cajo-wrap.cajo-tem-entrelinha-titulo [class^="titulo-custom-projetos"],
.cajo-wrap.cajo-tem-entrelinha-titulo .eq-nome,
.cajo-wrap.cajo-tem-entrelinha-titulo .ov-titulo,
.cajo-wrap.cajo-tem-entrelinha-titulo .content p span {
	line-height: var(--cajo-lh-titulo) !important;
}

.cajo-wrap.cajo-tem-fonte-texto .artigos-exerto,
.cajo-wrap.cajo-tem-fonte-texto .meta-excerpt,
.cajo-wrap.cajo-tem-fonte-texto [class^="meta-excerpt-projetos"],
.cajo-wrap.cajo-tem-fonte-texto .eq-campo,
.cajo-wrap.cajo-tem-fonte-texto .ov-excerto {
	font-size: var(--cajo-fs-texto) !important;
}

.cajo-wrap.cajo-tem-fonte-data .data-custom,
.cajo-wrap.cajo-tem-fonte-data .ov-data {
	font-size: var(--cajo-fs-data) !important;
}

.cajo-wrap.cajo-tem-fonte-tag .cat_post,
.cajo-wrap.cajo-tem-fonte-tag .cat-span,
.cajo-wrap.cajo-tem-fonte-tag .ov-etiqueta {
	font-size: var(--cajo-fs-tag) !important;
}

.cajo-wrap.cajo-tem-fonte-botao .artigos-flex,
.cajo-wrap.cajo-tem-fonte-botao .artigos-read-more,
.cajo-wrap.cajo-tem-fonte-botao .cajo-botao,
.cajo-wrap.cajo-tem-fonte-botao .ov-cta {
	font-size: var(--cajo-fs-botao) !important;
}

/* ---------- Botão partilhado ----------
   Templates que não trazem botão próprio ganham este quando a parte "botão"
   é ligada no elemento. */

.cajo-botao-wrap {
	margin: 12px 0 0 !important;
}

.cajo-botao {
	position: relative;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cajo-destaque, inherit);
	text-decoration: none;
	font-size: var(--cajo-fs-botao, 13px);
	line-height: 1.3;
}

.cajo-botao:hover .cajo-seta {
	transform: translateX(4px);
}

/* etiqueta partilhada, para templates cujo tema não a estilize */
.cajo-tpl--minimal-1 .cat_post,
.cajo-tpl--glass-1 .cat_post,
.cajo-tpl--portrait-1 .cat_post {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	max-width: calc(100% - 24px);
	padding: 5px 13px;
	border-radius: 100px;
	background: var(--cajo-tag-fundo, rgba(255, 255, 255, .9));
	color: var(--cajo-tag-texto, #111);
	font-size: var(--cajo-fs-tag, 12px);
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Grelha ---------- */

.cajo-grid {
	display: grid;
	grid-template-columns: repeat(var(--cajo-cols), minmax(0, 1fr));
	gap: var(--cajo-gap);
}

/* Nos templates por linhas, cada linha gere a sua própria grelha. */
.cajo-grid--rows {
	display: block;
}

/* Mantém as colunas nas linhas incompletas, incluindo resultados AJAX.
   Grid desconta o gap real da linha, mesmo quando o tema o altera. */
.cajo-wrap .cajo-grid--rows > .all-posts-row {
	display: grid;
	grid-template-columns: repeat(var(--cajo-cols), minmax(0, 1fr));
}

/* As larguras antigas do tema não devem ultrapassar a coluna da grelha. */
.cajo-wrap .cajo-grid--rows > .all-posts-row > .all-posts-col {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

@media (max-width: 1000px) {
	.cajo-grid,
	.cajo-wrap .cajo-grid--rows > .all-posts-row { grid-template-columns: repeat(min(2, var(--cajo-cols)), minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.cajo-grid,
	.cajo-wrap .cajo-grid--rows > .all-posts-row { grid-template-columns: 1fr; }
}

/* ---------- Filtros ---------- */

.cajo-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 18px;
	margin-bottom: 28px;
}

.cajo-filtro {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cajo-filtro--pills {
	flex: 1 1 100%;
}

.cajo-filtro__label {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
	margin: 0;
}

.cajo-select,
.cajo-input {
	height: 42px;
	min-width: 180px;
	padding: 0 14px;
	border: 1px solid var(--cajo-linha);
	border-radius: 100px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
}

.cajo-select { padding-right: 34px; }

.cajo-input[type="number"] { min-width: 110px; }

.cajo-select:focus-visible,
.cajo-input:focus-visible {
	outline: 2px solid var(--cajo-accent);
	outline-offset: 2px;
}

/* pills */

.cajo-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cajo-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 18px;
	border: 1px solid var(--cajo-linha);
	border-radius: 100px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cajo-pill:hover { border-color: var(--cajo-accent); }

.cajo-pill.is-active {
	background: var(--cajo-accent);
	border-color: var(--cajo-accent);
	color: #000;
}

.cajo-pill__n {
	font-size: 11px;
	opacity: .6;
}

/* checkboxes */

.cajo-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.cajo-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-size: 14px;
}

.cajo-check__n { opacity: .5; font-size: 12px; }

/* intervalo */

.cajo-range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cajo-range__sep { opacity: .5; }

.cajo-limpar {
	height: 42px;
	padding: 0 18px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	opacity: .7;
}

.cajo-limpar:hover { opacity: 1; }

/* ---------- Paginação ---------- */

.cajo-paginacao {
	margin-top: 40px;
}

.cajo-paginacao button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
}

.cajo-paginacao .is-disabled,
.cajo-paginacao button[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.cajo-paginacao .all-posts-navigation-numbers {
	display: flex;
	justify-content: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cajo-paginacao .all-posts-navigation-numbers li {
	margin: 0;
}

.cajo-paginacao .all-posts-navigation-numbers .cajo-pag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: background-color .2s ease, color .2s ease;
}

.cajo-paginacao .all-posts-navigation-numbers li.current .cajo-pag {
	background: var(--cajo-accent);
	color: #000;
}

/* ---------------------------------------------------------------------------
   Paginação no telemóvel
   ---------------------------------------------------------------------------
   O markup reaproveita a grelha do tema (.custom-row / .custom-col) para casar
   com a paginação que já existia no site. Só que abaixo dos 690px o tema torna
   a .custom-row um bloco, e as três colunas empilham: "Previous" numa linha,
   os números noutra, "Next" noutra, cada um com o seu alinhamento — ficava
   tudo desalinhado.

   Aqui a linha volta a ser flex, sem depender do que o tema faça: Previous,
   números e Next ficam os três na mesma linha e ao mesmo nível, com os números
   centrados no meio. O desktop não é tocado.

   O nowrap é de propósito: com wrap, o "Next" cai para a linha de baixo assim
   que o espaço aperta. Como a coluna dos números pode encolher (min-width: 0)
   e o intervalo entre eles é pequeno, cabe tudo mesmo em ecrãs estreitos.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {

	.cajo-paginacao .custom-row {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.cajo-paginacao .custom-col {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}

	/* a coluna do meio é a dos números */
	.cajo-paginacao .custom-col:nth-child(2) {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		justify-content: center;
	}

	.cajo-paginacao .all-posts-navigation-numbers {
		gap: 2px;
		flex-wrap: nowrap;
	}
}

.cajo-paginacao .all-posts-navigation-numbers .dots {
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	opacity: .5;
}

/* load more */

.cajo-more-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cajo-more,
.cajo-less {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 28px;
	border: 1px solid currentColor;
	border-radius: 100px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease;
}

.cajo-more:hover,
.cajo-less:hover {
	background: var(--cajo-accent);
	border-color: var(--cajo-accent);
	color: #000;
}

.cajo-more-wrap .is-hidden,
.cajo-filtros .is-hidden {
	display: none !important;
}

/* scroll infinito */

.cajo-scroll {
	position: relative;
	min-height: 1px;
	text-align: center;
}

.cajo-sentinela {
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
}

/* ---------- Estados ---------- */

.cajo-vazio,
.cajo-erro {
	margin: 28px 0 0;
	opacity: .7;
	text-align: center;
}

.cajo-erro { color: #e2231a; opacity: 1; }

.cajo-overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
	background: rgba(0, 0, 0, .04);
	backdrop-filter: blur(1px);
	z-index: 5;
	pointer-events: none;
}

.cajo-wrap.is-loading .cajo-overlay { display: flex; }
.cajo-wrap.is-loading .cajo-grid { opacity: .45; transition: opacity .2s ease; }

.cajo-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cajo-spin .7s linear infinite;
	opacity: 0;
}

.cajo-wrap.is-loading .cajo-overlay .cajo-spinner,
.cajo-spinner--bloco { opacity: 1; }

.cajo-more.is-loading .cajo-spinner { opacity: 1; }

@keyframes cajo-spin { to { transform: rotate(360deg); } }

/* entrada dos cards carregados por AJAX */

.cajo-in {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.cajo-in--on {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.cajo-in,
	.cajo-spinner,
	.cajo-wrap * {
		transition: none !important;
		animation: none !important;
	}
}