/* ============================================================
   VagasTrans — vitrine de oportunidades e detalhe da vaga.
   Carregada só nestas duas telas.

   Mesma gramática da home (`home.css`): abertura sobre campo violeta
   profundo com o espectro atrás do texto, corpo claro, revelação na
   rolagem por CSS scroll-driven e nada de JavaScript.

   O que muda: aqui o conteúdo é uma **lista de trabalho real**, não uma
   apresentação. A hierarquia serve à decisão de quem procura emprego —
   título, quem oferece, onde, e em que condições — e não à retórica.
   ============================================================ */

:root {
  --espectro-vitrine: linear-gradient(90deg,
    #5BCEFA 0%, #8B7BE8 38%, #C86BB0 68%, #F5A9B8 100%);
}

/* --- abertura -------------------------------------------------------- */

.vitrine-topo,
.vaga-topo {
  position: relative;
  background: #2B0E3D;
  color: #fff;
  padding-block: var(--space-16);
  overflow: hidden;
}

/* Brilho de espectro atrás do texto: decorativo, atrás do conteúdo, e sem
   `position: fixed` para não custar repaint na rolagem. */
.vitrine-topo::before,
.vaga-topo::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto;
  height: 150%;
  background: linear-gradient(120deg,
    rgba(91,206,250,.20), rgba(168,85,201,.18), rgba(245,169,184,.20));
  filter: blur(70px);
  z-index: 0;
}
.vitrine-topo .container,
.vaga-topo .container { position: relative; z-index: 1; }

.olho-claro {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  margin-bottom: var(--space-3);
}

.vitrine-topo h1,
.vaga-topo h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.1;
  text-wrap: balance;
  margin-bottom: var(--space-4);
  max-width: 20ch;
}

/* O gradiente no texto precisa de fallback: sem `background-clip: text` a
   cor transparente deixaria a palavra invisível, não colorida. */
.gradiente-texto { color: #F5A9B8; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradiente-texto {
    background: var(--espectro-vitrine);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.vitrine-lead {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: rgba(255,255,255,.86);
  max-width: 62ch;
  margin-bottom: 0;
}

.vitrine-corpo { padding-block: var(--space-12) var(--space-16); }

/* --- filtros ---------------------------------------------------------- */

.filtros-x {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
  /* Sobe sobre a faixa escura: liga a abertura à lista, e diz que filtrar é
     a primeira ação da tela, sem precisar de seta ou instrução. */
  margin-top: calc(var(--space-16) * -1);
  position: relative;
  z-index: 2;
}

/* Duas colunas já no celular. Empilhado, o bloco passava de 600 px de altura
   e empurrava a primeira vaga para fora da tela — numa vitrine de emprego,
   quem chega quer ver vaga e depois refinar, não preencher formulário antes
   de saber se há o que filtrar. Os rótulos são curtos e cabem em 390 px. */
.filtros-x-grade {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.campo-busca { grid-column: 1 / -1; }
.filtros-x-acoes { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .filtros-x-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .filtros-x-grade { grid-template-columns: 2fr 1.4fr 0.8fr 1.2fr 1.2fr auto; }
  .campo-busca,
  .filtros-x-acoes { grid-column: auto; }
}

.filtros-x .campo { margin-bottom: 0; }
.filtros-x label {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.filtros-x input,
.filtros-x select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .9375rem;
  background: var(--surface);
  color: var(--ink);
  min-height: 44px;   /* alvo de toque */
}
.filtros-x input:focus-visible,
.filtros-x select:focus-visible {
  outline: 3px solid var(--brand-violet);
  outline-offset: 1px;
}

.filtros-x-acoes { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.filtros-x-acoes .btn { min-height: 44px; }

/* --- filtros ativos --------------------------------------------------- */

.filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.filtros-ativos-rotulo { font-size: .875rem; color: var(--muted); }
.filtro-tag {
  background: var(--brand-violet-soft);
  color: var(--brand-violet-deep);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: .8125rem;
}

.vitrine-contagem {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
  color: var(--muted);
}
.vitrine-contagem strong { color: var(--ink); font-size: 1.125rem; }

/* --- cartões de vaga --------------------------------------------------- */

.vagas-x { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

@media (min-width: 900px) {
  .vagas-x { grid-template-columns: repeat(2, 1fr); }
}

.vaga-x-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vaga-x-card:hover {
  border-color: #CFC3E4;
  box-shadow: 0 10px 30px rgba(69,24,95,.10);
  transform: translateY(-2px);
}

.vaga-x-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.vaga-x-titulo {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}

/* O link está no título e se estica sobre o cartão: quem clica em qualquer
   ponto vai para a vaga, e quem navega por teclado recebe **um** foco, com o
   nome da vaga como rótulo. O anel de foco é desenhado no cartão, não no
   texto, para acompanhar a área que de fato responde ao clique. */
.vaga-x-titulo a {
  color: inherit;
  text-decoration: none;
}
.vaga-x-titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.vaga-x-titulo a:hover { text-decoration: underline; }
.vaga-x-card:has(.vaga-x-titulo a:focus-visible) {
  outline: 3px solid var(--brand-violet);
  outline-offset: 2px;
}
/* Sem `:has`, o foco fica no texto do título — menos bonito, nunca invisível. */
@supports not selector(:has(a)) {
  .vaga-x-titulo a:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 2px; }
}
.vaga-x-prazo {
  flex: none;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--warning);
  white-space: nowrap;
}

.vaga-x-instituicao {
  margin: 0;
  color: var(--muted);
  font-size: .9375rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vaga-x-chips { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-local { background: #E8F1F7; color: var(--accent-sky-ink); }
.chip-aberto { background: #E8F5EC; color: #1E6B3A; }

/* Cada sinalização é um item próprio, e não texto separado por ponto: quando
   a lista quebrava de linha, o separador caía no começo da linha seguinte e
   parecia um marcador solto. Contorno em vez de fundo cheio para não competir
   com os chips acima, que são a informação primária da vaga. */
.vaga-x-acolhimentos {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.acolhimento {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px var(--space-3);
  background: var(--bg);
}

.vaga-x-seta {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 700;
  font-size: .875rem;
  color: var(--brand-violet);
}

/* --- selo da instituição ----------------------------------------------- */

.selo-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: 999px;
  padding: 2px var(--space-2);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.selo-tag svg { height: .75rem; width: auto; flex: none; }

/* As cores acompanham as do medalhão (`selo_service.PALETA_NIVEL`), em
   versão clara: aqui o fundo é branco, não o campo escuro do selo. */
.selo-tag-aderente     { background: #E4F3FB; color: #0E6E93; }
.selo-tag-comprometido { background: #FBE9F3; color: #A03A78; }
.selo-tag-referencia   { background: #FBF0E0; color: #8A5A16; }

.selo-tag-claro {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* --- estado vazio ------------------------------------------------------ */

.vitrine-vazia {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.vitrine-vazia-arte { width: 120px; height: auto; margin-bottom: var(--space-6); }
.vitrine-vazia h2 { font-size: 1.5rem; margin-bottom: var(--space-3); text-wrap: balance; }
.vitrine-vazia p {
  color: var(--muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* --- detalhe da vaga --------------------------------------------------- */

.voltar {
  display: inline-block;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .9375rem;
  margin-bottom: var(--space-6);
}
.voltar:hover { color: #fff; text-decoration: underline; }

.vaga-topo-instituicao {
  font-size: 1.125rem;
  color: rgba(255,255,255,.88);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.vaga-topo-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: 0; }
.chip-claro { background: rgba(255,255,255,.16); color: #fff; }

.vaga-topo-prazo {
  margin-top: var(--space-5);
  margin-bottom: 0;
  font-size: .9375rem;
  color: rgba(255,255,255,.82);
  border-inline-start: 3px solid rgba(255,255,255,.35);
  padding-inline-start: var(--space-4);
}

.vaga-corpo {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-16);
}

@media (min-width: 940px) {
  .vaga-corpo { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-12); align-items: start; }
}

.bloco-vaga {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.bloco-vaga h2 { font-size: 1.25rem; margin-bottom: var(--space-4); }
.bloco-vaga:last-child { margin-bottom: 0; }

.bloco-acolhimento { border-color: #D8E9DD; background: #FAFDFB; }

.lista-acolhimento { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.lista-acolhimento li { display: flex; align-items: flex-start; gap: var(--space-3); }
.marca-item {
  flex: none;
  inline-size: .5rem; block-size: .5rem;
  margin-block-start: .45rem;
  border-radius: 50%;
  background: var(--espectro-vitrine);
}

/* A coluna de ação acompanha a rolagem em tela larga: a decisão de se
   candidatar costuma acontecer no meio da leitura da descrição, e obrigar a
   voltar ao topo é o tipo de atrito que faz a pessoa desistir. */
@media (min-width: 940px) {
  .vaga-acao { position: sticky; top: var(--space-6); }
}

.vaga-acao-caixa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-6);
}
.vaga-acao-caixa h2 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.vaga-acao-caixa p { color: var(--muted); font-size: .9375rem; }

.btn-bloco { display: block; width: 100%; text-align: center; margin-bottom: var(--space-3); }
.btn-bloco:last-of-type { margin-bottom: 0; }

.vaga-acao-nota {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  margin-bottom: 0;
}

/* --- revelação na rolagem ---------------------------------------------
   Progressiva: sem suporte a scroll-driven animations, o conteúdo aparece
   pronto. `.revela` não tem estado inicial fora do @supports, justamente
   para que nada dependa da animação para ficar visível. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: revelar-vitrine linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

@keyframes revelar-vitrine {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}