/**
 * Banners — homepage slider
 * Animação: slide horizontal 400ms ease-in-out
 *
 * Base (.cnp-btn e variantes) definida em main.css — não redeclarar aqui.
 * .cnp-banner__button é um botão específico do contexto overlay — não usa .cnp-btn.
 */

@layer components {

/* ── Section ── */

.cnp-banners-section {
  background-color: var(--cnp-color-background);
}

/* ── Slider container ── */

.cnp-slider {
  position: relative;
  overflow: hidden;
}

/* ── Track: flex horizontal, desliza via translateX ── */

.cnp-slider__track {
  display: flex;
  will-change: transform;
  transition: transform 400ms ease-in-out;
}

/* ── Slide: largura fixa 100%, nunca encolhe ── */

.cnp-slider__slide {
  flex: 0 0 100%;
  inline-size: 100%;
  min-inline-size: 100%;
}

/* ── Banner ── */

.cnp-banner {
  position: relative;
  display: block;
  /* Mobile: proporção 1:1 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cnp-color-background-alt);
}

@media (min-width: 768px) {
  .cnp-banner {
    /* Desktop: proporção 4:1 — landscape */
    aspect-ratio: 4 / 1;
  }
}

.cnp-banner__image-wrapper {
  display: block;
  position: absolute;
  inset: 0;
}

.cnp-banner__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── CTA overlay ── */

.cnp-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block-end: var(--cnp-space-3xl, 6rem);
  pointer-events: none;
  z-index: 5;
}

.cnp-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--cnp-space-l);
  padding-block: var(--cnp-space-s);
  background-color: var(--cnp-color-primary);
  color: #fff;
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-bold);
  border-radius: var(--cnp-radius-s);
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  transition: background-color var(--cnp-transition-fast);
}

.cnp-banner__button:hover,
.cnp-banner__button:focus-visible {
  background-color: var(--cnp-color-primary-dark);
}

/* ── Setas de navegação ── */

.cnp-slider__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--cnp-transition-fast), opacity var(--cnp-transition-fast);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cnp-slider__arrow:hover,
.cnp-slider__arrow:focus-visible {
  background: rgb(0 0 0 / 0.6);
  outline: 2px solid var(--cnp-color-primary);
  outline-offset: 2px;
}

.cnp-slider__arrow--prev {
  inset-inline-start: var(--cnp-space-m);
}

.cnp-slider__arrow--next {
  inset-inline-end: var(--cnp-space-m);
}

/* Em mobile pequeno, setas menores */
@media (max-width: 480px) {
  .cnp-slider__arrow {
    inline-size: 3.2rem;
    block-size: 3.2rem;
  }

  .cnp-slider__arrow--prev { inset-inline-start: var(--cnp-space-s); }
  .cnp-slider__arrow--next { inset-inline-end:   var(--cnp-space-s); }
}

/* ── Dots — sobrepostos dentro da imagem, rodapé ── */

.cnp-slider__dots {
  position: absolute;
  inset-block-end: var(--cnp-space-m);
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: flex;
  justify-content: center;
  gap: var(--cnp-space-xs);
  z-index: 10;
}

.cnp-slider__dot {
  position: relative;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--cnp-transition-fast), transform var(--cnp-transition-fast);
}

.cnp-slider__dot.is-active {
  background: #fff;
  transform: scale(1.4);
}

.cnp-slider__dot:hover,
.cnp-slider__dot:focus-visible {
  background: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Hit area maior para toque */
.cnp-slider__dot::before {
  content: '';
  position: absolute;
  inset: -1rem;
}

} /* end @layer components */

@layer utilities {

  @media (prefers-reduced-motion: reduce) {
    .cnp-slider__track,
    .cnp-slider__dot {
      transition: none;
    }
  }

}