/* Samsar Carousel - scroll-snap carousel using native blocks
------------------------------------------------------------- */

/* Carousel track - the horizontal scrolling group */
.samsar-carousel-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 40px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 calc(50% - 322px);

	/* Hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.samsar-carousel-track::-webkit-scrollbar {
	display: none;
}

/* Each card column */
.samsar-carousel-track > .wp-block-group {
	flex: 0 0 644px;
	max-width: 644px;
}

/* Fade overlays */
.samsar-carousel-wrapper {
	position: relative;
	overflow: hidden;
	/* Grid lets us stack arrows in the same row as the track so they center
	   vertically on the cards only, not on the wrapper height (which also
	   includes the dots row below). */
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

.samsar-carousel-track {
	grid-row: 1;
	grid-column: 1;
}

.samsar-carousel-dots {
	grid-row: 2;
	grid-column: 1;
}

.samsar-carousel-wrapper::before,
.samsar-carousel-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 200px;
	z-index: 2;
	pointer-events: none;
}

.samsar-carousel-wrapper::before {
	left: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--main, #0c101a) 0%, transparent 100%);
}

.samsar-carousel-wrapper::after {
	right: 0;
	background: linear-gradient(-90deg, var(--wp--preset--color--main, #0c101a) 0%, transparent 100%);
}

/* Dot navigation */
.samsar-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--large);
}

.samsar-carousel-dots span {
	width: 50px;
	height: 32px;
	cursor: pointer;
	position: relative;
	background: none;
}

.samsar-carousel-dots span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--wp--preset--color--border-dark, #2d3345);
	transition: background-color 0.3s ease;
}

.samsar-carousel-dots span.active::after {
	background: var(--wp--preset--color--tertiary, #d8dbe6);
}

/* Drag cursor */
.samsar-carousel-track {
	cursor: grab;
}

.samsar-carousel-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/* Arrow buttons — placed in the same grid cell as the track and aligned to
   its vertical center. The fade is z-index 2 with pointer-events:none, the
   buttons are z-index 3, so they stay visible and clickable above the
   gradient. */
.samsar-carousel-arrow {
	display: flex;
	grid-row: 1;
	grid-column: 1;
	align-self: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary, #141825);
	color: var(--wp--preset--color--base, #ffffff);
	border: 1px solid var(--wp--preset--color--border-dark, #2d3345);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	padding: 0;
	transition: opacity 0.2s ease;
}

.samsar-carousel-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.samsar-carousel-arrow svg {
	width: 20px;
	height: 20px;
}

.samsar-carousel-arrow.is-prev {
	justify-self: start;
	margin-left: 10px;
}

.samsar-carousel-arrow.is-next {
	justify-self: end;
	margin-right: 10px;
}

/* Mobile */
@media (max-width: 768px) {
	/* Full-width cards, no neighbor peek */
	.samsar-carousel-track > .wp-block-group {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.samsar-carousel-track {
		gap: 0;
		padding: 0;
	}

	/* Drop the edge fade — single card is fully visible so the fade only
	   obscures content. */
	.samsar-carousel-wrapper::before,
	.samsar-carousel-wrapper::after {
		display: none;
	}
}