/* 05.26. Post Tiles */

// scss-lint:disable SelectorFormat

.post-tiles {
	// Variables for post tiles
	$item-height: ptr(290);

	clear: both;
	font-size: 0; // Hack for deleting spacing between inline-block items.

	&__small-container {
		display: inline-block;
		width: 100%;

		@include media-breakpoint-up(lg) {
			width: 50%;
		}

		.post-tiles__item {
			width: 100%;
		}
	}

	// Single item with image and content. It can be small, medium or big and horizontal or vertical.
	&__item {
		display: flex;
		flex-direction: column;
		margin-bottom: ptr(30);
		vertical-align: top;

		@include media-breakpoint-up(lg) {
			display: inline-block;
			width: 50%; // All items expect post-tiles__item--big takes 50%.
			margin-bottom: 0;
		}

		.post-tiles__image {
			order: 2;

			&.compat-object-fit { // compatibility, added via JS - feature detection
				background-size: cover;
				background-position: center center;

				img {
					opacity: 0;
				}
			}
		}

		.post-tiles__content {
			order: 1;
		}

		// Small items are always horizontal and every other small element has reverted content and image.
		&--small {
			.post-tiles__image {
				@include media-breakpoint-up(lg) {
					width: 50%;
					float: left;
				}
			}

			.post-tiles__content {
				@include media-breakpoint-up(lg) {
					width: 50%;
					float: left;
				}

				// Every other element has reverted content and image.
				+ .post-tiles__image {
					@include media-breakpoint-up(lg) {
						float: right;
					}
				}
			}
		}

		// Medium items are mostyle 2x higher than small items.
		&--medium {
			@include media-breakpoint-up(lg) {
				height: calc(#{$item-height} * 2);
			}
		}

		// Big element is only one. Horizontal and 2x bigger than small items.
		&--big {
			width: 100%;

			.post-tiles__content {
				@include media-breakpoint-up(lg) {
					height: calc(#{$item-height} * 2);
				}

				@include media-breakpoint-up(lg) {
					float: left;
					width: 50%;
				}
			}

			.post-tiles__image {
				@include media-breakpoint-up(lg) {
					float: right;
					width: 50%;
				}
			}
		}

		// Triangle detail for horizontal items
		&--horizontal {
			.post-tiles__image {
				&::before {
					@include media-breakpoint-up(lg) {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						top: ptr(45);
						right: -1px;
						border-top: ptr(22.5) solid transparent;
						border-right: ptr(25) solid $gray-lightest;
						border-bottom: ptr(22.5) solid transparent;
					}
				}
			}

			.post-tiles__content + .post-tiles__image {
				&::before {
					@include media-breakpoint-up(lg) {
						right: inherit;
						left: -1px;
						border-left: ptr(25) solid $gray-lightest;
						border-right: 0;
					}
				}
			}
		}

		// Triangle detail for vertical items
		&--vertical {
			.post-tiles__image {
				&::before {
					@include media-breakpoint-up(lg) {
						position: absolute;
						content: '';
						width: 0;
						height: 0;
						bottom: -1px;
						left: ptr(60);
						border-left: ptr(22.5) solid transparent;
						border-bottom: ptr(25) solid $gray-lightest;
						border-right: ptr(22.5) solid transparent;
					}
				}
			}

			.post-tiles__content + .post-tiles__image {
				&::before {
					@include media-breakpoint-up(lg) {
						bottom: inherit;
						top: -1px;
						border-top: ptr(25) solid $gray-lightest;
						border-bottom: 0;
					}
				}
			}
		}
	}

	// Specific style for two medium horizontal items.
	&--two-posts-horizontal {
		.post-tiles__item {
			@include media-breakpoint-up(lg) {
				width: 100%;
			}

			&--medium {
				@include media-breakpoint-up(lg) {
					height: $item-height;
				}
			}

			.post-tiles__image {
				@include media-breakpoint-up(lg) {
					width: 50%;
					float: left;
				}
			}

			.post-tiles__content {
				@include media-breakpoint-up(lg) {
					width: 50%;
					float: left;
				}

				// Every other element has reverted content and image.
				+ .post-tiles__image {
					@include media-breakpoint-up(lg) {
						float: right;
					}
				}
			}
		}
	}

	// Basic content style
	&__content {
		background-color: $gray-lightest;
		padding: ptr(40) ptr(45) ptr(30);
		overflow: hidden;

		@include media-breakpoint-up(lg) {
			height: $item-height;
		}

		.post-tiles__item--big &,
		.post-tiles__item--medium & {
			padding: ptr(55) ptr(60) ptr(45);
		}
	}

	// Basic date style
	&__date {
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		font-weight: bold;
		font-size: ptr(12);
		text-transform: uppercase;
		color: $gray-light;
		margin-bottom: ptr(13);
	}

	// Basic title style
	&__title {
		font-size: ptr(19);
		margin-bottom: ptr(10);

		.post-tiles__item--big &,
		.post-tiles__item--medium & {
			font-size: ptr(30);
			margin-bottom: ptr(13);
		}
	}

	// Basic excerpt style
	&__excerpt {
		font-size: ptr(16);
	}

	// Basic image style
	&__image {
		position: relative;

		// Not necessary for grid working, but it will look good also for posts without pictures.
		@include media-breakpoint-up(lg) {
			height: $item-height;
		}

		.widget-post-tiles & img {
			@include media-breakpoint-up(lg) {
				width: 100%;
				height: $item-height;
				object-fit: cover;
			}
		}

		.widget-post-tiles .post-tiles__item--big & img {
			@include media-breakpoint-up(lg) {
				height: calc(#{$item-height} * 2);
			}
		}

		// Not necessary for grid working, but it will look good also for posts without pictures.
		.post-tiles__item--big & {
			@include media-breakpoint-up(lg) {
				height: calc(#{$item-height} * 2);
			}
		}
	}

	&__widget-title {
		display: inline-block;
	}

	&__more-news {
		display: block;
		padding: ptr(13) ptr(29);
		margin-top: ptr(-11);
		margin-bottom: ptr(41);

		@include media-breakpoint-up(sm) {
			display: inline-block;
			float: right;
		}
	}
}