.page {
	.career-top {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-lg);
		min-height: calc(86vh - 86px);
		position: relative;
		overflow: hidden;
		color: var(--smx-color-white);
		text-align: center;

		&::before {
			content: '';
			position: absolute;

			inset: -50px 0;
			background-image: url('../../images/bg-career.webp');
			background-size: contain;
			background-position: top center;
			background-repeat: no-repeat;
			background-color: #7449ca;
			z-index: -1;
			will-change: transform;
			transform: translateY(var(--parallax-offset, 0));

			@media (max-width: 768px) {
				background-image: url('../../images/bg-career-m.webp');
				background-size: contain;
				background-position: center 6rem;
			}
		}

		h2 {
			font-size: var(--font-title-main);
			margin-top: var(--space-xl);
			font-weight: bold;
			strong {
				color: var(--smx-color-primary-tint);
				font-weight: bold;
			}
			@media (max-width: 768px) {
				margin-top: var(--space-xxl);
			}
		}

		h3 {
			margin-top: 0;
			font-size: var(--font-subtitle);
			opacity: 0.86;
		}

		.buttons-group {
			margin-top: 56vh;
			display: flex;
			justify-content: center;

			@media (max-width: 768px) {
				margin-top: 46vh;
				flex-direction: column;
				gap: var(--space-sm);

				.wp-block-buttons.is-layout-flex {
					display: block;
					width: 100%;
				}

				.button-opportunities {
					width: 100%;
				}
			}

			.button-opportunities {
				a.wp-block-button__link {
					background-color: var(--smx-color-white);
					color: var(--smx-color-primary);
					border: 2px solid var(--smx-color-primary);
					font-weight: bold;
					@media (max-width: 768px) {
						display: block;
					}
				}
			}

			.button-why {
				a.wp-block-button__link {
					background-color: transparent;
					color: var(--smx-color-white);
					border: 2px solid var(--smx-color-white);
					font-weight: bold;
					@media (max-width: 768px) {
						display: block;
					}
				}
			}
		}

		.career-details {
			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: var(--space-sm);
			}
			.card {
				backdrop-filter: blur(1.6rem);
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: var(--border-radius-lg);
				padding: var(--space-md);
				text-align: center;

				h3 {
					font-size: var(--font-subtitle);
					line-height: 1.1;
				}
				p {
					margin: 0;
				}
			}
		}
	}

	.career-why {
		position: relative;
		padding: var(--space-lg) 0;
		.is-layout-grid {
			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: var(--space-sm);
			}
			.card {
				background-color: var(--smx-color-white);
				border-radius: var(--border-radius-lg);
				color: var(--smx-color-text);
				display: flex;
				flex-direction: column;
				height: 100%;
				overflow: hidden;
				text-align: left;
				h3 {
					font-size: var(--font-size-lg);
					color: var(--smx-color-text-bold);
					padding: var(--space-lg);
					padding-bottom: 0;

					@media (max-width: 768px) {
						font-size: var(--font-title-md);
						padding: var(--space-lg);
					}
				}
				p {
					flex: auto;
					margin-top: var(--space-sm);
					padding: 0 var(--space-lg);
					font-size: var(--font-text);
					@media (max-width: 768px) {
						font-size: var(--font-size-base);
					}
				}
			}
		}
	}

	.career-cta-bottom {
		background-image: url('../../images/bg-cta-career.webp');
		background-size: cover;
		background-position: top center;
		background-attachment: fixed;
		background-repeat: no-repeat;

		.container {
			position: relative;
			padding-top: var(--space-xl);
			padding-bottom: var(--space-lg);
			min-height: calc(60vh - 86px);
			position: relative;
			overflow: hidden;
			color: var(--smx-color-white);
			text-align: center;

			&::before {
				content: '';
				position: absolute;

				inset: -50px 0;
				background-image: url('../../images/guy-cta-career.webp');
				background-size: contain;
				background-position: bottom left;
				background-repeat: no-repeat;
				z-index: 0;
				will-change: transform;
				transform: translateY(var(--parallax-offset, 0));

				@media (max-width: 768px) {
					background-image: url('../../images/guy-cta-career.webp');
					background-size: contain;
				}
			}

			.wp-block-group {
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: left;

				@media (max-width: 768px) {
					align-items: end;
					text-align: right;
				}

				a.wp-block-button__link {
					background-color: var(--smx-color-white);
					color: var(--smx-color-primary);
					border: 2px solid var(--smx-color-primary);
					font-weight: bold;
					
					text-wrap: nowrap;
					
					@media (max-width: 768px) {
						display: block;
					}
				}

				h2 {
					backdrop-filter: blur(3rem);
					border-radius: var(--border-radius-xl);
					padding: var(--space-xxl);

					@media (max-width: 768px) {
						border-radius: var(--border-radius-lg);
						padding: var(--space-lg);
					}
				}
			}
		}
	}
}