/* ==========================================================================
   Automora Card Slider (automora-card-slider)
   Horizontal draggable card slider. Controls write CSS variables on .am-cs.
   ========================================================================== */

:where(.e-con, .e-con-inner) > .elementor-widget-automora-card-slider { width: 100%; min-width: 0; }

.am-cs {
	--am-cs-per: 3.3;
	--am-cs-gap: 20px;
	--am-cs-radius: 30px;
	--am-cs-h: 525px;
	--am-cs-img-h: 260px;
	--am-cs-pad: 30px;
	--am-cs-zoom: 1.06;
	--am-cs-arrow: 56px;
	--am-cs-nav-space: 40px;
	--am-cs-bar-h: 2px;
	--am-cs-track: #402C2C;
	--am-cs-fill: var(--am-w-orange, #FD430B);
	--am-cs-arrow-bg: transparent;
	--am-cs-arrow-fg: #F9F9F9;
	--am-cs-arrow-line: rgba(249, 249, 249, .2);
	--am-cs-arrow-bg-h: var(--am-w-orange, #FD430B);
	--am-cs-arrow-fg-h: #FFFFFF;
	--am-cs-arrow-line-h: var(--am-w-orange, #FD430B);
	position: relative;
	width: 100%;
	min-width: 0;
}

.am-cs__stage { position: relative; }

.am-cs__viewport {
	position: relative;
	overflow: hidden;
	overflow: clip;
	touch-action: pan-y pinch-zoom;
	border-radius: 2px;
}
.am-cs__viewport:focus { outline: none; }
.am-cs__viewport:focus-visible { outline: 2px solid var(--am-w-orange, #FD430B); outline-offset: 6px; }
.am-cs--bleed .am-cs__viewport { overflow: visible; }

.am-cs__track {
	position: relative;
	display: flex;
	gap: var(--am-cs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.am-cs__slide { flex: 0 0 auto; min-width: 0; margin: 0; padding: 0; }
.am-cs--w-per-view .am-cs__slide { flex-basis: calc((100% - (var(--am-cs-per) - 1) * var(--am-cs-gap)) / var(--am-cs-per)); }
.am-cs--w-fixed .am-cs__slide { flex-basis: var(--am-cs-w, 400px); max-width: 100%; }

[data-am-drag="1"] .am-cs__viewport { cursor: grab; }
.am-cs.is-dragging .am-cs__viewport { cursor: grabbing; }
.am-cs.is-dragging .am-cs__track { -webkit-user-select: none; user-select: none; }
.am-cs__track img { -webkit-user-drag: none; user-select: none; }

/* ---------- Card ---------- */
.am-cs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	background: var(--am-w-card, #180F0F);
	border: 1px solid transparent;
	border-radius: var(--am-cs-radius);
	color: var(--am-w-text, #F9F9F9);
	transition: border-color .45s var(--am-w-ease, ease), box-shadow .45s var(--am-w-ease, ease);
}
.am-cs__media { position: relative; overflow: hidden; }
.am-cs__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .9s var(--am-w-ease, ease);
}
.am-cs__shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(39, 23, 23, 0) 8.359%, rgba(0, 0, 0, .9) 60.674%);
}

.am-cs__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: var(--am-cs-pad); }
.am-cs__label {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 60px;
	background: rgba(255, 255, 255, .1);
	font-family: var(--am-w-head, "Archivo", sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: #F9F9F9;
}
.am-cs__title.am-cs__title {
	margin: 0;
	font-family: var(--am-w-head, "Archivo", sans-serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.067em;
	text-transform: capitalize;
	color: #F9F9F9;
	transition: color .3s;
	font-variation-settings: "wdth" 100;
}
.am-cs__title a { color: inherit; text-decoration: none; }
.am-cs__title a:focus-visible { outline: 2px solid var(--am-w-orange, #FD430B); outline-offset: 3px; border-radius: 4px; }
.am-cs__text {
	margin: 0;
	max-width: 300px;
	font-family: var(--am-w-head, "Archivo", sans-serif);
	font-size: 16px;
	line-height: 1.4;
	color: #979797;
}
.am-cs__button { margin-top: 4px; }

/* Whole card clickable (stretched title link). */
.am-cs__card--link .am-cs__title-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* Overlay layout (Figma Free Resources). */
.am-cs--overlay .am-cs__card { justify-content: flex-end; height: var(--am-cs-h); }
.am-cs--overlay .am-cs__media { position: absolute; inset: 0; z-index: 0; }

/* Stacked layout (related services / cases). */
.am-cs--stacked { --am-cs-pad: 24px 26px 30px; }
.am-cs--stacked .am-cs__media { flex: none; height: var(--am-cs-img-h); margin: 14px 14px 0; border-radius: 20px; }

@media (hover: hover) {
	.am-cs--zoom .am-cs__card:hover .am-cs__media img { transform: scale(var(--am-cs-zoom)); }
	.am-cs__card:hover { border-color: #402C2C; }
}

/* ---------- Navigation ---------- */
.am-cs__nav { display: flex; align-items: center; gap: 24px; }
.am-cs__nav--bottom { margin-top: var(--am-cs-nav-space); }
.am-cs__nav--top { justify-content: flex-end; margin-bottom: calc(var(--am-cs-nav-space) * .6); }
.am-cs__arrows { display: flex; flex: none; gap: 12px; }
.am-cs--arrows-bottom-left .am-cs__nav--bottom .am-cs__arrows { order: -1; }
.am-cs--arrows-bottom-center .am-cs__nav--bottom { flex-direction: column; gap: 24px; }
.am-cs--arrows-bottom-center .am-cs__nav--bottom > .am-cs__progress,
.am-cs--arrows-bottom-center .am-cs__nav--bottom > .am-cs__dots { width: 100%; justify-content: center; }
.am-cs__nav--bottom > .am-cs__arrows:only-child { margin-left: auto; }
.am-cs--arrows-bottom-left .am-cs__nav--bottom > .am-cs__arrows:only-child { margin-left: 0; }
.am-cs--arrows-bottom-center .am-cs__nav--bottom > .am-cs__arrows:only-child { margin-left: 0; }

.am-cs--arrows-sides .am-cs__stage > .am-cs__arrows {
	position: absolute;
	top: 50%;
	left: 16px;
	right: 16px;
	z-index: 3;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}
.am-cs--arrows-sides .am-cs__stage > .am-cs__arrows .am-cs__arrow { pointer-events: auto; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.am-cs__progress {
	position: relative;
	flex: 1 1 auto;
	min-width: 60px;
	height: var(--am-cs-bar-h);
	overflow: hidden;
	border-radius: 2px;
	background: var(--am-cs-track);
}
.am-cs__progress-fill {
	position: absolute;
	inset: 0;
	background: var(--am-cs-fill);
	transform: scaleX(.3);
	transform-origin: 0 50%;
}
.am-cs__dots { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Shield our <button>s from Elementor Site Settings > Buttons (.elementor-kit-N button). */
.am-cs button.am-cs__arrow,
.am-cs button.am-cs__arrow:hover,
.am-cs button.am-cs__arrow:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--am-cs-arrow);
	height: var(--am-cs-arrow);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--am-cs-arrow-line);
	border-radius: 50%;
	background-color: var(--am-cs-arrow-bg);
	color: var(--am-cs-arrow-fg);
	box-shadow: none;
	font-size: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .35s var(--am-w-ease, ease), border-color .35s var(--am-w-ease, ease), color .35s, opacity .3s;
}
.am-cs button.am-cs__arrow svg { width: 20px; height: auto; transition: transform .45s var(--am-w-ease, ease); }
.am-cs button.am-cs__arrow--prev svg { transform: scaleX(-1); }
@media (hover: hover) {
	.am-cs button.am-cs__arrow:not(:disabled):hover {
		border-color: var(--am-cs-arrow-line-h);
		background-color: var(--am-cs-arrow-bg-h);
		color: var(--am-cs-arrow-fg-h);
	}
	.am-cs button.am-cs__arrow--next:not(:disabled):hover svg { transform: translateX(3px); }
	.am-cs button.am-cs__arrow--prev:not(:disabled):hover svg { transform: scaleX(-1) translateX(3px); }
}
.am-cs button.am-cs__arrow:focus-visible { outline: 2px solid var(--am-w-orange, #FD430B); outline-offset: 3px; }
.am-cs button.am-cs__arrow:disabled { opacity: .35; cursor: default; }

.am-cs button.am-cs__dot,
.am-cs button.am-cs__dot:hover,
.am-cs button.am-cs__dot:focus {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	transition: width .4s var(--am-w-ease, ease);
}
.am-cs button.am-cs__dot::before {
	content: "";
	position: absolute;
	left: 7px;
	right: 7px;
	top: 50%;
	height: 10px;
	border-radius: 10px;
	background: var(--am-cs-track);
	transform: translateY(-50%);
	transition: background-color .3s;
}
.am-cs button.am-cs__dot[aria-current="true"] { width: 38px; }
.am-cs button.am-cs__dot[aria-current="true"]::before { background: var(--am-cs-fill); }
.am-cs button.am-cs__dot:focus-visible { outline: 2px solid var(--am-w-orange, #FD430B); outline-offset: 1px; }

/* All slides fit: no navigation needed. */
.am-cs.is-static .am-cs__nav,
.am-cs.is-static .am-cs__stage > .am-cs__arrows { display: none; }
.am-cs.is-static .am-cs__viewport { cursor: auto; }
/* ...but keep it visible while editing so the controls can be styled. */
.elementor-editor-active .am-cs.is-static .am-cs__nav { display: flex; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.am-cs { --am-cs-h: 480px; --am-cs-nav-space: 32px; }
}
@media (max-width: 767px) {
	.am-cs { --am-cs-h: 440px; --am-cs-pad: 24px; --am-cs-arrow: 48px; --am-cs-nav-space: 24px; --am-cs-radius: 24px; }
	.am-cs__title.am-cs__title { font-size: 24px; letter-spacing: -0.05em; }
	.am-cs__text { font-size: 15px; }
	.am-cs__nav { gap: 16px; }
	.am-cs--arrows-sides .am-cs__stage > .am-cs__arrows { left: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.am-cs__media img, .am-cs__card, .am-cs__progress-fill, .am-cs button.am-cs__arrow, .am-cs button.am-cs__dot { transition: none !important; }
}
