///
/// Phantom by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Tiles */

.tiles {
	$gutter: _size(gutter);
	$duration: 0.5s;
	$ease: 'ease';

	@include vendor('display', 'flex');
	@include vendor('flex-wrap', 'wrap');
	position: relative;
	width: 898px;
	margin-left: auto;
	margin-right: auto;

	article {
		@include vendor('transition', (
			'transform #{$duration} #{$ease}',
			'opacity #{$duration} #{$ease}'
		));
		position: relative;
		width: calc(#{(100% / 3)} - #{$gutter * 1});
		margin: #{$gutter - 1} 0 0 #{$gutter - 1};
		max-height: 150px;

		> .image {
			@include vendor('transition', 'transform #{$duration} #{$ease}');
			position: relative;
			display: block;
			width: 100%;
			border-radius: _size(border-radius);
			overflow: hidden;
			height: 100%;

			img {
				display: block;
				width: 100%;
				height: 100%;
			}

			&:before {
				@include vendor('pointer-events', 'none');
				@include vendor('transition', (
					'background-color #{$duration} #{$ease}',
					'opacity #{$duration} #{$ease}'
				));
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 1.0;
				z-index: 1;
				opacity: 0.8;
			}

			&:after {
				@include vendor('pointer-events', 'none');
				@include vendor('transition', 'opacity #{$duration} #{$ease}');
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				opacity: 0.25;
				z-index: 2;
			}
		}

		> a {
			@include vendor('display', 'flex');
			@include vendor('flex-direction', 'column');
			@include vendor('align-items', 'start');
			@include vendor('justify-content', 'end');
			@include vendor('transition', (
				'background-color #{$duration} #{$ease}',
				'transform #{$duration} #{$ease}'
			));
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 2em;
			border-radius: _size(border-radius);
			border-bottom: 0;
			color: _palette(fg-accent);
			text-align: left;
			text-decoration: none;
			z-index: 3;
			font-size: 11px;

			> :last-child {
				margin: 0;
			}

			&:hover {
				color: _palette(fg-accent);
			}

			h2 {
				margin: 0;
			}

			.content {
				@include vendor('transition', (
					'max-height #{$duration} #{$ease}',
					'opacity #{$duration} #{$ease}'
				));
				width: 100%;
				max-height: 0;
				line-height: 1.5;
				margin-top: 0.35em;
				opacity: 0;

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

		&.style1 {
			> .image:before {
				background-color: _palette(accent1);
			}
		}

		&.style2 {
			> .image:before {
				background-color: _palette(accent2);
			}
		}

		&.style3 {
			> .image:before {
				background-color: _palette(accent3);
			}
		}

		&.style4 {
			> .image:before {
				background-color: _palette(accent4);
			}
		}

		&.style5 {
			> .image:before {
				background-color: _palette(accent5);
			}
		}

		&.style6 {
			> .image:before {
				background-color: _palette(accent6);
			}
		}

		body:not(.is-touch) & {
			&:hover {
				> .image {
					@include vendor('transform', 'scale(1.1)');

					&:before {
						background-color: _palette(bg-accent);
						opacity: 0.35;
					}

					&:after {
						opacity: 0;
					}
				}

				.content {
					max-height: 15em;
					opacity: 1;
				}
			}
		}
	}

	* + & {
		margin-top: _size(element-margin);
	}

	body.is-loading & {
		article {
			@include vendor('transform', 'scale(0.9)');
			opacity: 0;
		}
	}

	body.is-touch & {
		article {
			.content {
				max-height: 15em;
				opacity: 1;
			}
		}
	}

	@include breakpoint(large) {
		$gutter: _size(gutter) * 0.5;

		margin: ($gutter * -1) 0 0 ($gutter * -1);

		article {
			width: calc(#{(100% / 3)} - #{$gutter * 1});
			margin: $gutter 0 0 $gutter;
		}
	}

	@include breakpoint(medium) {
		$gutter: _size(gutter);

		margin: ($gutter * -1) 0 0 ($gutter * -1);

		article {
			width: calc(#{(100% / 2)} - #{$gutter * 1});
			margin: $gutter 0 0 $gutter;
		}
	}

	@include breakpoint(small) {
		$gutter: _size(gutter) * 0.5;

		margin: ($gutter * -1) 0 0 ($gutter * -1);

		article {
			width: calc(#{(100% / 2)} - #{$gutter * 1});
			margin: $gutter 0 0 $gutter;

			&:hover {
				> .image {
					@include vendor('transform', 'scale(1.0)');
				}
			}
		}
	}

	@include breakpoint(xsmall) {
		$gutter: _size(gutter) * 0.5;

		margin: 0;

		article {
			width: 100%;
			margin: $gutter 0 0 0;
		}
	}
}

// For post page
.blog-page {
	.tiles {
		margin-left: 0;

		article {
			@include vendor('display', 'flex');
			position: relative;
			width: 100%;
			max-height: 300px;
			margin: 0 0 30px;
			transition: .3s;
			box-shadow: 0px 0px 6px rgba(41, 41, 132, 0.12);
			background-color: #fff;
			@include breakpoint(medium) {
				max-height: 230px;
			}
			@include breakpoint(small) {
				@include vendor('flex-direction', 'column');
				max-height: 100%;
			}
			&:before {
				position: absolute;
				content: '';
				top: -1px;
				left: -1px;
				right: -1px;
				bottom: -1px;
				width: calc(100% + 2px);
				height: calc(100% + 2px);
				border: 1px solid _color(purple-color);
				z-index: 10;
				background: transparent;
				transition: .3s;
				opacity: 0;
			}
			&:hover {
				box-shadow: 0px 8px 12px rgba(41, 41, 132, 0.1);
				&:before {
					opacity: 1;
				}
			}
			> .article-image {
				position: relative;
				display: block;
				width: 50%;
				border-radius: 0;
				padding-top: 300px;
				z-index: 100;
				@include breakpoint(medium) {
					padding-top: 230px;	
				}
				@include breakpoint(small) {
					width: 100%;
					padding-top: 56.25%;	
				}
				.image {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					width: 100%;
					object-fit: cover;
				}
				img {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 0;
				}
			}

			h2, h3, h4, h5, h6 {
				text-transform: none;
				letter-spacing: normal;
			}

			> a {
				display: block;
				width: 50%;
				height: 100%;
				padding: 1.5em 1.5em 1.5em 2.5em;
				border-bottom: 0;
				text-decoration: none;
				color: _color(main-color);
				position: relative;
				z-index: 100;
				font-weight: 400;
				text-align: left;
				@include breakpoint(small) {
					width: 100%;
				}

				> :last-child {
					margin: 0;
				}

				h2 {
					margin: 0;
					font-size: 38px;
					font-family: _add-font(second-family);
					text-transform: none;
					letter-spacing: 0;
					@include breakpoint(medium) {
						font-size: 27px;
					}
				}

				.content {
					width: 100%;
					line-height: 1.6;
					margin-top: 0.35em;
					display: -webkit-box;
					-webkit-line-clamp: 5;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					max-height: 160px;
					opacity: 1;
					@include breakpoint(medium) {
						width: 100%;
					}
					p {
						margin-bottom: 0.5em;
					}

					> :last-child {
						margin-bottom: 0;
					}
				}
				&:hover {
					h2 {
						color: _color(main-color);
					}
				}
			}
		}
		@include breakpoint(large) {
			margin: 3em 0;
		}
	}
}
.post {
	h2, h3, h4, h5, h6 {
		text-transform: none;
		letter-spacing: normal;
	}
	.tiles {
		display: flex;
		margin: 0 -15px;
		@include breakpoint(small) {
			margin: 0;
		}
		article {
			width: calc(33.33% - 30px);
			margin: 0 15px 30px;
			max-height: 100%;
			box-shadow: 0px 2px 4px rgba(41, 41, 132, 0.06);
			background-color: #fff;
			&:before {
				position: absolute;
				content: '';
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border: 1px solid _color(purple-color);
				z-index: 10;
				background: transparent;
				transition: .3s;
				opacity: 0;
			}
			&:hover {
				box-shadow: 0px 8px 12px rgba(41, 41, 132, 0.1);
				&:before {
					opacity: 1;
				}
			}
			&:hover {
				transform: translateY(-10px);
				cursor: pointer;
			}
			@include breakpoint(small) {
				width: 100%;
				margin-left: 0;
				margin-right: 0;
			}
		}
		.post-link {
			display: flex;
			flex-direction: column;
			width: 100%;
			color: _color(main-color);
			padding: 0;
			position: relative;
			border-radius: 0;
			z-index: 100;
			border: 1px solid transparent;
		}
		.post-top {
			width: 100%;
			position: relative;
			padding-top: 55%;
			@include breakpoint(medium) {
				padding-top: 65%;
			}
			@include breakpoint(medium) {
				padding-top: 56.25%;
			}
		}
		.image {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			width: 100%;
			object-fit: cover;
			img {
				border-radius: 0;
				width: 100%;
				height: 100%;
			}
		}
		.descr {
			padding: 2em 1.5em;
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			.content {
				overflow: hidden;
				flex-grow: 1;
				max-height: 105px;
				opacity: 1;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}