/**
 * Testimonial Block
 */

:root {
	--knd-block-testimonial-background: transparent;
	--knd-block-testimonial-heading-color: var(--knd-color-headings);
	--knd-block-testimonial-text-color: var(--knd-color-base);
	--knd-block-testimonial-cart-background: var(--knd-color-light-grey);
}

.wp-block-knd-testimonials {
	padding-top: 30px;
	padding-bottom: 0;
	margin-top: 25px;
	margin-bottom: 25px;
	overflow: hidden;
	background-color: var(--knd-block-testimonial-background);

	&.has-background {
		padding-left: 20px;
		padding-right: 20px;
	}

	&.has-background.alignfull {
		padding-top: 50px;
		padding-bottom: 50px;
		margin-top: 0;
		margin-bottom: 0;
	}

	&.has-background:not(.alignfull):not(.alignwide) {
		margin-left: -20px;
		margin-right: -20px;
	}

	.section-title {
		font-size: 24px;
		font-family: var(--knd-font-family-headings);
		color: var(--knd-block-testimonial-heading-color);
		margin-top: 0;
		margin-bottom: 30px;
		padding: 0;
	}

	.section-heading {
		margin-bottom: 30px;
	}

	.knd-block-items {

		margin-left: -20px;
		margin-right: -20px;

		&:not(.knd-block-carousel) {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}

		&.knd-block-carousel {
			display: none;

			&.flickity-enabled {
				display: block;
			}
		}
	}

	.knd-block-item {
		flex: 0 0 calc( 100% / 3 );
		max-width: calc( 100% / 3 );
		width: calc( 100% / 3 );
		padding: 0 20px 40px;

		box-sizing: border-box;

		@media (max-width: 767px) {
			flex: 0 0 calc( 100% / 1 );
			max-width: calc( 100% / 1 );
			width: calc( 100% / 1 );
		}

		&__inner {
			position: relative;
			background-color: var(--knd-block-testimonial-cart-background);
			padding: 25px;
			border-radius: 8px;
			height: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}
	}

	.author-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		align-self: end;
		margin-top: 12px;

		img {
			display: block;
			position: absolute;
			object-fit: cover;
			width: 100%;
			height: 100%;
		}
	}

	.entry-title {
		font-size: 18px;
		font-family: var(--knd-font-family-headings);
		margin: 0;
		padding: 0 0 12px;
		line-height: 1.2;
		color: var(--knd-block-testimonial-text-color);
	}

	.entry-meta {
		font-size: 14px;
		font-family: var(--knd-font-family-base);
		line-height: 1.5;
		color: var(--knd-block-testimonial-text-color);

		p:not(:last-child) {
			margin-bottom: 15px;
		}
	}

	.the-content & {
		&.alignwide {
			@media (min-width: 1200px){
				margin-left: calc( ( ( var(--knd-medium-content-width) - var(--knd-content-width) ) / 2 ) * -1 );
				margin-right: calc( ( ( var(--knd-medium-content-width) - var(--knd-content-width) ) / 2 ) * -1 );
			}
		}

		&.alignfull {
			margin-left: calc( ( ( 100vw - var(--knd-content-width) ) / 2 ) * -1 );
			margin-right: calc( ( ( 100vw - var(--knd-content-width) ) / 2 ) * -1 );
		}
	}

	&.alignnone {
		> .knd-container {
			padding-left: 0;
			padding-right: 0;
		}
	}

}
