/* RTEX Process Slider — по макету 1120×572 (ПК) и 343×764 (мобилка). 1 --u = 1px макета. */

.rxp {
	--rxp-accent: #FFA31A;
	--rxp-text: #E4E3D8;
	--rxp-body: #B3B3B3;
	--rxp-border: #E6AB74;
	--rxp-track: #CCCBCB;
	--rxp-fill-a: #8B643F;
	--rxp-fill-b: #F2C896;
	--rxp-font: 'Orbitron', sans-serif;
	--rxp-radius: 22px;
	--rxp-shade: var(--rxp-shade-n, .8);
	--rxp-ease: cubic-bezier(.22, .61, .36, 1);
	container-type: inline-size;
	position: relative;
	width: 100%;
	max-width: 100%;
	font-family: var(--rxp-font);
	color: var(--rxp-text);
	-webkit-font-smoothing: antialiased;
}
html.theme-day .rxp,
html:not(.theme-day):not(.theme-night) .rxp--fb-day { --rxp-shade: var(--rxp-shade-d, .8); }

.rxp *,
.rxp *::before,
.rxp *::after { box-sizing: border-box; }

.rxp-card {
	--u: calc(100cqw / 1120);
	position: relative;
	overflow: hidden;
	border: 1px solid var(--rxp-border);
	border-radius: var(--rxp-radius);
	background: #0b0b0b;
	isolation: isolate;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- слайды: стопкой в одной ячейке грида, высота = самому высокому ---------- */
.rxp-slides {
	display: grid;
	aspect-ratio: 1120 / 572;
	min-height: 440px;
}
.rxp-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s var(--rxp-ease), visibility 0s linear .9s;
}
.rxp-slide.is-active,
.rxp:not(.rxp--ready) .rxp-slide:first-child {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity .9s var(--rxp-ease), visibility 0s;
}

/* перелистывание сдвигом (как Projects): текущий слайд едет за курсором, соседний выезжает сбоку */
.rxp-slide.is-peek {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.rxp--moving .rxp-slide,
.rxp--moving .rxp-slide .rxp-media,
.rxp--moving .rxp-slide .rxp-body > * { transition: none; }
.rxp--moving .rxp-slide.is-active,
.rxp--moving .rxp-slide.is-peek { will-change: transform; }
.rxp-slide.is-peek .rxp-media { transform: none; }
.rxp .rxp-slide.is-peek .rxp-body > * { opacity: 1; transform: none; }
@media (pointer: fine) {
	.rxp--ready:not(.rxp--single) .rxp-slides { cursor: grab; }
	.rxp-card.is-dragging .rxp-slides { cursor: grabbing; }
}
.rxp-card.is-dragging { user-select: none; -webkit-user-select: none; }
.rxp .rxp-img { -webkit-user-drag: none; user-select: none; }

/* скрытые по теме слайды */
html.theme-night .rxp-slide[data-show="day"],
html.theme-day .rxp-slide[data-show="night"],
html:not(.theme-day):not(.theme-night) .rxp--fb-night .rxp-slide[data-show="day"],
html:not(.theme-day):not(.theme-night) .rxp--fb-day .rxp-slide[data-show="night"] { display: none; }

/* ---------- фото ---------- */
.rxp-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	transform: scale(1.05);
	transition: transform 1.8s var(--rxp-ease);
}
.rxp-slide.is-active .rxp-media { transform: none; }
.rxp-pic { position: absolute; inset: 0; display: block; }
.rxp .rxp-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--rxp-pos, 50% 50%);
	border-radius: 0;
}
html.theme-night .rxp .rxp-img--day,
html.theme-day .rxp .rxp-img--night,
html:not(.theme-day):not(.theme-night) .rxp--fb-night .rxp-img--day,
html:not(.theme-day):not(.theme-night) .rxp--fb-day .rxp-img--night { display: none; }

/* затемнение под текстом */
.rxp-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(48% 95% at 12% 60%, rgba(0, 0, 0, var(--rxp-shade)) 0%, rgba(0, 0, 0, calc(var(--rxp-shade) * .85)) 38%, rgba(0, 0, 0, calc(var(--rxp-shade) * .45)) 58%, rgba(0, 0, 0, calc(var(--rxp-shade) * .2)) 72%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- текст ---------- */
.rxp-body {
	position: relative;
	z-index: 1;
	width: calc(var(--u) * 560);
	max-width: 100%;
	padding: calc(var(--u) * 125) 0 calc(var(--u) * 170) calc(var(--u) * 63);
}
.rxp .rxp-title,
.rxp .rxp-sub,
.rxp .rxp-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	text-transform: none;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s var(--rxp-ease), transform .9s var(--rxp-ease);
}
.rxp-slide.is-active .rxp-title,
.rxp-slide.is-active .rxp-sub,
.rxp-slide.is-active .rxp-text,
.rxp:not(.rxp--ready) .rxp-slide:first-child .rxp-body > * { opacity: 1; transform: none; }
.rxp-slide.is-active .rxp-title { transition-delay: .25s; }
.rxp-slide.is-active .rxp-sub { transition-delay: .38s; }
.rxp-slide.is-active .rxp-text { transition-delay: .5s; }

.rxp .rxp-title {
	font-size: max(34px, calc(var(--u) * 55.5));
	font-weight: 400;
	line-height: 1;
	letter-spacing: .163em;
	color: var(--rxp-text);
	text-transform: uppercase;
}
.rxp .rxp-sub {
	margin-top: calc(var(--u) * 33.5);
	font-size: max(14px, calc(var(--u) * 17.8));
	font-weight: 500;
	line-height: 1.29;
	letter-spacing: 0;
	color: var(--rxp-text);
	text-transform: uppercase;
}
.rxp .rxp-text {
	margin-top: calc(var(--u) * 12);
	font-size: max(12px, calc(var(--u) * 14));
	font-weight: 400;
	line-height: 1.286;
	color: var(--rxp-body);
}
.rxp .rxp-body a { color: var(--rxp-accent); }

/* ---------- нижняя панель ---------- */
.rxp-bar {
	position: absolute;
	z-index: 3;
	left: calc(var(--u) * 79.8);
	right: calc(var(--u) * 79.5);
	bottom: calc(var(--u) * 55.5);
	height: calc(var(--u) * 57);
	display: flex;
	align-items: center;
	pointer-events: none;
}
.rxp-bar > * { pointer-events: auto; flex: 0 0 auto; }

/* WoodMart base.css: :is(.btn, button, [type=button]) делает кнопки квадратными — сбрасываем */
.rxp .rxp-arrow {
	position: relative;
	display: block;
	width: calc(var(--u) * 14);
	min-width: 10px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--rxp-accent);
	line-height: 0;
	cursor: pointer;
	transition: transform .3s var(--rxp-ease), opacity .3s;
}
.rxp .rxp-arrow::before { content: ""; position: absolute; inset: -14px -16px; }
.rxp .rxp-arrow svg { display: block; width: 100%; height: auto; overflow: visible; }
.rxp .rxp-arrow:hover,
.rxp .rxp-arrow:focus { background: none; color: var(--rxp-accent); box-shadow: none; }
.rxp .rxp-arrow--prev:hover { transform: translateX(-3px); }
.rxp .rxp-arrow--next:hover { transform: translateX(3px); }
.rxp .rxp-arrow:focus-visible { outline: 1px solid var(--rxp-accent); outline-offset: 8px; }
.rxp .rxp-arrow[disabled] { opacity: .35; cursor: default; transform: none; }
.rxp--single .rxp-arrow { visibility: hidden; }

.rxp-cube {
	display: block;
	width: calc(var(--u) * 53);
	min-width: 36px;
	margin-left: calc(var(--u) * 112);
	color: var(--rxp-accent);
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rxp-accent) 75%, transparent)) drop-shadow(0 0 9px color-mix(in srgb, var(--rxp-accent) 35%, transparent));
}
.rxp-cube__svg,
.rxp .rxp-cube__img { display: block; width: 100%; height: auto; max-width: none; }
.rxp .rxp-cube__img { filter: none; }
.rxp-cube__svg { overflow: visible; }
/* грани куба: подсвечена одна — по номеру слайда (как куб на страницах проектов) */
.rxp-cube__f { opacity: 0; transition: opacity .45s var(--rxp-ease); }
.rxp-cube__svg[data-face="left"] .rxp-cube__f--left,
.rxp-cube__svg[data-face="right"] .rxp-cube__f--right,
.rxp-cube__svg[data-face="top"] .rxp-cube__f--top,
.rxp-cube__svg[data-face="bottom"] .rxp-cube__f--bottom,
.rxp-cube__svg[data-face="back-left"] .rxp-cube__f--back-left,
.rxp-cube__svg[data-face="back-right"] .rxp-cube__f--back-right { opacity: 1; }

.rxp-count {
	display: flex;
	align-items: baseline;
	margin-left: calc(var(--u) * 46.5);
	font-size: max(12px, calc(var(--u) * 15.5));
	font-weight: 400;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--rxp-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.rxp-count__sep { margin: 0 .23em; }

.rxp-label {
	margin-left: calc(var(--u) * 23.5);
	font-size: max(12px, calc(var(--u) * 15.5));
	font-weight: 500;
	line-height: 1;
	letter-spacing: .24em;
	color: var(--rxp-accent);
	white-space: nowrap;
	text-shadow: 0 0 10px color-mix(in srgb, var(--rxp-accent) 45%, transparent);
}

.rxp-track {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	margin: 0 calc(var(--u) * 114) 0 calc(var(--u) * 45.5);
	background: linear-gradient(var(--rxp-track), var(--rxp-track)) center / 100% 1px no-repeat;
}
.rxp-track__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: var(--rxp-p, 25%);
	background: linear-gradient(90deg, var(--rxp-fill-a) 0, var(--rxp-fill-a) calc(100% - var(--rxp-seg, 100%)), var(--rxp-fill-b) calc(100% - var(--rxp-seg, 100%)), var(--rxp-fill-b) 100%);
	box-shadow: 0 0 6px color-mix(in srgb, var(--rxp-fill-b) 55%, transparent);
	transition: width .8s var(--rxp-ease);
}

/* ---------- мобилка ---------- */
@media (max-width: 767px) {
	.rxp-card { --u: calc(100cqw / 343); }
	.rxp-slides { aspect-ratio: 343 / 764; min-height: 0; }
	.rxp { --rxp-shade: var(--rxp-shade-mn, 0); }
	html.theme-day .rxp,
	html:not(.theme-day):not(.theme-night) .rxp--fb-day { --rxp-shade: var(--rxp-shade-md, .8); }
	.rxp-media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, calc(var(--rxp-shade) * .72)) 0%, rgba(0, 0, 0, calc(var(--rxp-shade) * .8)) 30%, rgba(0, 0, 0, calc(var(--rxp-shade) * .85)) 45%, rgba(0, 0, 0, calc(var(--rxp-shade) * .5)) 60%, rgba(0, 0, 0, calc(var(--rxp-shade) * .2)) 75%, rgba(0, 0, 0, 0) 88%);
	}
	.rxp .rxp-img { object-position: var(--rxp-pos-m, var(--rxp-pos, 50% 50%)); }
	.rxp-body {
		width: 100%;
		padding: calc(var(--u) * 114.5) calc(var(--u) * 15) calc(var(--u) * 150);
	}
	.rxp .rxp-title { font-size: calc(var(--u) * 31.7); }
	.rxp .rxp-sub { margin-top: calc(var(--u) * 19.8); font-size: calc(var(--u) * 17.8); line-height: 1.29; }
	.rxp .rxp-text { margin-top: calc(var(--u) * 8.7); font-size: calc(var(--u) * 14); text-transform: uppercase; color: var(--rxp-text); }

	.rxp-bar {
		left: 0;
		right: 0;
		top: auto;
		bottom: calc(var(--u) * 22.3);
		height: auto;
		flex-direction: column;
		align-items: center;
	}
	.rxp-cube { width: calc(var(--u) * 53.5); min-width: 0; margin: 0; }
	.rxp-count { margin: calc(var(--u) * 7.5) 0 0; font-size: calc(var(--u) * 12); }
	.rxp-label { margin: calc(var(--u) * 7) -.21em 0 0; font-size: calc(var(--u) * 12); letter-spacing: .21em; }
	.rxp-track { display: none; }
	.rxp .rxp-arrow {
		position: absolute;
		top: calc(var(--u) * 42);
		width: calc(var(--u) * 10);
		min-width: 0;
	}
	.rxp .rxp-arrow--prev { left: calc(var(--u) * 15); }
	.rxp .rxp-arrow--next { right: calc(var(--u) * 15); }
}

@media (prefers-reduced-motion: reduce) {
	.rxp-slide,
	.rxp-media,
	.rxp .rxp-title,
	.rxp .rxp-sub,
	.rxp .rxp-text,
	.rxp-track__fill { transition-duration: .01s !important; transition-delay: 0s !important; }
	.rxp-media { transform: none; }
}
