/* ==========================================================================
   CASJ — Carrosséis (Swiper) e Fancybox overrides
   Componentes Figma: IMAGE CAROUSEL HOME (2142:2997), IMAGE CAROUSEL PASTORAL
   (2344:2660), Carrossel genérico (361:2146)
   ========================================================================== */

.img-carousel {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.img-carousel .swiper-wrapper {
  align-items: center;
}

.img-carousel .swiper-slide {
  height: auto; /* sobrescreve o height:100% padrão do Swiper, que passaria a valer
                   e esticaria todos os slides ao mesmo tamanho assim que o
                   .swiper ganha altura fixa via JS (ver initImageCarousels) */
  aspect-ratio: 240 / 300;
  border-radius: 12px;
  overflow: hidden;
  transition: aspect-ratio .4s ease;
}
/* Slide ativo ampliado só a partir de 640px — no mobile o carrossel é
   "espiadinha" (1.25 por view, sem centeredSlides, ver initImageCarousels em
   carousels.js), então todo slide fica no mesmo tamanho (240/300). */
@media (min-width: 640px) {
  .img-carousel .swiper-slide-active {
    aspect-ratio: 302 / 377;
  }
}
.img-carousel .swiper-slide a,
.img-carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
/* A partir de 992px (3 slides visíveis): usar slidesPerView "auto" com o
   PRÓPRIO slide em larguras diferentes se mostrou instável (o Swiper corta
   os cards das pontas e desalinha em loop com larguras variáveis). Em vez
   disso o slide (a "caixa" que o Swiper gerencia) fica com largura/altura
   FIXA e igual pra todos — do tamanho do maior card (302x377), garantindo
   loop e centralização estáveis — e é o link/imagem DENTRO do slide que
   fica menor (240x300) nos cards inativos, centralizado via flex. */
@media (min-width: 992px) {
  /* :not(.img-carousel--single) — a galeria "Fotos Infra" (Sobre o
     Colégio) usa a variante de slide único (1 por view, ocupando 100% do
     container, ver .img-carousel--single mais abaixo) e não deve entrar
     nesse esquema de card ativo/inativo de tamanhos fixos. */
  .img-carousel:not(.img-carousel--single) .swiper-slide {
    width: 302px;
    height: 377px;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: visible;
  }
  .img-carousel:not(.img-carousel--single) .swiper-slide a {
    width: 240px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    transition: width .3s ease, height .3s ease;
  }
  .img-carousel:not(.img-carousel--single) .swiper-slide-active a {
    width: 302px;
    height: 377px;
  }
  /* A imagem menor (240px) centralizada na caixa de 302px deixaria uma folga
     de 31px de cada lado, somando aos 27px do spaceBetween e abrindo um vão
     de 58px até a imagem ativa. Encostando a imagem no lado voltado pro
     centro (prev → direita, next → esquerda), o vão visível vira exatamente
     os 27px do spaceBetween — a folga sobra do lado de fora, não afeta o gap. */
  .img-carousel:not(.img-carousel--single) .swiper-slide-prev {
    justify-content: flex-end;
  }
  .img-carousel:not(.img-carousel--single) .swiper-slide-next {
    justify-content: flex-start;
  }
}

/* Botão sem pílula/fundo — só a seta (Figma: "IMAGE CAROUSEL HOME" 2142:2997,
   ícone cinza que fica azul no hover). Galerias que usam o componente
   "IMAGE CAROUSEL PASTORAL" (2344:2786) sobrescrevem com um ícone próprio
   (ver .img-carousel__nav-icon abaixo), importado direto do Figma — o
   desenho original (pílula + seta) já sai mais "grosso" que reconstruir
   com border:1px + bi-chevron. */
.img-carousel__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: 0;
  background: none;
  z-index: 2;
  color: var(--casj-cinza-texto);
  font-size: 16px;
  transition: color .2s ease;
}
.img-carousel__nav:hover { color: var(--casj-azul); }
/* assets/img/icon-carousel-arrow.svg (componente "Arrow left", 2344:2663/2665)
   — nasce como pílula horizontal com seta pra cima; roda -90/90deg pra virar
   a pílula vertical com a seta pra esquerda/direita, igual no Figma. */
.img-carousel__nav-icon {
  display: block;
  width: 49px;
  height: 26px;
  transition: opacity .2s ease;
}
.img-carousel__nav--prev .img-carousel__nav-icon { transform: rotate(-90deg); }
.img-carousel__nav--next .img-carousel__nav-icon { transform: rotate(90deg); }
.img-carousel__nav:hover .img-carousel__nav-icon { opacity: .65; }
.img-carousel__nav--prev { left: -76px; }
.img-carousel__nav--next { right: -76px; }
.img-carousel__nav.swiper-button-disabled { opacity: .4; pointer-events: none; }

/* Páginas do menu Ensino: pílula preenchida (Figma "Arrow left" 2154:2705
   Default / 2154:2707 Hover) — cinza clara com seta cinza no estado normal,
   vermelha com seta branca no hover. Asset nasce horizontal (seta pra
   cima) e roda -90/90deg pra virar vertical com seta pra esquerda/direita,
   mesmo esquema do .img-carousel__nav-icon padrão (ver acima). O <img>
   original (pílula contornada azul, icon-carousel-arrow.svg) é escondido
   e substituído por um ::before, já que não dá pra trocar o src de um
   <img> só com CSS. */
body[data-page="ensino-educacao-infantil"] .img-carousel__nav-icon,
body[data-page="ensino-fundamental-anos-iniciais"] .img-carousel__nav-icon,
body[data-page="ensino-fundamental-anos-finais"] .img-carousel__nav-icon,
body[data-page="ensino-medio"] .img-carousel__nav-icon {
  display: none;
}
body[data-page="ensino-educacao-infantil"] .img-carousel__nav::before,
body[data-page="ensino-fundamental-anos-iniciais"] .img-carousel__nav::before,
body[data-page="ensino-fundamental-anos-finais"] .img-carousel__nav::before,
body[data-page="ensino-medio"] .img-carousel__nav::before {
  content: "";
  display: block;
  width: 48.89px;
  height: 25.9725px;
  background: url("../img/nav-arrow-left-default.svg") center / contain no-repeat;
}
body[data-page="ensino-educacao-infantil"] .img-carousel__nav--prev::before,
body[data-page="ensino-fundamental-anos-iniciais"] .img-carousel__nav--prev::before,
body[data-page="ensino-fundamental-anos-finais"] .img-carousel__nav--prev::before,
body[data-page="ensino-medio"] .img-carousel__nav--prev::before {
  rotate: -90deg;
}
body[data-page="ensino-educacao-infantil"] .img-carousel__nav--next::before,
body[data-page="ensino-fundamental-anos-iniciais"] .img-carousel__nav--next::before,
body[data-page="ensino-fundamental-anos-finais"] .img-carousel__nav--next::before,
body[data-page="ensino-medio"] .img-carousel__nav--next::before {
  rotate: 90deg;
}
body[data-page="ensino-educacao-infantil"] .img-carousel__nav:hover::before,
body[data-page="ensino-fundamental-anos-iniciais"] .img-carousel__nav:hover::before,
body[data-page="ensino-medio"] .img-carousel__nav:hover::before {
  background-image: url("../img/nav-arrow-left-hover.svg");
}
/* Anos Finais tem fundo vermelho (--casj-vermelho) — hover vermelho
   sumiria contra o fundo, então usa a versão azul aqui. */
body[data-page="ensino-fundamental-anos-finais"] .img-carousel__nav:hover::before {
  background-image: url("../img/nav-arrow-left-hover-azul.svg");
}

/* Galeria "Confira nossos últimos registros" (Home): mesma pílula
   preenchida das páginas de Ensino acima, mas hover azul (não vermelho) —
   reaproveita o mesmo asset já usado no hover da Anos Finais. Este botão
   usa <i class="bi bi-chevron-left/right"> (não <img class="img-carousel__
   nav-icon"> como nas páginas de Ensino) — esconde o ícone certo, senão os
   dois ficam sobrepostos. */
.gallery-preview .img-carousel__nav i {
  display: none;
}
.gallery-preview .img-carousel__nav::before {
  content: "";
  display: block;
  width: 48.89px;
  height: 25.9725px;
  background: url("../img/nav-arrow-left-default.svg") center / contain no-repeat;
}
.gallery-preview .img-carousel__nav--prev::before {
  rotate: -90deg;
}
.gallery-preview .img-carousel__nav--next::before {
  rotate: 90deg;
}
.gallery-preview .img-carousel__nav:hover::before {
  background-image: url("../img/nav-arrow-left-hover-azul.svg");
}
.gallery-preview .img-carousel .swiper-pagination-bullet-active {
  background: var(--casj-azul);
}

/* Galeria "Fotos Infra" (Sobre o Colégio): pílula sempre azul preenchida,
   não só no hover — mesmo asset usado no hover da Home/Anos Finais. */
.img-carousel--single .img-carousel__nav-icon {
  display: none;
}
.img-carousel--single .img-carousel__nav::before {
  content: "";
  display: block;
  width: 48.89px;
  height: 25.9725px;
  background: url("../img/nav-arrow-left-hover-azul.svg") center / contain no-repeat;
}
.img-carousel--single .img-carousel__nav--prev::before {
  rotate: -90deg;
}
.img-carousel--single .img-carousel__nav--next::before {
  rotate: 90deg;
}
.img-carousel--single .img-carousel__nav:hover::before {
  background-image: url("../img/nav-arrow-left-hover.svg");
}

@media (max-width: 1350px) {
  .img-carousel__nav--prev { left: 8px; }
  .img-carousel__nav--next { right: 8px; }
}
/* A partir de 992px a imagem menor (240px) das pontas encosta no lado
   voltado pro centro (ver .swiper-slide-prev/-next acima) e sobra 62px
   (302-240) de folga do lado de fora — a imagem fica 62px mais perto do
   centro do que a borda da caixa (.img-carousel), então o botão, que fica a
   -76px (ou 8px, regra acima) dessa borda, acaba parecendo longe demais da
   imagem. Aproxima os 62px de volta; vem depois no arquivo pra vencer a
   regra @media (max-width: 1350px) acima também. */
@media (min-width: 992px) {
  .img-carousel:not(.img-carousel--single) .img-carousel__nav--prev { left: -14px; }
  .img-carousel:not(.img-carousel--single) .img-carousel__nav--next { right: -14px; }
}
@media (max-width: 575.98px) {
  .img-carousel__nav { display: none; }
}

/* Variante de slide único, cheio (Figma "Fotos Infra" — Sobre o Colégio):
   uma imagem por vez a partir de 640px, sem escala de slide ativo nem
   paginação por bolinhas. No mobile vira "espiadinha" (1.25 por view, ver
   initImageCarousels em carousels.js), como as demais galerias. */
.img-carousel--single .swiper-slide,
.img-carousel--single .swiper-slide-active {
  aspect-ratio: 1006 / 541;
}
.img-carousel--single .swiper-pagination { display: none; }
/* O max-width:960px do .img-carousel (pensado pro esquema de 3 cards
   ativo/inativo) não se aplica aqui — esta galeria deve ter a mesma
   largura do painel "Missão, Filosofia e Valores" logo abaixo (Sobre o
   Colégio, ver .pilares-panel em sobre.css). */
.img-carousel--single { max-width: 1160px; }

@media (max-width: 575.98px) {
  /* Mesma proporção 240/300 do padrão "espiadinha" usado nas demais
     galerias .img-carousel do site (era 302/337, quase quadrado —
     destoava visualmente das outras). */
  .img-carousel--single .swiper-slide,
  .img-carousel--single .swiper-slide-active {
    aspect-ratio: 240 / 300;
  }
}

/* Padrão de "espiadinha" no mobile pra todas as galerias .img-carousel do
   site (Home, Ensinos, Espiritualidade, Sobre o Colégio, Notícias — exceto o
   hero da Home, que é outro componente, .hero-swiper): sem bullets e colado
   na margem direita, puxando a largura pra fora do padding-right do
   .container-casj em vez de exigir um ajuste por página. */
@media (max-width: 575.98px) {
  /* width:auto sobrescreve o width:100% da regra base (que trava a caixa na
     largura do container e impede o "sangramento" — bug real, medido: a
     borda direita do carrossel parava 24px antes da borda da tela em vez
     de encostar nela). Com width:auto e margin-left:0 + margin-right:-24px,
     ambas as margens explícitas (nenhuma "auto"), o algoritmo de largura do
     bloco recalcula width = largura do container + 24px — a mesma técnica
     já usada em .gallery-grid-carousel (galeria-de-fotos.css), que nunca
     define width e por isso já sangra corretamente. */
  .img-carousel { width: auto; margin-left: 0; margin-right: -1.5rem; }
  .img-carousel .swiper-pagination { display: none !important; }
}

.img-carousel .swiper-pagination {
  position: static;
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
/* Reforça o display:none acima: mesma especificidade da regra genérica logo
   acima, que vem depois no arquivo e venceria sem este !important. */
.img-carousel--single .swiper-pagination { display: none !important; }
.img-carousel .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #c5c5c5;
  opacity: 1;
  border-radius: 33px;
  transition: width .2s ease, background .2s ease;
}
.img-carousel .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--casj-vermelho);
}

/* Fancybox: leve retoque para bater com a paleta CASJ */
.fancybox__container { --fancybox-bg: rgba(18, 24, 33, .92); }
.fancybox__toolbar,
.f-thumbs { --f-thumb-active-color: var(--casj-azul, #245699); }