/* 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-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;
	--image-top-overlay: 0px;
	--gap-width-default: var(--spacing-75);
	--gap-scalar: 1;
	--gap-scalar-mobile: var(--gap-scalar);
	--gap-width: calc(var(--gap-width-default) * var(--gap-scalar));
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));

	background-color: var(--wp--preset--color--light-grey);
	max-width: var(--wp--custom--content-size);
	margin-left: auto;
	margin-right: auto;
	
	.alignwide & {
		max-width: var(--wp--style--global--wide-size);
	}
}

.wpfox-text-image-section>.wrapper {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	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;
}

.wpfox-text-image-section .col-image img {
	display: block;
	width: auto;
	max-height: max(300px, calc(500rem/var(--base-size)));
}


/* Text and Image Section - Image Size Column Width */

.wpfox-text-image-section.image-size-column_width {}

.wpfox-text-image-section.image-size-column_width .col-image .wrapper {
	width: 100%;
}

.wpfox-text-image-section.image-size-column_width .col-image img {
	width: 100%;
	height: auto;
	max-height: none;
}


/* Text and Image Section - Image Size Fixed Height */

.wpfox-text-image-section.image-size-fixed_height {}

.wpfox-text-image-section.image-size-fixed_height .col-image .wrapper {
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	width: 100%;
}

.wpfox-text-image-section.image-size-fixed_height .col-image img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	max-height: none;
	max-width: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}


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

.wpfox-text-image-section.image-size-section_height {}

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

.wpfox-text-image-section.image-size-section_height .col-image img {
	position: absolute;
	left: 50%;
	top: calc(-1 * var(--image-top-overlay));
	transform: translateX(-50%);
	width: auto;
	height: calc(100% + var(--image-top-overlay));
	max-height: none;
	max-width: none;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}


/* Background Image */

.wpfox-text-image-section.has-bgimage {
	& > .wrapper {
		position: relative;
		
		& > .bgimage {
			& img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
			}
		}
		
		& .row-text-image {
			position: relative;
			z-index: 1;
		}
		
		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(
			to left,
				rgba(0, 0, 0, 1) 0%,    /* solid black at right edge */
				rgba(0, 0, 0, 1) 35%,   /* stay solid until 40% across */
				rgba(0, 0, 0, 0.1) 100% /* fade to 50% black at left */
			);
		}
	}
}

@media (max-width: 575px) {
	.wpfox-text-image-section {
		--gap-width-default: var(--section-spacing-default);
		--gap-scalar: var(--gap-scalar-mobile) !important;
		
		--text-spacing-top: calc(var(--section-spacing-default) * min(1,var(--text-spacing-top-scalar)));
		--text-spacing-bottom: calc(var(--section-spacing-default) * min(1,var(--text-spacing-bottom-scalar)));
		
		& > .wrapper {
			& > .bgimage {
				& img {
					height: 100vw !important;
					object-position: left center !important;
				}
			}
			
			.wpfox-text-image-section.has-bgimage &::after {
				background: linear-gradient( to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100% );
				height: 50vw;
				top: 50vw;
				z-index: 1;
			}
			
			.row {
				flex-wrap: wrap;
				
				& > .col {
					min-width: 100%;
				}
				
				&.mobile-image-top .col-text,
				&.mobile-image-bottom .col-image {
					order: 2;
				}
				
				&.mobile-image-bottom .col-text,
				&.mobile-image-top .col-image {
					order: 1;
				}
			}
		}
		
		&.image-size-section_height {
			& .col-image {
				
				& .wrapper {
					padding-bottom: 100vw;
					
					& img {
						
					}
				}
			}
		}
		
		&.mobile-image-size-full {
			& .col-image {
				& .wrapper {
					margin: 0 calc(50% - 50vw);
					width: auto;
				}
			}
		}
	}
}