/* ==========================================================================
   CASJ — Home (index.html)
   ========================================================================== */

.hero-swiper {
  position: relative;
  height: 560px;
}
.hero-swiper .swiper,
.hero-swiper .swiper-wrapper,
.hero-slide { height: 100%; }
.hero-slide {
  position: relative;
  overflow: hidden;
}
.hero-slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slide__media--mobile { display: none; }
.hero-slide__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-swiper__nav-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.hero-swiper__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  padding: 16px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-radius: 28px;
  border: 1px solid #FFF;
  background: transparent;
  pointer-events: auto;
  transition: background .2s ease;
}
.hero-swiper__nav svg { display: block; }
.hero-swiper__nav:hover { background: rgba(255, 255, 255, .15); }
.hero-swiper__nav--prev { left: 0; transform: scaleX(-1); }
.hero-swiper__nav--next { right: 0; }

@media (max-width: 575.98px) {
  .hero-swiper { height: 280px; }
  /* Cada slide já carrega uma mídia dedicada para mobile (imagem/vídeo
     configurados no Customizer); aqui só alternamos qual <img>/<video> fica visível. */
  .hero-slide__media--desktop { display: none; }
  .hero-slide__media--mobile { display: block; }
  .hero-swiper__nav { display: none; }
}

.segments {
  display: flex;
  justify-content: center;
  transform: translateY(-63px);
  margin-bottom: -63px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.segment-card {
  position: relative;
  width: 288px;
  min-height: 220px;
  padding: 34px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--casj-shadow-soft);
  transition: background-color .2s ease;
}
.segment-card:hover { color: #fff; }
.segment-card:first-child { border-radius: 12px 0 0 12px; }
.segment-card:last-child { border-radius: 0 12px 12px 0; }

/* Linha branca simulando o "vazado" entre um card e o próximo */
.segment-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 2.5px -50%;
  width: 5px;
  height: 85%;
  background: #fff;
  border-radius: 5px;
  z-index: 3;
}

@media (max-width: 1199.98px) {
  .segment-card:not(:last-child)::after { display: none; }
}
.segment-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: background-color .2s ease;
}
.segment-card__icon img { width: 32px; height: 32px; }
.segment-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 32px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.segment-card__rule { width: 50px; height: 2px; flex-shrink: 0; transition: background-color .2s ease; }

/* Cores exatas do componente CARD no Figma — no hover, o fundo do card e a cor
   da regra (rule) trocam de lugar entre si */
.segment-card--infantil { background: #fec86d; }
.segment-card--infantil .segment-card__rule { background: #ffb537; }
.segment-card--infantil .segment-card__icon { background: #ffb02c; }
.segment-card--infantil:hover { background: #ffb02c; }
.segment-card--infantil:hover .segment-card__rule { background: #ffcc77; }
.segment-card--infantil:hover .segment-card__icon { background: #fec86d; }

.segment-card--iniciais { background: #87d5ea; }
.segment-card--iniciais .segment-card__rule { background: #3fbcde; }
.segment-card--iniciais .segment-card__icon { background: #3fbcde; }
.segment-card--iniciais:hover { background: #3fbcde; }
.segment-card--iniciais:hover .segment-card__rule { background: #87d5ea; }
.segment-card--iniciais:hover .segment-card__icon { background: #87d5ea; }

.segment-card--finais { background: var(--casj-vermelho); }
.segment-card--finais .segment-card__rule { background: #b00006; }
.segment-card--finais .segment-card__icon { background: #b00006; }
.segment-card--finais:hover { background: #b00006; }
.segment-card--finais:hover .segment-card__rule { background: var(--casj-vermelho); }
.segment-card--finais:hover .segment-card__icon { background: var(--casj-vermelho); }

.segment-card--medio { background: var(--casj-azul); }
.segment-card--medio .segment-card__rule { background: #104081; }
.segment-card--medio .segment-card__icon { background: #104081; }
.segment-card--medio:hover .segment-card__icon { background: var(--casj-azul); }
.segment-card--medio:hover { background: #104081; }
.segment-card--medio:hover .segment-card__rule { background: var(--casj-azul); }

@media (max-width: 1199.98px) {
  .segments { transform: none; margin-bottom: 0; margin-top: -40px; }
  .segment-card { width: 45%; border-radius: 12px !important; margin: 6px; }
}
@media (max-width: 575.98px) {
  .segment-card { width: 100%; }
  /* Figma (frame mobile "Home"): a faixa de atalhos por segmento não aparece
     no mobile — o hero vai direto para o "Bem-vindo ao Colégio", já que os
     mesmos links já estão disponíveis no menu "Ensino" do cabeçalho mobile. */
  .segments { display: none; }
}

.welcome { background: linear-gradient(to top, #87d5ea 35%, #fff 35%); padding-block: 96px 64px; text-align: center; }
/* Sem o vídeo institucional (link/capa vazios no Customizer), a faixa
   azul não tem mais o card do vídeo pra "flutuar" por cima — o degradê
   vira só branco (ver casj_tem_video_institucional() em front-page.php). */
.welcome--sem-video { background: linear-gradient(to top, #87d5ea 0%, #fff 0%); }
.welcome__text { max-width: 1000px; margin-inline: auto; font-weight: 300; font-size: 20px; color: #000; }
.welcome__text strong { font-weight: 600; }
@media (max-width: 575.98px) {
  /* Sem os cards de segmento sobrepondo o hero, o respiro grande de 96px não é mais necessário */
  .welcome { padding-block: 40px 48px; }
  /* No mobile, a faixa azul (welcome → diferenciais → números) some — as 3
     sections ficam com fundo branco. */
  .welcome { background: #fff; }
}

/* .welcome-video / .welcome-video__play agora são globais (style.css),
   reaproveitadas também em Sobre | Vídeo Institucional. */

.diferenciais { background: #87d5ea; padding-block: 64px; text-align: center; }
.diferenciais .section-heading { margin-bottom: 40px; }
.diferenciais__panel {
  position: relative;
  overflow: hidden;
  background-color: #eceff5;
  background-image: url("../img/dif/bg-acolhimento.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  transition: background-image .2s ease;
  border-radius: 12px;
  padding: 48px 48px 56px;
  text-align: left;
}
.diferenciais__row { --bs-gutter-x: 68px; }

.dif-tabs { display: flex; flex-direction: column; gap: 10px; }
.dif-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 70px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--casj-azul);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  padding: 0 26px;
  transition: background-color .2s ease, color .2s ease;
}
.dif-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 13px;
  border-radius: 12px 0 0 12px;
  background: #3fbcde;
  opacity: 0;
  transition: opacity .2s ease;
}
.dif-tab:not(.dif-tab--active):hover::before { opacity: 1; }
.dif-tab__label { flex: 1; }
.dif-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #3fbcde;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dif-icon { position: relative; flex-shrink: 0; }
/* Figma: ícone branco sobre o círculo ciano. Os SVGs em assets/img/dif/ são
   arquivos fixos (fill="#245699") — em vez de editar os arquivos, um filtro
   CSS (brightness+invert) força a exibição em branco só no efeito visual,
   sem tocar no ícone original. */
.dif-icon__layer { position: absolute; display: block; filter: brightness(0) invert(1); }
/* Seta desenhada só em CSS (sem imagem externa) — ver nota em style.css
   sobre mask-image + SVG falhando por CORS ao abrir via file://. */
.dif-tab__arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.dif-tab--active {
  background: var(--casj-azul);
  color: #fff;
}
.dif-tab--active .dif-tab__arrow,
.dif-tab:hover .dif-tab__arrow { opacity: 1; }

.dif-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--casj-azul);
  font-size: 30px;
  margin-bottom: 32px;
}
.dif-content p {
  color: #0b192c;
  font-size: 20px;
  line-height: 1.5;
}
/* Figma (2804:7113, aba "Vivências"): entre o parágrafo e a lista tem um
   parágrafo em branco — aqui o texto vem de um único campo (texto + <ul>
   concatenados, sem parágrafo vazio no meio), então reproduz esse espaço
   com margin-top na lista em vez de mexer no conteúdo. */
.dif-content ul { margin-top: 30px; }

@media (max-width: 991px) {
  .diferenciais__panel { padding: 32px 20px 40px; }
  .dif-tab { font-size: 14px; padding: 0 16px; }
}

/* No mobile, o painel lateral fixo (.dif-tabs/.dif-content) vira um
   accordion de verdade (.dif-accordion, mesmo padrão da página Inscrições
   — ver .insc-accordion em inscricoes.css): cada item abre o próprio
   painel logo abaixo dele, em vez de um painel único e distante como
   funcionava antes. */
.dif-accordion-wrap { display: none; }
@media (max-width: 767.98px) {
  .diferenciais__row { display: none; }
  .dif-accordion-wrap { display: block; margin-top: 24px; }
}
.dif-accordion { display: flex; flex-direction: column; gap: 16px; }
.dif-accordion__item { border-radius: 12px; overflow: hidden; }
.dif-accordion__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--casj-azul);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-radius .2s ease;
}
.dif-accordion__item--open .dif-accordion__header { border-radius: 12px 12px 0 0; }
.dif-accordion__label { flex: 1 1 auto; }
.dif-accordion__toggle { flex-shrink: 0; font-size: 14px; }
.dif-accordion__panel { display: none; background: #f4f7fc; border-radius: 0 0 12px 12px; }
.dif-accordion__item--open .dif-accordion__panel { display: block; }
.dif-accordion__panel-inner { padding: 20px 24px 24px; text-align: left; }
.dif-accordion__panel-inner h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--casj-azul);
  font-size: 20px;
  margin-bottom: 12px;
}
.dif-accordion__panel-inner p { color: #0b192c; font-size: 16px; line-height: 1.5; margin: 0; }

/* display:flow-root evita que a margin-top do .stats (64px) "vaze" pra fora
   da section e colapse com o que vem antes, deixando uma faixa branca do
   body aparecendo entre o fundo desta section e o da .diferenciais acima. */
.numeros-section { background: linear-gradient(to bottom, #87d5ea 52%, #ffffff 48%); display: flow-root; }
@media (max-width: 575.98px) {
  /* No mobile, a faixa azul (welcome → diferenciais → números) some — as 3
     sections ficam com fundo branco. */
  .diferenciais,
  .numeros-section { background: #fff; }
}

.stats {
  background: #3fbcde;
  border-radius: 12px;
  margin: 64px 0;
  padding: 44px 24px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 32px;
}
.stat { display: flex; flex-direction: column; align-items: center; width: 238px; text-align: center; }
.stat__icon {
  width: 55px; height: 55px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; margin-bottom: 8px;
}
.stat__value { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.stat__number { font-family: var(--font-display); font-weight: 800; font-size: 44px; color: var(--casj-azul); line-height: 1; margin: 0; white-space: nowrap; }
.stat__label { color: #fff; font-weight: 600; font-size: 16px; margin-top: 8px; }

/* Figma (frame mobile "Home", componente "Stats-1"): no mobile a seção vira
   um cartão único (fundo #013073, sem radius, ocupando a largura total da
   tela — sangra pra fora do padding do .container-casj-lg) que cicla
   automaticamente entre os 4 números (sem precisar de hover/toque). Ícone
   permanece visível, igual ao desktop; só o número muda para vermelho
   (--casj-vermelho) em vez de azul, e o rótulo sobe para 18px. */
@media (max-width: 575.98px) {
  .stats {
    background: #013073;
    border-radius: 0;
    position: relative;
    height: 240px;
    width: calc(100% + 3rem);
    margin: 40px -1.5rem;
    padding: 0;
    display: block;
    overflow: hidden;
  }
  .stat {
    position: absolute;
    inset: 0;
    width: 100%;
    justify-content: center;
    opacity: 0;
    animation: stat-ticker 10s infinite;
  }
  .stat:nth-child(1) { animation-delay: 0s; }
  .stat:nth-child(2) { animation-delay: 2.5s; }
  .stat:nth-child(3) { animation-delay: 5s; }
  .stat:nth-child(4) { animation-delay: 7.5s; }
  .stat__number { color: var(--casj-vermelho); }
  .stat__label { font-size: 18px; }

  @keyframes stat-ticker {
    0%, 2% { opacity: 0; }
    6%, 19% { opacity: 1; }
    23%, 100% { opacity: 0; }
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  /* Sem animação: mostra só o primeiro número, evitando um piscar constante
     pra quem pediu menos movimento no sistema. */
  .stat { animation: none; opacity: 0; }
  .stat:first-child { opacity: 1; }
}

.news { background: #eef2f7; padding-block: 32px 64px; text-align: center; display: flow-root; }
.news-swiper { position: relative; margin-top: 40px; }
.news-swiper .swiper-slide { width: 302px; height: auto; }
.news-card { text-align: left; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; box-shadow: var(--casj-shadow-soft); border-radius: 12px; overflow: hidden; }
.news-card__img { position: relative; height: 243px; flex-shrink: 0; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* Escurece a foto no hover, igual à Galeria de Fotos (overlay preto 20% com mix-blend-darken) */
.news-card__img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .2);
  mix-blend-mode: darken;
  opacity: 0;
  transition: opacity .2s ease;
}
.news-card:hover .news-card__img::before { opacity: 1; }
.news-card__date {
  position: absolute; right: 16px; top: 16px;
  background: var(--casj-azul); color: #fff;
  font-size: 12px; font-weight: 600;
  font-style: normal;
  border-radius: 16px; padding: 4px 8px;
}
.news-card__body { background: #fff; padding: 30px 24px 31px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.news-card__title {
  font-family: var(--font-display); font-weight: 600; color: #0b192c; font-size: 24px; line-height: 32px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  /* Evita quebra de linha "esburacada" (uma linha bem mais curta que as
     outras) em títulos longos — distribui o texto de forma mais equilibrada
     entre as linhas. Sem suporte, cai de volta na quebra normal. */
  text-wrap: balance;
}
.news-card__link { color: var(--casj-azul); font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .2s ease; }
/* Fica vermelho só ao passar o mouse direto no "Saiba mais" — passar o
   mouse no resto do card (foto, título) não deve mudar essa cor. */
.news-card__link:hover { color: var(--casj-vermelho); }

/* Mesmo formato do .img-carousel__nav (pílula), em cinza, fora do container */
.news-swiper__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border-radius: 28px;
  border: 0;
  background: #efefef;
  z-index: 2;
  color: var(--casj-cinza-texto);
  font-size: 16px;
  transition: background .2s ease;
}
.news-swiper__nav:hover { background: #e0e0e0; }
.news-swiper__nav--prev { left: -76px; }
.news-swiper__nav--next { right: -76px; }
.news-swiper__nav.swiper-button-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 1450px) {
  .news-swiper__nav--prev { left: 8px; }
  .news-swiper__nav--next { right: 8px; }
}
@media (max-width: 575.98px) {
  .news-swiper__nav { display: none; }
  /* Mesmo padrão de "espiadinha" da Galeria de Fotos (.gallery-grid-carousel
     em galeria-de-fotos.css): sangra pra fora do padding-right do
     .container-casj-lg em vez de manter o respiro dos dois lados. */
  .news-swiper { margin-right: -1.5rem; }
}

/* Mobile: card com foto de fundo + degradê (Figma "Acontece | Noticias" 3594:5913) */
@media (max-width: 767.98px) {
  .news-swiper .news-card { position: relative; height: 377px; }
  .news-swiper .news-card__img { position: absolute; inset: 0; height: 100%; }
  .news-swiper .news-card__img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .5) 97%);
  }
  .news-swiper .news-card__date { left: auto; right: 16px; top: 11px; z-index: 2; }
  .news-swiper .news-card__body {
    position: absolute;
    inset: auto 0 0 0;
    background: transparent;
    padding: 22px;
    gap: 10px;
  }
  .news-swiper .news-card__title { color: #fff; }
  .news-swiper .news-card__link {
    color: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 10px 24px;
    justify-content: center;
    align-self: flex-start;
  }
}

.gallery-preview { background: #fff; padding-block: 64px; text-align: center; }