/* Front-end + editor styles for the bracis-figma/women-support block.

   A estrutura é a de uma página de call (nav de seções + rail de datas), mas
   a pele é a das páginas novas: eyebrow em leaf, títulos em caixa alta, cards
   com hairline e sombra baixa, acento gold reservado ao que é decisão. */

.bracis-wsupport {
  --ws-ink: #1c1d3a;
  --ws-slate: #5c5d7a;
  --ws-hairline: rgba(49, 50, 103, 0.1);
  --ws-gold: var(--wp--preset--color--gold, #E2C576);
  --ws-navy: var(--wp--preset--color--navy, #313267);
}

/* O hero de cada versão é full-bleed, então a geometria de coluna vive aqui e
   não no wrapper — mesmo eixo de .bracis-figma-page-hero-inner. */
.bracis-wsupport-layout {
  box-sizing: content-box;
  max-width: 1584px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 8.75vw, 168px);
  padding-block: 3rem;
}

/* ── Switch de idioma ─────────────────────────────────────────────── */

/* Dentro do hero, sobre o navy: quem chega numa língua e prefere a outra topa
   com o controle antes de começar a ler, e não depois de rolar meia página. */
.bracis-wsupport-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.bracis-wsupport-switch-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.bracis-wsupport-switch-track {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: rgba(255, 255, 255, 0.08);
}

.bracis-wsupport-switch-btn {
  min-width: 72px;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--wp--custom--radius--pill, 999px);
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bracis-wsupport-switch-btn:hover {
  color: #ffffff;
}

/* Gold no ativo: é o acento que o hero já usa na régua e na borda inferior. */
.bracis-wsupport-switch-btn.is-active {
  background: var(--ws-gold);
  color: var(--wp--preset--color--deep-navy, #24254d);
}

.bracis-wsupport-switch-btn:focus-visible {
  outline: 2px solid var(--ws-gold);
  outline-offset: 2px;
}

/* ── Layout ───────────────────────────────────────────────────────── */

.bracis-wsupport-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* A coluna não é estreitada aqui: cards, rail de datas e tabela de pontuação
   usam a largura toda. Quem tem medida de leitura limitada é o texto corrido,
   logo abaixo. */
.bracis-wsupport-content {
  min-width: 0;
  /* As duas colunas internas (texto + número, listas partidas) dependem da
     largura REAL desta coluna, não da janela: com o rail ao lado, uma media
     query de viewport abria duas colunas quando ainda não cabiam. */
  container-type: inline-size;
  container-name: wsupport;
}

/* ── Rail lateral ─────────────────────────────────────────────────── */

.bracis-wsupport-rail {
  position: sticky;
  /* Folga para o header do tema não cobrir o item ativo ao rolar. */
  top: 6rem;
}

/* Mesma escala dos títulos de seção (ver .bracis-wsupport-section-title): o
   índice e o rail de datas são cabeçalhos de primeiro nível na página, não
   legendas. Vão na Bebas dos títulos, com o tracking curto que ela pede em
   corpo grande. */
.bracis-wsupport-nav-title,
.bracis-wsupport-eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wp--preset--color--leaf, #32A64F);
}

.bracis-wsupport-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--ws-hairline);
}

.bracis-wsupport-nav-item {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ws-slate);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.bracis-wsupport-nav-item:hover,
.bracis-wsupport-nav-item:focus-visible {
  color: var(--ws-navy);
  border-left-color: var(--ws-gold);
}

.bracis-wsupport-rail-cta {
  margin-top: 2rem;
}

/* Dois documentos agora: o resultado em cima, preenchido, e o edital
   embaixo, contornado. Em bloco porque o rail é estreito e os rótulos quebram
   — dois botões inline de largura diferente pareciam desalinhados. */
.bracis-wsupport-rail-cta .bracis-wsupport-btn {
  display: block;
  text-align: center;
}

.bracis-wsupport-rail-cta .bracis-wsupport-btn + .bracis-wsupport-btn {
  margin-top: 0.75rem;
}

/* ── Botões ───────────────────────────────────────────────────────── */

.bracis-wsupport-btn {
  display: inline-block;
  /* O tema não normaliza box-sizing em <a>: sem isto, o `width: 100%` do
     mobile soma o padding e o botão vaza pela direita. */
  box-sizing: border-box;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bracis-wsupport-btn--primary {
  background: var(--ws-navy);
  color: #ffffff;
}

.bracis-wsupport-btn--primary:hover {
  background: var(--wp--preset--color--deep-navy, #24254d);
  color: #ffffff;
  transform: translateY(-1px);
}

.bracis-wsupport-btn--ghost {
  background: transparent;
  color: var(--ws-navy);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.bracis-wsupport-btn--ghost:hover {
  background: rgba(49, 50, 103, 0.06);
}

/* ── Rail de datas ────────────────────────────────────────────────── */

/* Sem botão, o card é uma coluna só — a coluna `auto` vazia ainda somava
   o column-gap à direita. */
.bracis-wsupport-dates--plain {
  grid-template-columns: minmax(0, 1fr);
}

/* Grid e não fluxo: o botão sobe para a mesma linha das datas, encostado na
   borda direita do card, em vez de pender sozinho embaixo à esquerda. */
.bracis-wsupport-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.75rem;
  margin-bottom: 3.5rem;
  padding: 1.6rem 1.8rem;
  background: #ffffff;
  border: 1px solid var(--ws-hairline);
  border-left: 4px solid var(--ws-gold);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(28, 29, 58, 0.06);
}

.bracis-wsupport-dates-head {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.bracis-wsupport-dates-head .bracis-wsupport-eyebrow {
  margin-bottom: 0.4rem;
}

.bracis-wsupport-dates-list {
  /* Sempre na coluna das datas: sem o botão ao lado (inscrição encerrada),
     o auto-placement a empurrava para a coluna vazia do botão. */
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.75rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.bracis-wsupport-date-label {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-slate);
}

/* Etapa vencida em cinza: o card continua contando a história da chamada,
   mas o olho vai direto para o que ainda está valendo. */
.bracis-wsupport-date.is-done .bracis-wsupport-date-label,
.bracis-wsupport-date.is-done .bracis-wsupport-date-value {
  color: #a3a4b8;
}

.bracis-wsupport-date-value {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: 1.7rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ws-navy);
}

/* O botão ocupa as duas linhas da coluna direita (título + datas) e se centra
   na altura do card inteiro: preso só à linha das datas, ele nascia com o
   deslocamento do cabeçalho e ficava sempre abaixo do meio. */
.bracis-wsupport-dates-cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}

/* Maior que os demais: é o botão que o card inteiro existe para oferecer, e ao
   lado de três blocos de data um botão de tamanho padrão desaparece. */
.bracis-wsupport-dates-cta .bracis-wsupport-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 84px;
  padding: 1.35rem 2.25rem;
  font-size: 1.35rem;
  text-align: center;
}

/* ── Destaque do resultado no menu ───────────────────────────────── */

.bracis-wsupport-nav-feature {
  display: block;
  box-sizing: border-box;
  margin: 0 0 1.1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background: var(--ws-gold);
  color: var(--wp--preset--color--deep-navy, #24254d);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.bracis-wsupport-nav-feature:hover,
.bracis-wsupport-nav-feature:focus-visible {
  background: #d8b65c;
  color: var(--wp--preset--color--deep-navy, #24254d);
  transform: translateY(-1px);
}

/* ── Seções ───────────────────────────────────────────────────────── */

.bracis-wsupport-section {
  margin-bottom: 3.75rem;
  /* Âncora não some sob o header ao pular pela nav lateral. */
  scroll-margin-top: 6rem;
}

.bracis-wsupport-section-index {
  margin: 0 0 0.3rem;
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  color: var(--ws-gold);
}

.bracis-wsupport-section-title {
  margin: 0 0 1.1rem;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ws-navy);
}

.bracis-wsupport-subtitle {
  margin: 2.5rem 0 1rem;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ws-navy);
}

/* Sem teto de medida: o texto acompanha a coluna inteira, por decisão de
   projeto — o rail à esquerda já é a margem. A entrelinha sobe junto porque
   é ela que sustenta a legibilidade quando a linha fica longa: sem isso o
   olho perde a linha seguinte no retorno. */
.bracis-wsupport-lead {
  margin: 0 0 1.15rem;
  font-size: 1.12rem;
  line-height: 1.78;
  color: var(--ws-slate);
}

.bracis-wsupport-lead a {
  color: var(--ws-navy);
  font-weight: 600;
  text-underline-offset: 3px;
}

.bracis-wsupport-fineprint {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ws-slate);
}

/* ── Abertura: texto e número lado a lado ─────────────────────────── */

/* A coluna de leitura sozinha deixava metade da largura vazia em telas
   grandes. O número-manchete ocupa essa faixa em vez de flutuar sobre o
   texto — e vira, de quebra, o resumo que a pessoa lê antes do corpo. */
.bracis-wsupport-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* Colunas do tamanho do que carregam, e não fatias iguais: assim "within 2
   days of the result" cabe numa linha só, como as duas datas. Só com folga —
   `auto` não encolhe, e no celular vazaria a tela. */
@container wsupport (min-width: 700px) {
  .bracis-wsupport-dates-list {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }
}

@container wsupport (min-width: 900px) {
  .bracis-wsupport-about {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 3rem;
  }

  .bracis-wsupport-figure {
    max-width: none;
  }
}

.bracis-wsupport-figure {
  /* Empilhado ele não deve virar uma faixa: o teto some quando o card sobe
     para a coluna da direita, logo abaixo. */
  max-width: 420px;
  padding: 1.5rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--ws-hairline);
  border-top: 3px solid var(--ws-gold);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(28, 29, 58, 0.05);
}

.bracis-wsupport-figure-value {
  display: block;
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--ws-navy);
}

.bracis-wsupport-figure-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ws-slate);
}

/* ── Listas ───────────────────────────────────────────────────────── */

.bracis-wsupport-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ws-slate);
  font-size: 1.08rem;
  line-height: 1.78;
}

.bracis-wsupport-list li + li {
  margin-top: 0.7rem;
}



.bracis-wsupport-list a {
  color: var(--ws-navy);
  text-underline-offset: 3px;
}

/* ── Cards ────────────────────────────────────────────────────────── */

.bracis-wsupport-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.bracis-wsupport-cards--duo {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bracis-wsupport-card {
  padding: 1.5rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--ws-hairline);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(28, 29, 58, 0.05);
}

.bracis-wsupport-card--accent {
  border-top: 3px solid var(--ws-gold);
}

.bracis-wsupport-card-title {
  margin: 0 0 0.7rem;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ws-navy);
}

.bracis-wsupport-card-text {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ws-slate);
}

/* ── Nota ─────────────────────────────────────────────────────────── */

/* Card âmbar das notas de /events (.bracis-figma-event-note), no corpo maior
   desta página. */
.bracis-wsupport-note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 1.35rem 1.6rem;
  background: #fff6df;
  border: 1px solid #f0c86a;
  border-radius: 12px;
}

.bracis-wsupport-note-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(226, 197, 118, 0.45);
  color: #7a5c1a;
}

.bracis-wsupport-note-content {
  min-width: 0;
}

.bracis-wsupport-note-title {
  margin: 0 0 0.45rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: #7a5c1a;
}

.bracis-wsupport-note-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #6b5a33;
}

/* ── Passos ───────────────────────────────────────────────────────── */

.bracis-wsupport-steps {
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.bracis-wsupport-step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--ws-hairline);
}

.bracis-wsupport-step:last-child {
  border-bottom: 1px solid var(--ws-hairline);
}

.bracis-wsupport-step-index {
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ws-gold);
}

.bracis-wsupport-step-title {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  color: var(--ws-navy);
}

.bracis-wsupport-step-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ws-slate);
}

/* ── Pontuação ────────────────────────────────────────────────────── */

.bracis-wsupport-scoring {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bracis-wsupport-scoring-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--ws-hairline);
}

.bracis-wsupport-scoring-row:last-child {
  border-bottom: 1px solid var(--ws-hairline);
}

.bracis-wsupport-scoring-points {
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ws-navy);
}

.bracis-wsupport-scoring-criterion {
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--ws-ink);
}

.bracis-wsupport-scoring-group {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ws-slate);
}

/* ── Painel do resultado ──────────────────────────────────────────── */

/* Card branco com topo gold, e não mais uma seção numerada solta no fundo
   da página: o resultado é um documento à parte, que vem depois do edital. */
.bracis-wsupport-outcome {
  margin-bottom: 1rem;
  padding: 2.5rem;
  background: #ffffff;
  border: 1px solid var(--ws-hairline);
  border-top: 6px solid var(--ws-gold);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(28, 29, 58, 0.08);
}

.bracis-wsupport-outcome-part {
  scroll-margin-top: 6rem;
}

.bracis-wsupport-outcome-part + .bracis-wsupport-outcome-part {
  margin-top: 2.75rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--ws-hairline);
}

/* Título à esquerda, documento oficial à direita, na mesma linha: o PDF é
   a fonte que prevalece, então ele fica ao lado do nome da seção. */
.bracis-wsupport-outcome-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.1rem;
}

.bracis-wsupport-outcome-head .bracis-wsupport-section-title {
  margin: 0;
}

/* O topo da página agora abre com o anúncio; o card de datas vem logo
   depois, com o respiro de sempre. */
.bracis-wsupport-cta.bracis-wsupport-cta--top {
  margin-bottom: 1.75rem;
}

/* ── Resultado: contempladas e lista de espera ────────────────────── */

/* Mesma régua da pontuação (filetes, número em Bebas), em três colunas:
   posição, nome, instituição. Nome e instituição dividem a largura porque
   os nomes das instituições são tão longos quanto os das pessoas. */
.bracis-wsupport-roster {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bracis-wsupport-roster-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--ws-hairline);
}

.bracis-wsupport-roster-row:last-child {
  border-bottom: 1px solid var(--ws-hairline);
}

.bracis-wsupport-roster-pos {
  font-family: var(--wp--preset--font-family--bebas-neue, "Bebas Neue", sans-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ws-gold);
}

.bracis-wsupport-roster-name {
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ws-ink);
}

.bracis-wsupport-roster-inst {
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ws-slate);
}

/* Cabeçalho discreto, no tom dos rótulos de grupo da pontuação. */
.bracis-wsupport-roster-head {
  padding-block: 0 0.55rem;
  border-top: 0;
}

.bracis-wsupport-roster-head span {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-slate);
}

/* A lista de espera não é contemplação: número em slate, não em gold, e
   nome sem peso — a hierarquia entre as duas listas fica visível de longe. */
.bracis-wsupport-roster--waitlist .bracis-wsupport-roster-pos {
  color: var(--ws-slate);
}

.bracis-wsupport-roster--waitlist .bracis-wsupport-roster-name {
  font-weight: 500;
}

@container wsupport (max-width: 620px) {
  .bracis-wsupport-roster-row {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .bracis-wsupport-roster-inst {
    grid-column: 2;
  }

  /* Empilhado, "Institution" no cabeçalho viraria uma linha órfã. */
  .bracis-wsupport-roster-head .bracis-wsupport-roster-inst {
    display: none;
  }
}

/* ── Aceite ───────────────────────────────────────────────────────── */

/* A nota abre a seção, logo abaixo do título: sem o respiro herdado de
   quando ela vinha depois de uma lista. */
.bracis-wsupport-note--first {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.bracis-wsupport-note-text a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}

.bracis-wsupport-contact {
  margin: 1.5rem 0 0;
}

/* ── CTA final ────────────────────────────────────────────────────── */

/* Gold e não navy: no fundo escuro o botão de candidatura era o único da
   página que não era azul. Sobre gold ele volta a ser o mesmo navy dos
   outros, e o bloco ecoa a faixa da home. */
.bracis-wsupport-cta {
  margin-bottom: 1rem;
  padding: 2.5rem;
  border-radius: 16px;
  background: var(--ws-gold);
  color: var(--wp--preset--color--deep-navy, #24254d);
}

.bracis-wsupport-cta-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--wp--preset--color--deep-navy, #24254d);
}

.bracis-wsupport-cta-text {
  margin: 0 0 1.75rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(36, 37, 77, 0.85);
}

/* Atalho para o painel do resultado, no fim da página: navy e sublinhado,
   como os links do corpo — sobre gold, um segundo botão brigaria com o PDF. */
.bracis-wsupport-cta-link {
  color: var(--wp--preset--color--deep-navy, #24254d);
  font-weight: 700;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.bracis-wsupport-cta-link:hover,
.bracis-wsupport-cta-link:focus-visible {
  color: #14153a;
  text-decoration-thickness: 2px;
}

.bracis-wsupport-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.bracis-wsupport-cta .bracis-wsupport-btn--ghost:hover {
  background: rgba(36, 37, 77, 0.1);
}

.bracis-wsupport-closed {
  margin: 0;
  font-weight: 600;
  color: var(--ws-slate);
}

/* ── Responsivo ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .bracis-wsupport-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* Sem coluna lateral a nav vira um índice comum no topo: sticky aqui
     comeria a tela inteira no celular. */
  .bracis-wsupport-rail {
    position: static;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ws-hairline);
  }

  .bracis-wsupport-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    border-left: 0;
  }

  /* Contorno e não preenchimento: o fundo da página já é claro, e uma pílula
     em fog sumia dentro dele. */
  .bracis-wsupport-nav-item {
    padding: 0.35rem 0.85rem;
    margin-left: 0;
    border-left: 0;
    border-radius: var(--wp--custom--radius--pill, 999px);
    box-shadow: inset 0 0 0 1px var(--ws-hairline);
    font-size: 0.88rem;
  }

  .bracis-wsupport-nav-item:hover,
  .bracis-wsupport-nav-item:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ws-gold);
    background: rgba(226, 197, 118, 0.18);
  }

  .bracis-wsupport-content {
    max-width: none;
  }
}

@container wsupport (max-width: 620px) {
  .bracis-wsupport-dates {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Empilhado o botão volta ao fluxo, abaixo das datas e inteiro. */
  .bracis-wsupport-dates-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    margin-top: 1.4rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--ws-hairline);
  }
}

@media (max-width: 600px) {
  .bracis-wsupport-dates,
  .bracis-wsupport-outcome,
  .bracis-wsupport-cta {
    padding: 1.5rem 1.25rem;
  }

  .bracis-wsupport-dates-cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    margin-top: 1.4rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--ws-hairline);
  }

  .bracis-wsupport-scoring-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }

  .bracis-wsupport-scoring-group {
    grid-column: 2;
    margin-top: -0.4rem;
  }

  .bracis-wsupport-btn {
    width: 100%;
    text-align: center;
  }
}