/* ============================================================
   Propostas da campanha: a listagem por eixo e cada proposta.
   Carrega por cima de post.css, que já traz a coluna de leitura.
   ============================================================ */

/* O aviso eleitoral é o mesmo da home, que tem folha própria. */
.camp-aviso{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--regua-2);background:var(--branco);
  padding:7px 12px 7px 7px;margin-bottom:22px;
  font-family:var(--f-meta);font-size:10.5px;letter-spacing:.04em;line-height:1.45;color:var(--tinta-2);
}

.camp-aviso b{flex:none;font-family:var(--f-ui);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--vermelho);color:#fff;padding:4px 9px}

/* ---------- cabeçalho da listagem ---------- */
.prop-cab{padding-block:40px 6px;max-width:820px}

.prop-cab h1{font-family:var(--f-tit);font-size:clamp(34px,5.4vw,62px);line-height:.96;text-transform:uppercase;letter-spacing:-.025em}

.prop-cab .arq-desc p{margin:0 0 12px}

.prop-cab .arq-desc p:last-child{margin:0}

/* Os eixos viram atalho: com vinte e tantas propostas, achar a sua é o
   primeiro trabalho de quem chega. */
.prop-eixos{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.prop-eixos a{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--tinta);border:1px solid var(--regua-2);background:var(--branco);padding:8px 12px}

.prop-eixos span{font-family:var(--f-meta);font-weight:500;font-size:11px;color:var(--tinta-3)}

.prop-eixos a:hover{border-color:var(--vermelho);color:var(--vermelho)}

.prop-eixos a:hover span{color:var(--vermelho)}

/* ---------- eixos ---------- */
.prop-corpo{padding-block:24px 60px}

.prop-eixo{padding-top:34px;scroll-margin-top:80px}

.prop-eixo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:4px solid var(--tinta);padding-top:14px;margin-bottom:6px}

.prop-eixo-cab h2{font-family:var(--f-tit);font-size:clamp(22px,2.8vw,30px);line-height:1.05;text-transform:uppercase;letter-spacing:-.015em}

.prop-eixo-cab p{margin:0;font-size:15px;color:var(--tinta-2);max-width:56ch}

/* ---------- a lista de propostas ---------- */
.prop-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:34px}

@media (max-width:760px){.prop-lista{grid-template-columns:1fr}}

.prop-lista li{border-bottom:1px solid var(--regua)}

.prop-lista a{display:grid;grid-template-columns:40px 1fr;column-gap:16px;align-items:start;padding:18px 0;text-decoration:none;color:inherit;height:100%;box-sizing:border-box}

.prop-lista .n{grid-row:1 / span 2;font-family:var(--f-tit);font-size:20px;line-height:1;padding-top:2px;color:var(--vermelho);letter-spacing:.02em}

/* O ícone ocupa a mesma coluna do número, numa caixa quadrada: os desenhos
   do Font Awesome têm larguras diferentes e, soltos, desalinhavam a lista. */

.prop-lista .n.ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--vermelho-fraco);color:var(--vermelho);align-self:start}

.prop-lista .n.ic svg{width:20px;height:20px}

.prop-lista a:hover .n.ic{background:var(--vermelho);color:#fff}


.prop-lista .ic ~ h3{padding-top:9px}

.prop-lista h3{font-family:var(--f-ui);font-weight:700;font-size:18px;line-height:1.24;margin:0}

.prop-lista p{grid-column:2;margin:6px 0 0;font-size:14.5px;line-height:1.46;color:var(--tinta-2)}

.prop-lista a:hover h3{color:var(--vermelho);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.prop-lista a:focus-visible{outline:2px solid var(--vermelho);outline-offset:2px}

/* ---------- a proposta ---------- */
.proposta .post-cab{padding-bottom:10px}

.prop-tit.com-icone{display:flex;align-items:center;gap:18px;margin-bottom:16px}

.prop-tit.com-icone h1{margin-bottom:0}

.prop-ic{flex:none;display:flex;align-items:center;justify-content:center;width:clamp(48px,6vw,64px);aspect-ratio:1;background:var(--vermelho);color:#fff}

.prop-ic svg{width:52%;height:52%}

.prop-frase{max-width:760px;margin:6px 0 26px;padding:4px 0 4px 22px;border-left:6px solid var(--vermelho)}

.prop-frase p{margin:0;font-family:var(--f-txt);font-style:italic;font-size:clamp(20px,2.4vw,25px);line-height:1.36;color:var(--tinta)}

/* Os documentos originais têm muita lista: espaço menor entre itens que
   entre parágrafos, para a lista ler como bloco. */
.proposta .post-corpo ul li{margin-bottom:6px}

.prop-vizinhas{padding-block:10px 60px}

.prop-vizinhas h2{font-family:var(--f-tit);font-size:clamp(19px,2.2vw,24px);text-transform:uppercase;letter-spacing:-.015em;border-top:4px solid var(--tinta);padding-top:14px}

.prop-vizinhas .prop-lista{margin-bottom:26px}

.prop-vizinhas .bt{display:inline-block}

@media print{
  .camp-aviso,.prop-vizinhas{display:none !important}

  .prop-frase{border-left:2pt solid #000}

  .prop-frase p{font-size:13pt;color:#000}
}