Quote Block

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-quote-block {
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;

	@include bp($sm) {
		padding-top: rem-calc(60);
		padding-bottom: rem-calc(60);
	}

	&__quote {
		@include fluid-type(26, 38);
		font-family: $font-family-heading;
		line-height: normal;

		p {
			@include fluid-type(26, 38);
			font-family: $font-family-heading;
			line-height: normal;

			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__name {
		margin-top: rem-calc(35);
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 1.5px;
		font-size: rem-calc(12);
		position: relative;
		padding-left: rem-calc(60);

		&:before {
			content: '';
			width: rem-calc(50);
			height: rem-calc(1);
			background-color: $white;
			position: absolute;
			top: rem-calc(8);
			left: 0;
		}

		&--link {
			display: inline-block;
			color: $white;
			text-decoration: none;
			transition: all 0.2s ease-in-out;

			&:hover {
				color: $orange;
			}
		}
	}

	&__content {
		background-color: $navy;
		color: $white;
		position: relative;
		z-index: 2;
		padding: rem-calc(40 30);

		@include bp($lg) {
			padding: rem-calc(60);
		}

		.align-items-start & {
			@include bp($lg) {
				margin-top: rem-calc(-60);
			}
		}

		.align-items-end & {
			@include bp($lg) {
				margin-bottom: rem-calc(-60);
			}
		}
	}

	.align-items-start {
		@include bp($lg) {
			margin-top: rem-calc(60);
		}
	}

	.align-items-end {
		@include bp($lg) {
			margin-bottom: rem-calc(60);
		}
	}

	&__copy {
		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	&__image {
		display: block;
		padding-top: 50%;
		position: relative;

		@include bp($lg) {
			padding-top: 100%;
		}

		img {
			width: 100%;
		}

		&--link {
			img {
				transition: transform 4s ease-out;
			}

			picture {
				overflow: hidden;
			}
		}
	}


	&__image-column {
		@include bp($lg) {
			margin-left: calc(2 / 12 * -100%);
		}
	}

	&__content-column {
		.flex-row-reverse & {
			@include bp($lg) {
				margin-left: calc(2 / 12 * -100%);
			}
		}
	}
}

class QuoteBlockCarousel {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-quote-block');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const blockCarousel = block.querySelector(".swiper");
			const navNext = block.querySelector(".e-carousel__next");
			const navPrev = block.querySelector(".e-carousel__prev");

			const swiper = new Swiper(blockCarousel, {
				loop: true,
				slidesPerView: 1,
				navigation: {
					nextEl: navNext,
					prevEl: navPrev,
				},
				// speed: 3000,
				breakpoints: {
					992: {
						slidesPerView: 1,
					},
					// 992: {
					// 	slidesPerView: 5,
					// }
				}
			});
		});
	}
}

new QuoteBlockCarousel();