@property --gradientCol1 { syntax: '<color>'; initial-value: rgba(0,0,0,0.7); inherits: false; }
@property --gradientCol2 { syntax: '<color>'; initial-value: rgba(0,0,0,0); inherits: false; }

.entry-content .wp-block-posts {
	padding: 0;
}

.wp-block-posts {
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;

	/* Horizontal Alignment */
	
	&.horizontal-alignment--center {
		justify-content: center;
	}
	
	&.horizontal-alignment--right {
		justify-content: flex-end;
	}

	/* Column Gaps */

	--gap: var(--col-gap);
	gap: var(--gap);

	&.gap-spacing--none { --gap: 0px; gap: var(--gap); }
	&.gap-spacing--huge { --gap: var(--col-gap-huge); gap: var(--gap); }
	&.gap-spacing--large { --gap: var(--col-gap-large); gap: var(--gap); }
	&.gap-spacing--small { --gap: var(--col-gap-small); gap: var(--gap); }

	/* Columns */

	&.columns-1, &.columns-2, &.columns-3, &.columns-4, &.columns-5, &.columns-6 {
		display: flex!important;
		flex-wrap: wrap!important;
		> .wp-block-posts__single {
			flex-shrink: 0!important;
			flex-grow: 0!important;
			width: auto!important;
		}
	}

	--width-1-size: 100%;
	--width-2-size: calc(50% - var(--gap) * .5);
	--width-3-size: calc(33.33% - var(--gap) * .67);
	--width-4-size: calc(25% - var(--gap) * .75);
	--width-5-size: calc(20% - var(--gap) * .8);
	--width-6-size: calc(16.66% - var(--gap) * .833);

	&.columns-1 > .wp-block-posts__single { flex-basis: var(--width-1-size)!important };

	@media (min-width: 1200px) {
		&.columns-2 > .wp-block-posts__single { flex-basis: var(--width-2-size)!important; }
		&.columns-3 > .wp-block-posts__single { flex-basis: var(--width-3-size)!important; }
		&.columns-4 > .wp-block-posts__single { flex-basis: var(--width-4-size)!important; }
		&.columns-5 > .wp-block-posts__single { flex-basis: var(--width-5-size)!important; }
		&.columns-6 > .wp-block-posts__single { flex-basis: var(--width-6-size)!important; }
	}

	@media (min-width: 782px) and (max-width: 1199px) {
		&.columns-1 > .wp-block-posts__single { flex-basis: var(--width-1-size)!important; flex: auto; }
		&.columns-2 > .wp-block-posts__single, &.columns-3 > .wp-block-posts__single, &.columns-4 > .wp-block-posts__single { flex-basis: var(--width-2-size)!important; }
		&.columns-5 > .wp-block-posts__single, &.columns-6 > .wp-block-posts__single { flex-basis: var(--width-3-size)!important; }
	}

	@media (max-width: 781px) {
		&.columns-1 > .wp-block-posts__single, &.columns-2 > .wp-block-posts__single, &.columns-3 > .wp-block-posts__single, &.columns-4 > .wp-block-posts__single { flex-basis: var(--width-1-size)!important; }
		&.columns-5 > .wp-block-posts__single, &.columns-6 > .wp-block-posts__single { flex-basis: var(--width-2-size)!important; }
	}

	.wp-block-posts__single a {
		text-decoration: none;
	}

	.wp-block-posts__single__image {
		position: relative;
	}

	.wp-block-posts__single__excerpt {
		color: var(--wp--preset--color--body);
	}

	/* Styles */
	
	img {
		display: block;
		width: 100%;
		height: auto;
	}

	li {
		list-style: none;
	}

	.wp-block-post-terms {
		margin-bottom: calc(var(--col-gap)*.75);
	}

	.wp-block-posts__single__subtitle {
    	font-size: var(--wp--preset--font-size--heading-5);
    	font-weight: bold;
    	color: var(--wp--preset--color--accent-2);
    	margin-bottom: 0;

		@media(min-width: 782px) {
			margin-top: 0;
		}
	}

	h3 {
    	font-size: var(--wp--preset--font-size--heading-4);
	}

	.wp-block-posts__linkedin {
		position: absolute;
		top: var(--col-gap);
		right: var(--col-gap);
		z-index: 4;
		svg {
			width: 40px;
			height: 40px;
		}

		path {
			fill: var(--wp--preset--color--accent);
			transition: all .3s;
		}

		&:hover path {
			fill: var(--wp--preset--color--accent-2);
		}
	}

	.click-action--popup {
		cursor: pointer;
	}

	&.posts-style--vertical-full {
		.wp-block-posts__single {
			max-width: 100%;
			background-color: var(--wp--preset--color--base);
			border-radius: 0px;
			overflow: hidden;
			.wp-block-posts__single__wrap {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				width: 100%;
				min-height: 550px;
				padding: var(--col-gap);

				/*&:hover .wp-block-posts__single__image::after {
					--gradientCol2: rgba(0,0,0,0.7);
				}*/
			}

			&.has-content .wp-block-posts__single__content {
				cursor: pointer;
				padding-right: calc(var(--col-gap) * 3);
				&::after {
					content: '';
					mask-image: url('../../../assets/icons/angle-right.svg');
					mask-size: contain;
					mask-repeat: no-repeat;
					mask-position: center;
					width: 24px;
					height: 24px;
					position: absolute;
					top: calc(var(--col-gap)*1.15);
					right: var(--col-gap);
					background-color: var(--wp--preset--color--accent);
					rotate: 90deg;
					transition: all .3s;
				}

				&.active {
					&::after {
						rotate: -90deg;
					}

					.wp-block-posts__single__text {
						padding-top: var(--bl);
						max-height: 200px;
					}
				}
			}
		}

		.wp-block-posts__single__image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&::after {
/*				content: '';*/
        		background: linear-gradient(0deg, var(--gradientCol1), var(--gradientCol2));
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: --gradientCol1 .3s, --gradientCol2 .3s;
			}
		}

		.wp-block-post-terms {
		    >* {
		        color: var(--wp--preset--color--accent);
		        border: 1px solid var(--wp--preset--color--accent);
		    }
		}

		.wp-block-posts__single__content {
			display: flex;
			flex-direction: column;
			position: relative;
			border-radius: 20px;
			padding: var(--bl) calc(var(--bl)*1.25);
			background-color: white;
		}

		img {
			object-fit: cover;
			object-position: center;
			width: 100%;
			height: 100%;
		}

		h3 {
    		font-size: var(--wp--preset--font-size--heading-6);
			color: var(--wp--preset--color--contrast);
			margin-top: 0;
			margin-bottom: 0;
		}

		.wp-block-posts__single__excerpt {
			color: var(--wp--preset--color--body);
			margin-top: 0;
			margin-bottom: 0;
		}

		.wp-block-posts__single__text {
			width: 100%;
			max-height: 0;
			margin-right: calc(var(--col-gap) * -2);
			overflow: auto;
			margin-top: 6px;
			padding-top: 0;
			transition: all .3s;
			scrollbar-color: #ddd #f1f1f1;
  			scrollbar-width: thin;
  			border-top: 1px solid var(--wp--preset--color--mid-grey);

			> *:first-child {
				margin-top: 0;
			}

			> *:last-child {
				margin-bottom: 0;
			}
		}
	}

	&.posts-style--vertical-numbered {
		text-align: center;

		.wp-block-posts__single__image,
		.wp-block-posts__single__subtitle {
			display: none;
		}

		.wp-block-posts__single__number {
			display: inline-block;
			justify-self: center;
    		font-size: var(--wp--preset--font-size--heading-5);
    		font-weight: bold;
			background-color: var(--wp--preset--color--accent);
			color: var(--wp--preset--color--accent-2);
			margin-top: var(--bl);
			margin-bottom: 0;
			padding: calc(var(--bl)*.5) var(--bl);
		}
	}

	&.posts-style--list {
		.wp-block-posts__single  {
		}

		.wp-block-posts__single__image {
			display: none;
		}

		.wp-block-posts__single__content >*:last-child {
			margin-bottom: 0;
		}

		h3 {
			margin-top: 0;
	    	font-size: var(--wp--preset--font-size--heading-4);
		}
	}

	&.posts-style--tabs {
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		gap: calc(var(--col-gap)*.5);
		min-height: 300px;

		.wp-block-posts__single {
			display: block;
			margin: 0;
			padding: 0;
			position: unset;

			.wp-block-posts__single__wrap {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				width: 100%;
				min-height: 500px;
				border-radius: 0px;
				overflow: hidden;
				padding: var(--col-gap);
				@media (min-width: 782px) {
					padding: calc(var(--col-gap)*1.75) calc(var(--col-gap)*1.5);
				}

				&:hover .wp-block-posts__single__image::after {
					--gradientCol2: #12293075;
				}
			}

			@media (min-width: 992px) {
				&:nth-of-type(4n + 2) .wp-block-posts__tab {
					background-color: var(--wp--preset--color--accent);
				}
				&:nth-of-type(4n + 3) .wp-block-posts__tab {
					background-color: var(--wp--preset--color--accent-3);
					h3 {
						color: var(--wp--preset--color--base);
					}
				}
				&:nth-of-type(4n + 4) .wp-block-posts__tab {
					background-color: var(--wp--preset--color--contrast);
					h3 {
						color: var(--wp--preset--color--accent-2);
					}
				}

				&.active .wp-block-posts__tab {
					background-color: #E3D6C7;
					h3 {
						color: var(--wp--preset--color--contrast);
					}
				}

				.wp-block-posts__single__wrap {
					animation: none!important;
					position: absolute;
					top: 0%;
					left: unset;
					right: 100%;
					width: calc(60% - calc(var(--col-gap)*.25));
					height: 100%;
					min-height: unset;
					opacity: 0!important;
					transition: right .6s, opacity .6s;
					z-index: 0;
				}

				&.active .wp-block-posts__single__wrap {
					right: calc(40% + calc(var(--col-gap)*.25));
					z-index: 1;
					opacity: 1!important;
				}
			}
		}

		.wp-block-posts__tab {
			position: relative;
			cursor: pointer;
			display: none;
			padding: var(--col-gap);
			background-color: var(--wp--preset--color--accent-2);
			border-radius: 0px;
			overflow: hidden;
			transition: all .3s;

			h3 {
				margin: 0;
				text-align: right;
				color: var(--wp--preset--color--contrast);
			}

			img {
				position: absolute;
				left: -5%;
				bottom: 5%;
				width: 60%;
				height: auto;
			}

			@media (min-width: 782px) {
				padding: calc(var(--col-gap)*1.75) calc(var(--col-gap)*1.5);
			}

			@media (min-width: 992px) {
				display: block;
				margin-left: auto;
				width: calc(40% - calc(var(--col-gap)*.25));
			}
		}

		.wp-block-posts__single__image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&::after {
				content: '';
        		background: linear-gradient(0deg, var(--gradientCol1), var(--gradientCol2));
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: --gradientCol1 .3s, --gradientCol2 .3s;
			}
		}

		.wp-block-posts__single__content {
			display: flex;
			flex-direction: column;
			max-width: 500px;
			position: relative;
			@media (min-width: 782px) {
				padding-left: 80px;
			}
		}

		img {
			object-fit: cover;
			object-position: center;
			width: 100%;
			height: 100%;
		}

		h3,
		p {
			margin-top: 0;
			color: var(--wp--preset--color--base);
		}

		.wp-block-buttons {
			order: -1;
			margin-bottom: calc(var(--col-gap)*.5);
			@media (min-width: 782px) {
				position: absolute;
				top: -8px;
				left: 0;
			}
		}

		.wp-block-button {
			background-color: var(--wp--preset--color--accent-2);
			&::before {
				background-color: var(--wp--preset--color--accent);
			}

			&:hover .wp-block-button__link::after {
				background-color: var(--wp--preset--color--contrast);
			}
		}

		.wp-block-button__link {
			width: 60px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0;
			&::after {
				margin: 0;
				width: 12px;
				height: 18px;
			}
		}
	}

	&.posts-style--horizontal-split,
	&.posts-style--horizontal-content {

		.wp-block-posts__single {
			max-width: 100%;
			border-radius: 0px;
			overflow: hidden;
			@media (max-width:1399px) {
				flex-basis: 100%!important;
			}
		}

		.wp-block-posts__single__wrap {
			display: flex;
			flex-direction: column;
			height: 100%;
			gap: 0 var(--col-gap-large);
			@media (min-width: 782px) {
				flex-direction: row;
				align-items: center;
				>* {
					width: 50%;
				}
			}
		}

		.wp-block-posts__single__image {
			position: relative;
			align-self: stretch;
			min-height: 300px;
		}

		.wp-block-posts__single__content {
			
		}

		img {
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			object-position: center;
			height: 100%;
		}

		h3 {
			margin: var(--bl) auto;
/*			text-align: center;*/
	    	font-size: var(--wp--preset--font-size--heading-3);
	    	font-weight: bold;
	    	@media(min-width: 782px) {
	    		margin-top: 0;
	    	}
		}

		.wp-block-posts__single__excerpt {
			margin: var(--bl) auto calc( var(--bl)*1.5);
/*			text-align: center;*/
		}

		.wp-block-posts__single__position {
			margin: 0 auto;
/*			text-align: center;*/
		}
	}

	&.posts-style--horizontal-content {
		.wp-block-posts__single__image {
			@media(min-width: 782px) {
				align-self: flex-start;
				height: 550px;
			}
		}
	}

	&.posts-style--vertical-content {
		img {
			margin-bottom: var(--col-gap);
		}
	}

	&.posts-style--vertical-split {
		.wp-block-posts__single {
			width: 100%!important;
/*    		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);*/
			border-radius: 0px;
			overflow: hidden;
			background-color: var(--wp--preset--color--base);
		}

		.wp-block-posts__single__wrap {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		.wp-block-posts__single__content {
			display: flex;
			flex-direction: column;
            align-items: flex-start;
			padding: var(--col-gap) 0;
			align-self: stretch;
			height: calc(100% - 300px);
			@media (min-width: 782px) {
				padding: calc(var(--col-gap)*1.25) 0;
			}
		}

		h3 {
			margin-top: 0;
			margin-bottom: 0;
		}

		.wp-block-posts__single__image {
			height: 400px;
			flex-shrink: 0;
			@media (min-width: 782px) {
				height: 500px;
			}
		}

		img {
			object-fit: cover;
			object-position: center;
			height: 100%;
			width: 100%;
		}

		.wp-block-buttons {
			margin-top: auto;
		}
	}
}

.wp-block-group.wrapper-width--full > .posts-style--horizontal-content.posts-type--services {
	.wp-block-posts__single {
		padding-top: var(--col-gap-huge);
		padding-bottom: var(--col-gap-huge);
		
		.wp-block-posts__single__excerpt {
			display: none;
		}
		
		&:nth-of-type(even) {
			background-color: var(--wp--preset--color--accent);

			.wp-block-posts__single__subtitle,
			h3,
			p,
			li {
				color: var(--wp--preset--color--base);
			}

			@media(min-width: 782px) {
				.wp-block-posts__single__image {
					order: 2;
				}
			}
		}
	}

	.wp-block-posts__single__wrap {
		padding-left: var(--col-gap);
		padding-right: var(--col-gap);
		max-width: var(--wrap-width--standard);
		margin: 0 auto;
	}

	.wp-block-posts__single__image {
		align-self: stretch;
	}
}

.wp-block-posts__single {
	width: 100%;
	position: relative;
}

.wp-block-query ul {
	padding: 0;
}

.pagination {
	margin-top: calc(var(--col-gap)*2);
/*	width: 100%;*/
	display: flex;
	justify-content: center;
    width: auto;
	gap: var(--bl);
	svg {
	    width: 12px;
	    height: 14px;
	}

	.prev {
		rotate: 180deg;
	}

	>* {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--contrast);
		width: 50px;
		height: 50px;
		border-radius: 100%;
		text-decoration: none;
		transition: all .3s;
		&:hover {
			background-color: var(--wp--preset--color--accent);
			border-color: var(--wp--preset--color--accent);
		}

		&.current {
			color: var(--wp--preset--color--base);
			background-color: var(--wp--preset--color--contrast);
			border-color: var(--wp--preset--color--contrast);
		}
	}

	.prev,
	.next {
		border: 1px solid var(--wp--preset--color--accent-2);
		background-color: transparent;

		path {
			fill: var(--wp--preset--color--accent-2);
			transition: all .3s;
		}

		&:hover {
			background-color: var(--wp--preset--color--accent-2);

			path {
				fill: var(--wp--preset--color--base);
			}
		}
	}
}

.wp-block-column.has-contrast-background-color,
.wp-block-group.has-contrast-background-color,
.wp-block-column.has-accent-background-color,
.wp-block-group.has-accent-background-color {
	> .wp-block-posts {
		.wp-block-posts__single__subtitle,
		h3,
		p,
		li,
		.wp-block-details,
		summary {
			color: var(--wp--preset--color--base);
			border-color: white;
		}

		summary::after {
			background-color: var(--wp--preset--color--base);
		}
	}

	> .pagination {
		>* {
			border-color: var(--wp--preset--color--base);
			color: var(--wp--preset--color--base);
			&:hover {
				background-color: var(--wp--preset--color--base);
				color: var(--wp--preset--color--contrast);
			}

			&.current {
				background-color: var(--wp--preset--color--base);
				border-color: var(--wp--preset--color--base);
				color: var(--wp--preset--color--contrast);
			}
		}
	}

	.prev,
	.next {
		border: 1px solid var(--wp--preset--color--accent-2);
		background-color: transparent;

		&:hover {
			background-color: var(--wp--preset--color--accent-2);
			path {
				fill: var(--wp--preset--color--base);
			}
		}
	}
}