/* =============================================================
   SPAR — Ofertas de emprego (banner, filtros, lista + detalhe)
   Depende de tokens.css.
   ============================================================= */

/* -------------------------------------------------------------
   Banner: componente .banner-pagina (websitespar.css).
   Imagem emprego.png (1920x350): 0.43 x 1920/350 = 2.36.
   ------------------------------------------------------------- */
.banner-pagina--emprego {
  --banner-triangulo: 2.36;
  --banner-posicao: left center;
}

/* -------------------------------------------------------------
   Filtros: quatro campos iguais, lado a lado, e os botoes no fim.
   O .page-form da as pilulas aos campos; aqui tira-se o que o
   .page-form traz de caixa de formulario (fundo, margem, 900px).
   ------------------------------------------------------------- */
.page-form.emprego-filtros {
  width: var(--moldura);
  max-width: none;
  margin: var(--sp-6) auto 0;
  padding: 0;
  background: none;
}

.emprego-filtros-grelha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: var(--sp-3);
}

.emprego-filtro {
  min-width: 0;
}

/* Nomes dos filtros (Funcao, Loja, Distrito, Horario) a verde SPAR. */
.emprego-filtros .emprego-filtro label {
  color: var(--spar-green);
}

/* O Bootstrap (.form-control) tira a seta aos <select>: repoe-se uma
   igual para todos. Cor da seta = --spar-ink-muted (#5c5c5c), escrita
   no SVG porque um data-URI nao le variaveis CSS. */
.emprego-filtros select {
  padding-right: var(--sp-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235c5c5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 14px;
  cursor: pointer;
}

/* A Loja (com pesquisa) usa o Tom Select, com o aspeto definido em
   websitespar.css — a mesma pilula de 44px dos outros filtros. */

.emprego-filtros-accoes {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* .page-form button[type="submit"] (websitespar.css) poe 16px de margem
   em cima: aqui empurrava o botao para baixo e o "Limpar" parecia subido. */
.emprego-filtros-accoes button[type="submit"] {
  min-height: 44px;
  margin-top: 0;
}

/* Botao secundario: pilula com contorno cinzento muito claro, da mesma
   altura do "Pesquisar". */
.emprego-limpar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--spar-ink-muted);
  text-decoration: none;
  background-color: var(--spar-surface);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-pill);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.emprego-limpar:hover {
  color: var(--spar-ink);
  background-color: var(--spar-surface-alt);
  border-color: var(--spar-line-strong);
}

/* -------------------------------------------------------------
   Duas colunas: lista a esquerda, detalhe a direita
   ------------------------------------------------------------- */
.emprego-layout {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: var(--sp-6);
  width: var(--moldura);
  margin: var(--sp-5) auto var(--sp-7);
  align-items: start;
}

.emprego-contagem {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--spar-ink-muted);
}

.emprego-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Scroll interno das ofertas (max-height posto pelo script: 5 cartoes).
   O padding deixa respirar a sombra e o contorno do cartao ativo; a
   margem negativa compensa-o, para os cartoes continuarem alinhados. */
.emprego-lista-scroll {
  position: relative;          /* referencia do offsetTop dos cartoes */
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: -6px -12px -6px -6px;
  padding: 6px 12px 6px 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--spar-line-strong) transparent;
}

.emprego-lista-dica {
  margin: 0;
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--spar-ink-muted);
}

.emprego-detalhe {
  min-width: 0;
}

/* -------------------------------------------------------------
   Cartao de oferta — ao estilo dos cartoes das lojas
   ------------------------------------------------------------- */
.anuncio-cartao {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-lg);
  background-color: var(--spar-surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.anuncio-cartao:hover {
  border-color: var(--spar-line-strong);
  box-shadow: var(--shadow-lg);
}

.anuncio-cartao:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

/* Oferta aberta no painel da direita. */
.anuncio-cartao.is-ativo {
  border-color: var(--spar-green);
  box-shadow: 0 0 0 2px var(--spar-green), var(--shadow-lg);
}

.anuncio-cartao-icone {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background-color: var(--spar-success-bg);
}

.anuncio-cartao-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
}

.anuncio-cartao-titulo {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--spar-ink);
  transition: color var(--t-fast);
}

.anuncio-cartao:hover .anuncio-cartao-titulo,
.anuncio-cartao.is-ativo .anuncio-cartao-titulo {
  color: var(--spar-green-text);
}

.anuncio-cartao-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--spar-ink-muted);
}

.anuncio-cartao-linha img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Etiqueta do horario, na mesma linha da loja. */
.anuncio-cartao-horario {
  margin-left: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--spar-green-text);
  background-color: var(--spar-success-bg);
}

/* -------------------------------------------------------------
   Candidatura espontanea: cartao em relevo no fim da pagina, com a
   largura da lista de ofertas.
   ------------------------------------------------------------- */
.emprego-espontanea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: var(--moldura);
  margin: 0 auto var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background-color: var(--spar-surface-relevo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: background-color var(--t-base);
}

/* Ao passar o rato, verde muito clarinho. */
.emprego-espontanea:hover {
  background-color: var(--spar-success-bg);
}

.emprego-espontanea-titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--spar-red);
}

/* Sem limite de largura: a frase cabe numa linha em ecra largo (antes
   quebrava depois de "o que"). */
.emprego-espontanea-texto p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--spar-ink);
}

.emprego-espontanea .link-botao-verde {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------
   Painel de detalhe
   ------------------------------------------------------------- */
.info-content {
  min-height: 320px;
}

/* Oferta aberta (emprego/emprego_detalhe.html): cartao em relevo com o
   titulo e o botao no topo, loja + horario + data numa linha, o texto
   da oferta e uma chamada final. */
.oferta {
  padding: var(--sp-6);
  background-color: var(--spar-surface-relevo);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.oferta-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--spar-line);
}

.oferta-cabecalho {
  flex: 1 1 320px;
  min-width: 0;
}

.oferta .oferta-titulo {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  color: var(--spar-green);
  text-wrap: balance;
}

/* Loja, horario e data numa so linha (quebra so se nao couber). */
.oferta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body);
  color: var(--spar-ink);
}

.oferta-meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.oferta-meta .bi {
  color: var(--spar-red);
}

.oferta-meta .bi-calendar3 {
  color: var(--spar-ink-muted);
}

.oferta-horario {
  padding: 2px var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--spar-green-text);
  background-color: var(--spar-success-bg);
  border-radius: var(--radius-pill);
}

.oferta-candidatar {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.oferta-candidatar .bi {
  transition: transform var(--t-fast);
}

.oferta-candidatar:hover .bi {
  transform: translateX(3px);
}

/* O texto vem do backoffice (TinyMCE): so se afina a leitura. */
.oferta-texto {
  max-width: 75ch;
  padding: var(--sp-5) 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--spar-ink);
}

.oferta-texto p {
  margin: 0 0 var(--sp-3);
}

.oferta-texto strong {
  color: var(--spar-green-text);
}

.oferta-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--spar-success-bg);
  border-radius: var(--radius-md);
}

.oferta-fim p {
  margin: 0;
  color: var(--spar-ink);
}

.oferta-fim strong {
  color: var(--spar-green-text);
}

@media (max-width: 768px) {
  .oferta {
    padding: var(--sp-4);
  }

  .oferta-candidatar {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------
   Estados: vazio, a carregar, erro
   ------------------------------------------------------------- */
.estado-vazio,
.estado-erro,
.estado-carregando {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--spar-ink-muted);
  border: 1px dashed var(--spar-line-strong);
  border-radius: var(--radius-lg);
  background-color: var(--spar-surface-alt);
}

.estado-erro {
  border-style: solid;
  border-color: var(--spar-danger);
  background-color: var(--spar-danger-bg);
  color: var(--spar-ink);
}

.estado-vazio-titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--spar-ink);
}

.estado-vazio p,
.estado-erro p {
  margin: 0 0 var(--sp-2);
}

.estado-carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--spar-line-strong);
  border-top-color: var(--spar-green-action);
  border-radius: 50%;
  animation: spar-rodar 700ms linear infinite;
}

@keyframes spar-rodar {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .emprego-filtros-grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emprego-filtros-accoes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .page-form.emprego-filtros {
    width: var(--moldura);
  }

  .emprego-espontanea {
    flex-direction: column;
    align-items: flex-start;
    width: var(--moldura);
    padding: var(--sp-4);
  }

  .emprego-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    width: var(--moldura);
  }

  .info-content {
    min-height: 0;
  }

  .estado-vazio,
  .estado-erro,
  .estado-carregando {
    padding: var(--sp-5) var(--sp-3);
  }
}

@media (max-width: 520px) {
  .emprego-filtros-grelha {
    grid-template-columns: minmax(0, 1fr);
  }
}