/* SDL Widgets: Feature Switcher */
.sdlw-fs {
	--sdlw-fs-list: 50%;
	--sdlw-fs-speed: 400ms;
	--sdlw-fs-lift: 0px;
	--sdlw-fs-sticky: 100px;
	--sdlw-fs-tile-w: 42px;
	--sdlw-fs-tile-h: 58px;
	--sdlw-fs-icon: 20px;
	--sdlw-fs-progress: var(--sdlw-navy);
	--sdlw-fs-ease: cubic-bezier(.2, .7, .2, 1);
	--sdlw-fs-screen-l: 11.36%;
	--sdlw-fs-screen-t: 7.74%;
	--sdlw-fs-screen-w: 77.43%;
	--sdlw-fs-screen-h: 65.49%;
	--sdlw-fs-screen-bg: #fff;
	--sdlw-fs-fit: cover;
	--sdlw-fs-focus: center top;
	--sdlw-fs-device: 100%;
	position: relative;
	width: 100%;
}

/* Heading */
.sdlw-fs__header { margin: 0 auto 56px; text-align: center; }
.sdlw-fs__heading {
	margin: 0 0 14px;
	color: #11192d;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
}
.sdlw-fs__subheading { margin: 0; color: #6f7686; font-size: 15px; line-height: 1.6; }

/* Columns */
.sdlw-fs__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--sdlw-fs-list)) minmax(0, 1fr);
	grid-template-areas: "list media";
	align-items: start;
	gap: 20px;
}
.sdlw-fs--img-left .sdlw-fs__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--sdlw-fs-list));
	grid-template-areas: "media list";
}
.sdlw-fs__list { grid-area: list; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sdlw-fs__media { grid-area: media; min-width: 0; }
.sdlw-fs--sticky .sdlw-fs__media { position: sticky; top: var(--sdlw-fs-sticky); }

/* Items */
.sdlw-fs__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 14px;
	row-gap: 12px;
	padding: 12px 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e8e9ee;
	border-radius: 10px;
	cursor: pointer;
	outline: none;
	transition: background-color var(--sdlw-fs-speed) ease, border-color var(--sdlw-fs-speed) ease, box-shadow var(--sdlw-fs-speed) ease, transform .25s var(--sdlw-fs-ease);
	-webkit-tap-highlight-color: transparent;
}
.sdlw-fs__item:not(.is-active):hover { background: #fafbfd; transform: translateY(var(--sdlw-fs-lift)); }
.sdlw-fs__item.is-active { background: #f4f5fa; border-color: #e5e6eb; }
.sdlw-fs__item:focus-visible { outline: 2px solid var(--sdlw-accent); outline-offset: 2px; }

.sdlw-fs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: var(--sdlw-fs-tile-w);
	height: var(--sdlw-fs-tile-h);
	border-radius: 4px;
	background: var(--sdlw-navy);
	color: #fff;
	font-size: var(--sdlw-fs-icon);
	line-height: 1;
	transition: background-color var(--sdlw-fs-speed) ease;
}
.sdlw-fs__icon svg { width: var(--sdlw-fs-icon); height: var(--sdlw-fs-icon); fill: currentColor; }
.sdlw-fs__icon i { font-size: inherit; }

.sdlw-fs__body { min-width: 0; }
.sdlw-fs__title {
	margin: 0 0 4px;
	color: #1e2636;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	transition: color var(--sdlw-fs-speed) ease;
}
.sdlw-fs__text {
	margin: 0;
	color: #8b93a5;
	font-size: 13.5px;
	line-height: 1.55;
}
.sdlw-fs__lead { color: #7b849a; font-weight: 600; }

/* Autoplay progress bar */
.sdlw-fs__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--sdlw-fs-progress);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}
.sdlw-fs--progress .sdlw-fs__item.is-active.is-timing .sdlw-fs__progress {
	opacity: 1;
	animation: sdlw-fs-progress var(--sdlw-fs-interval, 5000ms) linear forwards;
}
@keyframes sdlw-fs-progress { to { transform: scaleX(1); } }

/* Image panel */
.sdlw-fs__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 320px;
	padding: 40px 28px;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--sdlw-navy);
	background-image: radial-gradient(90% 70% at 100% 100%, rgba(22, 92, 98, .95) 0%, rgba(22, 92, 98, 0) 60%);
}
.sdlw-fs__slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sdlw-fs-speed) ease, transform var(--sdlw-fs-speed) var(--sdlw-fs-ease), visibility 0s linear var(--sdlw-fs-speed);
}
.sdlw-fs__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--sdlw-fs-speed) ease, transform var(--sdlw-fs-speed) var(--sdlw-fs-ease), visibility 0s;
}
.sdlw-fs__slide img { display: block; width: 100%; height: auto; max-width: 100%; }
.sdlw-fs--slide .sdlw-fs__slide { transform: translateY(14px); }
.sdlw-fs--slide .sdlw-fs__slide.is-active { transform: none; }
.sdlw-fs--zoom .sdlw-fs__slide { transform: scale(.96); }
.sdlw-fs--zoom .sdlw-fs__slide.is-active { transform: none; }
.sdlw-fs--none .sdlw-fs__slide { transition: none; }

.sdlw-fs__inline-media { display: none; }

/* Laptop frame: the device stays still, only the screen content changes */
.sdlw-fs__device {
	position: relative;
	width: var(--sdlw-fs-device);
	max-width: 100%;
	margin: 0 auto;
	align-self: center;
	justify-self: center;
}
.sdlw-fs__frame {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}
.sdlw-fs__screen {
	position: absolute;
	z-index: 2;
	left: var(--sdlw-fs-screen-l);
	top: var(--sdlw-fs-screen-t);
	width: var(--sdlw-fs-screen-w);
	height: var(--sdlw-fs-screen-h);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	overflow: hidden;
	background: var(--sdlw-fs-screen-bg);
}
.sdlw-fs--framed .sdlw-fs__screen .sdlw-fs__slide,
.sdlw-fs__shot {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
}
.sdlw-fs--framed .sdlw-fs__screen img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	object-fit: var(--sdlw-fs-fit);
	object-position: var(--sdlw-fs-focus);
}
.sdlw-fs--framed .sdlw-fs__panel { align-items: center; justify-items: center; }

/* ---------------------------------------------------------------- Tablet & mobile: stack */
@media (max-width: 1024px) {
	.sdlw-fs__header { margin-bottom: 40px; }
	.sdlw-fs__heading { font-size: 28px; }
	.sdlw-fs__grid,
	.sdlw-fs--img-left .sdlw-fs__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "media" "list";
		gap: 24px;
	}
	.sdlw-fs--stack-bottom .sdlw-fs__grid { grid-template-areas: "list" "media"; }
	.sdlw-fs--sticky .sdlw-fs__media { position: static; }
	.sdlw-fs__panel { min-height: 0; padding: 32px 24px; }

	/* Inline: each item opens its own image; the side panel is hidden. */
	.sdlw-fs--stack-inline .sdlw-fs__grid { grid-template-areas: "list"; }
	.sdlw-fs--stack-inline .sdlw-fs__media { display: none; }
	.sdlw-fs--stack-inline .sdlw-fs__inline-media {
		display: grid;
		grid-column: 1 / -1;
		grid-template-rows: 0fr;
		margin: 0 -4px;
		border-radius: 12px;
		overflow: hidden;
		background-color: var(--sdlw-navy);
		background-image: radial-gradient(90% 70% at 100% 100%, rgba(22, 92, 98, .95) 0%, rgba(22, 92, 98, 0) 60%);
		transition: grid-template-rows var(--sdlw-fs-speed) var(--sdlw-fs-ease), margin-top var(--sdlw-fs-speed) var(--sdlw-fs-ease);
	}
	.sdlw-fs--stack-inline .sdlw-fs__inline-inner { min-height: 0; overflow: hidden; }
	.sdlw-fs--stack-inline:not(.sdlw-fs--framed) .sdlw-fs__inline-inner img { display: block; width: 100%; height: auto; margin: 0 auto; padding: 20px 16px; }
	.sdlw-fs--stack-inline.sdlw-fs--framed .sdlw-fs__inline-inner .sdlw-fs__device { width: calc(100% - 32px); margin: 20px auto; }
	.sdlw-fs--stack-inline .sdlw-fs__item.is-active .sdlw-fs__inline-media { grid-template-rows: 1fr; margin-top: 14px; }
}

@media (max-width: 767px) {
	.sdlw-fs__header { margin-bottom: 28px; }
	.sdlw-fs__heading { font-size: 24px; }
	.sdlw-fs__subheading { font-size: 14px; }
	.sdlw-fs__grid { gap: 18px; }
	.sdlw-fs__list { gap: 10px; }
	/* Mobile: icon on top, title and text centred (the Icon position / Content alignment settings override this). */
	.sdlw-fs__item { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 18px 16px; column-gap: 12px; row-gap: 12px; }
	.sdlw-fs__item .sdlw-fs__icon { align-self: auto; }
	.sdlw-fs__inline-media { justify-self: stretch; }
	.sdlw-fs { --sdlw-fs-tile-w: 38px; --sdlw-fs-tile-h: 50px; --sdlw-fs-icon: 18px; }
	.sdlw-fs__title { font-size: 15px; }
	.sdlw-fs__text { font-size: 13px; }
	.sdlw-fs__panel { padding: 22px 14px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.sdlw-fs__item,
	.sdlw-fs__slide,
	.sdlw-fs__icon,
	.sdlw-fs__title,
	.sdlw-fs--stack-inline .sdlw-fs__inline-media { transition: none !important; }
	.sdlw-fs__item:not(.is-active):hover { transform: none; }
	.sdlw-fs__progress { display: none; }
}