/*--------------------------------------------------------------
### Grid Posts List
--------------------------------------------------------------*/
@mixin transition($transition...) {
	transition: $transition;
}
$color__nothumb: $color__lightblue;
.posts-list.posts-list--grid {
	/*-----------------------
	### Grid layouts styles
	------------------------*/
	/* 4grids */
	&.list-style-v4, 
	&.list-style-v5 {
		display: flex;
		flex-wrap: wrap;
		margin-left: -$grid-gutter-width/2;
		margin-right: -$grid-gutter-width/2;
		.grid-item {
			padding-left: $grid-gutter-width/2;
			padding-right: $grid-gutter-width/2;
			max-width: calc(100%);
			width: calc(100%);
			flex: 0 0 calc(100%);
			@include media-breakpoint-up(sm) {
				max-width: calc(100% / 2);
				width: calc(100% / 2);
				flex: 0 0 calc(100% / 2);
			}
			@include media-breakpoint-up(md) {
				padding-left: $grid-gutter-width/2;
				padding-right: $grid-gutter-width/2;
				max-width: calc(100% / 3);
				width: calc(100% / 3);
				flex: 0 0 calc(100% / 3);
			}
			@include media-breakpoint-up(lg) {
				padding-left: $grid-gutter-width/2;
				padding-right: $grid-gutter-width/2;
				max-width: calc(100% / 4);
				width: calc(100% / 4);
				flex: 0 0 calc(100% / 4);
			}
		}

	}
	/* 3grids */
	&.list-style-default, 
	&.list-style-v2, 
	&.list-style-v6 {
		display: flex;
		flex-wrap: wrap;
		margin-left: -$grid-gutter-width/2;
		margin-right: -$grid-gutter-width/2;
		.grid-item {
			padding-left: $grid-gutter-width/2;
			padding-right: $grid-gutter-width/2;
			max-width: calc(100%);
			width: calc(100% );
			flex: 0 0 calc(100%);
			@include media-breakpoint-up(sm) {
				max-width: calc(100% / 2);
				width: calc(100% / 2);
				flex: 0 0 calc(100% / 2);
			}
			@include media-breakpoint-up(md) {
				max-width: calc(100% / 3);
				width: calc(100% / 3);
				flex: 0 0 calc(100% / 3);
			}
		}
	}
	/* 2grids */
	&.list-style-v3, 
	&.list-style-v7, 
	&.list-style-v8,
	&.list-style-v10 {
		display: flex;
		flex-wrap: wrap;
		margin-left: -$grid-gutter-width/2;
		margin-right: -$grid-gutter-width/2;
		.grid-item {
			padding-left: $grid-gutter-width/2;
			padding-right: $grid-gutter-width/2;
			max-width: calc(100%);
			width: calc(100% );
			flex: 0 0 calc(100%);
			@include media-breakpoint-up(sm) {
				max-width: calc(100% / 2);
				width: calc(100% / 2);
				flex: 0 0 calc(100% / 2);
			}
		}
	}
	&.list-style-v9 {
		display: flex;
		flex-wrap: wrap;
		.grid-item {
			max-width: calc(100%);
			width: calc(100% );
			flex: 0 0 calc(100%);
			@include media-breakpoint-up(md) {
				max-width: calc(100% / 2);
				width: calc(100% / 2);
				flex: 0 0 calc(100% / 2);
			}
		}
	}

	&.list-style-v10 {
		display: flex;
		flex-wrap: wrap;
		margin-left: -$grid-gutter-width/2;
		margin-right: -$grid-gutter-width/2;
		.grid-item {
			padding-left: $grid-gutter-width/2;
			padding-right: $grid-gutter-width/2;
			max-width: calc(100%);
			width: calc(100% );
			flex: 0 0 calc(100%);
			@include media-breakpoint-up(sm) {
				max-width: calc(100% / 2);
				width: calc(100% / 2);
				flex: 0 0 calc(100% / 2);
			}
		}
	}


	/*------------------ layouts Styles -------------------*/
	.grid-item {
		.post-thumbnail {
			line-height: 0;
		}
		.comments-link {
			padding: 10px 12px 9px;
			@include border-radius();
			@include font-size(11/16);
			background-color: $color__light;
			&:before {
				@include font-awesome-icon;
				@include font-size(14/16);
				content: '\f075';
				margin-right: 4px;
			}
		}

		.entry {
			&-header {
				.entry-meta {
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 2px;
					.posted-on {
						flex: 0 1 100%;
					}
				}
			}
			&-title {
				margin: 0 0 10px;
			}
			&-meta {
				@include font-size(14/16);
			}
			&-content {
				margin-bottom: 5px;
				p {
					margin: 0 0 0.43em;
				}
			}
		}	
	}
	/*-------------------
	### V2 Styles
	---------------------*/
	&.list-style-default {
		.posts-list__item.grid-item {
			margin-bottom: 60px;
		}
	}
	/*-------------------
	### V2 Styles
	---------------------*/
	&.list-style-v2 {
		.posts-list__item.grid-item {
			margin-bottom: 30px;
			.post-thumbnail {
				&__link {
					display: block;
				}
				img {
					width: 100%;
					border-radius: ( $button__border-radius $button__border-radius 0 0);
				}
				margin-bottom: 0;
			}
			&:not(.has-post-thumbnail) .grid-item-wrap {
				border-top: 1px solid $color__background-hr;
				border-radius: $border__radius $border__radius;
			}
			.grid-item-wrap {
				border: 1px solid $color__background-hr;
				border-top: none;
				border-radius: ( 0 0 $border__radius $border__radius);
				padding: 25px;
				@include media-breakpoint-up(lg) {
					padding: 36px 38px 38px;
				}
			}
		}
	}
	/*-------------------
	### V3 Styles
	---------------------*/
	&.list-style-v3 {
		.posts-list__item.grid-item {
			margin-bottom: $grid-gutter-width;
			&:not(.has-post-thumbnail) .grid-item-inner {
				border-radius: $border__radius $border__radius;
				background-color: $color__nothumb;
			}
			.grid-item-inner {
				overflow: hidden;
				position: relative;
				@include media-breakpoint-down(md) {
					min-height: 360px;
				}
				@include media-breakpoint-up(md) {
					min-height: 433px;
				}
			}
			.grid-item__thumbnail {
				border-radius: 4px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-size: cover;
				background-position: center;
				z-index: -1;
			}
			.grid-item-wrap {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 20px;
				@include media-breakpoint-down(sm) {
					margin: 10px;
				}
				@include border-radius;
				background-color: rgba( $color__white, 0.9 );
				overflow: hidden;
				padding: 18px 29px 3px;
				@include media-breakpoint-down(sm) {
					padding: 18px 14px 3px;
				}
				@include transition(all 0.42s cubic-bezier(0.680, 0.125, 0.000, 0.995));
				transition-delay: 0.22s;
				.entry-footer {
					position: absolute;
					bottom: 30px;
					left: 30px;
					right: 30px;
					@include media-breakpoint-down(sm) {
						bottom: 15px;
						left: 14px;
						right: 14px;
					}
					.btn, .comments-link {
						transform: translateY(100px);
						@include transition(all 0.4s cubic-bezier(0.680, 0.125, 0.000, 0.995));
					}
					.comments-link {
						background-color: transparent;
						border: 1px solid;
						transition-delay: 0.06s;
						line-height: 1.34;
					}
					.btn {
						transition-delay: 0.18s;
					}
				}
				&__animated {
					line-height: 0;
					opacity: 0;
					@include transition(all 0.42s cubic-bezier(0.680, 0.125, 0.000, 0.995));
					transition-delay: 0.22s;
				}
			}
			&:hover {
				.grid-item-wrap {
					padding-bottom: 72px;
					@include media-breakpoint-down(sm) {
						padding-bottom: 52px;
					}
					@include transition(all 0.25s cubic-bezier(0.165, 0.840, 0.440, 1.000));
					&__animated {
						line-height: 1.58;
						opacity: 1;
						.entry-footer {
							.btn, .comments-link {
								transform: translateY(0);
								@include transition(all 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000));
							}
							.comments-link {
								transition-delay: 0.16s;
								line-height: 1.34;
							}
							.btn {
								transition-delay: 0.06s;
							}
						}
						@include transition(all 0.35s cubic-bezier(0.265, 0.840, 0.440, 1.000));
					}
				}
			}
		}
	}
	/*-------------------
	### V4 Styles
	---------------------*/
	&.list-style-v4 {
		margin-left: $grid-gutter-width/2;
		margin-right: $grid-gutter-width/2;
		.posts-list__item.grid-item {
			margin-bottom: $grid-gutter-width;
			.post-thumbnail {
				&__link {
					display: block;
				}
				img {
					width: 100%;
					border-radius: ( $button__border-radius $button__border-radius 0 0);
				}
				margin-bottom: 0;
			}
			&:not(.has-post-thumbnail) .grid-item-wrap {
				border-radius: $border__radius $border__radius;
			}
			.grid-item-wrap {
				border-radius: ( 0 0 $border__radius $border__radius);
				padding: 25px;
				background-color: $color__lightblue;
				@include media-breakpoint-up(lg) {
					padding: 36px 38px 38px;
				}
				.comments-link {
					background-color: $color__white;
				}
			}
		}
	}
	/*-------------------
	### V5
	---------------------*/
	&.list-style-v5 {
		margin-left: $grid-gutter-width/2;
		margin-right: $grid-gutter-width/2;
		.posts-list__item.grid-item {
			&:not(.has-post-thumbnail) .grid-item-inner {
				border-radius: $border__radius $border__radius;
				background-color: $color__darkgray2;
			}
			margin-bottom: $grid-gutter-width;
			right: 0;
			left: 0;
			.grid-item__thumbnail {
				border-radius: 4px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-size: cover;
				background-position: center;
				z-index: -1;
			}
			.grid-item-inner {
				position: relative;
				@include media-breakpoint-down(md) {
					min-height: 360px;
				}
				@include media-breakpoint-up(md) {
					min-height: 442px;
				}
				&:after {
					position: absolute;
					content: '';
					top: 40px;
					right: 40px;
					bottom: 40px;
					left: 40px;
					@include media-breakpoint-down(md) {
						top: 20px;
						right: 20px;
						bottom: 20px;
						left: 20px;
					}
					background-color: rgba( $color__darkgray, 0.75 );
					@include transition(all 0.42s cubic-bezier(0.680, 0.125, 0.000, 0.995));
				}
			}
			.post-thumbnail {
				margin: 0;
				img {
					width: 100%;
				}
			}
			.grid-item-wrap {
				position: absolute;
				text-align: center;
				bottom: 0;
				top: 0;
				left: 0;
				right: 0;
				padding: 50px;
				margin: 35px 0;
				@include media-breakpoint-down(md) {
					padding: 25px;
					margin: 20px 0;
				}
				overflow: hidden;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-content: center;
				align-items: center;
				z-index: 1;
				transition-delay: 0.22s;
				.entry-header {
					transform: translateY(25%);
					@include transition(all 0.3s ease);
					.entry-meta > * {
						flex: 0 1 100%;
					}
				}
				.entry-footer {
					padding-top: 10px;
					.space-between-content {
						flex-direction: column;
						flex-wrap: wrap;
						justify-content: center;
						align-content: stretch;
						align-items: center;
					}
					.tags-links {
						&:not(:first-child) {
							margin-top: 10px;
						}
					}
					.comments-link {
						background-color: transparent;
						@include font-size(0.875);
						padding: 0;
						margin-top: 10px;
						& + .tags-links {
							margin-top: 5px;
						}
						&:before {
							display: none;
						}
					}
				}
				&__animated {
					line-height: 0px;
					opacity: 0;
					@include transition(all 0.32s cubic-bezier(0.680, 0.125, 0.000, 0.995));
				}
			}
			&:hover {
				.grid-item-inner:after {
					top: 20px;
					right: 20px;
					bottom: 20px;
					left: 20px;
					@include media-breakpoint-down(md) {
						top: 10px;
						right: 10px;
						bottom: 10px;
						left: 10px;
					}
					@include transition(all 0.25s cubic-bezier(0.165, 0.840, 0.440, 1.000));
				}
				.grid-item-wrap {
					.entry-header {
						transform: translateY(0);
						@include transition(all 0.3s ease);
					}
					&__animated {
						line-height: 22px;
						opacity: 1;
						@include transition(all 0.35s cubic-bezier(0.265, 0.840, 0.440, 1.000));
					}
				}
			}
		}
	}
	/*-------------------
	### V7, V6
	---------------------*/
	&.list-style-v7, &.list-style-v6 {
		position: relative;
		.posts-list__item.grid-item {
			margin-bottom: $grid-gutter-width;
			.grid-item__thumbnail {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-size: cover;
				background-position: center;
				z-index: -1;
			}
			&:not(.has-post-thumbnail) .grid-item-inner {
				background-color: $color__darkgray2;
			}
			.grid-item-inner {
				position: relative;
				overflow: hidden;				
				background-color: rgba(0,0,0, 0.1);
				@include transition(all 0.25s ease);
				@include border-radius();
				&:after {
					position: absolute;
					content: '';
					top: 40%;
					right: 0;
					bottom: 0;
					left: 0;
					background: -moz-linear-gradient(top, rgba(122,188,255,0) 0%, rgba(104,158,213,0) 15%, rgba(33,36,41,0.66) 76%, rgba(33,36,41,0.89) 97%, rgba(33,36,41,0.9) 98%);
					background: -webkit-linear-gradient(top, rgba(122,188,255,0) 0%,rgba(104,158,213,0) 15%,rgba(33,36,41,0.66) 76%,rgba(33,36,41,0.89) 97%,rgba(33,36,41,0.9) 98%);
					background: linear-gradient(to bottom, rgba(122,188,255,0) 0%,rgba(104,158,213,0) 15%,rgba(33,36,41,0.66) 76%,rgba(33,36,41,0.89) 97%,rgba(33,36,41,0.9) 98%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007abcff', endColorstr='#e6212429',GradientType=0 );
				}
			}
			.post-thumbnail {
				margin: 0;
				img {
					width: 100%;
					border-radius: 0;
				}
			}
			.grid-item-wrap {
				position: absolute;
				text-align: left;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 30px 28px 0;
				@include media-breakpoint-down(sm) {
					padding: 15px;
				}
				overflow: hidden;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-content: flex-start;
				align-items: flex-start;
				z-index: 1;
				@include transition(all 0.42s cubic-bezier(0.680, 0.125, 0.000, 0.995));
				transition-delay: 0.22s;
				.cat-links {
					position: absolute;
					top: 30px;
					left: 30px;
					@include media-breakpoint-down(sm) {
						top: 15px;
						left: 15px;
					}
					overflow: hidden;
					li {
						float: left;
						margin-right: 4px;
						margin-bottom: 4px;
					}
					a {
						display: inline-block;
						padding: 4px 9px;
						@include border-radius();
					}
				}
				.entry-footer {
					position: absolute;
					bottom: 30px;
					left: 30px;
					right: 30px;
					@include media-breakpoint-down(sm) {
						position: absolute;
						right: 15px;
						left: 15px;
						bottom: 15px;
					}
					.btn, .comments-link {
						transform: translateY(160px);
						@include transition(all 0.4s cubic-bezier(0.680, 0.125, 0.000, 0.995));
					}
					.comments-link {
						@include border-radius();
						padding: 8px 10px;
						border: 1px solid $color__light;
						background-color: transparent;
						line-height: 1.4;
						transition-delay: 0.06s;
					}
					.btn {
						border: 1px solid $color__light;
						background-color: transparent;
						line-height: 1;
						transition-delay: 0.18s;
					}
				}
				&__animated {
					width: 100%;
					line-height: 0px;
					opacity: 0;
					@include transition(all 0.42s cubic-bezier(0.680, 0.125, 0.000, 0.995));
					transition-delay: 0.22s;
				}
			}
			&:hover {				
				&:not(.has-post-thumbnail) .grid-item-inner {
					background-color: $color__dark;
				}
				.grid-item-inner {
					background-color: rgba(0,0,0, 0.5);
					@include transition(all 0.25s ease);
				}
				.grid-item-wrap {
					padding-bottom: 75px;
					@include media-breakpoint-down(sm) {
						padding-bottom: 60px;
					}
					@include transition(all 0.25s cubic-bezier(0.165, 0.840, 0.440, 1.000));
					&__animated {
						line-height: 22px;
						opacity: 1;
						.entry-footer {
							.btn, .comments-link {
								transform: translateY(0);
								@include transition(all 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000));
							}
							.comments-link {
								line-height: 1.4;
								transition-delay: 0.16s;
							}
							.btn {
								line-height: 1;
								transition-delay: 0.06s;
							}
						}
						@include transition(all 0.35s cubic-bezier(0.265, 0.840, 0.440, 1.000));
					}
				}
			}
		}
	}
	&.list-style-v6 {
		.grid-item-inner {
			min-height: 380px;
			@include media-breakpoint-up(md) {
				min-height: 500px;
			}
		}
		.posts-list__item.grid-item .grid-item-wrap .entry-footer {
			bottom: 32px;
		}
	}
	&.list-style-v7 {
		.grid-item-inner {
			min-height: 380px;
			@include media-breakpoint-up(md) {
				min-height: 411px;
			}
		}
	}
	/*-------------------
	### V8 Styles
	---------------------*/
	&.list-style-v8 {
		.posts-list__item.grid-item {
			margin-bottom: $grid-gutter-width;
			.post-thumbnail {
				margin-right: 0;
				margin-bottom: 0;
				@include media-breakpoint-up(lg) {
					margin-right: 40px;
				}
				&__link {
					display: block;
				}
				img {
					width: 100%;
					border-radius: 0;
				}
			}
			.grid-item-wrap {
				border: 1px solid $color__background-hr;
				border-radius: $border__radius;
				padding: 25px;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: stretch;
				align-items: flex-start;
				> * {
					order: 0;
					align-self: center;
					@include media-breakpoint-up(lg) {
						align-self: auto;
					}
				}
				> *:not(:only-child) {
					flex: 0 1 100%;
					@include media-breakpoint-up(lg) {
						flex: 0 1 50%;
					}
				}

				.entry-header .entry-meta .byline,
				.entry-header .entry-meta .cat-links{
					@include media-breakpoint-down(lg) {
						flex: 0 1 100%;
					}
				}
				&__content {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-content: stretch;
					align-items: center;
					margin-top: 20px;
					text-align: center;
					@include media-breakpoint-up(lg) {
						min-height: 227px;
						margin-top: 0;
						text-align: left;
						align-items: flex-start;
					}
				}
				@include media-breakpoint-up(lg) {
					padding: 36px 38px 38px;
					flex-wrap: nowrap;
					flex-direction: row;
				}
			}
		}
	}
	/*-------------------
	### V9 Styles
	---------------------*/
	&.list-style-v9 {
		position: relative;
		.posts-list__item.grid-item {
			margin: 0;			
			&:not(.has-post-thumbnail) .grid-item-inner {
				background-color: $color__darkgray2;
			}
			.grid-item__thumbnail {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-size: cover;
				background-position: center;
				z-index: -1;
			}
			.grid-item-inner {
				position: relative;
				overflow: hidden;
				@include media-breakpoint-down(sm) {
					min-height: 360px;
				}
				@include media-breakpoint-up(sm) {
					min-height: 433px;
				}
				&:after {
					position: absolute;
					content: '';
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background-color: rgba( $color__dark, 0.3 );
				}
				&__top {
					position: absolute;
					right: 15px;
					top: 15px;
					z-index: 2;
					@include media-breakpoint-up(md) {
						right: 30px;
						top: 30px;
					}
					.comments-button {
						@include border-radius();
						padding: 8px 10px;
						border: 1px solid $color__light;
						background-color: transparent;
						&:before {
							display: none;
						}
					}
				}
			}
			.post-thumbnail {
				margin: 0;
				img {
					width: 100%;
					border-radius: 0;
				}
			}
			.grid-item-wrap {
				position: absolute;
				text-align: center;
				bottom: 0;
				top: 0;
				left: 0;
				right: 0;
				padding: 20px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-content: center;
				align-items: center;
				z-index: 1;
				transition-delay: 0.22s;
				.entry-header {
					transform: translateY(25%);
					@include transition(all 0.3s ease);
					.entry-meta {
						margin-bottom: 24px;
						> * {
							flex: 0 1 100%;
						}
					}
					.entry-title {
						margin: 0 0 20px;
					}
				}
				.entry-footer {
					.space-between-content:not(:empty) {
						flex-direction: column;
						flex-wrap: wrap;
						justify-content: center;
						align-content: stretch;
						align-items: center;
						padding-top: 10px;
						@include media-breakpoint-up(md) {
							padding-top: 25px;
						}
					}
				}
				&__animated {
					line-height: 0;
					opacity: 0;
					@include transition(all 0.32s cubic-bezier(0.680, 0.125, 0.000, 0.995));
					.entry-content p {
						@include media-breakpoint-up(md) {
							@include font-size(1.125);
						}
					}
				}
			}
			&:hover {
				.grid-item-wrap {
					.entry-header {
						transform: translateY(0);
						@include transition(all 0.3s ease);
					}
					&__animated {
						line-height: 1.56;
						opacity: 1;
						@include transition(all 0.35s cubic-bezier(0.265, 0.840, 0.440, 1.000));
					}
				}
			}
		}
	}
	/*-------------------
	### V10Styles
	---------------------*/
	&.list-style-v10 {
		.grid-item {
			margin-bottom: 34px;
			.post-thumbnail {
				margin-bottom: 0;
			}
			&:not(.has-post-thumbnail) .grid-item-inner {
				margin: 0;
				padding: 0;
			}
			&-inner {
				position: relative;
				margin: -30px 20px 0 20px;
				background-color: $color__white;
				padding: 20px;
				@include media-breakpoint-up(sm) {
					margin: -40px 0 0 40px;
					padding: 25px 25px 25px 30px;
				}
				@include media-breakpoint-up(lg) {
					margin: -49px 0 0 62px;
					padding: 35px 25px 25px 38px;
				}
				.entry-header {
					.entry-meta {
						margin-bottom: 23px;
					}
					.entry-title {
						margin: 0 0 24px;
					}
				}
				.entry-content {
					margin-bottom: 27px;
				}
				.space-between-content {
					justify-content: flex-start;
					.comments-link {
						padding: 10px 5px 9px;
						background-color: transparent;
					}
				}
			}
		}
	}
}