/**
 * AT Elementor Elements — Creative Services Experience CSS
 *
 * @package AT_Elementor_Elements
 * @version 3.0.0
 */

.at-services-experience {
	--at-service-accent: var(--at-color-primary, #2563eb);
	--at-service-border: rgba(0, 0, 0, 0.08);
	--at-service-hover-bg: rgba(37, 99, 235, 0.04);
	position: relative;
	width: 100%;
	padding: clamp(48px, 6vw, 96px) 0;
	box-sizing: border-box;
}

.at-services-experience__header {
	max-width: 800px;
	margin-bottom: clamp(36px, 5vw, 60px);
}

.at-services-experience__header > span {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--at-service-accent);
	margin-bottom: 16px;
	padding: 4px 12px;
	background: rgba(37, 99, 235, 0.08);
	border-radius: 999px;
}

.at-services-experience h2 {
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: var(--at-color-heading, #0f172a);
	margin: 0;
}

.at-services-experience__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: clamp(36px, 6vw, 84px);
	align-items: stretch;
}

/* Layout Variations: Visual Left vs Right */
.at-services-experience--visual-left .at-services-experience__layout {
	grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
}
.at-services-experience--visual-left .at-services-experience__preview {
	order: 1;
}
.at-services-experience--visual-left .at-services-experience__list {
	order: 2;
}

.at-services-experience__list {
	border-top: 1px solid var(--at-service-border);
}

.at-services-experience__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 28px;
	gap: 16px;
	align-items: center;
	border: 0;
	border-bottom: 1px solid var(--at-service-border);
	width: 100%;
	padding: clamp(20px, 3vh, 30px) 8px;
	background: none;
	color: inherit;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
	outline: none;
}

.at-services-experience__item:hover,
.at-services-experience__item:focus-visible,
.at-services-experience__item.is-active {
	background-color: var(--at-service-hover-bg);
	padding-left: 16px;
	padding-right: 16px;
}

.at-services-experience__number {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--at-service-accent);
}

.at-services-experience__copy h3 {
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--at-color-heading, #0f172a);
	margin: 0;
}

.at-services-experience__copy p {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--at-color-text, #475569);
	max-width: 520px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.45s ease, opacity 0.35s ease;
}

.at-services-experience__item.is-active .at-services-experience__copy p {
	max-height: 120px;
	opacity: 1;
}

.at-services-experience__arrow {
	font-size: 20px;
	color: var(--at-service-accent);
	transition: transform 0.3s ease;
	justify-self: end;
}

.at-services-experience__item.is-active .at-services-experience__arrow {
	transform: translate(3px, -3px);
}

.at-services-experience__preview {
	position: relative;
	min-height: 440px;
	overflow: hidden;
	border-radius: 24px;
	background: #0f172a;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.18);
}

.at-services-experience__image {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: inherit;
}

.at-services-experience__image.is-active {
	opacity: 1;
	transform: none;
}

.at-services-experience__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Theme: Dark */
.at-services-experience--theme-dark {
	--at-service-border: rgba(255, 255, 255, 0.12);
	--at-services-hover-bg: rgba(255, 255, 255, 0.04);
	color: #ffffff;
}
.at-services-experience--theme-dark h2,
.at-services-experience--theme-dark .at-services-experience__copy h3 {
	color: #ffffff;
}
.at-services-experience--theme-dark .at-services-experience__copy p {
	color: rgba(255, 255, 255, 0.75);
}
.at-services-experience--theme-dark .at-services-experience__preview {
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 991px) {
	.at-services-experience__layout,
	.at-services-experience--visual-left .at-services-experience__layout {
		grid-template-columns: 1fr;
	}
	.at-services-experience__preview {
		min-height: 280px;
		order: -1 !important;
	}
	.at-services-experience__list {
		order: 2 !important;
	}
}

@media (max-width: 767px) {
	.at-services-experience {
		padding: 36px 0;
	}
	.at-services-experience h2 {
		font-size: 28px;
	}
	.at-services-experience__item {
		grid-template-columns: 36px 1fr 24px;
		gap: 12px;
		padding: 18px 0;
	}
	.at-services-experience__copy h3 {
		font-size: 20px;
	}
}