/**
 * In-card carousel on Stitch homepage + archive (arrows above overlay link).
 * Track stays dir=ltr so translate3d() in JS matches slide order; UI mirrors via data-sokna-rtl-ui.
 *
 * @package Sokna
 */

/* Isolate carousel from page direction: flex row + transform math unchanged */
.sokna-home-card-carousel[dir="ltr"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Position + stack above hit overlay (typically z-6) */
.sokna-home-card-carousel__btn--prev,
.sokna-home-card-carousel__btn--next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
}

/* LTR / FR+EN: previous = left, next = right */
.sokna-home-card-carousel:not([data-sokna-rtl-ui="1"]) .sokna-home-card-carousel__btn--prev {
	left: 8px;
	right: auto;
}

.sokna-home-card-carousel:not([data-sokna-rtl-ui="1"]) .sokna-home-card-carousel__btn--next {
	right: 8px;
	left: auto;
}

/* RTL / AR: mirror — previous on the right, next on the left (reading order) */
.sokna-home-card-carousel[data-sokna-rtl-ui="1"] .sokna-home-card-carousel__btn--prev {
	right: 8px;
	left: auto;
}

.sokna-home-card-carousel[data-sokna-rtl-ui="1"] .sokna-home-card-carousel__btn--next {
	left: 8px;
	right: auto;
}

.sokna-home-card-carousel__counter {
	position: absolute;
	bottom: 8px;
	z-index: 30;
}

.sokna-home-card-carousel:not([data-sokna-rtl-ui="1"]) .sokna-home-card-carousel__counter {
	left: 8px;
	right: auto;
}

.sokna-home-card-carousel[data-sokna-rtl-ui="1"] .sokna-home-card-carousel__counter {
	right: 8px;
	left: auto;
}

.sokna-home-card-carousel__btn {
	cursor: pointer;
}

.sokna-home-card-carousel__btn:focus,
.sokna-home-card-carousel__btn:focus-visible {
	outline: none;
}

/* Track stays LTR so translateX math matches JS regardless of page direction */
.sokna-home-card-carousel__track {
	will-change: transform;
}

/**
 * Desktop / laptop: hide prev/next + "1 / N" counter until hover on the property card or
 * keyboard focus-within (carousel / buttons). Touch phones: no change (coarse pointer or hover:none).
 */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.sokna-home-card-carousel__btn,
	.sokna-home-card-carousel__counter {
		opacity: 0;
		transition: opacity 0.22s ease;
	}

	.sokna-home-card-carousel__btn {
		pointer-events: none;
	}

	/* Stitch homepage Compass cards */
	.sokna-compass-home-card:hover .sokna-home-card-carousel__btn,
	.sokna-compass-home-card:focus-within .sokna-home-card-carousel__btn,
	.sokna-home-card-carousel:hover .sokna-home-card-carousel__btn,
	.sokna-home-card-carousel:focus-within .sokna-home-card-carousel__btn {
		opacity: 1;
		pointer-events: auto;
	}

	.sokna-compass-home-card:hover .sokna-home-card-carousel__counter,
	.sokna-compass-home-card:focus-within .sokna-home-card-carousel__counter,
	.sokna-home-card-carousel:hover .sokna-home-card-carousel__counter,
	.sokna-home-card-carousel:focus-within .sokna-home-card-carousel__counter {
		opacity: 1;
	}

	/* Archive / search Compass cards */
	.sokna-archive-stitch-card--compass:hover .sokna-home-card-carousel__btn,
	.sokna-archive-stitch-card--compass:focus-within .sokna-home-card-carousel__btn,
	.sokna-archive-stitch-card__carousel-root:hover .sokna-home-card-carousel__btn,
	.sokna-archive-stitch-card__carousel-root:focus-within .sokna-home-card-carousel__btn {
		opacity: 1;
		pointer-events: auto;
	}

	.sokna-archive-stitch-card--compass:hover .sokna-home-card-carousel__counter,
	.sokna-archive-stitch-card--compass:focus-within .sokna-home-card-carousel__counter,
	.sokna-archive-stitch-card__carousel-root:hover .sokna-home-card-carousel__counter,
	.sokna-archive-stitch-card__carousel-root:focus-within .sokna-home-card-carousel__counter {
		opacity: 1;
	}
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.sokna-home-card-carousel__btn,
	.sokna-home-card-carousel__counter {
		transition: none;
	}
}