/**
 * FDM Fund Slider — full-bleed background photo, content panel anchored
 * right with a vertical gold divider, gold pill CTA. Auto-rotation,
 * dot navigation, prev/next arrows.
 *
 * Visual reference: solving.org's "Watch Story" hero — face on the
 * left of the photo, headline + body + pill button on the right with
 * a thin gold divider line just inside the content edge.
 */

.fdm-fund-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: #fff;
	font-family: inherit;
	--fdm-fs-min-h: 460px;
	--fdm-fs-gold: #b8963e;
	--fdm-fs-gold-soft: #d8b86a;
}

.fdm-fund-slider__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	background: #1a1410;
	min-height: var(--fdm-fs-min-h);
}

/* Single-cell grid stack — every slide occupies the same grid area, so
 * the viewport renders at the height of the TALLEST slide and every
 * other slide gets that exact same height. This eliminates the height
 * wobble that happened when the active slide flowed in normal layout
 * and a longer tagline pushed the container taller than the others. */
.fdm-fund-slider__track {
	position: relative;
	display: grid;
	grid-template-areas: "stack";
	min-height: var(--fdm-fs-min-h); /* floor for short content sets */
}

.fdm-fund-slider__slide {
	grid-area: stack;
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
	overflow: hidden;
	border-radius: inherit;
}
.fdm-fund-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.fdm-fund-slider__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #2c1f15;
	transform: scale(1.02);
	transition: transform 8s ease;
}
.fdm-fund-slider__slide.is-active .fdm-fund-slider__bg {
	transform: scale(1.08); /* slow ken-burns */
}

/* Warm overlay — keeps the photo visible while making the right-side
 * text legible. Slightly heavier on the right where the content sits. */
.fdm-fund-slider__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			rgba(48, 32, 16, 0.20) 0%,
			rgba(48, 32, 16, 0.40) 45%,
			rgba(48, 32, 16, 0.62) 100%
		),
		linear-gradient(to top,
			rgba(20, 14, 8, 0.30) 0%,
			rgba(20, 14, 8, 0.05) 60%
		);
}

/* Content panel — anchored right side of the slide, vertically centred,
 * with the gold divider line on its left edge (matches reference).
 * Stretches to the full grid-cell height so every slide presents at
 * the same height regardless of its tagline length. */
.fdm-fund-slider__panel {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 44px clamp(28px, 6vw, 96px);
	gap: clamp(24px, 3vw, 48px);
}

.fdm-fund-slider__divider {
	flex: 0 0 1px;
	align-self: stretch;
	margin: 44px 0;
	background: linear-gradient(
		to bottom,
		rgba(216, 184, 106, 0) 0%,
		var(--fdm-fs-gold) 12%,
		var(--fdm-fs-gold) 88%,
		rgba(216, 184, 106, 0) 100%
	);
}

.fdm-fund-slider__content {
	flex: 0 1 580px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fdm-fund-slider__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
	display: block;
}

.fdm-fund-slider__name {
	font-size: clamp(22px, 1.7vw, 23px);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fdm-fs-gold-soft);
	line-height: 1;
}

.fdm-fund-slider__tagline {
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.18;
	font-weight: 700;
	margin: 0;
	color: #fff;
	letter-spacing: -0.005em;
	text-shadow: 0 1px 3px rgba(0,0,0,0.30);
}

/* Ambassador list — one row per person, photo paired with the name on
 * the same horizontal line so the photo sits visually next to its own
 * label rather than centred against the whole stack. */
.fdm-fund-slider__ambassadors {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Divi indents lists inside its builder with a selector more specific than
 * one class, which pushed the avatar right of the copy it sits under. The
 * Content Bank copy of this slider hit exactly that; escalated here too so
 * both render identically. */
.fdm-fund-slider .fdm-fund-slider__ambassadors {
	padding-left: 0 !important;
	margin-left: 0 !important;
	list-style: none !important;
}
.fdm-fund-slider .fdm-fund-slider__amb-row {
	padding-left: 0 !important;
	margin-left: 0 !important;
	list-style: none !important;
}
.fdm-fund-slider .fdm-fund-slider__amb-row::before,
.fdm-fund-slider .fdm-fund-slider__amb-row::marker {
	content: none !important;
	display: none !important;
}
.fdm-fund-slider__amb-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}
.fdm-fund-slider__amb-photo {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: #444;
	display: block;
}
/* Placeholder occupies the same space as a photo so name-only rows still
 * line up with photo rows above them. */
.fdm-fund-slider__amb-photo--placeholder {
	border: 2px dashed rgba(255, 255, 255, 0.35);
	background: transparent;
}
.fdm-fund-slider__amb-text {
	min-width: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.02em;
	line-height: 1.35;
}
.fdm-fund-slider__amb-text strong {
	font-weight: 600;
	color: #fff;
}
.fdm-fund-slider__amb-title {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 400;
}
.fdm-fund-slider__amb-title::before {
	content: ', ';
	color: rgba(255, 255, 255, 0.72);
}

/* Gold pill CTA matching the reference "Watch Story" button. */
.fdm-fund-slider__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 14px 38px;
	width: fit-content;
	background: var(--fdm-fs-gold);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 999px;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.fdm-fund-slider__cta:hover,
.fdm-fund-slider__cta:focus-visible {
	background: var(--fdm-fs-gold-soft);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.22);
	color: #fff;
	text-decoration: none;
	outline: none;
}

/* ── Arrows ─────────────────────────────────────── */
.fdm-fund-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.28);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.2s, transform 0.2s;
	padding: 0;
}
.fdm-fund-slider__arrow:hover {
	background: rgba(255,255,255,0.22);
	transform: translateY(-50%) scale(1.05);
}
.fdm-fund-slider__arrow--prev { left: 18px; }
.fdm-fund-slider__arrow--next { right: 18px; }

/* ── Dots ───────────────────────────────────────── */
.fdm-fund-slider__dots {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
}
.fdm-fund-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.45);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s, width 0.2s;
}
.fdm-fund-slider__dot:hover { background: rgba(255,255,255,0.75); }
.fdm-fund-slider__dot.is-active {
	background: #fff;
	width: 22px;
	border-radius: 6px;
}

/* ── Mobile — drop the divider, flow content full-width, hide arrows
 *    (swipe + dots already handle navigation; the side arrows on a
 *    narrow screen overlap the tagline text). ── */
@media (max-width: 820px) {
	.fdm-fund-slider { --fdm-fs-min-h: 480px; }
	.fdm-fund-slider__panel {
		justify-content: stretch;
		padding: 40px 28px 64px; /* extra bottom room for the dots */
	}
	.fdm-fund-slider__divider { display: none; }
	.fdm-fund-slider__content {
		flex: 1 1 auto;
		max-width: none;
		gap: 14px;
	}
	.fdm-fund-slider__overlay {
		background:
			linear-gradient(to top,
				rgba(20, 14, 8, 0.78) 0%,
				rgba(20, 14, 8, 0.45) 50%,
				rgba(20, 14, 8, 0.20) 100%
			);
	}
	.fdm-fund-slider__icon { width: 44px; height: 44px; }
	.fdm-fund-slider__tagline {
		font-size: clamp(18px, 5.2vw, 26px);
		line-height: 1.22;
	}
	.fdm-fund-slider__arrow { display: none; }
	.fdm-fund-slider__dots { bottom: 18px; }
}

@media (max-width: 480px) {
	.fdm-fund-slider { --fdm-fs-min-h: 440px; }
	.fdm-fund-slider__panel { padding: 32px 22px 60px; }
	.fdm-fund-slider__icon { width: 38px; height: 38px; }
	.fdm-fund-slider__name { font-size: 21px; letter-spacing: 0.2em; }
	.fdm-fund-slider__amb-photo { width: 36px; height: 36px; }
	.fdm-fund-slider__amb-text { font-size: 13px; }
	.fdm-fund-slider__cta { padding: 12px 28px; font-size: 14px; }
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.fdm-fund-slider__slide,
	.fdm-fund-slider__bg,
	.fdm-fund-slider__cta,
	.fdm-fund-slider__arrow,
	.fdm-fund-slider__dot {
		transition: none !important;
	}
	.fdm-fund-slider__slide.is-active .fdm-fund-slider__bg {
		transform: none;
	}
}