/**
 * NetStrategy Testimonials Widget Styles
 */

.ns-testimonials-slider {
	position: relative;
	&:has(.swiper-pagination) .swiper-container {
		padding-bottom: 4.5rem;
	}
	@media (width<1600px) {
		.swiper-horizontal > .swiper-pagination-bullets,
		.swiper-pagination-bullets.swiper-pagination-horizontal {
			bottom: calc(4rem - 5vw);
		}
	}
	.swiper-wrapepr {
		align-items: stretch;
	}
}

.wpb_wrapper {
	&:has(.ns-testimonials-section) {
		overflow-x: hidden;
	}
}

.ns-testimonials-section {
	position: relative;

	&:has(.testimonial-quote-icon) {
		margin-top: 6rem;
	}

	.testimonial-item {
		background-color: #fff;
		border-radius: 10px;
		padding: 2rem;
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		/*box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);*/
		container-type: inline-size;
		container-name: testimonial-item;
	}

	.testimonial-quote-icon {
		position: absolute;
		top: 0;
		left: 2rem;
		transform: translateY(-50%);
		width: 6rem;
		height: 6rem;
		aspect-ratio: 1/1;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--primary);
		border: solid 2px white;
		z-index: 2;
		background-color: var(--light-gray);
		background-image: url(/wp-content/uploads/quote.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	.testimonial-content {
		margin: 2rem 0;
		flex-grow: 1;
	}
	.testimonial-content,
	.testimonial-content p {
		font-size: var(--text-14-18);
		line-height: 1.8em !important;
		color: var(--text-dark);
	}

	.testimonial-meta {
		display: grid;
		grid-template-columns: 5rem 1fr min-content;
		align-items: center;
		margin-top: 1.5rem;
		border-top: 1px solid #f0f0f0;
		padding-top: 1.5rem;
		grid-column-gap: 2rem;

		.testimonial-image {
			grid-area: 1 / 1 / 3 / 2;
			img {
				width: 5rem;
				height: 5rem;
				border-radius: 50%;
				object-fit: cover;
			}
		}

		.testimonial-name {
			grid-area: 1 / 2 / 2 / 3;
			font-size: var(--text-21-28);
			font-weight: 600;
			margin: 0 0 5px;
			color: var(--text-dark);
		}

		.testimonial-role {
			grid-area: 2 / 2 / 3 / 3;
			font-size: var(--text-14-18);
			color: var(--text-dark);
			text-transform: uppercase;
			margin-bottom: 5px;
			text-wrap: balance;
		}

		.testimonial-rating {
			grid-area: 1 / 3 / 3 / 4;
			display: flex;
			align-items: center;

			.star {
				color: var(--gray);
				font-size: var(--text-22-34);
				margin-right: 2px;
				&.filled {
					color: var(--primary);
				}
			}
		}
	}
	@container testimonial-item (max-width:680px) {
		.testimonial-meta {
			grid-template-columns: 5rem 1fr;
			grid-template-rows: min-content min-content min-content;
			.testimonial-image {
				grid-area: 1 / 1 / 4 / 2;
			}
			.testimonial-name {
				grid-area: 1 / 2 / 2 / 3;
			}
			.testimonial-role {
				grid-area: 2 / 2 / 3 / 3;
			}
			.testimonial-rating {
				grid-area: 3 / 2 / 4 / 3;
			}
		}
	}
	@container testimonial-item (max-width:420px) {
		.testimonial-meta {
			grid-template-columns: 1fr;

			.testimonial-image {
				display: none;
			}
			.testimonial-name {
				grid-area: 1 / 1 / 2 / 2;
			}
			.testimonial-role {
				grid-area: 2 / 1 / 3 / 2;
			}
			.testimonial-rating {
				grid-area: 3 / 1 / 4 / 2;
			}
		}
	}

	/* Responsive styles */
	@media (max-width: 889px) {
		.testimonial-item {
			margin-bottom: 30px;
		}
	}
}