Content Specification

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-specification {
	&__meta {
		display: flex;
		flex-direction: row;
		gap: rem-calc(16);
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include margin-bottom( rem-calc(60) );

		.heading {
			margin-bottom: 0;
		}
	}

	&__cards {
		//
	}

	&__card {
		@include padding( rem-calc(20) );
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: hidden;

		&[data-aos^=fade][data-aos^=fade] {
			transition: 0.3s box-shadow var( --ease ), 0.3s opacity var( --ease ), 0.3s transform var( --ease ), 0.3s background-color var( --ease );
		}

		&:hover {
			box-shadow: 0 0 rem-calc(32) 0 rgba(3, 10, 50, 0.3);
			background-color: $white;

			.bg--grey {
				.spec--main {
					@include text-gradient--dark();
				}
			}
		}

		&-inner {
			height: 100%;
			@include padding( rem-calc(24 12) );
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			transition: 0.3s var( --ease );
			transition-property: background-color;
			overflow: hidden;

			@include bp($lg) {
				min-height: rem-calc(242);
			}

			&.bg--primary {
				--text-color: #{$white};

				.spec--main {
					@include text-gradient--light();
				}
			}

			p {
				margin-bottom: 0;
				color: var( --text-color );
				transition: 0.3s var( --ease );
				transition-property: color, background;
				text-transform: uppercase;
				line-height: 1.4;

				&.spec--prefix {
					@include margin-bottom( rem-calc(32) );
					@include fluid-type(14, 14);
					font-weight: 500;
				}
				&.spec--main {
					@include margin-bottom( rem-calc(11) );
					font-weight: 800;
					line-height: 1;
				}
				&.spec--suffix {
					@include fluid-type(16, 20);
					font-weight: 800;
					text-transform: none;
				}
				&.spec--disclaimer {
					@include margin-top( rem-calc(20) );
					@include fluid-type(10, 10);
					font-weight: 400;
					text-transform: none;
				}
			}
			.spec--image {
				max-width: rem-calc(160);
				max-height: rem-calc(64);
				@include margin-bottom( rem-calc(12) );
				display: flex;
				flex-direction: column;

				img {
					height: 100%;
					object-fit: contain;
				}
			}

			.swiper {
				width: 100%;
				height: 100%;

				.spec-card__inner-slide {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.swiper-pagination {
					position: relative;
					bottom: rem-calc(20);
				}
			}
		}
	}
}

class Specification {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.swiper = false;

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			onEnter: () => this.initialiseSwiper(),
		});
	}

	initialiseSwiper() {
		if ( this.swiper ) {
			return;
		}
		this.swiper = true;

		this.carousels = this.block.querySelectorAll( '.swiper' );
		this.carousels.forEach( carousel => {
			new Swiper( carousel, {
				slidesPerView: 1,
				speed: 600,
				pagination: {
					el: carousel.querySelector( '.swiper-pagination' ),
					type: 'bullets',
					clickable: true,
				},
			});
		});
	}
}

document.querySelectorAll('.block-specification').forEach((block) => {
	new Specification( block );
});