/* ============================================================================
   BANNER SLIDER — componente reusável, sem dependências (par de banner-slider.js).
   Substitui o carrossel antigo em slick/jQuery. Themeável: a skin define
   `--bnr-accent` (cor dos dots/hover das setas) e opcionalmente `--bnr-aspect`
   (proporção; default 8/3 = recorte 1600×600 do cropper). Ver partials/banner_slider.php.
   ========================================================================== */

.bnr { position: relative; overflow: hidden; }
.bnr__viewport { overflow: hidden; }
.bnr__track { display: flex; transition: transform .5s ease; will-change: transform; }
.bnr__slide { flex: 0 0 100%; min-width: 0; }
.bnr__slide, .bnr__slide > a { display: block; }
.bnr__slide img {
    display: block;
    width: 100%;
    aspect-ratio: var(--bnr-aspect, 8 / 3);
    object-fit: cover;
}

/* Setas */
.bnr__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .45); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.bnr__arrow:hover { background: var(--bnr-accent, rgba(0, 0, 0, .8)); }
.bnr__arrow--prev { left: 14px; }
.bnr__arrow--next { right: 14px; }

/* Dots */
.bnr__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
    display: flex; gap: 8px; justify-content: center; }
.bnr__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .2s, transform .2s; }
.bnr__dot:hover { background: rgba(255, 255, 255, .85); }
.bnr__dot.is-active { background: var(--bnr-accent, #fff); transform: scale(1.25); }

/* 1 banner só: sem controles (o JS nem inicia); a imagem fica estática. */
.bnr--single .bnr__arrow, .bnr--single .bnr__dots { display: none; }

@media (max-width: 48em) {
    .bnr__arrow { width: 34px; height: 34px; font-size: 20px; }
    .bnr__arrow--prev { left: 8px; }
    .bnr__arrow--next { right: 8px; }
    .bnr__dots { bottom: 8px; }
}

/* Respeita quem prefere menos movimento: sem transição de deslize. */
@media (prefers-reduced-motion: reduce) {
    .bnr__track { transition: none; }
}