/**
 * [dynamic_slider_hero] — stylesheet.
 *
 * Self-contained: only targets `.dynamic-slider-hero*`. The sibling shortcode
 * [dynamic_slider] lives in `.dynamic-slider*` and has its own stylesheet
 * (shortcodes/dynamic-slider/assets/dynamic-slider.css) so edits here never
 * affect that one, and vice versa.
 *
 * The base/structural block below mirrors dynamic-slider.css on purpose —
 * duplicated so each shortcode is editable in isolation.
 */

/* ── Structure ──────────────────────────────────────────────────────── */
.dynamic-slider-hero { position: relative; }

.dynamic-slider-hero__track { position: relative; }

.dynamic-slider-hero__swiper { overflow: hidden; }

.dynamic-slider-hero__slides { align-items: stretch; }

.dynamic-slider-hero__slide {
	display: flex!important;
	height: auto !important;
	flex-shrink: 0 !important;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
/* Defensive cap: child max-width: 100%, except .kw-container--boxed which is
   intentionally narrower (constrained to .container-width / site_width). */
.dynamic-slider-hero__slide > *:not(.kw-container--boxed) { max-width: 100%; }

/* Before Swiper initialises, the slides are plain flex items with no width —
   two slides showed 50/50 until the script loaded, then snapped to one. The
   hero shows one slide at a time, so give each the full width up front; the
   rest overflow off-screen (the swiper clips) exactly where Swiper puts them. */
.dynamic-slider-hero__swiper:not(.swiper-initialized) .dynamic-slider-hero__slides > * {
	flex: 0 0 100%;
	width: 100%;
}

.dynamic-slider-hero__arrow {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	user-select: none;
}
.dynamic-slider-hero__arrow.swiper-button-disabled { cursor: not-allowed; }
.dynamic-slider-hero__arrow-icon { display: block; }

.dynamic-slider-hero__pagination .swiper-pagination-bullet {
	display: inline-block;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s, transform 0.2s;
}

/* Boxed pagination wrapper — overlay constrained to .container-width. */
.dynamic-slider-hero__pagination-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}
.dynamic-slider-hero__pagination-container > .dynamic-slider-hero__pagination {
	pointer-events: auto;
}

/* Boxed arrows wrapper — same overlay pattern as pagination-container.
   The arrows inside are position:absolute (see "Look" block below), so their
   left/right offsets reference this wrapper's inner box instead of the
   slide edges, keeping them aligned with the boxed content. */
.dynamic-slider-hero__arrows-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}
.dynamic-slider-hero__arrows-container > .dynamic-slider-hero__arrow {
	pointer-events: auto;
}

/* ── Look — dark, full-bleed, overlay arrows ────────────────────────── */
.dynamic-slider-hero { background: #0d0d0d; overflow: hidden; }

.dynamic-slider-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dynamic-slider-hero__arrow {
	width: 40px; height: 40px;
	bottom: 24px;
	background: #FFFFFF1A;
	backdrop-filter: blur(10px);
	border-radius: 40px;
	border: 1px solid #FFFFFF4D;
	margin: 0;
	color: #fff;
	transition: color 0.25s;
}
.dynamic-slider-hero__arrow--prev { right: 65px; }
.dynamic-slider-hero__arrow--next { right: 15px; }
.dynamic-slider-hero__arrow:hover { color: #ccc; }
.dynamic-slider-hero__arrow.swiper-button-disabled { color: #555; }

.dynamic-slider-hero__pagination {
	padding: 20px 15px;
	justify-content: flex-start;
	gap: 0px;
	width: auto!important;
}
.dynamic-slider-hero__pagination .swiper-pagination-bullet {
	width: 16px; height: 3px;
	background: #FFFFFF66;
	opacity: 1;
	transition: width 0.3s;
	border-radius: 99px;
}
.dynamic-slider-hero__pagination .swiper-pagination-bullet-active {
	background: #fff;
	width: 32px;
}

.dynamic-slider-hero__scrollbar-wrapper {
	position: absolute; bottom: 10px; z-index: 1;
	width: 250px; left: 50%; transform: translateX(-50%);
	padding: 14px 20px;
	backdrop-filter: blur(10px);
	background: rgba(0,0,0,0.15);
	border-radius: 13px; overflow: hidden;
}
.dynamic-slider-hero__scrollbar { background: rgba(255,255,255,0.13); position: unset; }
.dynamic-slider-hero__scrollbar .swiper-scrollbar-drag { background: #fff; }

@media (max-width: 768px) {
	.dynamic-slider-hero__arrow      { width: 40px; height: 40px; }
	.dynamic-slider-hero__pagination { padding: 16px 20px; }
}