/* ==========================================================================
   CASJ — Inscrições (Figma: "Inscricoes", 3665:6412 / componente 3679:6539)
   ========================================================================== */

/* Introdução (título + texto + botão do Edital) */
.insc-intro {
  padding-block: 64px 48px;
  text-align: center;
}
.insc-intro__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 36px;
}
.insc-intro__text {
  max-width: 900px;
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--casj-cinza-texto);
}
.insc-intro__cta { margin-top: 32px; }

/* Abas + painel de cada nível — a section (.insc-niveis) agora é full-width;
   o max-width antes dela é do .container-casj interno, que centraliza tabs +
   painel/accordion (ver page-inscricoes.php). */
.insc-niveis {
  padding-block: 64px;
  transition: background-color .3s ease;
}
.insc-niveis > .container-casj {
  max-width: calc(1220px + 3rem) !important;
}

/* 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[data-insc-active="infantil"] { background: #fec86d; }
.insc-niveis[data-insc-active="iniciais"] { background: #87d5ea; }
.insc-niveis[data-insc-active="finais"] { background: var(--casj-vermelho); }
.insc-niveis[data-insc-active="medio"] { background: var(--casj-azul); }

.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: #0b192c;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* :not(.insc-tab--active) evita o mesmo problema do bloco abaixo — sem ele,
   passar o mouse numa aba já selecionada (fundo preenchido, texto branco)
   sobrescrevia o texto de volta pra azul, já que esta regra é mais
   específica que .insc-tab--active. */
.insc-tab:hover:not(.insc-tab--active) {
  background: #f4f7fc;
  border-color: var(--casj-azul);
  color: var(--casj-azul);
  font-weight: 600;
}
/* "Ensino Médio" usa azul como cor do próprio segmento (ver .insc-tab--active
   abaixo) — com o hover genérico acima, o texto ficava exatamente da mesma
   cor do botão "Faça sua inscrição" (btn-casj, sempre azul). Usa o azul
   escuro aqui pra diferenciar. :not(.insc-tab--active) evita que isso
   sobrescreva o texto branco quando a aba já está selecionada — sem isso,
   como este seletor é mais específico que .insc-tab--active, o hover
   trocava o texto de volta pra azul-escuro em cima do próprio fundo azul. */
.insc-tab[data-insc="medio"]:hover:not(.insc-tab--active) {
  border-color: var(--casj-azul-escuro);
  color: var(--casj-azul-escuro);
}

/* Aba ativa: agora é a section (.insc-niveis) que fica com a cor do
   segmento, não o botão — o botão ativo vira "contorno" branco (fundo
   transparente, borda e texto brancos) pra se destacar em cima desse fundo
   colorido, em vez de um preenchimento que se misturaria com ele. */
.insc-tab--active {
  background: transparent;
  border-color: #fff;
  color: #fff;
  font-weight: 600;
}

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

/* "Ensino Médio": a section fica com fundo azul quando esse nível está
   ativo (ver .insc-niveis[data-insc-active] acima) — um .btn-casj azul
   sólido ficaria ilegível em cima dela, então os botões desse painel
   passam a amarelo pra manter leitura. */
.insc-niveis[data-insc-active="medio"] .insc-panel__btn {
  background: var(--casj-amarelo);
  border-color: var(--casj-amarelo);
  color: #0b192c;
}
.insc-niveis[data-insc-active="medio"] .insc-panel__btn:hover {
  background: #fff;
  border-color: #fff;
  color: #0b192c;
}

.insc-panel__info {
  flex: 1 1 480px;
  min-width: 0;
}
.insc-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  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; }

.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--full { width: 100%; }

/* Anos Iniciais / Anos Finais: os dois primeiros botões (ex. "Inscrição 6º
   ao 8º ano" + "Inscrição 9º ano") no padding padrão do .btn-casj (36px de
   cada lado) não cabiam lado a lado na coluna de texto (480px) — mesmo
   tamanho/fonte, só com menos respiro interno, dividindo a largura
   disponível igualmente. */
.insc-panel__actions .insc-panel__btn:not(.insc-panel__btn--full) {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 2px;
  white-space: normal;
  text-align: center;
}

.insc-panel__media {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.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;
}
.insc-panel__caption {
  max-width: 529px;
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  text-align: center;
}

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

@media (max-width: 767.98px) {
  .insc-tab { height: 48px; padding-inline: 16px; font-size: 15px; }
  .insc-cols { grid-template-columns: 1fr; }
  .insc-panel__actions .insc-panel__btn:not(.insc-panel__btn--full) { flex: 1 1 auto; }

  /* .btn-casj tem height fixa de 56px — em telas estreitas o texto dos
     botões (ex. "Conteúdo Programático do 2º ao 5º ano") quebra em 2
     linhas e vazava por fora da borda, sobrepondo o conteúdo seguinte. */
  .insc-panel__btn {
    height: auto;
    min-height: 56px;
    padding: 14px 20px;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }

  /* Figma (3689:7056, "Faça sua inscrição"): no mobile o botão é preenchido
     de azul com texto branco — no desktop continua .btn-casj padrão
     (contorno, transparente). Em touch não existe :hover — :active dá o
     feedback de toque em vermelho; :hover cobre mobile com mouse/trackpad. */
  .insc-panel__btn {
    background: var(--casj-azul);
    border-color: var(--casj-azul);
    color: #fff;
  }
  .insc-panel__btn:hover,
  .insc-panel__btn:active { background: var(--casj-vermelho); border-color: var(--casj-vermelho); }
}

/* Capa da página (título menor no mobile, Figma: tela "Inscricoes" 3689:6760) */
.page-hero--inscricoes .page-hero__title {
  font-size: 22px;
}
@media (max-width: 767.98px) {
  .page-hero--inscricoes .page-hero__title { font-size: 16px; }
}

@media (max-width: 767.98px) {
  .insc-intro { padding-block: 40px 32px; background: #fff; }
  .insc-intro__title { font-size: 26px; }
  /* Mesmo padrão de tamanho dos botões mobile das páginas de Ensino (ex:
     .ei-cta .btn-casj) — largura total, sem quebrar linha, fonte fluida. */
  .insc-intro__cta {
    width: 100%;
    padding-inline: 16px;
    white-space: nowrap;
    font-size: clamp(13px, 4.2vw, 20px);
  }
}

/* Accordion (mobile) — mesmos níveis das abas, exibidos como sanfona
   (Figma: botão "InscricoesMobile", 3689:6965, variantes aberto/fechado) */
.insc-accordion { display: none; }

@media (max-width: 767.98px) {
  .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 (ver .insc-accordion__item acima), 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: 0; padding-block: 20px; }
  .insc-accordion {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}

.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: var(--casj-azul);
  color: #fff;
  font-family: "Poppins", sans-serif;
  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; }
.insc-accordion__item[data-insc="infantil"] .insc-accordion__header { background: #fec86d; }
.insc-accordion__item[data-insc="iniciais"] .insc-accordion__header { background: #87d5ea; }
.insc-accordion__item[data-insc="finais"] .insc-accordion__header { background: var(--casj-vermelho); }
.insc-accordion__item[data-insc="medio"] .insc-accordion__header { background: var(--casj-azul); }
.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; }
/* Sem foto no acordeão mobile — só texto e ações. */
.insc-accordion__panel-inner .insc-panel__image { display: none; }
.insc-accordion__panel-inner .insc-panel__caption { margin-top: 16px; font-size: 15px; }
.insc-accordion__panel-inner .insc-panel__actions { margin-top: 20px; }