/* foup-botoes.css — alinhamento e proporção de botões (27/09/2026).
   Revisão visual em 4 lotes (desktop 1366/1920, Android, iPhone; PT/EN/ES), cada ajuste testado por injeção.
   Carregado pelo navbar.php (x3). Cada regra é presa a um seletor da própria seção/página. Cores da marca inalteradas. */

/* B1-01 — Home: cards de Programas lado a lado com alturas diferentes e "Conhecer o Programa" desalinhado */
@media (min-width:768px){
#fp-home-programas .swiper-slide{height:auto!important}
#fp-home-programas .swiper-slide>.item-inner,
#fp-home-programas .swiper-slide>.item-inner>.card{height:100%}
#fp-home-programas .swiper-slide .card-body{display:flex;flex-direction:column;align-items:flex-start}
#fp-home-programas .swiper-slide .card-body>a{margin-top:auto}
}

/* B1-02 — Home: carrossel 3D de eventos com três "Saiba Mais" de tamanhos diferentes, os de trás sem funcionar e o 3º cortado ao meio */
#carrossel-proximos-eventos .swiper-slide{transition-property:transform,opacity}
#carrossel-proximos-eventos .swiper-slide .card-body .btn{transition:opacity .25s}
#carrossel-proximos-eventos .swiper-slide:not(.swiper-slide-active) .card-body .btn{opacity:0;pointer-events:none}
#carrossel-proximos-eventos .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){opacity:0}
@media (max-width:767.98px){#carrossel-proximos-eventos .swiper-slide:not(.swiper-slide-active){opacity:0}}
/* Para limitar só à home, prefixar cada seletor com body.fp-home */

/* B1-03 — /sobre: os três "Saiba mais" (Justificativa / Objetivo Geral / Objetivos Específicos) desalinhados 16px */
@media (min-width:768px){
.row.gy-6.text-center:has(>div>a.more[href="#objgeral"])>div{display:flex;flex-direction:column;align-items:center}
.row.gy-6.text-center:has(>div>a.more[href="#objgeral"])>div>a.more{margin-top:auto}
}

/* B1-05 — Rodapé das páginas legais: botão "Inscrever-se" com cantos arredondados na junção com o campo de e-mail */
#mc-embedded-subscribe-form2 .input-group>#mc-embedded-subscribe2{border-radius:0 10px 10px 0!important}

/* B1-06 — Home desktop: par "Faça Parte / Saiba Mais" do "Sobre Nós" menor que os demais CTAs da página */
@media (min-width:992px){body.fp-home .col-lg-6.text-lg-end>a.btn:not(.btn-lg){min-height:46px;display:inline-flex;align-items:center;justify-content:center}}

/* B2-01 — Banco de Boas Práticas: botões do herói colados na borda inferior do bloco escuro */
section.wrapper:has(> .bbp-hero-img){padding-bottom:64px;}
@media (max-width:991.98px){section.wrapper:has(> .bbp-hero-img){padding-bottom:56px;}}

/* B2-02 — Banco: no celular os dois botões do herói empilham com larguras diferentes */
@media (max-width:575.98px){
  section.wrapper:has(> .bbp-hero-img) [data-group="page-title-buttons"]{flex-direction:column;align-items:center;gap:12px!important;}
  section.wrapper:has(> .bbp-hero-img) [data-group="page-title-buttons"] > span{width:min(100%,280px);}
  section.wrapper:has(> .bbp-hero-img) [data-group="page-title-buttons"] .btn{width:100%;}
}

/* B2-03 — Programas: a última linha de cards fica encostada à esquerda, com um buraco à direita */
.row.g-4:has(a.btn[href$="ciepi"]):has(a.btn[href$="formacao-capacitacao"]){justify-content:center;}

/* B2-04 — Programas: botões dos cards com 5 larguras diferentes na mesma grade */
.row.g-4:has(a.btn[href$="ciepi"]):has(a.btn[href$="formacao-capacitacao"]) .card-body > div > a.btn.rounded-pill{min-width:212px;}

/* B2-05 — Jovens e Cidades pela Paz: "Enviar" centralizado e pequeno sob formulário alinhado à esquerda */
#form_jovens .col-md-12.text-center,#form_cidade .col-md-12.text-center{text-align:left!important;}
#form_jovens .col-md-12 > input[type=button].btn,#form_cidade .col-md-12 > input[type=button].btn{min-width:160px;}
@media (max-width:767.98px){#form_jovens .col-md-12 > input[type=button].btn,#form_cidade .col-md-12 > input[type=button].btn{width:100%;}}

/* B2-06 — Envio de produção (/submit): na sanfona de membro só o texto é clicável (250x25 no Android) */
#accordionExample:has(#form_submit_acesso) > .card > .card-header{padding:0}
#accordionExample:has(#form_submit_acesso) > .card > .card-header > button{display:block;width:100%;min-height:44px;padding:18px 26px 17px 46px;text-align:left}

/* B2-07 — Formação: seta "‹" desativada (35%) fica por cima do 1º card dos trilhos no desktop */
@media (min-width:880px){.fc-rail-wrap .fc-rail-nav[aria-disabled="true"]{opacity:0;pointer-events:none;}}

/* B2-08 — CIEPI: "Faça Parte" de Pesquisadores com fonte de 20 px, maior que os outros dois e que o texto do bloco */
.ciepi-pesq-btn-group .ciepi-pesq-btn-primary{font-size:16px;padding:14px 28px;}

/* B3-01 — Publicações no celular: filtro de categorias só aparece depois dos 25 cards */
@media (max-width:991.98px){
  .row:has(> .col-lg-8 #fp-pub-lista) > aside.sidebar{display:contents}
  .row:has(> .col-lg-8 #fp-pub-lista) > aside.sidebar > .widget{order:3;width:100%;padding-inline:calc(var(--bs-gutter-x) * .5)}
  .row:has(> .col-lg-8 #fp-pub-lista) > aside.sidebar > .widget:first-of-type{margin-top:3rem}
  .row:has(> .col-lg-8 #fp-pub-lista) > aside.sidebar > .widget:has([data-fp-filtro]){order:-1;margin:0 0 .5rem}
}

/* B3-02 — Publicações no desktop: 'Ver Publicação' em alturas diferentes nos cards da mesma linha */
@media (min-width:1200px){
  #fp-pub-lista > [data-tipo] > .card > .card-body{display:flex;flex-direction:column}
  #fp-pub-lista > [data-tipo] > .card > .card-body > .fp-pub-link,
  #fp-pub-lista > [data-tipo] > .card > .card-body > .fp-pub-indisp{margin-top:auto;align-self:center}
}

/* B3-03 — Blog (listagem): grade em alvenaria desalinha 'Leia mais' e deixa buraco na última linha */
.row.isotope:has(> article.item.post){height:auto!important}
.row.isotope > article.item.post{position:relative!important;left:auto!important;top:auto!important;transform:none!important}
.row.isotope > article.item.post > .card{height:100%}
.row.isotope > article.item.post > .card > .card-body{display:flex;flex-direction:column}
.row.isotope > article.item.post .post-content{flex:1 1 auto;display:flex;flex-direction:column}
.row.isotope > article.item.post .fp-leia-mais{margin-top:auto;align-self:flex-start}

/* B3-04 — Eixo aberto: itens de 'Atribuições' parecem botões (e a pílula deforma em 2 linhas no celular) */
.row:has(.box-coordenacao) ul.list-unstyled > li.rounded-pill.bg-gray{border-radius:8px!important;text-align:left!important;border-color:transparent!important;font-weight:600!important;padding:.6rem 1rem!important;cursor:default}

/* B3-05 — Agenda EN/ES: rótulo do mês parece botão, card sozinho fica à esquerda sob rótulo centralizado, e o layout difere do PT */
#calendario > .col-12.d-flex.justify-content-center{justify-content:flex-start!important;margin:2.5rem 0 .5rem!important}
#calendario > .col-12.d-flex.justify-content-center > div{border:0!important;border-bottom:2px solid #eee!important;border-radius:0!important;background:none!important;box-shadow:none!important;min-width:0!important;width:100%;padding:0 0 8px!important;text-align:left!important}
#calendario > .col-12.d-flex.justify-content-center h5{text-transform:uppercase;letter-spacing:1px;font-weight:700}

/* B3-06 — Blog no celular/tablet: título-link do card com 38px (maior que no desktop, 23px) */
@media (max-width:991.98px){
  .row.isotope > article.item.post h2.post-title.h3{font-size:1.15rem!important;line-height:1.3}
}

/* B3-07 — Publicações (desktop): pílulas de filtro em escada que muda por idioma; 'Contribuir' menor que os filtros */
@media (min-width:992px){
  aside.sidebar ul.tag-list:has([data-fp-filtro]){display:inline-grid;gap:.5rem;margin-bottom:0}
  aside.sidebar ul.tag-list:has([data-fp-filtro]) > li{margin:0!important}
  aside.sidebar ul.tag-list [data-fp-filtro]{width:100%;justify-content:center}
}
aside.sidebar .widget > a.btn.btn-primary[href$="submit"]{min-height:46px;align-items:center}

/* B3-08 — 'Ver Todos os Eventos' / 'Ver Mais' ocupam a largura toda no desktop (1030–1110px) com rótulo de 15px */
@media (min-width:768px){
  #btn-ver-mais{width:fit-content!important;min-width:18rem;display:flex;margin-inline:auto;justify-content:center}
}

/* B3-09 — Agenda PT: bloco da data com largura variável desloca título e 'Saiba Mais' 4px entre cards */
#calendario > .col-12 > .d-flex > .flex-shrink-0:first-child{width:120px;min-width:120px!important}

/* B4-01 — /submit: o cartão do formulário invade o rodapé e cobre os títulos */
section.wrapper:has(#form_submit_acesso){padding-bottom:2.5rem}
section.wrapper:has(#form_submit_acesso) .card[class*="my-lg-n"]{margin-bottom:0!important}

/* B4-02 — Cabeçalho ES no desktop: o menu transborda e o logo sai do centro */
@media (min-width:1200px) and (max-width:1399.98px){
  .navbar.center-logo .navbar-collapse .navbar-nav > .nav-item > .nav-link{padding-left:.35rem!important;padding-right:.35rem!important}
  .navbar.center-logo .offcanvas-header > a{margin-left:1.4rem!important;margin-right:1.4rem!important}
}

/* B4-03 — Cartões de etapa: 'Confirmação' quebra no meio da palavra */
@media (min-width:1200px) and (max-width:1399.98px){
  #area_inscricao .card.bg-soft-orange > .card-body{padding-left:.7rem!important;padding-right:.7rem!important}
}

/* B4-04 — Voluntário: só 2 cartões de etapa numa grade de 3, com buraco à direita */
@media (min-width:1200px){
  #area_inscricao > .row > .col-xl-4:first-child:nth-last-child(2),
  #area_inscricao > .row > .col-xl-4:first-child:nth-last-child(2) ~ .col-xl-4{flex:0 0 auto;width:50%}
}

/* B4-05 — Botões 'Sim, minha IES já participa' e 'Não · continuar como voluntário' empilhados com larguras diferentes */
.foup-rota-passo{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.foup-rota-passo > p{flex:0 0 100%}
.foup-rota-passo > .btn{flex:1 1 auto;margin:0!important;justify-content:center}

/* B4-06 — Organograma da Governança: botões da mesma linha com larguras diferentes e fonte pesada */
@media (min-width:992px){
  .fp-org .botao{width:236px!important;min-height:104px;font-size:1.15rem!important}
}

/* B4-08 — Cabeçalho desktop: 'Faça Parte/Join Us/Participa' colado na letra do idioma */
@media (min-width:992px){
  .navbar.center-logo .navbar-nav > .nav-item.language-select + .nav-item{margin-left:.5rem}
}

/* B4-09 — Instituições Signatárias: botão 'Cadastre sua Instituição' com fonte de 30px */
section.wrapper.bg-soft-blue .row.text-center .btn.btn-lg.btn-outline-primary.display-6{font-size:1rem!important;line-height:1.3!important;padding:.8rem 2rem!important;margin-top:.25rem}

/* B4-10 — Cabeçalho no celular: hambúrguer mais alto e mais baixo que o 'Faça Parte' */
@media (max-width:991.98px){
  .navbar .hamburger.offcanvas-nav-btn{margin-top:0!important;width:44px!important;height:44px!important}
}

/* B4-11 — Menu do hambúrguer: setas dos submenus acima da linha do texto */
@media (max-width:991.98px){
  .offcanvas-nav .navbar-nav .nav-item.dropdown:not(.language-select) > .dropdown-toggle::after{top:50%!important;transform:translateY(-50%)}
  .offcanvas-nav .navbar-nav .nav-item.dropdown.fp-open:not(.language-select) > .dropdown-toggle::after{transform:translateY(-50%) rotate(180deg)}
}

