Latest Careers

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

.block-latest-careers {
	color: $white !important;
	overflow: hidden;
	position: relative;

	&:after{
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(2,8,48,0.5) 0%, rgba(2,8,48,0) 100%);
	}

	&__wrapper {
		position: relative;
		z-index: 1;
	}

	.heading{
		max-width: 600px;
		line-height: 1.5;
	}

	.careers {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 58px;

		.career {
			align-items: center;
			background-color: $white;
			color: $primary;
			gap: 0.25rem;
			display: flex;
			padding: 20px 20px 20px 32px;
			font-size: rem-calc(18);
			flex-wrap: wrap;

			@include bp($md) {
				gap: 1.5rem;
				flex-wrap: nowrap;
			}

			&__title,
			&__location {
				flex-basis: 65%;
				@include bp($md) {
					flex-basis: 0;
				}
			}

			&__title {
				font-weight: 700;
				@include bp($md) {
					flex-basis: 35%;
				}
			}

			&__location {
				position: relative;
				padding-left: calc(12px + 6px);
				font-size: rem-calc(14);
				
				&:before {
					content: "";
					position: absolute;
					background-image: url(/wp-content/themes/traditiondata/assets/icons/map-marker-alt.svg);
					background-repeat: no-repeat;
					background-size: contain;
					top: 50%;
					height: 16px;
					left: 0;
					transform: translateY(-50%);
					width: 12px;
					
					@include bp($md){
						height: 19px;
						width: 14px;
					}
				}
				
				@include bp($md) {
					flex-grow: 1;
					font-size: rem-calc(18);
					padding-left: calc(14px + 8px);
				}
			}

			&__button {
				position: absolute;
				right: 20px;
				@include bp($md) {
					right: 0;
					position: relative;
				}
				.button,
				.btn {
					margin: 0;
				}
			}
		}
	}
}

var LatestCareers = class LatestCareers {
	/**
	 * 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-latest-careers');
		this.init();
	}

	/**
	 * LatestCareers function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
		});
	}
}

new LatestCareers();