/**
 * @author João Batista <joao.cardoso@unitri.edu.br>
 * @copyright Copyright (c) 2026, ASOEC. (http://asoec.com.br)
 * @version   1.0.0
 * hero.css — Carrossel Hero CApDHC
 * Swiper v11 | Ken Burns | 3 imagens por slide | Dots com progress bar
 */

/* ──────────────────────────────────────────────────────────────────────────
   Modo BANNER — exibe a arte INTEIRA (texto/logo/alunos chapados), sem corte,
   adaptando a estratégia ao formato da arte de cada breakpoint:

   • Mobile/Tablet (<1024px): arte RETRATO, mais alta que a viewport. O hero ocupa
     a altura útil (100dvh − header) e a imagem usa object-fit: CONTAIN → encaixa
     por completo dentro da tela (sem corte e sem scroll); as laterais sobrando
     recebem a cor de fundo do hero (--color-navy-dark).
   • Desktop (≥1024px): arte PANORÂMICA, cabe na largura. aspect-ratio = ratio da
     arte + object-fit: COVER → preenche a largura total sem barras e sem corte.

   Os valores espelham os add_image_size() do functions.php. Ver HERO-IMAGE-AUDIT.md.
   ────────────────────────────────────────────────────────────────────────── */

/* Mobile + Tablet: cabe na altura útil; imagem inteira via contain (ver img abaixo) */
.capdhc-hero {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--header-h, 99px));
  overflow: hidden;
  background-color: var(--color-navy-dark);
}

/* Desktop: banner panorâmico ocupa a largura total, altura derivada do ratio da arte */
@media (min-width: 1024px) {
  .capdhc-hero {
    height: auto;
    aspect-ratio: 2560 / 1111;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Efeito Ken Burns — EXPANDE (zoom-in) lentamente a imagem: cresce de scale(1)
   até scale(var(--kb-scale)) ao longo de var(--kb-duration), a partir do centro.
   ⚠️ DESATIVADO no modo banner: como a arte tem texto/logo/alunos chapados, o
   zoom recortaria esse conteúdo nas bordas. Keyframe mantido p/ referência —
   para reativar, reaplicar `animation: kenBurns ...` em .capdhc-hero__bg-img e
   restaurar restartKenBurns/getKenBurnsStyle em hero.js. Ver HERO-IMAGE-AUDIT.md.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes kenBurns {
  from {
    transform: scale(1); /* início: imagem no tamanho do object-fit: cover */
  }
  to {
    transform: scale(var(--kb-scale, 1.07)); /* fim: imagem expandida (zoom) */
  }
}

.capdhc-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.capdhc-hero__bg-img {
  width: 100%;
  height: 100%;
  /* Mobile/Tablet (<1024): CONTAIN encaixa a arte retrato inteira na altura útil;
     as laterais que sobram usam a cor do hero. Sobrescrito p/ COVER no desktop,
     onde o ratio do container = ratio da arte (preenche a largura sem cortar).
     Ken Burns removido: o zoom recortaria o texto/logo chapados na imagem. */
  object-fit: contain;
  object-position: center center;
  position: absolute;
  inset: 0;
}

/* Mobile/Tablet: cover preenche o container inteiro (sem gap inferior);
   top-align preserva logo/texto no topo da arte. Clip lateral ~1-2% imperceptível. */
@media (max-width: 1023px) {
  .capdhc-hero__bg-img {
    object-fit: cover;
    object-position: top center;
  }
}

/* Desktop: arte panorâmica casa com o aspect-ratio do hero → cover preenche sem cortar */
@media (min-width: 1024px) {
  .capdhc-hero__bg-img {
    object-fit: cover;
  }
}

.capdhc-hero__swiper,
.capdhc-hero__swiper > .swiper-wrapper {
  height: 100%;
}
.capdhc-hero__slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.capdhc-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.capdhc-hero__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    var(--overlay-navy-dark-55) 100%
  );
}

/* Botões prev/next */
.capdhc-hero__prev,
.capdhc-hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-gold);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--overlay-white-35);
  transition: all var(--transition-base);
  opacity: 0.85;
}
.capdhc-hero__prev {
  left: 1rem;
}
.capdhc-hero__next {
  right: 1rem;
}
.capdhc-hero__prev:hover,
.capdhc-hero__next:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 16px var(--overlay-gold-40);
}

/* Dots + counter wrapper */
.capdhc-hero__dots-wrapper {
  position: absolute;
  bottom: calc(68px + 14px);
  left: 50%;
  /* transform: translateX(-50%); */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.capdhc-hero__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Individual dot */
.capdhc-hero__dot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-full);
  width: 8px;
  height: 8px;
  background-color: var(--overlay-white-40);
  border: none;
  cursor: pointer;
  transition:
    width var(--transition-slow),
    background-color var(--transition-base);
  padding: 0;
}

.capdhc-hero__dot.is-active {
  width: 28px;
  background-color: var(--overlay-gold-35);
}

/* Progress bar inside active dot */
.capdhc-hero__dot-progress {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-gold);
  transform-origin: left center;
  transform: scaleX(0);
}

.capdhc-hero__dot.is-active .capdhc-hero__dot-progress {
  animation: dotProgress 6s linear forwards;
}

@keyframes dotProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Counter next to dots */
.capdhc-hero__counter {
  font-size: 0.6875rem;
  color: var(--overlay-white-55);
  font-weight: 500;
  white-space: nowrap;
}

/* Legacy Swiper pagination — keep for fallback */
.capdhc-hero__pagination {
  display: none;
}

/* Stats Bar */
.capdhc-hero__stats-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--overlay-navy-dark-90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--overlay-white-08);
}
.capdhc-hero__stats-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.875rem var(--container-px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.capdhc-hero__stats-divider {
  width: 1px;
  height: 2rem;
  background-color: var(--overlay-white-15);
}
.capdhc-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.capdhc-hero__stat-value {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.5;
}
.capdhc-hero__stat-label {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-blue-light);
  margin-top: 0.125rem;
}

@media (min-width: 640px) {
  .capdhc-hero__stats-inner {
    padding-inline: var(--container-px-sm);
    gap: 2.5rem;
  }
  .capdhc-hero__stat-value {
    font-size: 2rem;
  }
  .capdhc-hero__stat-label {
    font-size: 0.8125rem;
  }
}

@media (min-width: 1024px) {
  .capdhc-hero__stats-inner {
    padding-inline: var(--container-px-lg);
    gap: 3.5rem;
  }
  .capdhc-hero__stat-value {
    font-size: 2.25rem;
  }
  .capdhc-hero__stat-label {
    font-size: 0.8125rem;
  }
  .capdhc-hero__prev {
    left: 2rem;
  }
  .capdhc-hero__next {
    right: 2rem;
  }
}

/* Estado vazio */
.capdhc-hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-alt);
  min-height: 200px;
}
.capdhc-hero__placeholder {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 2rem;
}