/* ==========================================================================
   SELO DE PRAZO E VAGAS — prz-
   Um bloco de chamada com o selo de quanto falta, concedido pelo script.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --radius-media --radius-pill --ease
   ========================================================================== */

.prz{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  padding:clamp(26px,3.4vw,48px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 4%,var(--bg));
}
.prz-apoio{margin-top:16px;font-size:15.5px;line-height:1.6;color:var(--fg-2);max-inline-size:56ch}

.prz-lado{display:grid;gap:14px;justify-items:start}

/* Os selos nascem vazios: sem script, nenhum. O script escreve um <span> por
   afirmação que consegue sustentar (prazo, vagas). */
.prz-selos{display:flex;flex-wrap:wrap;gap:8px}
.prz-selos:empty{display:none}
.prz-selo{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.02em;color:var(--fg);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);padding:6px 12px;
}
.prz-selo::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--fg-muted)}
/* Perto do fim (menos de 3 dias, ou até 20% das vagas): o ponto acende na cor
   de marca. É a única ênfase — nada pisca, nada treme. */
.prz-selo.is-perto{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.prz-selo.is-perto::before{background:var(--accent)}

/* A barra de lugares ocupados. A largura entra por --prz-k (0 a 1), escrita
   pelo script. aria-hidden: o selo já diz o número por extenso. */
.prz-barra{
  inline-size:100%;block-size:4px;border-radius:var(--radius-pill);
  background:var(--rule);overflow:hidden;
}
.prz-barra[hidden]{display:none}
.prz-barra-in{
  display:block;block-size:100%;inline-size:100%;
  background:var(--accent);
  transform-origin:0 50%;transform:scaleX(var(--prz-k,0));
  transition:transform .9s var(--ease);
}
@media(prefers-reduced-motion:reduce){
  .prz-barra-in{transition:none}
}

.prz-acao{margin-top:4px}
.prz-fim{font-size:14px;line-height:1.55;color:var(--fg-2);max-inline-size:36ch}
.prz-fim[hidden]{display:none}

@media(max-width:860px){
  .prz{grid-template-columns:1fr;align-items:start}
}