/* Text and Image Section */

.wpfox-text-image-section {
	--section-spacing-default: max(60px, var(--spacing-90));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--image-overflow: var(--spacing-70);
	--image-spacing-top-scalar: 1;
	--image-spacing-bottom-scalar: 1;
	--image-spacing-side-scalar: 0;
	--text-spacing-top: calc(var(--section-spacing-default) * var(--text-spacing-top-scalar));
	--text-spacing-bottom: calc(var(--section-spacing-default) * var(--text-spacing-bottom-scalar));
	--image-spacing-top: calc(var(--section-spacing-default) * var(--image-spacing-top-scalar));
	--image-spacing-bottom: calc(var(--section-spacing-default) * var(--image-spacing-bottom-scalar));
	--image-spacing-side: calc(var(--section-spacing-default) * var(--image-spacing-side-scalar));
	--image-fixed-height: 400;
	--gap-width: max(40px,var(--spacing-75));
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));
	--section-padding-top: 0;
	--section-padding-top-calc: max(calc(1px * var(--section-padding-top)),calc(1rem * var(--section-padding-top) / var(--base-size)));
	--section-padding-bottom: 0;
	--section-padding-bottom-calc: max(calc(1px * var(--section-padding-bottom)),calc(1rem * var(--section-padding-bottom) / var(--base-size)));
	--section-padding-top-raw: 0px;
	--section-padding-bottom-raw: 0px;
	--section--z-index: 1;

	position: relative;
	background-color: var(--wp--preset--color--light-grey);
	max-width: var(--wp--custom--content-size);
	margin-left: auto;
	margin-right: auto;
	z-index: var(--section-z-index);
}

.wpfox-text-image-section > .wrapper {
	margin: 0 calc(50% - 50vw);
	padding: calc(var(--section-padding-top-calc) + var(--section-padding-top-raw)) calc(50vw - 50%) calc(var(--section-padding-bottom-calc) + var(--section-padding-bottom-raw));
	background-color: inherit;
	background-image: inherit;
}

.wpfox-text-image-section .row {
	gap: var(--gap-width);
	flex-wrap: nowrap;
}

.wpfox-text-image-section .col-text {
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	justify-content: center;
	padding-top: var(--text-spacing-top);
	padding-bottom: var(--text-spacing-bottom);
	flex-basis: calc(var(--text-width) - 0.5 * var(--gap-width));
}

.wpfox-text-image-section.text-position-top .col-text {
	justify-content: flex-start;
}

.wpfox-text-image-section.text-position-bottom .col-text {
	justify-content: flex-end;
}

.wpfox-text-image-section .row.image-left .col-text {
	order: 2;
}

.wpfox-text-image-section .col-text>.wrapper {
	position: relative;
}

.wpfox-text-image-section h1 {}

.wpfox-text-image-section .col-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--image-spacing-top);
	padding-bottom: var(--image-spacing-bottom);
	flex-basis: calc(var(--image-width) - 0.5 * var(--gap-width));
}

.wpfox-text-image-section.image-position-top .col-image {
	justify-content: flex-start;
}

.wpfox-text-image-section.image-position-bottom .col-image {
	justify-content: flex-end;
}

.wpfox-text-image-section.image-alignment-inside .col-image,
.wpfox-text-image-section.image-alignment-outside .image-right .col-image {
	align-items: flex-end;
}

.wpfox-text-image-section.image-alignment-outside .col-image,
.wpfox-text-image-section.image-alignment-inside .image-right .col-image {
	align-items: flex-start;
}

.wpfox-text-image-section .col-image>a {
	display: inline-block;
	width: 100%;
	height: auto;
}

.wpfox-text-image-section.image-size-section_height .col-image>a {
	height: 100%;
}

.wpfox-text-image-section.image-size-default .col-image>a {
	width: auto;
}

.wpfox-text-image-section .col-image .wrapper {
	position: relative;
	width: calc(100% + var(--image-overflow));
}

.wpfox-text-image-section .row.image-left .col-image .wrapper {
	margin-left: calc(-1 * var(--image-overflow));
}

.wpfox-text-image-section .row.image-right .col-image .wrapper {
	margin-right: calc(-1 * var(--image-overflow));
}

.wpfox-text-image-section .col-image img {
	display: block;
	width: 100%;
	box-shadow: 0 max(3px,var(--spacing-3)) max(6px,var(--spacing-6)) #00000029;
}


/* Text and Image Section - Image Size Relative to Section Height */

.wpfox-text-image-section.image-size-section_height {
	--image-overflow: calc(0.5 * (100vw - var(--wp--style--global--content-size)));
	--image-top-overflow: 0;
	--image-bottom-overflow: 0;
	--image-top-overflow-calc: max(calc(1px * var(--image-top-overflow)),calc(1rem * var(--image-top-overflow) / var(--base-size)));
	--image-bottom-overflow-calc: max(calc(1px * var(--image-bottom-overflow)),calc(1rem * var(--image-bottom-overflow) / var(--base-size)));
	--image-spacing-top-scalar: 0 !important;
	--image-spacing-bottom-scalar: 0 !important;
}

.wpfox-text-image-section.image-size-section_height .col-image .wrapper {
	height: 100%;
}

.wpfox-text-image-section.image-size-section_height .col-image img {
	position: absolute;
	left: 0;
	/*top: calc(-1px * var(--image-top-overflow));*/
	margin-top: calc(-1rem * var(--image-top-overflow) / var(--base-size));
	margin-top: calc(-1 * var(--image-top-overflow-calc));
	width: 100%;
	height: calc(100% + 1rem * var(--image-top-overflow) / var(--base-size) + 1rem * var(--image-bottom-overflow) / var(--base-size) );
	height: calc(100% + var(--image-top-overflow-calc) + var(--image-bottom-overflow-calc) );
	max-height: none;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.wpfox-text-image-section .col-image .text {
	position: absolute;
	left: 0;
	bottom: calc(-1rem * var(--image-bottom-overflow) / var(--base-size));
	bottom: calc(-1 * var(--image-bottom-overflow-calc));
	color: #fff;
	padding: var(--spacing-45) var(--spacing-80);
	width: 100%;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0px;
		width: 100%;
		height: max(208px,calc(208em / var(--base-size)));
		max-height: 100%;
		/* background: transparent linear-gradient(180deg, var(---2b2e34-dcba-dark) 0%, #2B2E3400 100%) 0% 0% no-repeat padding-box; */
		background: transparent linear-gradient(0deg, #2b2e34 0%, #71737700 100%) 0% 0% no-repeat padding-box;
		mix-blend-mode: multiply;
		opacity: 1;
		z-index: 1;
	}
	
	.title {
		position: relative;
		--font-size: 13;
		color: #fff;
		font-weight: 900;
		line-height: 1.2;
		letter-spacing: 0.1em;
		z-index: 1;
	}
	
	.subtitle {
		position: relative;
		--font-size: 15;
		font-style: italic;
		margin-top: 0.2em;
		z-index: 1;
	}
}

@media (max-width: 959px) {
	.wpfox-text-image-section {
		--image-overflow: calc(0.5 * (100vw - var(--wp--style--global--wide-size)));
	}
	
	.wpfox-text-image-section > .wrapper {
		padding-top: calc(max(var(--text-spacing-top),var(--image-spacing-top)) + var(--section-padding-top-calc) + var(--section-padding-top-raw));
		
		padding-bottom: calc(max(var(--text-spacing-bottom),var(--image-spacing-bottom)) + var(--section-padding-bottom-calc) + var(--section-padding-bottom-raw));
	}
	
	.wpfox-text-image-section .row {
		flex-wrap: wrap;
	}
	
	.wpfox-text-image-section .col-text,
	.wpfox-text-image-section .col-image {
		flex-basis: 100%;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.wpfox-text-image-section:not(.image-size-section_height) .col-image .wrapper {
		/*width: 100%;*/
	}
	
	.wpfox-text-image-section:not(.image-size-section_height) .row.image-left .col-image .wrapper,
	.wpfox-text-image-section:not(.image-size-section_height) .row.image-right .col-image .wrapper {
		margin-left: calc(-1 * var(--image-overflow));
		margin-right: calc(-1 * var(--image-overflow));
	}
	
	/* Image - Section Height */
	
	.wpfox-text-image-section.image-size-section_height > .wrapper {
		padding-top: calc(var(--section-padding-top-calc) + var(--section-padding-top-raw));
	}
		
	.wpfox-text-image-section.image-size-section_height.image-right > .wrapper {
		padding-bottom: calc(var(--section-padding-bottom-calc) + var(--section-padding-bottom-raw));
	}
	
	.wpfox-text-image-section.image-size-section_height .col-image img {
		height: auto;
		max-height: 50vh;
		min-height: 40vh;
		position: relative;
		margin-bottom: calc(-1 * var(--image-bottom-overflow-calc));
	}
	
	.wpfox-text-image-section.image-size-section_height.image-left .col-image img {
		margin-bottom: 0;
	}
	
	.wpfox-text-image-section .col-image .text {
		/*bottom: 0;*/
	}
}