/**
 * Block Projects
 */

:root {
	--knd-block-projects-background: transparent;
	--knd-block-projects-title-color: var(--knd-color-headings);
}
.wp-block-knd-projects {
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 25px;
	margin-bottom: 25px;
	background-color: var(--knd-block-projects-background);

	&.has-background {
		padding-left: 20px;
		padding-right: 20px;

		&.alignfull {
			padding-top: 50px;
			padding-bottom: 50px;
			margin-top: 0;
			margin-bottom: 0;
		}

		&:not(.alignfull) {
			border-radius: var(--knd-image-border-radius);
		}
	}

	.section-title {
		font-size: 24px;
		font-family: var(--knd-font-family-headings);
		color: var(--knd-color-headings);
		margin-top: 0;
		margin-bottom: 10px;
	}

	.section-links {
		margin-bottom: 10px;
	}


	.hentry {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.thumbnail-link {
		border-bottom: 0;
		text-decoration: none;
		color: var(--knd-color-headings);
	}

	.entry-title {
		color: var(--knd-block-projects-title-color);
		margin: 0;
		padding-top: 20px;
		padding-bottom: 0;
		font-size: 18px;
		font-weight: 600;
		font-family: var(--knd-font-family-headings);
		letter-spacing: .01em;
		line-height: 1.25;
		transition: color 0.3s, background 0.3s, border-color 0.3s, opacity 0.3s;
	}

	.hentry:hover .entry-title {
		opacity: .7;
	}

	.entry-preview {
		width: 100%;
		position: relative;
		z-index: 1;
		overflow: hidden;
		border-radius: var(--knd-image-border-radius);

		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .1);
			z-index: 10;
			opacity: 0;
			transition: opacity 0.3s;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
			aspect-ratio: auto;
		}

		&.knd-ratio-landscape {
			> img {
				aspect-ratio: 4/3;
			}
		}

		&.knd-ratio-landscape-16-9 {
			> img {
				aspect-ratio: 16/9;
			}
		}

		&.knd-ratio-square {
			> img {
				aspect-ratio: 1/1;
			}
		}

		&.knd-ratio-portrait {
			> img {
				aspect-ratio: 5/6;
			}
		}
	}

	.hentry:hover .entry-preview:after {
		opacity: 1;
	}

	.section-heading {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
		margin-bottom: 0;
	}

	.knd-entry:not(.has-post-thumbnail) .entry-preview {
		&:after {
			padding: 0;
			aspect-ratio: 16/9;
		}
		&.knd-ratio-landscape:after {
			aspect-ratio: 4/3;
		}

		&.knd-ratio-landscape-16-9:after {
			aspect-ratio: 16/9;
		}

		&.knd-ratio-square:after {
			aspect-ratio: 1/1;
		}

		&.knd-ratio-portrait:after {
			aspect-ratio: 5/6;
		}
	}

}

.the-content .wp-block-knd-projects.alignfull {
	margin-left: -30px;
	margin-right: -30px;
}
@media (min-width: 1200px){
	.the-content .wp-block-knd-projects.alignwide {
		margin-left: calc( ( ( var(--knd-medium-content-width) - var(--knd-content-width) ) / 2 ) * -1 );
		margin-right: calc( ( ( var(--knd-medium-content-width) - var(--knd-content-width) ) / 2 ) * -1 );
	}
	.wp-block-knd-projects.has-background:not(.alignfull):not(.alignwide) {
		margin-left: -20px;
		margin-right: -20px;
	}
}
@media (min-width: 768px){
	.the-content .wp-block-knd-projects.alignfull {
		margin-left: calc( ( ( 100vw - var(--knd-content-width) ) / 2 ) * -1 );
		margin-right: calc( ( ( 100vw - var(--knd-content-width) ) / 2 ) * -1 );
	}
}


.wp-block-knd-projects {

	.knd-col {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}

	@media (min-width: 768px) {
		&.knd-block-col {
			&-2 .knd-col {
				flex: 0 0 calc( 100% / 2 );
				max-width: calc( 100% / 2 );
				width: calc( 100% / 2 );
			}
			&-3 .knd-col {
				flex: 0 0 calc( 100% / 3 );
				max-width: calc( 100% / 3 );
				width: calc( 100% / 3 );
			}
			&-4 .knd-col {
				flex: 0 0 calc( 100% / 4 );
				max-width: calc( 100% / 4 );
				width: calc( 100% / 4 );
			}
		}
	}
}
