/* ==========================================================================
   DNB Proper Hero Slider — Frontend Styles
   Matches Figma: 1280x701px, left content overlay, yellow accents
   ========================================================================== */

.dnb-slider {
	position: relative;
	width: 100%;
	height: 701px;
	overflow: hidden;
	background-color: #000;
}

/* Track */
.dnb-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* Individual slide */
.dnb-slide {
	min-width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
}

/* Full-width background image — now uses <picture> + <img> for responsive loading */
.dnb-slide__bg {
	position: absolute;
	inset: 0;
	display: block;
}

.dnb-slide__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Left-side gradient overlay — subtle, the content ::before handles the main darkening */
.dnb-slide__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.2) 0%,
		transparent 40%
	);
	pointer-events: none;
}

/* Full-width video */
.dnb-slide__video {
	position: absolute;
	inset: 0;
}

.dnb-slide__video--embed iframe,
.dnb-slide__video--native video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	border: none;
}

/* Opaque overlay behind left content area — Figma Layer 11: 472px wide, full slide height, 46% opacity */
.dnb-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 472px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.46);
	z-index: 1;
	pointer-events: none;
}

/* Left content area — full height, split: header image top, text bottom */
.dnb-slide__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 472px;
	height: 100%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 66px 66px 3.5rem 66px;
}

/* Header image — pinned to top with 66px space above via padding, centered horizontally */
.dnb-slide__header-img {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

.dnb-slide__header-img img {
	max-width: 352px;
	max-height: 306px;
	width: auto;
	height: auto;
	display: block;
}

/* Text group — title, subtitle, read more — pushed to bottom */
.dnb-slide__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Header title — 30px white Roboto Condensed, -1.5px tracking */
.dnb-slide__title {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: -1.5px;
	color: #ffffff;
	margin: 0;
	white-space: pre-line;
}

/* Sub header title — slightly smaller, muted */
.dnb-slide__subtitle {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.5px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

/* Read More link — yellow, 22px, matches Figma exactly */
.dnb-slide__readmore {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -1.1px;
	color: #feff02;
	text-decoration: none;
	display: inline-block;
	margin-top: 0.5rem;
	position: relative;
}

/* Underline bar below Read More — matches Figma Line 4 (opacity 40%) */
.dnb-slide__readmore::after {
	content: '';
	display: block;
	height: 3px;
	background-color: #feff02;
	opacity: 0.4;
	margin-top: 4px;
	width: 100%;
}

.dnb-slide__readmore:hover {
	color: #feff02;
	opacity: 0.85;
	text-decoration: none;
}

/* Arrow buttons — match Figma: 45x48px, positioned at x=12 and x=1223 */
.dnb-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 10;
	transition: opacity 0.2s;
	line-height: 0;
}

.dnb-slider__arrow:hover {
	opacity: 0.75;
}

.dnb-slider__arrow--prev { left: 12px; }
.dnb-slider__arrow--next { right: 12px; }

/* Progress bar — 25px dark strip at bottom, matches Figma Layer 12 */
.dnb-slider__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 5;
}

.dnb-slider__progress-bar {
	height: 3px;
	background-color: #feff02;
	width: 0%;
	transition: width 0.1s linear;
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Responsive */
@media (max-width: 768px) {
	.dnb-slider {
		height: 320px;
	}

	.dnb-slide__content {
		width: 60%;
		padding: 1.5rem 1rem 1.5rem 1rem;
	}

	.dnb-slide::before {
		width: 60%;
	}

	.dnb-slide__header-img img {
		max-width: 120px;
		max-height: 100px;
	}

	.dnb-slide__title {
		font-size: 16px;
		line-height: 20px;
	}

	.dnb-slide__subtitle {
		font-size: 13px;
	}

	.dnb-slide__readmore {
		font-size: 14px;
	}
}

/* ==========================================================================
   Transition type overrides (set via JS based on settings)
   ========================================================================== */

/* Fade & Zoom — track becomes a relative container, slides stack absolutely */
.dnb-slider[data-transition="fade"] .dnb-slider__track,
.dnb-slider[data-transition="zoom"] .dnb-slider__track {
	transform: none !important;
}

/* Ensure slides stack on top of each other for fade/zoom */
.dnb-slider[data-transition="fade"] .dnb-slide,
.dnb-slider[data-transition="zoom"] .dnb-slide {
	min-width: 100%;
}