/* Página do portfólio (/jobs/) - espaço reservado pra navbar fixa. Altura
   exata da navbar (logo 78px + padding 16px topo/baixo + borda 1px = 111px),
   pro hero encostar nela sem sobrar vão. */
.jobs-page {
	position: relative;
	z-index: 1;
	padding-top: 111px;
}

/* Abaixo de 640px a navbar quebra pra 2 linhas (ícones sociais não cabem ao
   lado da logo + hambúrguer) e fica com 141px de altura real, não 111px -
   confirmado com Chrome real (getBoundingClientRect) em 375px de largura. */
@media screen and (max-width: 639px) {
	.jobs-page {
		padding-top: 141px;
	}
}

/* Hero "Times Square": mosaico de peças de tamanhos variados (imagem ou
   vídeo), seleção automática entre os jobs mais recentes (embaralhados a
   cada carregamento - ver archive-jobs.php). */
.jobs-hero {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0 0 48px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 90px;
	gap: 0;
}

/* Posição de cada peça vem das variáveis definidas inline por
   archive-jobs.php (dois padrões de largura que se alternam bloco a bloco -
   ver comentário lá). Em telas pequenas a media query abaixo ignora essas
   variáveis e usa um fluxo simples de 2 colunas. */
.jobs-hero-tile {
	position: relative;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	grid-column: var(--col-start) / var(--col-end);
	grid-row: var(--row-start) / var(--row-end);
}

.jobs-hero-tile img,
.jobs-hero-tile video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Ao passar o mouse, a imagem "sobe" revelando a parte de baixo - sem
   redimensionar o tile, só desloca o enquadramento dentro do espaço que já
   existe (object-fit: cover + overflow: hidden no tile cuidam do recorte). */
.jobs-hero-tile:hover img,
.jobs-hero-tile:hover video {
	animation: jobs-hero-pan-up 5s ease forwards;
}

@keyframes jobs-hero-pan-up {
	from {
		object-position: top;
	}
	to {
		object-position: bottom;
	}
}

@media (max-width: 780px) {
	.jobs-hero {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
	}

	/* No mobile abandonamos o mosaico de 6 colunas (ficaria pequeno demais)
	   e caímos num grid simples 2x1 por peça, deixando o navegador
	   posicionar automaticamente - sem buracos, sem recorte de proporção
	   maluco num tile tão estreito. */
	.jobs-hero-tile {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Filtros de categoria (.category-filters/.filter-btn) e o .hidden dos cards
   agora vivem em articles.css, compartilhados com o Blog. */

/* Lightbox - abre ao clicar em qualquer imagem/vídeo da página (hero e
   grid), já que os jobs não têm página própria (ver grcom_redirect_single_job
   em functions.php). JS em assets/js/jobs-lightbox.js. */
.jobs-hero-tile,
.job-card .thumb {
	cursor: zoom-in;
}

.jobs-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(0, 0, 0, 0.9);
}

.jobs-lightbox.is-open {
	display: flex;
}

.jobs-lightbox-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 90vw;
	max-height: 90vh;
}

.jobs-lightbox-content img,
.jobs-lightbox-content video {
	display: block;
	max-width: 90vw;
	max-height: 70vh;
	border-radius: 8px;
}

.jobs-lightbox-caption {
	max-width: 640px;
	text-align: center;
	color: white;
	font-family: system-ui, sans-serif;
	text-transform: none;
}

.jobs-lightbox-caption h3 {
	font-size: 1.2rem;
	margin-bottom: 6px;
}

.jobs-lightbox-caption p {
	font-size: .9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}

.jobs-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: white;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.jobs-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.22);
}