/**
 * Banner Image Slide Module
 * Full-viewport fade slider with timeline progress bars.
 */

/* ===========================
   # Section shell
=========================== */

.banner-slide-module {
	position:   relative;
	display:    grid;
	min-height: min(770px, calc(100svh - var(--header-height, 70px)));
	overflow:   hidden;
	background: var(--nec-grey, #384249);
}

/* ===========================
   # Slides
=========================== */

/* Stacked in the same grid cell so the tallest slide's content
   sets the section height — lets the banner grow past 770px
   when a slide has more copy, instead of clipping it. */
.bsm__slide {
	position:   relative;
	grid-area:  1 / 1 / 2 / 2;
	opacity:    0;
	transition: opacity 0.9s ease;
	z-index:    1;
}

.bsm__slide.is-active {
	opacity: 1;
	z-index: 2;
}

/* ===========================
   # Background image
=========================== */

.bsm__bg {
	position:            absolute;
	inset:               0;
	background-position: center;
	background-size:     cover;
	background-repeat:   no-repeat;
}

/* ===========================
   # Dark overlay
=========================== */

.bsm__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		160deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.30) 50%,
		rgba(0, 0, 0, 0.65) 100%
	);
	z-index: 1;
}

/* ===========================
   # Content layer
=========================== */

.bsm__content {
	position:       relative;
	z-index:        2;
	min-height:     min(770px, calc(100svh - var(--header-height, 70px)));
	padding: 80px 80px 80px;
	display:        flex;
	flex-direction: column;
	pointer-events: none; /* allow click-through to underlying JS targets */
}

/* Title sits near the top */
.bsm__title {
	color:          var(--nec-white, #fff);
	font-weight:    400;
	letter-spacing: -0.01em;
	max-width:      780px;
	margin:         0;

 /* fixes h1 style */
	font-size:      clamp(2.75rem, calc(2.2857rem + 1.9048vw), 4rem);
	line-height:    clamp(3rem, calc(2.5357rem + 1.9048vw), 4.25rem);
	font-weight:    400;
	letter-spacing: -0.01em;
	
	/* Push lower content to bottom */
	margin-bottom:  auto;
}

/* Body copy + CTA group sits at the bottom */
.bsm__lower {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            24px;
	pointer-events: auto;
}

.bsm__body {
	color:      rgba(255, 255, 255, 0.88);
	max-width:  560px;
	margin:     0;
	line-height: 1.6;
}

/* ===========================
   # CTA link
=========================== */

.bsm__cta {
	display:         inline-flex;
	align-items:     center;
	gap:             10px;
	color:           var(--nec-white, #fff);
	font-size:       clamp(0.875rem, calc(0.85rem + 0.1vw), 1rem);
	font-weight:     500;
	letter-spacing:  0.03em;
	text-decoration: none;
	transition:      color 0.2s ease;
}

.bsm__cta:hover,
.bsm__cta:focus-visible {
	color: var(--nec-white, #fff);
}

.bsm__cta-arrow {
	width:      20px;
	height:     20px;
	transition: transform 0.2s ease;
}

.bsm__cta:hover .bsm__cta-arrow {
	transform: translateX(5px);
}

/* ===========================
   # Controls area (bottom-right)
=========================== */

.bsm__controls {
	position:    absolute;
	bottom: 		70px;
	right:       60px;
	z-index:     10;
	display:     flex;
	align-items: center;
	gap:         16px;
}

/* ===========================
   # Timeline bars
=========================== */

.bsm__timelines {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.bsm__bar {
	position:     relative;
	display:      block;
	width:        56px;
	height:       3px;
	padding:      0;
	background:   rgba(255, 255, 255, 0.28);
	border:       none;
	cursor:       pointer;
	overflow:     hidden;
	border-radius: 2px;
	transition:   background 0.2s ease;
}

.bsm__bar:hover {
	background: rgba(255, 255, 255, 0.5);
}

.bsm__bar-fill {
	position:   absolute;
	top:        0;
	left:       0;
	height:     100%;
	width:      0%;
	background: var(--nec-orange, #EB6E00);
	/* width is driven by JS via rAF — no CSS transition here */
}

/* Completed slides keep a full orange fill */
.bsm__bar[aria-selected="false"]:not(.is-active) .bsm__bar-fill {
	/* filled or cleared state is managed by JS */
}

/* ===========================
   # Pause / play button
=========================== */

.bsm__playpause {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	padding:         0;
	background:      rgba(255, 255, 255, 0.12);
	border:          1.5px solid rgba(255, 255, 255, 0.4);
	border-radius:   50%;
	color:           var(--nec-white, #fff);
	cursor:          pointer;
	transition:      background 0.2s ease, border-color 0.2s ease;
	flex-shrink:     0;
}

.bsm__playpause:hover,
.bsm__playpause:focus-visible {
	background:   rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.8);
	outline:      none;
}

.bsm__icon {
	width:  14px;
	height: 14px;
}
.banner-gap{display:block;height:50px}
/* ===========================
   # Responsive
=========================== */

@media (max-width: 991px) {
	.bsm__content {
		padding: 48px 32px 120px;
	}

	.bsm__controls {
		left:            32px;
		right:           32px;
		bottom:          30px;
		justify-content: space-between;
	}

	.bsm__bar {
		width: 40px;
	}
	.banner-gap{display:block;height:25px}
}

@media (max-width: 599px) {
	.bsm__content {
		padding: 40px 20px 100px;
	}

	.bsm__title {
		max-width: 100%;
	}

	.bsm__body {
		max-width: 100%;
	}

	.bsm__controls {
		left:   16px;
		right:  16px;
		bottom: 20px;
		gap:    12px;
	}

	.bsm__bar {
		width: 32px;
	}
}