/* vitrine/vitrine.css — a vitrine pública de vagas (spec 2026-11-02).
   Tokens do /cliente (os NOMES são os do painel, os VALORES os do /cliente). ⚠️ --dourado é cor de
   SUPERFÍCIE (filete, fundo): sobre branco dá 2,72:1 e reprova como texto — texto dourado é
   --dourado-texto. Celular primeiro: gutter de 16px, nenhuma rolagem horizontal. */
:root {
  --tinta: #12283f; --suave-texto: #4a5d76; --linha: #dde1e6; --fundo: #eef3f8;
  --marca: #005090; --marca-clara: #0a6fc2; --marinho: #05265B;
  --dourado: #D09030; --dourado-texto: #8a5f10;
  --gelo-hex: #f0f4f8; --ok: #047857;
  --raio: 16px; --raio-controle: 12px; --raio-mini: 8px;
  --sombra: -3px 3px 10px rgba(0, 45, 95, .06), -10px 10px 30px rgba(0, 45, 95, .10);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--tinta); line-height: 1.5;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--marca); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* cabeçalho */
.vitrine-topo { background: #fff; border-bottom: 4px solid var(--dourado); }
.vitrine-marca { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1040px; margin: 0 auto; padding: 10px 16px; text-decoration: none; color: var(--tinta); }
.vitrine-marca img { height: 44px; width: auto; }
.vitrine-marca-texto { font-weight: 800; letter-spacing: .5px; color: var(--marca); padding-left: 12px; border-left: 1px solid var(--linha); }

/* conteúdo */
.vitrine-conteudo { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: 20px 16px 48px; }
.vitrine-cabecalho h1, .vaga-titulo { margin: 0 0 6px; font-size: 26px; line-height: 1.2; color: var(--marinho); }
.vitrine-sub, .vaga-sub { margin: 0 0 18px; color: var(--suave-texto); }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dourado-texto); }

/* busca */
.vitrine-busca { display: grid; grid-template-columns: 1fr; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); }
.busca-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--suave-texto); }
.busca-campo input, .busca-campo select { font: inherit; font-size: 16px; font-weight: 400; color: var(--tinta); min-height: 44px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: #fff; }
.botao-buscar { min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--raio-controle); background: var(--marca); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.botao-buscar:hover { background: var(--marca-clara); }
.vitrine-contagem { margin: 16px 0 10px; font-weight: 700; color: var(--suave-texto); }

/* cards */
.vitrine-lista { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vitrine-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--dourado); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.vitrine-card[hidden] { display: none; }
.card-titulo { margin: 0 0 4px; overflow-wrap: anywhere; font-size: 18px; line-height: 1.3; }
.card-titulo a { text-decoration: none; color: var(--marinho); }
.card-titulo a:hover { color: var(--marca-clara); text-decoration: underline; }
/* O link do título cobre o card inteiro: o toque em qualquer ponto abre a vaga (um link só). */
.card-titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.vitrine-card:hover { border-color: var(--marca-clara); }
.vitrine-card:focus-within { outline: 3px solid var(--marca-clara); outline-offset: 2px; }
.card-titulo a:focus-visible { outline: none; }
.card-meta, .card-posicoes, .card-publicada { margin: 2px 0; color: var(--suave-texto); font-size: 14px; }
.card-publicada { margin-top: auto; padding-top: 8px; }
.card-salario { margin: 6px 0 2px; font-weight: 700; color: var(--ok); }
.vitrine-vazio { background: #fff; border: 1px dashed var(--linha); border-radius: var(--raio); padding: 24px; text-align: center; color: var(--suave-texto); }

/* página da vaga */
.vaga-pagina { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px 16px 24px; box-shadow: var(--sombra); }
.vaga-bloco { margin-top: 22px; }
.vaga-bloco h2 { margin: 0 0 8px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--marca); border-bottom: 1px solid var(--linha); padding-bottom: 6px; }
.vaga-bloco p { margin: 0 0 8px; white-space: normal; overflow-wrap: anywhere; }
.vaga-bloco ul { margin: 0; padding-left: 20px; }
.vaga-dados { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vaga-dados li { background: var(--gelo-hex); border-radius: var(--raio-mini); padding: 8px 12px; min-width: 0; overflow-wrap: anywhere; }
.vaga-dados li span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--suave-texto); }
.vaga-pcd { background: var(--gelo-hex); border-radius: var(--raio-mini); padding: 12px; }
.vaga-pcd h2 { border: 0; padding: 0; }
.botao-candidatar { display: inline-block; width: 100%; text-align: center; min-height: 52px; line-height: 52px; padding: 0 20px; border-radius: var(--raio-controle); background: var(--marca); color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; }
.botao-candidatar:hover { background: var(--marca-clara); }
.vaga-acao { margin: 14px 0 6px; }
/* No celular o "Candidatar-se" do fim fica preso à base da tela enquanto se lê a vaga; por
   ser `sticky` dentro do artigo, ele volta ao lugar no fim do texto e nunca cobre o rodapé. */
.vaga-acao-fim { position: sticky; bottom: 0; z-index: 1; margin: 26px -16px 0; padding: 12px 16px;
                 padding-bottom: max(12px, env(safe-area-inset-bottom)); background: #fff;
                 border-top: 1px solid var(--linha); box-shadow: 0 -6px 16px rgba(0, 45, 95, .08); }
.vaga-voltar { margin: 18px 0 0; }
.vitrine-aviso { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 18px; text-align: center; box-shadow: var(--sombra); }
.vitrine-aviso h1 { font-size: 22px; color: var(--marinho); }

/* rodapé */
.vitrine-rodape { background: var(--marinho); color: #e7eefb; padding: 20px 16px 28px; }
.vitrine-rodape-nome { max-width: 1008px; margin: 0 auto 8px; font-weight: 800; }
.vitrine-redes { max-width: 1008px; margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; }
.vitrine-redes a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
                   border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #e7eefb;
                   font-weight: 600; text-decoration: none; }
.vitrine-redes a:hover, .vitrine-redes a:focus-visible { background: rgba(255, 255, 255, .12); border: 1px solid var(--dourado); color: #fff; }
.vitrine-redes svg { flex: none; width: 20px; height: 20px; }

@media (min-width: 720px) {
  .vitrine-busca { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; }
  .vitrine-lista { grid-template-columns: repeat(2, 1fr); }
  .vaga-dados { grid-template-columns: repeat(3, 1fr); }
  .vaga-pagina { padding: 28px 32px 32px; }
  .botao-candidatar { width: auto; min-width: 280px; }
  .vaga-acao-fim { position: static; margin: 26px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .vitrine-cabecalho h1, .vaga-titulo { font-size: 32px; }
}
@media (min-width: 1024px) {
  .vitrine-lista { grid-template-columns: repeat(3, 1fr); }
}