/* ===========================
   Group container
   =========================== */

.wp-block-group.om-testimonial-slider {
	position: relative;
	padding: 0 !important;
}

/* Editor-only visual container so it's obvious where the slider lives */
.editor-styles-wrapper .wp-block-group.om-testimonial-slider {
	padding: 1.5rem;
	border-radius: 0; /* square corners */
}

/* ===========================
   Inner & track layout (front-end)
   =========================== */

/* Outer container hides overflow; track slides inside it */
body:not(.wp-admin)
	.wp-block-group.om-testimonial-slider
	.tslider-inner {
	overflow: hidden;
}

/* Track: horizontal row of slides that we move left/right */
body:not(.wp-admin)
	.wp-block-group.om-testimonial-slider
	.tslider-track {
	display: flex;
	gap: 1rem; /* small gap between slides */
	align-items: stretch; /* make all slides equal height in a row */
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); /* smoother, more elegant */
	will-change: transform;
}

/* Each slide wrapper (.tslide) gets a computed width based on visible count.
   visible-count = 3 on desktop, 1 on mobile (set via JS). */
body:not(.wp-admin)
	.wp-block-group.om-testimonial-slider
	.tslider-track
	.tslide {
	flex: 0 0
		calc(
			(100% - (var(--visible-count, 3) - 1) * 1rem) /
				var(--visible-count, 3)
		);
	display: flex; /* allow inner card to stretch to full height */
}

/* ===========================
   Slide card styling (inner card)
   =========================== */

.tslider-track .tslide-inner {
	margin: 0;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	/* Ensure the card fills the slide height for equal-height layout */
	width: 100%;
	height: 100%;

	/* Square corners */
	border-radius: 0;
}

/* Make the actual quote block inside the card behave like "plain" quote */
.tslider-track .tslide-inner .wp-block-quote {
	margin: 0;
	padding: 0;
	border-left: 0;
	margin-left: 0;
	font-style: normal;
	background: transparent;
}

/* ===========================
   Typography inside quote
   =========================== */

.tslider-track .tslide-inner p {
	margin-bottom: 1rem;
}

.tslider-track .tslide-inner cite {
	font-style: normal;
	font-weight: 600;
	margin-top: auto;
}

/* ===========================
   Controls (arrows) – side positions
   =========================== */

/* Use the group as the positioning context (has position:relative above) */
.wp-block-group.om-testimonial-slider .tslider-controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none; /* let only the buttons receive clicks */
}

/* Base arrow style: no circle, just a green arrow glyph */
.wp-block-group.om-testimonial-slider .tslider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;

	border: none;
	background: transparent; /* no background */
	color: #c1e382; /* arrow color */
	border-radius: 0;
	width: auto;
	height: auto;
	padding: 0;

	cursor: pointer;
	font-size: 2.2rem; /* larger on desktop */
	line-height: 1;
	transition:
		color 0.2s ease-in-out,
		transform 0.2s ease-out;
}

/* Left arrow */
.wp-block-group.om-testimonial-slider .tslider-prev {
	left: -1.5rem; /* outside the slider on desktop */
}

/* Right arrow */
.wp-block-group.om-testimonial-slider .tslider-next {
	right: -1.5rem; /* outside the slider on desktop */
}

/* Hover/focus: slightly darker + tiny lift */
.wp-block-group.om-testimonial-slider .tslider-arrow:hover,
.wp-block-group.om-testimonial-slider .tslider-arrow:focus {
	color: #c1e382;
	outline: none;
	transform: translateY(-50%) translateY(-1px);
}

/* Arrows only on hover/focus */
.wp-block-group.om-testimonial-slider.tslider-arrows-hover .tslider-arrow {
	opacity: 1;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-out;
}

.wp-block-group.om-testimonial-slider.tslider-arrows-hover:hover .tslider-arrow,
.wp-block-group.om-testimonial-slider.tslider-arrows-hover:focus-within .tslider-arrow {
	opacity: 1;
}


/* ===========================
   Mobile tweaks
   =========================== */

/* On small screens, keep slider math intact but tuck arrows just outside the card
   and make the card visually narrower while keeping the slide (.tslide) full-width. */
@media (max-width: 768px) {
	/* Slightly smaller arrows on mobile */
	.wp-block-group.om-testimonial-slider .tslider-arrow {
		font-size: 1.8rem;
	}

	/* Nudge arrows just outside the slide area */
	.wp-block-group.om-testimonial-slider .tslider-prev {
		left: -0.75rem;
	}

	.wp-block-group.om-testimonial-slider .tslider-next {
		right: -0.75rem;
	}

	/* Make the inner card narrower and centered while the slide (.tslide) stays full-width */
	body:not(.wp-admin)
		.wp-block-group.om-testimonial-slider
		.tslider-track
		.tslide-inner {
		max-width: 85%;      /* adjust this percentage for narrower/wider card */
		margin-left: auto;
		margin-right: auto;  /* center the card inside the slide */
	}
}