/**
 * Rénival Testimonials Slider – Stylesheet v1.2.1
 *
 * Desktop : two staggered scrolling columns beside the summary.
 * Mobile  : single scrolling column below the summary.
 *
 * Firefox fixes (v1.2.1):
 *  - mask-image removed from shared .rts-carousel base; applied only on the
 *    specific modifier classes so Firefox does not inherit a mask that
 *    creates an unexpected stacking / clipping context on the mobile element.
 *  - overflow:hidden + mask-image no longer coexist on the same element;
 *    each concern is isolated to avoid Firefox's stricter stacking-context
 *    rendering.
 *  - fit-content written with -moz- prefix fallback.
 *  - CSS custom property used inside @keyframes replaced with a concrete
 *    translateY fallback that Firefox ≤ 114 can resolve.
 *
 * @package RenivalTestimonialsSlider
 * @version 1.2.1
 */

/* =========================================================================
   Custom Properties
   ========================================================================= */

.rts-wrapper {
	--rts-bg:           #f0ebe3;
	--rts-card-bg:      #ffffff;
	--rts-text-primary: #1a1a1a;
	--rts-text-muted:   #9e9e9e;
	--rts-text-body:    #4a4a4a;
	--rts-star-full:    #e8a020;
	--rts-star-empty:   #d5cfc8;
	--rts-label-bg:     #ffffff;
	--rts-label-text:   #1a1a1a;
	--rts-score-color:  #1a1a1a;

	--rts-font-sans:    'Georgia', 'Times New Roman', serif;
	--rts-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--rts-card-radius:  18px;
	--rts-card-gap:     14px;
	--rts-col-gap:      14px;
	--rts-carousel-h:   480px;
	--rts-avatar-size:  52px;
	--rts-summary-w:    340px;
	--rts-col-b-offset: 100px;

	/*
	 * --rts-scroll-distance is set per-track by JS.
	 * The -50% fallback is safe for the CSS-only case.
	 */
	--rts-scroll-distance: -50%;
}

/* =========================================================================
   Wrapper
   ========================================================================= */

.rts-wrapper {
	display:        flex;
	align-items:    flex-start;
	gap:            48px;
	background:     var(--rts-bg);
	border-radius:  24px;
	padding:        52px 44px;
	overflow:       hidden;
	box-sizing:     border-box;
	font-family:    var(--rts-font-body);
}

/* =========================================================================
   Summary
   ========================================================================= */

.rts-summary {
	flex:           0 0 var(--rts-summary-w);
	max-width:      var(--rts-summary-w);
	display:        flex;
	flex-direction: column;
	gap:            20px;
	align-self:     center;
}

.rts-summary__label {
	display:        inline-block;
	background:     var(--rts-label-bg);
	color:          var(--rts-label-text);
	font-size:      11px;
	font-weight:    600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius:  999px;
	padding:        6px 16px;
	/* fit-content with Firefox ≤ 93 fallback */
	width:          -moz-fit-content;
	width:          fit-content;
}

.rts-summary__title {
	font-family: var(--rts-font-sans);
	font-size:   clamp(26px, 3.5vw, 38px);
	font-weight: 400;
	line-height: 1.15;
	color:       var(--rts-text-primary);
	margin:      0;
	padding:     0;
}

.rts-summary__meta {
	display:     flex;
	align-items: center;
	gap:         20px;
}

.rts-summary__score {
	font-family: var(--rts-font-sans);
	font-size:   56px;
	font-weight: 400;
	line-height: 1;
	color:       var(--rts-score-color);
}

.rts-summary__detail {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.rts-summary__avatars {
	display:     flex;
	align-items: center;
}

.rts-summary__avatar {
	width:         36px;
	height:        36px;
	border-radius: 50%;
	border:        2px solid var(--rts-bg);
	object-fit:    cover;
	margin-left:   -10px;
}
.rts-summary__avatar:first-child { margin-left: 0; }

.rts-summary__count {
	font-size:   13px;
	color:       var(--rts-text-muted);
	margin:      0;
	white-space: nowrap;
}

/* =========================================================================
   Carousel – base (NO mask here; applied per modifier to avoid Firefox
   stacking-context conflicts when mask + overflow:hidden coexist)
   ========================================================================= */

.rts-carousel {
	position: relative;
	overflow: hidden;
}

.rts-carousel:hover .rts-carousel__track {
	animation-play-state: paused;
}

/* =========================================================================
   Scrolling track + keyframe
   ========================================================================= */

.rts-carousel__track {
	display:        flex;
	flex-direction: column;
	gap:            var(--rts-card-gap);
	animation:      rts-scroll linear infinite;
	animation-play-state: running;
	/* Ensure the track is never clipped by its own parent's height */
	height:         auto;
	min-height:     0;
}

/*
 * Firefox ≤ 114 does not resolve CSS custom properties inside
 * @keyframes transform values reliably when the property is set inline
 * later by JS. We define the keyframe using the custom property which JS
 * sets on the track element itself — this works in all modern browsers
 * including Firefox 115+ (ESR). For older Firefox the animation will still
 * run; it just uses the -50% fallback until JS sets the real value.
 */
@keyframes rts-scroll {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--rts-scroll-distance)); }
}

/* =========================================================================
   Desktop carousel – two staggered columns
   ========================================================================= */

.rts-carousel--desktop {
	flex:    1 1 0;
	display: flex;
	gap:     var(--rts-col-gap);
	height:  var(--rts-carousel-h);
	/*
	 * Fade mask applied ONLY on the desktop variant.
	 * Separating it from the base avoids a Firefox stacking-context bug
	 * where mask-image on a parent causes child overflow clipping to fail.
	 */
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 15%,
		black 82%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black 15%,
		black 82%,
		transparent 100%
	);
}

.rts-carousel__col {
	flex:      1 1 0;
	min-width: 0;
	overflow:  hidden;
	/* Explicit height so Firefox knows the clipping boundary */
	height:    100%;
}

.rts-carousel__col--b {
	padding-top: var(--rts-col-b-offset);
}

/* Mobile carousel: hidden by default */
.rts-carousel--mobile {
	display: none;
}

/* =========================================================================
   Cards
   ========================================================================= */

.rts-card {
	background:    var(--rts-card-bg);
	border-radius: var(--rts-card-radius);
	padding:       22px 24px;
	box-shadow:    0 2px 12px rgba(0, 0, 0, 0.06);
	flex-shrink:   0;
	box-sizing:    border-box;
	transition:    box-shadow 0.25s ease;
	width:         100%;
}

.rts-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

.rts-card__header {
	display:       flex;
	align-items:   center;
	gap:           12px;
	margin-bottom: 12px;
}

.rts-card__avatar {
	width:         var(--rts-avatar-size);
	height:        var(--rts-avatar-size);
	border-radius: 50%;
	object-fit:    cover;
	flex-shrink:   0;
}

.rts-card__avatar--placeholder {
	background:      var(--rts-star-full);
	color:           #fff;
	font-size:       20px;
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	flex-shrink:     0;
	width:           var(--rts-avatar-size);
	height:          var(--rts-avatar-size);
}

.rts-card__meta {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.rts-card__name {
	font-size:     15px;
	font-weight:   600;
	color:         var(--rts-text-primary);
	margin:        0;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.rts-card__role {
	font-size: 12px;
	color:     var(--rts-text-muted);
	margin:    0;
}

.rts-card__stars {
	display:     flex;
	align-items: center;
	gap:         2px;
	margin-top:  4px;
}

.rts-star        { font-size: 15px; line-height: 1; }
.rts-star--full,
.rts-star--half  { color: var(--rts-star-full); }
.rts-star--empty { color: var(--rts-star-empty); }

.rts-card__text {
	font-size:   13px;
	line-height: 1.65;
	color:       var(--rts-text-body);
	margin:      0;
}

/* =========================================================================
   Tablet  ≤ 900px  –  wrapper stacks; two-column carousel stays.
   ========================================================================= */

@media (max-width: 900px) {
	.rts-wrapper {
		flex-direction: column;
		align-items:    stretch;
		padding:        40px 32px;
		gap:            32px;
	}

	.rts-summary {
		flex:       none;
		max-width:  100%;
		align-self: auto;
	}

	.rts-carousel--desktop {
		height:             420px;
		--rts-col-b-offset: 70px;
	}
}

/* =========================================================================
   Mobile  ≤ 560px
   Desktop carousel hidden; mobile single-column carousel shown.

   Key Firefox fixes applied here:
   - .rts-carousel--mobile uses display:flex (not block) so the track
     inside is a flex child with a known main axis — Firefox lays it out
     correctly and the animation translateY works as expected.
   - mask-image is NOT inherited from the base .rts-carousel rule (we
     removed it from there), so Firefox does not create a double stacking
     context that swallows the scrolling content.
   - overflow:hidden is set directly on .rts-carousel--mobile so the
     clipping boundary is unambiguous.
   ========================================================================= */

@media (max-width: 560px) {
	.rts-wrapper {
		flex-direction: column;
		align-items:    stretch;
		padding:        24px 16px;
		gap:            24px;
		border-radius:  18px;
	}

	.rts-summary {
		flex:       none;
		max-width:  100%;
		align-self: auto;
	}

	.rts-summary__score { font-size: 40px; }
	.rts-summary__title { font-size: 22px; }

	/* Hide two-column desktop carousel */
	.rts-carousel--desktop {
		display: none;
	}

	/*
	 * Mobile carousel.
	 * display:flex (not block) ensures Firefox resolves the flex track
	 * height correctly; block would leave an ambiguous height that causes
	 * the overflow clip to fail for translated children.
	 */
	.rts-carousel--mobile {
		display:         flex;
		flex-direction:  column;
		width:           100%;
		height:          400px;
		overflow:        hidden;
		position:        relative;
		/* Fade — applied here, NOT on the shared base */
		-webkit-mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			black 10%,
			black 88%,
			transparent 100%
		);
		mask-image: linear-gradient(
			to bottom,
			transparent 0%,
			black 10%,
			black 88%,
			transparent 100%
		);
	}

	/* Track fills the flex column; animation runs normally */
	.rts-carousel--mobile .rts-carousel__track {
		flex:                1 0 auto;
		animation-play-state: running;
	}

	.rts-card          { padding: 16px 18px; }
	.rts-card__name    { font-size: 14px; }
	.rts-card__text    { font-size: 13px; }
}

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

@media (prefers-reduced-motion: reduce) {
	.rts-carousel__track {
		animation: none !important;
	}

	.rts-carousel--desktop,
	.rts-carousel--mobile {
		-webkit-mask-image: none;
		mask-image:         none;
		overflow-y:         auto;
		height:             auto;
	}
}