/* ==========================================================================
   Inscrições (page-inscricoes.php) — replicado da página Inscrições do tema
   CASJ, com as cores dos segmentos do CSH (as mesmas dos cards da Home) e
   os breakpoints do Bootstrap compilado do CSH (md 768, lg 1024).
   Arquivo separado do main.min.css (compilado do SCSS, cujas fontes não
   ficam no tema).
   ========================================================================== */

/* Introdução (título + texto + botão do Edital) */
.insc-intro__text {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.8;
}
.insc-intro__cta { margin-top: 32px; }
.insc-intro__cta i,
.insc-panel__btn i { margin-left: 8px; }

/* Abas + painel de cada nível — o fundo da section inteira (full-bleed,
   de ponta a ponta) acompanha a cor do nível selecionado (trocado via JS,
   ver initInscricoesTabs em inscricoes.js). */
.insc-niveis {
  padding-block: 64px;
  transition: background-color .3s ease;
}
.insc-niveis[data-insc-active="infantil"] { background: #FEC86D; }
.insc-niveis[data-insc-active="iniciais"] { background: #87D5EA; }
.insc-niveis[data-insc-active="finais"] { background: #BE1F24; }
.insc-niveis[data-insc-active="medio"] { background: #19437E; }

.insc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 48px;
}
.insc-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  /* Mesmo tamanho fixo pra todas as abas, baseado no rótulo mais largo
     ("Educação Infantil"), em vez de cada uma se ajustar ao próprio texto. */
  width: 250px;
  flex: 0 0 auto;
  padding-inline: 24px;
  border: 2px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #19437E;
  font-size: 18px;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* :not(.insc-tab--active) — sem ele, passar o mouse numa aba já
   selecionada sobrescrevia as cores dela, já que esta regra é mais
   específica que .insc-tab--active. */
.insc-tab:hover:not(.insc-tab--active) {
  background: #f4f7fc;
  border-color: #19437E;
  font-weight: 600;
}

/* Aba ativa: é a section (.insc-niveis) que fica com a cor do segmento,
   não o botão — o botão ativo vira "contorno" (fundo transparente). No
   CASJ o contorno é sempre branco; aqui, no amarelo e no azul-claro, branco
   ficava ilegível, então nesses dois o contorno é azul. */
.insc-tab--active {
  background: transparent;
  border-color: #19437E;
  color: #19437E;
  font-weight: 600;
}
.insc-niveis[data-insc-active="finais"] .insc-tab--active,
.insc-niveis[data-insc-active="medio"] .insc-tab--active {
  border-color: #fff;
  color: #fff;
}

.insc-panel {
  display: flex;
  align-items: flex-start;
  gap: 56px;
}
.insc-panel[hidden] { display: none; }

.insc-panel__info {
  flex: 1 1 480px;
  min-width: 0;
}
.insc-panel__title {
  font-weight: 600;
  color: #19437E;
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: 32px;
}

.insc-panel__conteudo {
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}
.insc-panel__conteudo p { margin: 0 0 16px; }
.insc-panel__conteudo strong { font-weight: 600; }

/* Vermelho (Anos Finais) e azul (Ensino Médio): texto branco, como nas
   seções .principios-primary/.principios-secondary das páginas de Ensino. */
.insc-niveis[data-insc-active="finais"] .insc-panel .insc-panel__title,
.insc-niveis[data-insc-active="finais"] .insc-panel .insc-panel__conteudo,
.insc-niveis[data-insc-active="medio"] .insc-panel .insc-panel__title,
.insc-niveis[data-insc-active="medio"] .insc-panel .insc-panel__conteudo { color: #fff; }

.insc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}

.insc-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.insc-panel__btn { width: 100%; }

/* Botões em cima do fundo vermelho (Anos Finais): o .btn-outline-secondary
   (azul) some no vermelho — contorno branco. No azul (Ensino Médio), como
   no CASJ, passam a amarelo pra manter leitura. Só no painel desktop — o
   acordeão mobile tem fundo claro próprio. */
.insc-niveis[data-insc-active="finais"] .insc-panel .insc-panel__btn {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #BE1F24;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #BE1F24;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}
.insc-niveis[data-insc-active="medio"] .insc-panel .insc-panel__btn {
  --bs-btn-color: #19437E;
  --bs-btn-bg: #FEC86D;
  --bs-btn-border-color: #FEC86D;
  --bs-btn-hover-color: #19437E;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #19437E;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.insc-panel__media {
  flex: 1 1 480px;
  min-width: 0;
}
.insc-panel__image {
  width: 100%;
  aspect-ratio: 628 / 582;
  border-radius: 16px;
  box-shadow: -8px 8px 10px 0 rgba(0, 0, 0, .1);
  overflow: hidden;
}
.insc-panel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023.98px) {
  .insc-panel { flex-direction: column-reverse; gap: 32px; }
  .insc-panel__info,
  .insc-panel__media { flex: 1 1 auto; width: 100%; }
}

/* Accordion (mobile) — mesmos níveis das abas, exibidos como sanfona. */
.insc-accordion { display: none; }

@media (max-width: 767.98px) {
  .insc-intro__text { font-size: 16px; }
  .insc-intro__cta {
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  .insc-tabs,
  .insc-panel { display: none; }
  /* Sem abas — o accordion mostra os 4 níveis ao mesmo tempo, cada um com
     sua própria cor de cabeçalho, então a section não deve ficar tingida
     com a cor de um "ativo" só. */
  .insc-niveis,
  .insc-niveis[data-insc-active] { background: #f4f7fc; padding-block: 20px; }
  .insc-accordion {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .insc-cols { grid-template-columns: 1fr; }

  /* No mobile o botão é preenchido de azul com texto branco — no desktop
     continua contorno. Em touch não existe :hover — :active dá o feedback
     de toque em vermelho. */
  .insc-panel__btn {
    min-width: 0;
    white-space: normal;
    --bs-btn-color: #fff;
    --bs-btn-bg: #19437E;
    --bs-btn-border-color: #19437E;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #BE1F24;
    --bs-btn-hover-border-color: #BE1F24;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #BE1F24;
    --bs-btn-active-border-color: #BE1F24;
  }
}

.insc-accordion__item { border-radius: 12px; overflow: hidden; }

.insc-accordion__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 60px;
  padding-inline: 24px;
  border: none;
  border-radius: 12px;
  background: #19437E;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-radius .2s ease;
}
.insc-accordion__item--open .insc-accordion__header { border-radius: 12px 12px 0 0; }
/* Texto azul no amarelo e no azul-claro (branco ficava ilegível), branco
   no vermelho e no azul — mesma regra das abas. */
.insc-accordion__item[data-insc="infantil"] .insc-accordion__header { background: #FEC86D; color: #19437E; }
.insc-accordion__item[data-insc="iniciais"] .insc-accordion__header { background: #87D5EA; color: #19437E; }
.insc-accordion__item[data-insc="finais"] .insc-accordion__header { background: #BE1F24; }
.insc-accordion__item[data-insc="medio"] .insc-accordion__header { background: #19437E; }
.insc-accordion__label {
  flex: 1 1 auto;
  font-size: clamp(13px, 3.7vw, 16px);
}
/* "(1º ao 5º ano)" não quebra no meio — se não couber na linha do texto
   principal, quebra inteiro pra linha seguinte, nunca dentro do parêntese. */
.insc-accordion__label-paren { white-space: nowrap; }
.insc-accordion__toggle { font-size: 14px; flex-shrink: 0; }

.insc-accordion__panel {
  display: none;
  background: #f4f7fc;
  border-radius: 0 0 12px 12px;
}
.insc-accordion__item--open .insc-accordion__panel { display: block; }
.insc-accordion__panel-inner {
  padding: 28px 20px 32px;
  text-align: center;
}
.insc-accordion__panel-inner .insc-panel__title { font-size: 20px; margin-bottom: 20px; }
.insc-accordion__panel-inner .insc-panel__conteudo { text-align: left; font-size: 16px; }
.insc-accordion__panel-inner .insc-cols { grid-template-columns: 1fr 1fr; gap: 0 16px; }
.insc-accordion__panel-inner .insc-panel__actions { margin-top: 20px; }