/**
 * Listagem de vagas do tema Cais.
 * Réplica do mockup aprovado — usa os tokens de variables.css.
 *
 * Nota: o mockup usava --color-accent (dourado) para o estado "accent-accent"
 * dos itens da lista. Sem um gatilho semântico claro para esse segundo
 * estado e mantendo a paleta só-teal definida no CLAUDE.md, implementámos
 * apenas dois estados: vaga em destaque (accent-primary) e normal (accent-none).
 */

/* ============ PAGE HERO ============ */
.page-hero {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

.page-hero h1 {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--text-3xl);
	letter-spacing: -0.02em;
}

.page-hero p {
	color: var(--color-text-secondary);
	margin-top: var(--space-xs);
	font-size: var(--text-base);
}

/* ============ LAYOUT ============ */
.page-layout {
	max-width: var(--container-max-width, 1240px);
	margin: 0 auto;
	padding: 0 var(--space-lg) var(--space-xl);
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--space-xl);
	align-items: start;
}

.page-layout.no-sidebar {
	grid-template-columns: 1fr;
}

/* Sem título da página, repõe o espaçamento superior que normalmente vinha
   do padding do .page-hero — nunca deve colapsar para quase nada. */
.page-layout.no-hero {
	padding-top: var(--space-xl);
}

/* ============ SEARCH CARD ============ */
.search-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
}

.search-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr auto;
	gap: var(--space-md);
	align-items: end;
}

.field label {
	display: block;
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
	margin-bottom: 0.4rem;
}

.field input[type="text"],
.field select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text);
	background: var(--color-background);
}

.field input[type="text"]::placeholder {
	color: var(--color-text-muted);
}

.btn-search {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	border: none;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
	white-space: nowrap;
}

.btn-search:hover {
	background: var(--color-primary-dark);
}

.btn-search svg {
	width: 16px;
	height: 16px;
}

.search-extra {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--text-sm);
	color: var(--color-text);
	cursor: pointer;
}

.checkbox-item input {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
}

.search-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-md);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.search-tags .tag {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-weight: 500;
	color: var(--color-text);
	cursor: pointer;
	background: var(--color-background);
	text-decoration: none;
}

.search-tags .tag:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.search-clear-row {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--space-sm);
}

.search-clear-link {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.search-clear-link:hover {
	color: var(--color-text);
}

/*
 * ============ MODERNIZAÇÃO DA PESQUISA (v1.90.0) ============
 * "Clássico" (.cais-search-classic, default) nunca tem nenhuma regra
 * própria — é a AUSÊNCIA das 3 classes seguintes que o define,
 * preservando o CSS acima intacto como fundação (mesma disciplina já
 * usada nos 4 Estilos de Cartão desde a v1.86.0). Nenhum destes 3
 * estilos toca em grid-template-columns/flex-direction dos breakpoints
 * responsivos já existentes (980px/640px, abaixo) — o empilhamento
 * mobile continua idêntico nos 4 casos.
 */
.cais-hide-search-labels .field label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ---------------- SaaS Moderno ---------------- */
.cais-search-saas.search-card {
	border: none;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
	background: var(--color-background);
}

@media (min-width: 981px) {
	.cais-search-saas.search-card {
		border-radius: 999px;
	}

	/* Divisória subtil entre campos, nunca depois do último — funciona
	   corretamente mesmo quando Região/Categoria não existem (a
	   taxonomia pode não estar ativa), já que :last-of-type é sempre
	   relativo ao DOM realmente renderizado. */
	.cais-search-saas .field:not(:last-of-type) {
		border-right: 1px solid var(--color-border);
	}
}

.cais-search-saas .field input[type="text"],
.cais-search-saas .field select {
	border: none;
	border-radius: 0;
	background: transparent;
}

.cais-search-saas .field input[type="text"]:focus,
.cais-search-saas .field select:focus {
	background: var(--color-primary-light);
	outline: none;
}

.cais-search-saas .btn-search {
	border-radius: 999px;
}

/* ---------------- Editorial ---------------- */
.cais-search-editorial.search-card {
	border: none;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
}

.cais-search-editorial .field input[type="text"],
.cais-search-editorial .field select {
	border: none;
	border-bottom: 2px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	padding-left: 0;
}

.cais-search-editorial .field input[type="text"]:focus,
.cais-search-editorial .field select:focus {
	border-bottom-color: var(--color-primary);
	outline: none;
}

.cais-search-editorial .btn-search {
	border-radius: 0;
	font-weight: 800;
}

/* ---------------- Bento ---------------- */
.cais-search-bento.search-card {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.cais-search-bento .search-grid {
	gap: var(--space-lg);
}

.cais-search-bento .field input[type="text"],
.cais-search-bento .field select {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.cais-search-bento .btn-search {
	border-radius: 8px;
}

/* ============ ZONAS DE ANÚNCIOS ============ */
.cais-ad-zone {
	margin: var(--space-md) 0;
}

.cais-ad-zone:empty {
	display: none;
}

.cais-ad-zone:not(:empty) {
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

/* ============ ALERT BANNER ============ */
.alert-banner {
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}

.alert-banner-left {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.alert-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.alert-icon svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
}

.alert-banner-text strong {
	display: block;
	font-size: var(--text-base);
}

.alert-banner-text span {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.btn-alert {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.2rem;
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.btn-alert:hover {
	background: var(--color-primary-dark);
}

.btn-alert svg {
	width: 15px;
	height: 15px;
}

/*
 * ============ MODERNIZAÇÃO DO BANNER DE ALERTAS (v1.90.0) ============
 * "Clássico" (.cais-alert-classic, default) nunca tem nenhuma regra
 * própria — mesma disciplina "ausência define o default" da pesquisa
 * acima e dos 4 Estilos de Cartão.
 */

/* ---------------- SaaS Moderno ---------------- */
.cais-alert-saas.alert-banner {
	background: var(--color-background);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.cais-alert-saas .alert-icon {
	background: transparent;
}

.cais-alert-saas .alert-icon svg {
	stroke: var(--color-primary);
}

.cais-alert-saas .btn-alert {
	border-radius: 999px;
}

/* ---------------- Editorial ---------------- */
.cais-alert-editorial.alert-banner {
	background: transparent;
	border-radius: 0;
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-lg);
}

/*
 * Ícone monocromático e com contorno — nunca escondido — mesma
 * disciplina já usada no Estilo Editorial dos Cartões de Vaga (v1.86.0:
 * badges perdem a cor rotativa a favor de um contorno neutro, nunca
 * desaparecem por completo).
 */
.cais-alert-editorial .alert-icon {
	background: transparent;
	border: 2px solid var(--color-text);
	border-radius: 0;
}

.cais-alert-editorial .alert-icon svg {
	stroke: var(--color-text);
}

.cais-alert-editorial .alert-banner-text strong {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 800;
}

.cais-alert-editorial .btn-alert {
	border-radius: 0;
	background: transparent;
	color: var(--color-primary) !important;
	border: 2px solid var(--color-primary);
}

.cais-alert-editorial .btn-alert:hover {
	background: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

/* ---------------- Bento (interface invertida) ---------------- */
.cais-alert-bento.alert-banner {
	background: var(--color-heading, #0f172a);
	border-radius: 8px;
}

.cais-alert-bento .alert-banner-text strong,
.cais-alert-bento .alert-banner-text span {
	color: var(--color-primary-contrast, #ffffff);
}

.cais-alert-bento .alert-icon {
	background: color-mix(in srgb, var(--color-primary-contrast, #ffffff) 15%, transparent);
}

.cais-alert-bento .alert-icon svg {
	stroke: var(--color-primary-contrast, #ffffff);
}

/*
 * Botão "cutout" claro sobre o fundo escuro — !important necessário: a
 * regra base .btn-alert já define "color" com !important
 * (var(--color-primary-contrast)), nunca vencida por uma declaração sem
 * !important, independentemente da especificidade.
 */
.cais-alert-bento .btn-alert {
	background: var(--color-primary-contrast, #ffffff);
	color: var(--color-heading, #0f172a) !important;
}

.cais-alert-bento .btn-alert:hover {
	background: color-mix(in srgb, var(--color-primary-contrast, #ffffff) 85%, transparent);
}

/* ============ RESULTS BAR ============ */
.results-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.results-count {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.results-controls {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.results-controls select {
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	background: var(--color-background);
}

.view-toggle {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.view-toggle button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var(--color-background);
	cursor: pointer;
}

.view-toggle button.is-active {
	background: var(--color-primary);
}

.view-toggle button svg {
	width: 15px;
	height: 15px;
	stroke: var(--color-text-secondary);
}

.view-toggle button.is-active svg {
	stroke: #fff;
}

/*
 * ============ JOB LIST ============
 * v1.86.0 — .job-list DEIXOU de ser uma caixa única/contínua (fundo+borda
 * própria com .job-item como simples linhas separadas por border-bottom).
 * Cada .job-item passa a ser um cartão INDEPENDENTE (fundo/borda/radius
 * próprios), tanto em modo Lista como em modo Grelha — unifica a lógica
 * de "cartão" entre os dois modos, pré-requisito para os 3 Estilos do
 * Cartão de Vaga (.cais-card-saas/-editorial/-bento, abaixo) se
 * aplicarem identicamente aos dois. .job-list em si passa a ser só um
 * contentor de espaçamento (flex em coluna, gap) — nunca mais uma
 * superfície visual própria.
 *
 * v1.87.0 — gap unificado com o modo Grelha (abaixo) via
 * --cais-job-gap (Customizer → Vagas → "Espaço Entre as Vagas",
 * default 16px) — antes desta versão o modo Lista usava
 * var(--space-sm)=8px, mais apertado do que a Grelha; mudança de
 * aparência por omissão deliberada e documentada (ver
 * cais_get_jobs_listing_inline_css(), functions.php).
 */
.job-list {
	display: flex;
	flex-direction: column;
	gap: var(--cais-job-gap, 16px);
}

.job-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-left: 3px solid transparent;
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	transition: background 0.12s ease;
}

.job-item:hover {
	background: #FAFCFB;
}

/*
 * A barra de destaque ("Vaga em Destaque") só sobrescreve a COR do lado
 * esquerdo, nunca a shorthand "border"/"border-color" — nenhum dos 3
 * Estilos abaixo pode alguma vez tocar em border-left-color, para este
 * indicador continuar a funcionar identicamente em qualquer estilo
 * escolhido (confirmado ao vivo, ver relatório de conclusão).
 */
.job-item.accent-primary {
	border-left-color: var(--color-primary);
}

.job-item.accent-none {
	border-left-color: transparent;
}

/*
 * Bug real (v1.89.1), confirmado por reprodução ao vivo com o logótipo
 * realmente visível (nunca reproduzido nas fases anteriores porque os
 * testes de Lista em desktop, flex-direction:row, foram sempre feitos
 * SEM logótipo real a renderizar, ou em breakpoints que já usam
 * flex-direction:column — Grelha, e Lista mobile a partir de 640px —
 * onde este bug nunca existiu): causa raiz NUNCA foi text-align/
 * align-items:center em lado nenhum (confirmado, de novo, que essas
 * declarações não existem) — é `.job-item { justify-content:
 * space-between }` (linha ~364) a distribuir 3 filhos (logo/main/side)
 * EM PARTES IGUAIS ao longo da linha quando o logótipo está presente,
 * em vez de "logo colado à esquerda + main a crescer + side no fim".
 * Sem `flex-grow` em .job-item-main, este fica com o seu tamanho
 * intrínseco (estreito) posicionado a meio do espaço livre — o mesmo
 * texto que ficava colado ao logo quando media 2 filhos (sem logo) passa
 * a "flutuar" visivelmente mais para o centro com 3 filhos. Corrigido
 * dando a .job-item-main o crescimento que sempre devia ter tido: cresce
 * sempre para preencher o espaço entre logo e .job-item-side, ficando
 * sempre imediatamente a seguir ao logo (ou à margem esquerda, sem
 * logo), nunca a meio da linha. Em modo Grelha/Lista-mobile
 * (flex-direction:column nesses contextos), flex-grow só afeta a altura
 * — sem altura extra livre para distribuir, o efeito é nulo, confirmado
 * ao vivo sem nenhuma regressão.
 */
.job-item-main {
	min-width: 0;
	flex: 1;
}

.job-item-logo {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-background);
	border: 1px solid var(--color-border);
}

.job-item-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Modo Escuro (v1.93.0) — mesmo bug/correção de .sidebar-title acima:
   nunca teve "color" próprio, herdava preto absoluto do browser. */
.job-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--cais-jobs-listing-font-size, 14px);
	color: var(--color-heading, #0f172a);
	margin-bottom: 0.4rem;
}

.job-tags {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.job-badge {
	font-size: var(--text-sm);
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-sm);
}

/* Paleta rotativa de badges — atribuída por term_id, não por nome do tipo. */
.job-badge-c1 { background: var(--color-primary-light); color: var(--color-primary-dark); }
.job-badge-c2 { background: #FBF0DC; color: #8A5F16; }
.job-badge-c3 { background: #FBE7EA; color: #96324A; }
.job-badge-c4 { background: #EDE7FB; color: #5B3C96; }
.job-badge-c5 { background: #F0EEE0; color: #6B6B3A; }

/* Badge fixo — "remoto" é um estado, não um tipo de vaga arbitrário. */
.job-badge-remote { background: #E9EEFC; color: #33499B; }

/* Cores NATIVAS do WP Job Manager para o tipo de vaga (frontend.css do
   plugin: `.job-types .full-time`/`.job_listing .full-time`, etc.) —
   nunca geradas pelo tema (que usa a paleta .job-badge-cN acima), mas
   aparecem sem nenhum override sempre que um widget nativo do WPJM (ex:
   "Recent Jobs", confirmado presente na sidebar de single-job_listing.php)
   renderiza a marcação por sua conta. Regra global (não scoped a uma
   página) porque este widget pode ser colocado em qualquer sidebar do
   site. Auditoria de contraste (2026-09-02): full-time 1.71:1, part-time
   2.45:1, temporary 4.44:1 e freelance 3.20:1 sobre branco, todos abaixo
   do mínimo WCAG AA (o texto usa font-size ~12px, nunca "texto grande" —
   confirmado em frontend.css, por isso o limiar é sempre 4.5:1, nunca
   3:1). internship (7.39:1) já cumpria e não foi tocado. Mesma matiz de
   cada cor, só escurecida ao ponto exato de 4.5:1 (calculado). */
.job-types .full-time,
.job_listing .full-time {
	color: #538318;
}

.job-types .part-time,
.job_listing .part-time {
	color: #BA5C0E;
}

.job-types .temporary,
.job_listing .temporary {
	color: #D83271;
}

.job-types .freelance,
.job_listing .freelance {
	color: #2A7DA7;
}

.job-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--cais-jobs-listing-font-size, 14px);
	color: var(--color-text-secondary);
}

.job-meta svg {
	width: 13px;
	height: 13px;
}

.job-item-side {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-shrink: 0;
}

.job-time {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Modo Escuro (v1.93.0) — mesmo bug/correção de .job-title acima. */
.btn-view {
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--text-sm);
	white-space: nowrap;
}

.job-item:hover .btn-view {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/*
 * ============ JOB LIST — VISTA EM GRELHA ============
 * v1.86.0 — nunca mais redeclara background/border/border-radius aqui:
 * .job-item (base, acima) já os define para os dois modos. Este bloco
 * só trata da REORGANIZAÇÃO do layout (coluna em vez de linha).
 */
.job-list.is-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cais-job-gap, 16px);
}

.job-list.is-grid .job-item {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-sm);
	padding: var(--space-md);
}

.job-list.is-grid .job-item-main,
.job-list.is-grid .job-item-side {
	width: 100%;
}

.job-list.is-grid .job-item-side {
	justify-content: space-between;
}

@media (max-width: 980px) {
	.job-list.is-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.job-list.is-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * ============ ESTILO DO CARTÃO DE VAGA (v1.86.0) ============
 * 3 paradigmas de skinning profundo, escolhidos no Customizer
 * (cais_job_card_style) e impressos como classe em .job-list
 * (content-jobs-listing.php) — .cais-card-saas/-editorial/-bento
 * abaixo, aplicados igualmente aos dois modos (Lista/Grelha), já que
 * .job-item agora é sempre um cartão independente nos dois.
 *
 * Regra de ouro em TODOS os 3 blocos: nunca a shorthand "border"/
 * "border-color" em .job-item — só border-top/-right/-bottom-color (ou
 * a versão completa border-top/-right/-bottom quando também a largura
 * muda) — border-left-color fica sempre exclusivamente a cargo de
 * .accent-primary/.accent-none (acima), nunca sobreposto aqui, mesmo em
 * empate de especificidade (2 classes em ambos os lados) — evita
 * qualquer dependência frágil da ordem das regras na folha de estilo.
 */

/* ---------------- SaaS Moderno (flutuante, sombra suave) ---------------- */
.cais-card-saas .job-item {
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	transition: background 0.12s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cais-card-saas .job-item:hover {
	background: var(--color-background);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.cais-card-saas .job-item-logo {
	border-radius: 12px;
	border-color: transparent;
}

.cais-card-saas .job-badge {
	border-radius: var(--radius-pill);
}

/* ---------------- Editorial Minimalista (limpo, alto contraste) ---------------- */
.cais-card-editorial .job-item {
	border-top-color: var(--color-border);
	border-right-color: var(--color-border);
	border-bottom-color: var(--color-border);
	border-radius: 4px;
	transition: background 0.12s ease, border-color 0.15s ease;
}

.cais-card-editorial .job-item:hover {
	background: var(--color-background);
	border-top-color: var(--color-heading, var(--color-text));
	border-right-color: var(--color-heading, var(--color-text));
	border-bottom-color: var(--color-heading, var(--color-text));
}

.cais-card-editorial .job-item-logo {
	border-radius: 50%;
	border-color: var(--color-border);
}

/*
 * Monocromático de propósito — sobrescreve o fundo/cor tintados por
 * termo (.job-badge-c1..c5/-remote, jobs-listing.css acima) para todos
 * os badges usarem a MESMA tinta neutra, nunca a paleta rotativa —
 * "estilo de revista técnica", conforme pedido. Especificidade (2
 * classes) já vence .job-badge-cN (1 classe) sem precisar de
 * !important.
 */
.cais-card-editorial .job-badge {
	background: transparent;
	color: var(--color-text);
	border: 1px solid currentColor;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* ---------------- Bento / Contained (estruturado, denso) ---------------- */
.cais-card-bento .job-item {
	background: var(--cais-color-site-bg, #f8fafc);
	border-top-color: var(--color-border);
	border-right-color: var(--color-border);
	border-bottom-color: var(--color-border);
	border-radius: 12px;
	transition: background 0.12s ease;
}

.cais-card-bento .job-item:hover {
	background: var(--color-background);
}

.cais-card-bento .job-item-logo {
	border-radius: 8px;
	border-color: var(--color-border);
}

/*
 * Divisória interna só faz sentido em Grelha (.job-item-main e
 * .job-item-side já ficam empilhados verticalmente nesse modo) — em
 * Lista, os 2 blocos ficam lado a lado numa única linha, sem "topo"/
 * "rodapé" para separar. .job-item-logo + .job-item-main partilham a
 * "linha do cabeçalho" (logótipo ao lado do título/tags); .job-item-side
 * (tempo publicado + CTA) ocupa uma 2ª linha completa, com a divisória.
 * Layout conseguido só com Grid nos 3 filhos já existentes (logo/main/
 * side) — nenhuma marcação nova, nenhum wrapper adicional.
 */
.job-list.cais-card-bento.is-grid .job-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
}

.job-list.cais-card-bento.is-grid .job-item-logo {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.job-list.cais-card-bento.is-grid .job-item-main {
	grid-column: 2;
	grid-row: 1;
	width: auto;
}

.job-list.cais-card-bento.is-grid .job-item-side {
	grid-column: 1 / -1;
	grid-row: 2;
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-sm);
	margin-top: var(--space-sm);
}

/*
 * ---------------- Clássico / Original (v1.87.1) ----------------
 * Restaura o comportamento de antes da v1.86.0 em modo Lista: .job-list
 * volta a ser a caixa monolítica (fundo/borda/radius próprios), .job-item
 * volta a ser uma linha sem superfície própria, separada da seguinte só
 * por border-bottom. Modo Grelha nunca precisou de nenhuma redeclaração
 * de fundo/borda/radius — .job-item (base, acima) já dá exatamente o
 * visual "cartão simples" pedido (background var(--color-background),
 * border var(--color-border), border-radius var(--radius-md)=8px, o
 * mesmo valor sugerido na diretiva); só falta a sombra suave.
 */
/*
 * Especificidade (2 classes + :not(.is-grid), que soma a de .is-grid) já
 * vence a .job-list base (1 classe) sem precisar de !important — nunca um
 * atalho gratuito onde a cascata normal já resolve. "Espaço Entre as
 * Vagas" (v1.87.0) fica sem efeito visual aqui de propósito — uma caixa
 * monolítica não tem "espaço entre" itens, só a linha divisória abaixo.
 */
.job-list.cais-card-classic:not(.is-grid) {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	gap: 0;
}

.job-list.cais-card-classic:not(.is-grid) .job-item {
	background: transparent;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: none;
}

/*
 * Bug real, encontrado e corrigido na v1.88.0 (herdado desta regra desde
 * a v1.87.1, mas invisível até então — um divisor de 1px cinzento contra
 * "nenhum divisor" nunca se notou num screenshot; só ficou óbvio ao
 * testar com uma borda personalizada de destaque, v1.88.0): quando existe
 * uma zona de anúncio (content-jobs-listing.php injeta
 * #cais-ads-in-listing como <div> IRMÃO dos .job-item depois do 3º
 * resultado, sempre presente no DOM mesmo vazia — só ganha
 * fundo/padding via :empty em CSS), essa <div> passa a ser o VERDADEIRO
 * :last-child de .job-list, nunca o último .job-item — confirmado ao
 * vivo por inspeção direta de jobList.children. ":last-child" nunca
 * correspondia a nenhum .job-item nesse caso; ":last-of-type" corrige
 * pela raiz (compara por TAG — <a> — entre os irmãos, ignorando a <div>
 * intercalada, nunca por posição absoluta).
 */
.job-list.cais-card-classic:not(.is-grid) .job-item:last-of-type {
	border-bottom: none;
}

/*
 * Grelha: nenhuma regra para o contentor (.job-list.cais-card-classic.is-grid)
 * — já nunca teve fundo/borda própria (base .job-list.is-grid, v1.86.0),
 * exatamente o "transparente/sem borda" pedido, sem precisar de repetir
 * um valor que já é o default. Só a sombra suave é nova.
 */
.job-list.cais-card-classic.is-grid .job-item {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/*
 * Logótipo — o estilo Clássico nunca existiu com logótipo antes da
 * v1.86.0 (introduzido globalmente nessa fase); o quadrado simples já
 * dado pela base .job-item-logo (border-radius var(--radius-sm)=4px,
 * borda/fundo próprios) já cumpre "minimalista e neutro" sem precisar de
 * nenhum override aqui — documentado para nunca parecer um esquecimento.
 */

/*
 * ============ MOTOR GLOBAL DE EMBELEZAMENTO UI — BORDAS (v1.91.0) ============
 * Substitui por completo o Controlo Avançado de Bordas local da Listagem
 * (v1.88.0, .job-list.cais-custom-borders) — migrado para o motor global
 * (cais_global_ui_custom_borders), classe mestre única em <body>
 * (body.cais-global-ui-active), nunca mais uma classe em .job-list.
 *
 * Token único (--cais-global-border-final) definido UMA VEZ ao nível do
 * <body> — combina largura/cor/opacidade via color-mix(), mesma técnica
 * já usada para --color-primary-dark/-light desde a Paleta Global
 * (v1.85.0). Replicado em single-job.css (contexto de enqueue distinto,
 * nunca partilhado entre os dois ficheiros).
 *
 * Regra de Ouro preservada, idêntica à v1.88.0: NUNCA a shorthand
 * "border"/"border-left" em .job-item — só border-top/-right/-bottom
 * (longhand) — border-left-color fica sempre exclusivamente a cargo de
 * .accent-primary/.accent-none. !important justificado pela mesma razão
 * já documentada em v1.88.0: evitar depender de ordem no ficheiro contra
 * empates de especificidade (ex: .cais-card-editorial .job-item:hover).
 */
body.cais-global-ui-active {
	--cais-global-border-final: var(--cais-global-border-width, 1px) solid color-mix(in srgb, var(--cais-global-border-color, #E1E5E8) var(--cais-global-border-opacity, 100%), transparent);
}

body.cais-global-ui-active .job-list .job-item {
	border-top: var(--cais-global-border-final) !important;
	border-right: var(--cais-global-border-final) !important;
	border-bottom: var(--cais-global-border-final) !important;
}

/*
 * Exceção rigorosa preservada da v1.88.0: Clássico em modo Lista nunca
 * teve borda perimetral própria em .job-item (só o divisor inferior).
 */
body.cais-global-ui-active .job-list.cais-card-classic:not(.is-grid) .job-item {
	border-top: none !important;
	border-right: none !important;
	border-bottom: var(--cais-global-border-final) !important;
}

/*
 * :last-of-type, nunca :last-child — a zona de anúncio
 * (#cais-ads-in-listing) é sempre o verdadeiro último filho de .job-list
 * quando presente (mesma razão documentada na v1.88.0).
 */
body.cais-global-ui-active .job-list.cais-card-classic:not(.is-grid) .job-item:last-of-type {
	border-bottom: none !important;
}

/*
 * Pesquisa (.search-card) — capacidade NOVA nesta versão, nunca existiu
 * como controlo local. Border completa em SaaS/Bento (ambos partem de
 * "border: none" na base do respetivo Estilo, v1.90.0); Editorial
 * preserva a sua identidade "sublinhado" — só os inputs (já com
 * border-bottom próprio) passam a consumir o token global, nunca
 * .search-card em si (que já é background:transparent/sem borda por
 * desenho do Estilo).
 */
body.cais-global-ui-active .cais-search-saas.search-card,
body.cais-global-ui-active .cais-search-bento.search-card {
	border: var(--cais-global-border-final) !important;
}

body.cais-global-ui-active .cais-search-editorial .field input[type="text"],
body.cais-global-ui-active .cais-search-editorial .field select {
	border-bottom: var(--cais-global-border-final) !important;
}

/*
 * Alertas (.alert-banner) — mesma lógica: border completa em SaaS/Bento
 * (nenhum dos dois tem borda própria na base, v1.90.0); Editorial
 * preserva a sua identidade "faixa de destaque" (border-left), que passa
 * a ser configurável em vez do valor fixo "4px solid var(--color-primary)".
 */
body.cais-global-ui-active .cais-alert-saas.alert-banner,
body.cais-global-ui-active .cais-alert-bento.alert-banner {
	border: var(--cais-global-border-final) !important;
}

body.cais-global-ui-active .cais-alert-editorial.alert-banner {
	border-left: var(--cais-global-border-final) !important;
}

/*
 * ============ VISIBILIDADE DE ELEMENTOS (v1.87.0) ============
 * Classes no .job-list (o mesmo contentor que já recebe as classes
 * cais-card-N e is-grid), nunca body_class — scoped só a esta listagem.
 * Só CSS: os 3 elementos já são nós DOM próprios e sempre presentes
 * (nunca condicionados no PHP a estes toggles), garantindo reatividade
 * instantânea via postMessage.
 */
.job-list.cais-hide-logo .job-item-logo {
	display: none;
}

/*
 * Caso especial do Bento em Grelha: sem esta regra, esconder o logótipo
 * deixaria a coluna 1 do grid (grid-column:1, definida acima só para o
 * logótipo) vazia — .job-item-main nunca reflui sozinho para lá, porque
 * já tem grid-column:2 explícito. Faz .job-item-main ocupar as 2 colunas.
 */
.job-list.cais-hide-logo.cais-card-bento.is-grid .job-item-main {
	grid-column: 1 / -1;
}

.job-list.cais-hide-location .job-meta-location,
.job-list.cais-hide-location .job-meta-sep {
	display: none;
}

.job-list.cais-hide-date .job-time {
	display: none;
}

/*
 * ============ ESTILO DO BOTÃO "VER VAGA" (v1.87.0) ============
 * 'outline' (default) nunca precisa de regra própria — já É o visual
 * base de .btn-view acima (fundo var(--color-background), borda
 * var(--color-border)), preservado byte a byte para quem nunca abrir
 * esta secção do Customizer.
 */
.job-list.btn-style-solid .btn-view {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
}

/*
 * Sem este override, o hover genérico de .job-item:hover .btn-view
 * (acima — pensado para o contorno, troca border/color para
 * var(--color-primary)) tornaria o texto invisível sobre um fundo já
 * preenchido com a mesma cor.
 */
.job-list.btn-style-solid .job-item:hover .btn-view {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-primary-contrast, #ffffff) !important;
}

.job-list.btn-style-text .btn-view {
	background: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.job-list.btn-style-text .job-item:hover .btn-view {
	border-color: transparent;
	text-decoration: underline;
}

.load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--space-lg);
}

.btn-load-more {
	display: inline-block;
	padding: 0.75rem 1.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	font-weight: 600;
	font-size: var(--text-sm);
	cursor: pointer;
	text-decoration: none;
	color: var(--color-text);
}

.btn-load-more:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/*
 * ============ PAGINAÇÃO NUMÉRICA (v1.87.0) ============
 * Marcação própria do tema (nunca the_posts_pagination() nativo — essa
 * função espera a query PRINCIPAL do WordPress, nunca a query própria de
 * get_job_listings() usada aqui). Mesma linguagem visual de
 * .btn-load-more/.view-toggle já existentes nesta página.
 */
.jobs-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--space-lg);
}

.jobs-pagination .page-number,
.jobs-pagination .page-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-background);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
}

.jobs-pagination a.page-number:hover,
.jobs-pagination .page-nav:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.jobs-pagination .page-number.is-current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast, #ffffff) !important;
	cursor: default;
}

.jobs-pagination .page-nav svg {
	width: 15px;
	height: 15px;
}

.jobs-pagination .page-ellipsis {
	display: flex;
	align-items: flex-end;
	padding: 0 0.2rem;
	color: var(--color-text-secondary);
}

/* ============ SIDEBAR ============ */
/* Modo Escuro (v1.93.0) — mesmo bug/correção de blog.css: "color" no
   contentor, para qualquer widget nativo sem cor própria (ex: lista de
   Categorias do WordPress) nunca herdar preto absoluto do browser. */
.sidebar-card {
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

/*
 * Bug real encontrado só ao testar o Modo Escuro ao vivo (v1.93.0): nunca
 * teve "color" próprio — herdava o preto absoluto do browser (nenhum
 * elemento deste tema define "color" em body/html), invisível em modo
 * claro por coincidência (preto sobre branco lê-se normalmente), mas
 * ilegível sobre o novo fundo escuro. Fallback #0f172a (nunca um hex
 * novo) é visualmente indistinguível de preto em modo claro — zero
 * mudança para quem nunca ativar o Modo Escuro.
 */
.sidebar-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-base);
	color: var(--color-heading, #0f172a);
	margin-bottom: var(--space-md);
}

.sidebar-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sidebar-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--text-sm);
}

.sidebar-list li a:hover {
	color: var(--color-primary);
}

.sidebar-list .count {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
}

/* Widget "Cais — Artigos Recentes" */
.cais-recent-posts {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.sidebar-blog-item {
	display: flex;
	gap: var(--space-sm);
}

.sidebar-blog-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	display: block;
}

.sidebar-blog-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sidebar-blog-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.sidebar-blog-item a {
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.sidebar-blog-item a:hover {
	color: var(--color-primary);
}

.sidebar-blog-date {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

/* O reskin do modal "Criar Alerta" (.jm-dialog*) vive agora em
   assets/css/alert-modal.css, carregado só nas páginas onde o modal pode
   aparecer — ver cais_is_jobs_listing_page() em functions.php. */

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
	.page-layout {
		grid-template-columns: 1fr;
	}

	.search-grid {
		grid-template-columns: 1fr 1fr;
	}

	.btn-search {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.page-hero h1 {
		font-size: var(--text-2xl);
	}

	.search-grid {
		grid-template-columns: 1fr;
	}

	.job-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.job-item-side {
		width: 100%;
		justify-content: space-between;
	}

	.alert-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Mesmo tratamento que .btn-search já tem em mobile (acima) — estica
	   para a largura total do container; em desktop mantém o tamanho
	   intrínseco (align-items: center em .alert-banner, sem width). */
	.btn-alert {
		width: 100%;
		justify-content: center;
	}
}

/*
 * ============ MODO ESCURO (v1.93.2) ============
 * Decisão revista face à v1.93.0/v1.93.1: o banner "Nunca perca uma vaga
 * nova" (Estilo Clássico, --color-primary-light) deixa de ser tratado
 * como "cartão claro intencional" — passa a escurecer como o resto da
 * página. Empata em especificidade com .cais-alert-saas/.cais-alert-bento
 * (que já usam var(--color-background), mesmo valor) e com
 * .cais-alert-editorial (background:transparent) — como os 3 convergem
 * para o mesmo resultado visual (--color-background), não há conflito
 * real em quem "ganha" o empate por ordem no ficheiro.
 *
 * .alert-banner-text strong nunca teve "color" próprio (mesmo bug já
 * corrigido em .sidebar-title/.job-title/etc., v1.93.0/v1.93.1) — herdava
 * preto absoluto do browser.
 *
 * .job-item:hover (cor de hover das linhas da Listagem) usa a mesma
 * família de cinza quase-branco (#FAFCFB) sem token equivalente já
 * corrigida 26× nas v1.93.0/v1.93.1.
 */
html[data-theme="dark"] .alert-banner {
	background: var(--color-background);
}

html[data-theme="dark"] .alert-banner-text strong {
	color: var(--color-heading, #0f172a);
}

html[data-theme="dark"] .job-item:hover {
	background: var(--color-border);
}