/* Hero slideshow, and sliding rows for Recent projects (home) and Featured videos (Projects page). */

/* ---- Hero slideshow (crossfade) ---- */
.bns-hero__media .bns-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; animation: none; }
.bns-hero__media .bns-hero__slide.is-active { opacity: 1; animation: bnsKen 14s ease-out both; }
.bns-hero__dots { position: absolute; left: 50%; bottom: 1rem; z-index: 3; display: flex; gap: 0.15rem; transform: translateX(-50%); }
.bns-hero__dot { position: relative; width: 1.6rem; height: 1.6rem; padding: 0; background: none; border: 0; cursor: pointer; }
.bns-hero__dot::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0.6rem; height: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 50%; transition: background 0.3s ease, transform 0.3s ease; }
.bns-hero__dot[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
.bns-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* ---- Sliding rows (glide, swipe, arrows, dots) ---- */
.bns-portfolio__grid, .bns-vband .bns-vt-grid { --bns-gap: 1.25rem; display: flex !important; gap: var(--bns-gap); min-width: 0; max-width: 100%; margin-block: -0.75rem -1rem; padding-block: 0.75rem 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.bns-portfolio__grid::-webkit-scrollbar, .bns-vband .bns-vt-grid::-webkit-scrollbar { display: none; }
.bns-portfolio__grid > *, .bns-vband .bns-vt-grid > * { flex: 0 0 var(--bns-slide); min-width: 0; scroll-snap-align: start; }
.bns-portfolio__grid { --bns-slide: 84%; }
.bns-vband .bns-vt-grid { --bns-slide: 86%; }
@media (min-width: 40rem) {
	.bns-portfolio__grid { --bns-slide: calc((100% - var(--bns-gap)) / 2); }
	.bns-vband .bns-vt-grid { --bns-slide: 62%; }
}
@media (min-width: 64rem) {
	.bns-portfolio__grid { --bns-slide: calc((100% - 2 * var(--bns-gap)) / 3); }
	.bns-vband .bns-vt-grid { --bns-slide: 56%; }
}
/* While gliding on its own the row must not snap to slides. */
.bns-carousel__track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
/* Slides are always visible (no scroll-reveal fade) so nothing waits off-screen. */
html.bns-js .bns-portfolio__grid > *, html.bns-js .bns-vband .bns-vt-grid > * { opacity: 1 !important; translate: none !important; }

/* The page container is a grid: without min-width: 0 the long row would stretch the whole column. */
.bns-carousel { position: relative; min-width: 0; max-width: 100%; }
.bns-carousel__btn { position: absolute; top: calc(50% - 3.25rem); z-index: 2; display: none; width: 2.9rem; height: 2.9rem; padding: 0; background: var(--bns-color-white, #fff); border: 1px solid var(--bns-color-hairline, rgba(15, 90, 155, 0.18)); border-radius: 50%; box-shadow: 0 8px 22px rgba(12, 31, 51, 0.16); cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease; }
.bns-carousel__btn::before { content: ""; position: absolute; inset: 0; width: 0.6rem; height: 0.6rem; margin: auto; border-top: 2px solid var(--bns-color-blue, #0f5a9b); border-right: 2px solid var(--bns-color-blue, #0f5a9b); }
.bns-carousel__btn--prev { left: -1.1rem; }
.bns-carousel__btn--prev::before { transform: translateX(0.12rem) rotate(-135deg); }
.bns-carousel__btn--next { right: -1.1rem; }
.bns-carousel__btn--next::before { transform: translateX(-0.12rem) rotate(45deg); }
.bns-carousel__btn[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.bns-carousel__btn:hover, .bns-carousel__btn:focus-visible { transform: scale(1.06); }
@media (min-width: 40rem) { .bns-carousel__btn { display: block; } }
.bns-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem; margin-top: 0.5rem; }
.bns-carousel__dot { position: relative; width: 1.5rem; height: 1.5rem; padding: 0; background: none; border: 0; cursor: pointer; }
.bns-carousel__dot::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0.55rem; height: 0.55rem; background: rgba(15, 90, 155, 0.28); border-radius: 999px; transition: width 0.3s ease, background 0.3s ease; }
.bns-carousel__dot[aria-current="true"]::before { width: 1.5rem; background: var(--bns-color-blue, #0f5a9b); }
.bns-carousel.is-static .bns-carousel__btn, .bns-carousel.is-static .bns-carousel__dots { display: none; }