/**
 * Elementor Custom Widget: Sticky Stacking Activities Cards (بطاقات الأنشطة التراكمية)
 * Production Stylesheet with CSS Custom Properties, Sticky Stacking Mechanics, RTL & Responsive
 *
 * @package Khalaf_Elementor_Addons_P2
 */

/* Scoped Local Reset for Sticky Stacking Activities */
:where(.kew-ssa-outer, .kew-ssa-outer *) {
	box-sizing: border-box;
}

:where(.kew-ssa-outer) h1,
:where(.kew-ssa-outer) h2,
:where(.kew-ssa-outer) h3,
:where(.kew-ssa-outer) h4,
:where(.kew-ssa-outer) p,
:where(.kew-ssa-outer) ul,
:where(.kew-ssa-outer) ol,
:where(.kew-ssa-outer) li {
	margin: 0;
	padding: 0;
}

:where(.kew-ssa-outer) a {
	color: inherit;
	text-decoration: none;
}

:where(.kew-ssa-outer) button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Ensure Elementor containers do not block sticky positioning */
.elementor-widget-kew-sticky-stacking-activities,
.elementor-widget-kew-sticky-stacking-activities > .elementor-widget-container {
	overflow: visible !important;
}

/* ==============================================================
   KEW Sticky Stacking Activities (بطاقات الأنشطة التراكمية)
   ============================================================== */
.kew-ssa-section {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: visible !important;
}

.kew-ssa-wrap {
	width: min(1200px, 90%);
	margin-inline: auto;
	position: relative;
	box-sizing: border-box;
	overflow: visible !important;
}

.kew-ssa-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 54px;
}

.kew-ssa-top-left {
	flex: 1;
	min-width: 280px;
}

.kew-ssa-kicker {
	font-family: "DM Mono", "DM Mono Fallback", ui-monospace, monospace;
	font-size: 12.5px;
	font-weight: 500;
	color: #2a9d9d;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.kew-ssa-kicker.has-dash::before {
	content: "";
	width: 26px;
	height: 2px;
	background-color: #b98a3c;
	display: inline-block;
	flex-shrink: 0;
}

.kew-ssa-title {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", "Manrope", "Manrope Fallback", system-ui, sans-serif;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: #292f6e;
	margin: 0;
}

.kew-ssa-title em {
	font-style: normal;
	color: #2a9d9d;
}

.kew-ssa-sub {
	color: #636a8f;
	font-size: 18px;
	line-height: 1.6;
	max-width: 560px;
	margin: 0;
}

/* Cards Container & Sticky Stacking Mechanics */
.kew-ssa-cards {
	position: relative;
	width: 100%;
	overflow: visible !important;
}

.kew-ssa-card {
	position: relative;
	min-height: min(66vh, 520px);
	border-radius: 44px;
	padding: clamp(28px, 4vw, 54px);
	display: grid;
	grid-template-columns: auto 1.1fr 1fr;
	gap: clamp(20px, 4vw, 54px);
	align-items: end;
	margin-bottom: 30px;
	overflow: hidden;
	box-shadow: 0 -24px 60px rgba(15, 18, 51, 0.16);
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.4s ease;
	will-change: transform;
}

.kew-ssa-card.is-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--kew-ssa-top-offset, 80px) + var(--kew-i, 0) * var(--kew-ssa-stack-step, 30px));
	z-index: calc(10 + var(--kew-i, 0));
}

/* Decorative Corner Ring */
.kew-ssa-card.has-ring::after {
	content: "";
	position: absolute;
	right: -90px;
	top: -90px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 56px solid rgba(255, 255, 255, 0.12);
	transition: transform 1s cubic-bezier(0.2, 0.9, 0.2, 1);
	pointer-events: none;
	box-sizing: border-box;
}

.kew-ssa-card:hover.has-ring::after {
	transform: scale(1.25) rotate(60deg);
}

/* RTL support for Corner Ring */
[dir="rtl"] .kew-ssa-card.has-ring::after {
	right: auto;
	left: -90px;
}

/* Card Inner Columns */
.kew-ssa-num {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", "Manrope", "Manrope Fallback", system-ui, sans-serif;
	font-size: clamp(90px, 14vw, 210px);
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.07em;
	opacity: 0.95;
	align-self: start;
	user-select: none;
	display: block;
}

.kew-ssa-card-title {
	font-family: "Bricolage Grotesque", "Bricolage Fallback", "Manrope", "Manrope Fallback", system-ui, sans-serif;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.04em;
	margin: 0;
}

.kew-ssa-card-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.kew-ssa-card-desc {
	font-size: 17px;
	line-height: 1.6;
	max-width: 440px;
	margin: 0;
	opacity: 0.92;
}

.kew-ssa-go {
	margin-top: 26px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}

.kew-ssa-go i {
	font-style: normal;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
	font-size: 20px;
	flex-shrink: 0;
}

.kew-ssa-card:hover .kew-ssa-go i {
	transform: translateX(10px) rotate(-45deg);
}

[dir="rtl"] .kew-ssa-card:hover .kew-ssa-go i {
	transform: translateX(-10px) rotate(45deg);
}

/* Color Presets */
/* Preset 1 (Navy & Teal) */
.kew-ssa-preset-s1 {
	background-color: #292f6e;
	color: #ffffff;
}

.kew-ssa-preset-s1 .kew-ssa-num {
	color: #5bc4c4;
}

.kew-ssa-preset-s1 .kew-ssa-card-title {
	color: #ffffff;
}

.kew-ssa-preset-s1 .kew-ssa-card-desc {
	color: rgba(255, 255, 255, 0.88);
}

.kew-ssa-preset-s1 .kew-ssa-go {
	color: #ffffff;
}

.kew-ssa-preset-s1 .kew-ssa-go i {
	background-color: #5bc4c4;
	color: #171b45;
}

/* Preset 2 (Teal & Navy) */
.kew-ssa-preset-s2 {
	background-color: #5bc4c4;
	color: #171b45;
}

.kew-ssa-preset-s2 .kew-ssa-num {
	color: #ffffff;
}

.kew-ssa-preset-s2 .kew-ssa-card-title {
	color: #171b45;
}

.kew-ssa-preset-s2 .kew-ssa-card-desc {
	color: rgba(23, 27, 69, 0.88);
}

.kew-ssa-preset-s2 .kew-ssa-go {
	color: #171b45;
}

.kew-ssa-preset-s2 .kew-ssa-go i {
	background-color: #171b45;
	color: #5bc4c4;
}

/* Preset 3 (Gold & Navy) */
.kew-ssa-preset-s3 {
	background-color: #d4b06a;
	color: #171b45;
}

.kew-ssa-preset-s3 .kew-ssa-num {
	color: #ffffff;
}

.kew-ssa-preset-s3 .kew-ssa-card-title {
	color: #171b45;
}

.kew-ssa-preset-s3 .kew-ssa-card-desc {
	color: rgba(23, 27, 69, 0.88);
}

.kew-ssa-preset-s3 .kew-ssa-go {
	color: #171b45;
}

.kew-ssa-preset-s3 .kew-ssa-go i {
	background-color: #171b45;
	color: #d4b06a;
}

/* Card Custom Background Image Layer */
.kew-ssa-card-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	pointer-events: none;
}

.kew-ssa-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.kew-ssa-card > :not(.kew-ssa-card-bg-img):not(.kew-ssa-card-overlay) {
	position: relative;
	z-index: 2;
}

/* Outro Paragraph */
.kew-ssa-out {
	margin-top: 44px;
	text-align: center;
	color: #636a8f;
	font-size: 17.5px;
	line-height: 1.7;
}

/* Scroll Reveal Animations */
.kew-ssa-rv {
	opacity: 1; /* Fallback default so content is never blank if JS is delayed */
	transform: none;
	transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
	will-change: opacity, transform;
}

.kew-ssa-outer[data-reveal="true"] .kew-ssa-rv:not(.in) {
	opacity: 0;
	transform: translateY(32px);
}

.kew-ssa-outer[data-reveal="true"] .kew-ssa-rv.in {
	opacity: 1;
	transform: none;
}

/* Responsive Breakdown */
@media (max-width: 1000px) {
	.kew-ssa-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 34px;
	}

	.kew-ssa-card {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 20px;
		padding: clamp(24px, 5vw, 36px);
		border-radius: 32px;
	}

	.kew-ssa-card.bp-1000 {
		position: relative !important;
		top: auto !important;
		min-height: auto !important;
	}

	.kew-ssa-num {
		font-size: clamp(64px, 16vw, 90px);
		line-height: 0.9;
	}

	.kew-ssa-card-title {
		font-size: clamp(22px, 5vw, 32px);
	}

	.kew-ssa-card-desc {
		font-size: 15.5px;
		max-width: 100%;
	}

	.kew-ssa-card.has-ring::after {
		right: -130px;
		top: -130px;
		width: 280px;
		height: 280px;
		border-width: 44px;
	}

	[dir="rtl"] .kew-ssa-card.has-ring::after {
		right: auto;
		left: -130px;
	}
}

@media (max-width: 768px) {
	.kew-ssa-card.bp-768 {
		position: relative !important;
		top: auto !important;
		min-height: auto !important;
	}

	.kew-ssa-card {
		padding: 24px 20px;
		border-radius: 26px;
		margin-bottom: 20px;
	}

	.kew-ssa-num {
		font-size: clamp(54px, 14vw, 76px);
	}

	.kew-ssa-card-title {
		font-size: 22px;
	}

	.kew-ssa-top {
		margin-bottom: 26px;
	}

	.kew-ssa-out {
		margin-top: 26px;
		font-size: 15.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kew-ssa-rv {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.kew-ssa-card::after {
		transition: none !important;
	}

	.kew-ssa-go i {
		transition: none !important;
	}
}