/**
 * Dynamic Slider — homepage "Latest News" (Cards without Borders) and
 * "Upcoming Webinars" (Cards with Borders), aligned to the prototype.
 *
 * Colors: prefer --iti-* from child theme tokens.css (enqueued as dependency).
 * Fallbacks keep the module usable if tokens are not loaded.
 *
 * Module owns content width via .ii-dynamic-slider__container (same pattern as
 * content-listing / news-listing). The parent Divi row can drop its container.
 *
 * Swiper 5.4.5 ships its container styles on .swiper-container, so the base
 * rules for our .ii-dynamic-slider__swiper element are restated below.
 */

.ii-dynamic-slider {
	--ii-navy: var(--iti-navy, #0a1f3d);
	--ii-navy-2: var(--iti-navy-2, #0e2647);
	--ii-coral: var(--iti-coral, #ff6b4a);
	--ii-coral-3: var(--iti-coral-3, #e9472b);
	--ii-teal: var(--iti-teal, #2cd5c4);
	--ii-teal-ink: var(--iti-teal-ink, #0e8c7e);
	--ii-ink: var(--iti-ink, #1a2540);
	--ii-text: var(--iti-text, #2b3650);
	--ii-paper: var(--iti-paper, #ffffff);
	--ii-mist: var(--iti-mist, #eef4fb);
	--ii-muted: var(--iti-muted, #6b7793);
	--ii-rule: var(--iti-rule, rgba(10, 31, 61, 0.1));
	--ii-radius-card: 16px;
	--ii-radius-media: 10px;
	--ii-radius-pill: 999px;
	--ii-shadow-card-hover: 0 24px 50px rgba(10, 31, 61, 0.14);
	--ii-shadow-btn: 0 6px 18px rgba(255, 107, 74, 0.35);
	--ii-container: var(--gvid-h6l3qgjp23, 1176px);
	--ii-gutter: var(--gvid-6pemnomxba, 32px);
	--ii-slide-bleed: 8px;

	color: var(--ii-text);
	background: transparent;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
}

.ii-dynamic-slider *,
.ii-dynamic-slider *::before,
.ii-dynamic-slider *::after {
	box-sizing: border-box;
}

/* Shared content width — header, slider and footer align to the same edges. */
.ii-dynamic-slider__container {
	width: 100%;
	max-width: var(--ii-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ii-gutter);
	padding-right: var(--ii-gutter);
}

/* Brand chrome — locked against Divi Design / Link control-set CSS. */
.et-db #et-boc .et-l .ii-dynamic-slider a,
.et-db #et-boc .et-l .ii-dynamic-slider a:link,
.et-db #et-boc .et-l .ii-dynamic-slider a:visited,
.ii-dynamic-slider a,
.ii-dynamic-slider a:link,
.ii-dynamic-slider a:visited {
	text-decoration: none !important;
}

/* —— Header: heading + description left, arrows right —— */
.ii-dynamic-slider__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__header {
	gap: 32px;
	margin-bottom: 40px;
}

.ii-dynamic-slider__header-copy {
	min-width: 0;
	width: 100%;
}

.ii-dynamic-slider--align-center .ii-dynamic-slider__header-copy {
	text-align: center;
}

.ii-dynamic-slider--align-right .ii-dynamic-slider__header-copy {
	text-align: right;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__heading,
.ii-dynamic-slider__heading {
	margin: 14px 0 0;
	padding: 0;
	font-size: clamp(38px, 4.6vw, 64px) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em;
	color: var(--ii-navy) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__heading-accent,
.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__heading strong,
.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__heading b,
.ii-dynamic-slider__heading-accent {
	font-weight: 800 !important;
	color: inherit !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__description,
.ii-dynamic-slider__description {
	margin: 10px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ii-muted) !important;
}

.ii-dynamic-slider__nav {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__arrow,
.ii-dynamic-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid var(--ii-rule);
	border-radius: 50%;
	background: var(--ii-paper);
	color: var(--ii-navy);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ii-dynamic-slider__arrow svg {
	width: 20px;
	height: 20px;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__arrow:hover,
.ii-dynamic-slider__arrow:hover {
	background: var(--ii-navy);
	border-color: var(--ii-navy);
	color: var(--ii-paper);
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__arrow.swiper-button-disabled,
.ii-dynamic-slider__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	background: var(--ii-paper);
	border-color: var(--ii-rule);
	color: var(--ii-navy);
}

/* Hide both arrows when every slide already fits. */
.ii-dynamic-slider__arrow.swiper-button-lock {
	display: none;
}

/*
 * —— Track ——
 * The bleed keeps hover lift and card shadows from being clipped, matching the
 * prototype's `margin: 0 -8px; padding: 8px` viewport.
 */
.ii-dynamic-slider__swiper {
	position: relative;
	z-index: 1;
	overflow: hidden;
	list-style: none;
	margin: calc(var(--ii-slide-bleed) * -1);
	padding: var(--ii-slide-bleed);
}

.ii-dynamic-slider__swiper .swiper-slide {
	display: flex;
	height: auto;
}

.ii-dynamic-slider__card {
	width: 100%;
	min-width: 0;
}

.ii-dynamic-slider__media {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
}

.ii-dynamic-slider__image,
.ii-dynamic-slider__fill {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ii-dynamic-slider--news .ii-dynamic-slider__fill--tone-1 {
	background: linear-gradient(135deg, #e6e6e6 0%, #bfbfbf 50%, #8a8a8a 100%);
}

.ii-dynamic-slider--news .ii-dynamic-slider__fill--tone-2 {
	background: linear-gradient(135deg, #d8b36b 0%, #a5774c 60%, #7a4f3a 100%);
}

.ii-dynamic-slider--news .ii-dynamic-slider__fill--tone-3 {
	background: linear-gradient(135deg, #3a3f47 0%, #232830 60%, #14181f 100%);
}

.ii-dynamic-slider--news .ii-dynamic-slider__fill--tone-4 {
	background: linear-gradient(135deg, var(--ii-navy) 0%, #13315c 60%, #1d4377 100%);
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__fill--tone-1 {
	background: linear-gradient(150deg, var(--ii-navy), #2a6fdb);
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__fill--tone-2 {
	background: linear-gradient(150deg, #3a0d5c, #c7437a);
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__fill--tone-3 {
	background: linear-gradient(150deg, var(--ii-teal-ink), var(--ii-teal));
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__fill--tone-4 {
	background: linear-gradient(150deg, #7a2e1a, var(--ii-coral));
}

/* —— News layout: borderless card, image over meta + title —— */
.ii-dynamic-slider__card--news {
	display: block;
	background: transparent;
	border: 0;
	transition: transform 0.3s ease;
}

.ii-dynamic-slider__card--news:hover {
	transform: translateY(-4px);
}

.ii-dynamic-slider--news .ii-dynamic-slider__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--ii-radius-media);
	background: var(--ii-mist);
}

.et-db #et-boc .et-l .ii-dynamic-slider--news .ii-dynamic-slider__title,
.ii-dynamic-slider--news .ii-dynamic-slider__title {
	margin: 8px 0 0;
	padding: 0;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.005em;
	color: var(--ii-navy) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider--news .ii-dynamic-slider__excerpt,
.ii-dynamic-slider--news .ii-dynamic-slider__excerpt {
	flex: none;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__title-link,
.ii-dynamic-slider__title-link {
	color: inherit !important;
	transition: color 0.2s ease;
}

.et-db #et-boc .et-l .ii-dynamic-slider__card:hover .ii-dynamic-slider__title-link,
.ii-dynamic-slider__card:hover .ii-dynamic-slider__title-link {
	color: var(--ii-coral) !important;
}

/* —— Webinar layout: bordered card, colored media band, footer row —— */
.ii-dynamic-slider__card--webinar {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ii-rule);
	border-radius: var(--ii-radius-card);
	background: var(--ii-paper);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ii-dynamic-slider__card--webinar:hover {
	transform: translateY(-6px);
	box-shadow: var(--ii-shadow-card-hover);
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(150deg, var(--ii-navy), #2a6fdb);
}

.ii-dynamic-slider__live {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--ii-radius-pill);
	background: rgba(10, 31, 61, 0.65);
	backdrop-filter: blur(6px);
	color: var(--ii-paper);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ii-dynamic-slider__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ii-coral);
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 24px;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__meta,
.ii-dynamic-slider__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ii-muted) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__topic,
.ii-dynamic-slider__topic {
	color: var(--ii-coral) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ii-dynamic-slider__meta-sep {
	color: var(--ii-muted);
	font-size: 18px;
	line-height: 1;
	font-weight: 700;
	opacity: 0.7;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__date,
.ii-dynamic-slider__date {
	color: inherit !important;
	font-weight: inherit;
}

.et-db #et-boc .et-l .ii-dynamic-slider--news .ii-dynamic-slider__meta,
.ii-dynamic-slider--news .ii-dynamic-slider__meta {
	margin: 18px 0 0;
}

.et-db #et-boc .et-l .ii-dynamic-slider--webinar .ii-dynamic-slider__title,
.ii-dynamic-slider--webinar .ii-dynamic-slider__title {
	margin: 10px 0 0;
	padding: 0;
	font-size: 18px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em;
	color: var(--ii-navy) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__excerpt,
.ii-dynamic-slider__excerpt {
	margin: 10px 0 0;
	flex: 1;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ii-muted) !important;
}

/* margin-top: auto keeps the footer on the baseline when a card has no excerpt. */
.ii-dynamic-slider__card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
}

.ii-dynamic-slider__region {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ii-muted) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__register,
.ii-dynamic-slider__register {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ii-coral) !important;
	transition: gap 0.25s ease;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__register:hover,
.ii-dynamic-slider__register:hover {
	gap: 10px;
	color: var(--ii-coral-3) !important;
}

/* —— Pagination dots (Swiper's vendor CSS positions .swiper-pagination absolutely) —— */
.ii-dynamic-slider__pagination.swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 44px;
	transform: none;
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__pagination.swiper-pagination {
	margin-top: 28px;
}

.ii-dynamic-slider__pagination.swiper-pagination-lock {
	display: none;
}

.ii-dynamic-slider__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 50%;
	background: rgba(10, 31, 61, 0.18);
	opacity: 1;
	transition: background 0.2s ease, width 0.2s ease;
}

.ii-dynamic-slider__pagination .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: var(--ii-radius-pill);
	background: var(--ii-coral);
}

/* —— Footer buttons: outline first, solid second (prototype order) —— */
.ii-dynamic-slider__footer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

.ii-dynamic-slider--webinar .ii-dynamic-slider__footer {
	margin-top: 28px;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__button,
.ii-dynamic-slider__button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: var(--ii-radius-pill);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease,
		color 0.25s ease, border-color 0.25s ease;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__button--primary,
.ii-dynamic-slider__button--primary {
	padding: 10.5px 22.5px;
	border: 1.5px solid var(--ii-coral);
	background: var(--ii-paper);
	color: var(--ii-coral) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__button--primary:hover,
.ii-dynamic-slider__button--primary:hover {
	background: var(--ii-coral);
	color: var(--ii-paper) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__button--secondary,
.ii-dynamic-slider__button--secondary {
	border: 0;
	background: var(--ii-coral);
	box-shadow: var(--ii-shadow-btn);
	color: var(--ii-paper) !important;
}

.et-db #et-boc .et-l .ii-dynamic-slider .ii-dynamic-slider__button--secondary:hover,
.ii-dynamic-slider__button--secondary:hover {
	transform: translateY(-1px);
	background: var(--ii-coral-3);
	box-shadow: 0 10px 24px rgba(255, 107, 74, 0.45);
}

.ii-dynamic-slider__empty {
	width: 100%;
}

.ii-dynamic-slider__preview-status {
	padding: 0 var(--ii-gutter);
}

/* —— Responsive —— */
@media (max-width: 980px) {
	.ii-dynamic-slider__header {
		margin-bottom: 32px;
	}

	.ii-dynamic-slider--webinar .ii-dynamic-slider__header {
		margin-bottom: 28px;
	}

	.ii-dynamic-slider__pagination.swiper-pagination {
		margin-top: 32px;
	}
}

@media (max-width: 720px) {
	.ii-dynamic-slider__header {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 20px;
	}

	.ii-dynamic-slider__heading {
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.ii-dynamic-slider--webinar .ii-dynamic-slider__body {
		padding: 18px 18px 20px;
	}

	.ii-dynamic-slider__footer {
		margin-top: 28px;
	}
}