/**
 * RSI Toolkit — Initiatives Cards widget.
 *
 * Updated to the 2026 Figma "Initiatives" section: a full-bleed band with a
 * shared background photo + dark overlay, holding translucent cards (image +
 * Alexandria title / copy, white) and an optional CTA button below the grid.
 * Columns / gap / padding / colours / radius are Elementor Style-tab controls;
 * everything below is the baked default those controls override.
 */

.rsi-initiatives {
	position: relative;
	overflow: hidden;
	/* Background image + vertical padding are set on the Elementor container.
	   The widget keeps only the dark scrim (::before) so white text stays
	   readable over whatever background the container carries. */
}

/* Dark overlay over the background photo (Figma: rgba(0,0,0,.2)). */
.rsi-initiatives::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rsi-overlay, rgba(0, 0, 0, .2));
	pointer-events: none;
	z-index: 0;
}

/* Legacy diagonal streak (kept as an option; off in the new design). */
.rsi-initiatives--streak::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, transparent 0 33%, rgba(255, 255, 255, .15) 33% 52%, transparent 52%);
	pointer-events: none;
	z-index: 0;
}

.rsi-initiatives__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 112px;
	padding-bottom: 112px;
}

/* Drag/scroll rail: left aligns to content, right bleeds to the viewport so
   cards run off the right and you scroll/drag left (same as Projects). */
/* Rail bleeds to the viewport's right edge (0 right padding): cards run off
   the right and you scroll/drag left, like the skydonate reels widget. */
.rsi-initiatives__grid {
	display: flex;
	align-items: stretch;
	gap: 40px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	padding-bottom: 6px;
	margin-right: calc(50% - 50vw);
	-webkit-overflow-scrolling: touch;
}

.rsi-initiatives__grid::-webkit-scrollbar {
	display: none;
}

.rsi-initiatives__card {
	flex: 0 0 380px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	background: var(--rsi-card-bg, rgba(0, 0, 0, .1));
	color: #fff;
	text-decoration: none;
}

.rsi-initiatives__thumb {
	position: relative;
	width: 100%;
	height: 245px;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
}

/* width/height forced so Woodmart's `img { height: auto !important }` can't
   letterbox the photo (same fix as the galaxy / media-card tiles). */
.rsi-initiatives__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.rsi-initiatives__body {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 32px;
}

.rsi-initiatives__title {
	font-family: 'Alexandria', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 41px;
	margin: 0;
	color: #fff;
}

.rsi-initiatives__text {
	font-family: 'Alexandria', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	letter-spacing: .5px;
	margin: 0;
	color: #fff;
}

/* Controls row: CTA button (left) + scroll arrows (right). */
.rsi-initiatives__cta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 32px;
}

.rsi-initiatives__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	background: #171c1f;
	color: #fff;
	font-family: 'Alexandria', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .3px;
	line-height: 24px;
	text-decoration: none;
	transition: filter .15s;
}

.rsi-initiatives__btn:hover {
	filter: brightness(1.15);
	color: #fff;
}

.rsi-initiatives__arrows {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rsi-initiatives__arrow {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .15s, background .15s;
}

.rsi-initiatives__arrow:hover {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, .22);
}

.rsi-initiatives__arrow svg {
	width: 22px;
	height: 22px;
}

/* Mobile: card is full width with a slim peek of the next on the right. */
@media (max-width: 767px) {
	.rsi-initiatives__card {
		flex-basis: 85vw;
	}

	.rsi-initiatives__title {
		font-size: 24px;
		line-height: 41px;
	}
}