@import '../../../styles/essentials';

.testimonials-v2 {
	background: $dark;
	padding: 3rem 0;

	// ── Flexslider resets ─────────────────────────────────────────────────────
	.testimonials-slider {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		margin-bottom: 0;

		// Override global: .flexslider .flex-viewport .slides li
		// That rule sets height:100% and background-color:#f8f8f8 (specificity 0,4,0).
		// Our selector below is 0,5,0 and wins without !important for background,
		// but height needs !important because Flexslider also sets it inline.
		.flex-viewport .slides li {
			background-color: transparent !important;
			height: auto !important;
		}

		// Prev / Next arrows — CSS border chevrons.
		// Using border-based shapes avoids all icon-font conflicts.
		// The <li> elements also get background:none to clear any sprite from the parent theme.
		.flex-direction-nav {
			.flex-nav-prev,
			.flex-nav-next {
				background: none !important;
			}

			a {
				background: none !important;
				overflow: visible;
				font-size: 0;       // hide "Previous" / "Next" text
				text-indent: 0;
				opacity: 1;
				margin-top: 0;
				// Chevron shape via border
				width: 16px !important;
				height: 16px !important;
				border-top:   2.5px solid rgba(255, 255, 255, 0.45);
				border-right: 2.5px solid rgba(255, 255, 255, 0.45);
				transition: border-color .2s;

				// Kill ALL pseudo-element arrows (icon font ::before + any ::after)
				&::before,
				&::after {
					display: none !important;
				}

				&.flex-prev {
					top: 50%;
					left: 1.5rem;
					transform: translateY(-50%) rotate(-135deg); // points left
					@include st { left: 2rem; }
				}

				&.flex-next {
					top: 50%;
					right: 1.5rem;
					transform: translateY(-50%) rotate(45deg); // points right
					@include st { right: 2rem; }
				}

				&:hover {
					border-color: #fff;
				}
			}
		}

		// Thumbnail / dot navigation — hidden
		.flex-control-nav { display: none !important; }

		// Vertical centering: make the slides list a flex container so
		// align-items:center applies to each slide item
		.slides {
			display: flex !important;
			align-items: center;
		}
	}

	// ── Slide layout ──────────────────────────────────────────────────────────
	.testimonial-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		padding: 1.5rem 2rem;

		@include csmin(950px) {
			flex-direction: row;
			align-items: flex-start;
			gap: 3.5rem;
			padding: 1.5rem 3rem;
		}
	}

	// ── Portrait ─────────────────────────────────────────────────────────────
	.testimonial-photo {
		flex: 0 0 auto;
		width: 160px;
		height: 160px;

		@include st {
			width: 220px;
			height: 220px;
		}

		@include lt {
			width: 280px;
			height: 280px;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 50%;
		}
	}

	// ── Text content ──────────────────────────────────────────────────────────
	.testimonial-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		color: #fff;
		text-align: center;

		@include csmin(950px) {
			text-align: left;
		}
	}

	.quote {
		font-size: 1.1rem;
		line-height: 1.7;
		font-weight: 600;
		margin: 0;

		@include st { font-size: 1.4rem; line-height: 1.6; }
		@include lt { font-size: 1.75rem; line-height: 1.5; }

		p { margin: 0; }

		p:first-child::before {
			content: '\201C';
		}

		p:last-child::after {
			content: '\201D';
		}
	}

	.lue-lisaa-link {
		color: #fff;
		font-size: 1rem;
		text-decoration: underline;
		align-self: flex-start;

		@include csmax(949px) { align-self: center; }

		&:hover {
			color: rgba(255, 255, 255, 0.7);
		}
	}

	.attribution {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .2rem;

		@include csmin(950px) {
			align-items: flex-end;
		}
	}

	.person-name {
		display: block;
		font-size: 1rem;
		font-weight: 600;
		color: #fff;
	}

	.person-title {
		display: block;
		font-size: .875rem;
		color: rgba(255, 255, 255, 0.65);
	}
}