/*
 * HSH Properties Slider.
 *
 * Scroll-snap carousel — no slider library. All rules are scoped under
 * .hsh-slider so nothing leaks into Elementor or other widgets. Colors are
 * driven by custom properties so the widget's Style tab can override them.
 */

.hsh-slider {
	--hsh-primary: #2f4b3f;
	--hsh-accent: #eec95c;
	--hsh-chip-bg: #ffffff;
	--hsh-arch: 999px;
	position: relative;
}

/* ---- Track & slides (CSS scroll-snap does the sliding) ---- */

.hsh-slider__track {
	display: flex;
	gap: clamp(16px, 3vw, 36px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	padding: 6px max(20%, calc((100% - var(--hsh-slide-w, 560px)) / 2)) 6px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.hsh-slider__track::-webkit-scrollbar {
	display: none;
}

.hsh-slider__track:focus-visible {
	outline: 2px solid var(--hsh-primary);
	outline-offset: 4px;
}

.hsh-slider__slide {
	flex: 0 0 min(var(--hsh-slide-w, 560px), 86vw);
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* ---- Arched media card ---- */

.hsh-slider__media {
	position: relative;
	margin: 0;
	aspect-ratio: var(--hsh-ratio, 20 / 19); /* reserves space before the image loads: zero CLS */
	border-radius: var(--hsh-arch) var(--hsh-arch) 20px 20px;
	overflow: hidden;
	background: #e8e4da; /* placeholder tone while lazy images arrive */
	transition: transform 0.35s ease, opacity 0.35s ease;
	transform: scale(0.94);
	opacity: 0.8;
	will-change: transform, opacity; /* keeps the scale transition on the compositor */
}

.hsh-slider__slide.is-active .hsh-slider__media {
	transform: scale(1);
	opacity: 1;
}

.hsh-slider__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Amenity chips ---- */

.hsh-slider__chips {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.hsh-slider__slide.is-active .hsh-slider__chips {
	opacity: 1;
}

.hsh-slider__chips-track {
	display: flex;
	justify-content: center;
}

.hsh-slider__chips-set {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	margin: 0;
	padding: 0 16px;
	list-style: none;
}

/*
 * Marquee mode — applied by JS when the chips overflow the card. The chip set
 * is duplicated for a seamless loop and the track translates by exactly one
 * set-width. Duration is set per-instance (--hsh-marquee-duration) so the
 * speed stays constant regardless of how many chips there are.
 */
.hsh-slider__chips.is-marquee .hsh-slider__chips-track {
	justify-content: flex-start;
	width: max-content;
	animation: hsh-chips-marquee var(--hsh-marquee-duration, 20s) linear infinite;
}

.hsh-slider__chips.is-marquee .hsh-slider__chips-set {
	padding: 0 4px;
}

.hsh-slider__chips.is-marquee:hover .hsh-slider__chips-track {
	animation-play-state: paused;
}

/* Soft fade at the card edges while the marquee runs. */
.hsh-slider__chips.is-marquee {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

@keyframes hsh-chips-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.hsh-slider__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--hsh-chip-bg);
	color: var(--hsh-chip-color, #333);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	white-space: nowrap;
}

.hsh-slider__chip-icon {
	color: var(--hsh-chip-icon, inherit);
}

.hsh-slider__chip-icon svg {
	width: 13px;
	height: 13px;
	display: block;
}

.hsh-slider__chip-icon--emoji {
	font-size: 12px;
	line-height: 1;
}

/* ---- Footer: arrows + synced text panel ---- */

.hsh-slider__footer {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 3vw, 40px);
	max-width: 860px;
	margin: 28px auto 0;
	padding: 0 16px;
}

/*
 * Arrows and dots are <button>s, so Elementor kit / theme global button
 * styles (e.g. `.elementor-kit-8 button`) can out-rank a single class.
 * The doubled-up selectors below keep specificity above kit rules, and the
 * appearance/padding/font resets neutralise inherited button styling.
 */
.hsh-slider button.hsh-slider__arrow {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: var(--hsh-arrow-size, 44px);
	height: var(--hsh-arrow-size, 44px);
	min-width: var(--hsh-arrow-size, 44px);
	min-height: var(--hsh-arrow-size, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hsh-arrow-bg, #f7f3e8);
	color: var(--hsh-arrow-color, var(--hsh-primary));
	font-size: 0;
	line-height: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hsh-slider button.hsh-slider__arrow:hover,
.hsh-slider button.hsh-slider__arrow:focus-visible {
	background: var(--hsh-accent);
	color: var(--hsh-arrow-color, var(--hsh-primary));
}

.hsh-slider button.hsh-slider__arrow svg {
	width: 18px;
	height: 18px;
}

.hsh-slider button.hsh-slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.hsh-slider button.hsh-slider__arrow[disabled]:hover {
	background: var(--hsh-arrow-bg, #f7f3e8);
}

.hsh-slider__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 32px;
	align-items: center;
	animation: hsh-fade 0.35s ease;
}

/* display:grid above would defeat the hidden attribute without this. */
.hsh-slider__panel[hidden] {
	display: none;
}

@keyframes hsh-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.hsh-slider__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 10px;
}

.hsh-slider__name {
	font-family: Georgia, "Times New Roman", serif; /* overridable via widget typography control */
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 500;
	color: var(--hsh-primary);
	line-height: 1.1;
}

.hsh-slider__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--hsh-rating-bg, #f0ead8);
	color: var(--hsh-rating-color, #333);
	font-size: 13px;
	font-weight: 600;
	border-radius: 999px;
	padding: 6px 12px;
	line-height: 1;
}

.hsh-slider__rating svg {
	width: 13px;
	height: 13px;
	color: var(--hsh-star, var(--hsh-accent));
}

.hsh-slider__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--hsh-desc-color, #6b6b6b);
	max-width: 46ch;
}

.hsh-slider__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.hsh-slider__btn {
	display: inline-block;
	background: var(--hsh-accent);
	color: var(--hsh-btn-color, #3a3a1f);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	padding: 14px 30px;
	transition: filter 0.2s ease;
}

.hsh-slider__btn:hover,
.hsh-slider__btn:focus-visible {
	filter: brightness(0.94);
	color: var(--hsh-btn-color, #3a3a1f);
}

.hsh-slider__details {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hsh-details-color, #333);
	text-decoration: none;
	border-bottom: 2px solid var(--hsh-accent);
	padding-bottom: 3px;
}

.hsh-slider__details:hover,
.hsh-slider__details:focus-visible {
	color: var(--hsh-primary);
}

/* ---- Dots ---- */

.hsh-slider__dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 22px;
}

.hsh-slider button.hsh-slider__dot {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	/* The button itself is the ≥24×24px tap target (WCAG 2.5.8); the visible
	   8px dot is drawn by ::before, centred inside it. */
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	line-height: 0;
	box-shadow: none;
	cursor: pointer;
}

.hsh-slider button.hsh-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hsh-dot, #ddd6c4);
	transform: translate(-50%, -50%);
	transition: background 0.2s ease, transform 0.2s ease;
}

.hsh-slider button.hsh-slider__dot.is-active::before {
	background: var(--hsh-dot-active, var(--hsh-primary));
	transform: translate(-50%, -50%) scale(1.25);
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
	.hsh-slider__panel {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hsh-slider__title {
		justify-content: center;
		flex-wrap: wrap;
	}

	.hsh-slider__desc {
		margin-inline: auto;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.hsh-slider__track {
		scroll-behavior: auto;
	}

	.hsh-slider__media,
	.hsh-slider__chips,
	.hsh-slider__dot::before {
		transition: none;
	}

	.hsh-slider__panel {
		animation: none;
	}

	/* No marquee: chips become a swipeable strip instead. */
	.hsh-slider__chips.is-marquee .hsh-slider__chips-track {
		animation: none;
	}

	.hsh-slider__chips.is-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: none;
	}
}

/* ---- Empty media state (no image chosen in the repeater) ---- */

.hsh-slider__media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: #9a937f;
}