/*
 * Concursos, Processos Seletivos e Licitações — o mesmo desenho do portal
 * anterior (grade de cartões, ficha em cartão branco, linha do tempo de
 * publicações e fases do certame). As três seções dividem estas classes
 * porque dividiam no legado: licitação e certame têm a mesma anatomia de
 * página — cabeçalho com tipo/número, ficha de fatos e histórico datado.
 *
 * Diferença de origem: no legado a marcação era montada no navegador
 * (site/js/concursos.js) e o CSS descrevia o que o JavaScript produzia. Aqui
 * quem monta é o servidor, então as classes descrevem o HTML das páginas
 * .astro — a geometria é a mesma, medida a medida.
 */

/* ===== Grade de cartões (listagem) ===== */
.concursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.concurso-card {
  display: block;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e6e9ec);
  border-radius: 12px;
  padding: 18px 20px;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.concurso-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
/* No legado o cartão INTEIRO era um <a>: o leitor de tela anunciava tipo,
   número, situação e metadados como se fossem o nome do link, e a linha
   inteira virava uma parada de teclado só. Aqui o link é o título; o realce
   de foco continua no cartão para que a mudança não se perca visualmente. */
.concurso-card:focus-within { box-shadow: 0 0 0 3px var(--c-primary-light, #dbe8fb); }
.concurso-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.concurso-tipo { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--c-text-muted, #686868); font-weight: 600; }
.concurso-card-title { font-size: 17px; margin: 0 0 10px; line-height: 1.3; }
.concurso-card-title a { color: inherit; text-decoration: none; }
.concurso-card-title a:hover { text-decoration: underline; }
.concurso-card-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--c-text-muted, #555); }

/* ===== Badge colorido por situação/tipo de documento =====
   `data-cor` é o token que a API manda junto de cada rótulo (`color`), e é o
   mesmo vocabulário do legado. Sem ele o badge fica cinza e a linha do tempo
   perde a leitura em diagonal — que é o motivo de ela existir. */
.br-tag[data-cor] { font-weight: 600; }
.br-tag[data-cor="success"]   { background: #d1e7dd; color: #0f5132; }
.br-tag[data-cor="primary"]   { background: #cfe2ff; color: #084298; }
.br-tag[data-cor="info"]      { background: #cff4fc; color: #055160; }
.br-tag[data-cor="secondary"] { background: #e2e3e5; color: #41464b; }
.br-tag[data-cor="warning"]   { background: #fff3cd; color: #664d03; }
.br-tag[data-cor="danger"]    { background: #f8d7da; color: #842029; }
.br-tag[data-cor="dark"]      { background: #d3d3d4; color: #1b1e21; }
.br-tag[data-cor="light"]     { background: #fcfcfd; color: #495057; border: 1px solid #e6e9ec; }
.br-tag.is-active { outline: 2px solid var(--c-primary, #1351b4); outline-offset: 1px; }

/* Filtros por situação: fila de tags clicáveis acima da grade. */
.listing-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.listing-tags .br-tag { text-decoration: none; cursor: pointer; }

/* ===== Ficha ===== */
.concurso-detail { background: var(--c-surface, #fff); border-radius: 12px; padding: 28px 32px; margin-top: 16px; }
.concurso-detail-head { border-bottom: 1px solid var(--c-border, #e6e9ec); padding-bottom: 16px; margin-bottom: 20px; }
.concurso-kicker { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-muted, #686868); font-weight: 600; margin-bottom: 4px; }
.concurso-detail-head h1 { margin: 4px 0 12px; }
.concurso-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 18px; }
.concurso-facts dt { font-weight: 600; color: var(--c-text-muted, #555); }
.concurso-facts dd { margin: 0; }
.concurso-body { margin: 18px 0; }

/* ===== Linha do tempo de publicações ===== */
.concurso-timeline { list-style: none; padding: 0; margin: 12px 0 0; border-left: 2px solid var(--c-border, #e6e9ec); }
.concurso-timeline-item {
  position: relative;
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0 16px 26px;
}
.concurso-timeline-item::before {
  content: ""; position: absolute; left: -7px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-primary, #1351b4); border: 2px solid var(--c-surface, #fff);
}
.concurso-timeline-date { flex: 0 0 90px; font-weight: 600; color: var(--c-text-muted, #555); font-size: 13px; }
.concurso-timeline-body { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; line-height: 1.45; }
/* Badges com largura uniforme — os títulos começam todos na mesma coluna. */
.concurso-timeline-body .br-tag { flex: 0 0 auto; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Título ocupa a coluna restante; ao quebrar, a 2ª linha alinha à 1ª (não sob o badge). */
.concurso-timeline-body > a, .concurso-timeline-body > span:not(.br-tag) { flex: 1 1 auto; min-width: 0; }
.concurso-timeline-body a { text-decoration: none; }
.concurso-timeline-body a:hover { text-decoration: underline; }
.concurso-timeline-body .file-type-icon { color: var(--c-text-muted, #7d7d7d); margin-left: 2px; }

/* ===== Fases do processo (concluída/atual/pendente) ===== */
.concurso-fases { list-style: none; padding: 0; margin: 12px 0 0; }
.concurso-fase { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.concurso-fase::before {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; background: var(--c-border, #e6e9ec);
}
.concurso-fase:last-child::before { display: none; }
.concurso-fase-node {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: var(--c-surface, #fff); border: 2px solid #e0e4ec; box-sizing: border-box;
}
.concurso-fase--concluida .concurso-fase-node { background: #157f3a; border-color: #157f3a; color: #fff; }
.concurso-fase--atual .concurso-fase-node { background: var(--c-primary, #1351b4); border-color: var(--c-primary, #1351b4); box-shadow: 0 0 0 4px #eaf0ff; }
.concurso-fase-body { min-width: 0; flex: 1 1 auto; padding-top: 1px; }
.concurso-fase-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.concurso-fase-label { font-weight: 700; font-size: 15px; }
.concurso-fase--pendente .concurso-fase-label { color: var(--c-text-muted, #7d7d7d); }
.concurso-fase-date { font-size: 13px; color: var(--c-text-muted, #7d7d7d); }
.concurso-fase-desc { margin: 3px 0 0; font-size: 13.5px; color: var(--c-text-muted, #555); }

@media (max-width: 560px) {
  .concurso-detail { padding: 20px; }
  .concurso-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .concurso-facts dd { margin-bottom: 8px; }
  .concurso-timeline-item { flex-direction: column; gap: 6px; }
  .concurso-timeline-date { flex-basis: auto; }
  .concurso-timeline-body .br-tag { min-width: 104px; }
}

/* ===== Alto contraste =====
   O legado não tinha estas regras porque também não tinha o modo — ele entrou
   na barra de acessibilidade do site novo (html.hc em site.css). Sem elas o
   cartão e a ficha continuariam com fundo branco enquanto o texto vira branco:
   a seção inteira sumiria justamente para quem liga o alto contraste. */
html.hc .concurso-card,
html.hc .concurso-detail,
html.hc .concurso-fase-node {
  background: #000 !important;
  border: 1px solid #FFCD07 !important;
  color: #fff !important;
}
html.hc .concurso-tipo,
html.hc .concurso-kicker,
html.hc .concurso-card-meta,
html.hc .concurso-timeline-date,
html.hc .concurso-facts dt,
html.hc .concurso-fase-date,
html.hc .concurso-fase-desc,
html.hc .concurso-fase--pendente .concurso-fase-label { color: #fff !important; }
html.hc .concurso-card-title a { color: #FFCD07 !important; }
html.hc .concurso-timeline { border-left-color: #FFCD07 !important; }
html.hc .concurso-timeline-item::before { background: #FFCD07 !important; border-color: #000 !important; }
html.hc .concurso-fase::before { background: #FFCD07 !important; }
html.hc .br-tag[data-cor] { background: #000 !important; color: #FFCD07 !important; border: 1px solid #FFCD07 !important; }