/*------------------------------------*\
	$Photo - photo.less
\*------------------------------------*/

@photoImageBackground: #F9F9F9;

/*
//photo listing
.es-photos
	.es-photo

//default classes for photo
.es-photo // size modified .es-photo-medium, .es-photo-small
	.es-photo-wrap // <img> container masking purpose modified .es-scaledimg
		img // fit width to square modified .es-scaledimg-fitwidth

.es-photos-resize (photo resize wrapper) @width
	.es-photo-[small/medium/large] (photo size modified for es-photo-wrap)
		.es-photo-wrap (<img> container)
			<img>
			.es-scaledimg-fitwidth (modified for horizontal image)

*/

//photos list wrapper
.es-photos {
	.clearfix();
	clear: both;
	overflow: hidden;
	position: relative;
	img {
		// max-width: 100%;
	}
	// .es-photo {
	// 	float: left;
	// }
}

.es-photo-single {
	display: inline-block;
	height: auto;
	image-rendering: optimizeQuality;
	max-height: 360px;
	max-width: 720px;
	vertical-align: middle;
	width: auto;
}



.es-photo-item {
	/* A fluid container */
	float: left;
	// width: 33%;
	// border-left: 1px solid #000;
	
	&.es-photo-item-full {
		width: 100%;
	}
	&.es-photo-item-half {
		width: 48%;
	}
}
.es-photo-item-full {
	position: relative;
	.img-frame {
		position: relative;
		width: 100%;
		overflow: hidden;

	}
	.inner-frame {
		height: 100%
	}
	img.horizontal {
		width: 100%;
		max-height: none;
	}
}

.es-photo-item-half {
	.img-frame {
		/*  enforce aspect-ratio  */
		position: relative;
		text-align: center;
		width: 100%;
		height: 0;

		// for 4:3
		// padding-bottom: 75%;

		// for 1:1
		padding-bottom: 100%;

		background-color: #CCC;
		overflow: hidden;

		&.img-frame-half {
			padding-bottom: 50%;

			//if img-frame-half push <img> to -50%
			//for horizontal img
			img {
				top:-50%;
			}
			img.horizontal {
				// height: auto !important;
			}
		}
	}

	.inner-frame {
		/*
		This block will take up the full height and width of the containing
		block which enforces an aspect ratio

		set font-size to zero to remove inline-block spacing

		*/
		position: absolute;
		height: 100%;
		width: 100%;
		font-size: 0;
	}

	.inner-frame:before {
		/*

		Set an inline element that has full height of container and
		vertical alignment set to middle. The following image will align
		to this

		*/
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.inner-frame img {
		/*

		Make sure the image stays vertically aligned, and allow it to resize

		*/
		max-width: 100%;
		height: auto;
		vertical-align: middle;
		position: relative;
	}

	img.es-scaledimg-fitheight,
	img.horizontal {
		position: absolute;
		left: 0;
		max-width: none;
		// height: 100% !important;
		// width: auto;
	}
}//half





// img.es-scaledimg-fitheight {
// 	position: absolute;
// 	left: 0;
// 	max-width: none;
// 	// width: auto;
// }

//stream photo container
.es-stream-photo-row {
	// background: red;
	position: relative;
	.clearfix();
	
	// Profile covers
	&.es-stream-item-photo-cover{
		margin: -10px;
		padding-bottom: 10px;
	}

	.es-stream-item-photo {
		display: inline-block;
		font-size: 0;
		width: 100%;
	}

	&.es-stream-photos-2 {
		.es-stream-item-photo {
			width: 50%;
			.es-photo-image {
				padding-top: 60%;
				height: auto;
			}

			&:first-child {
				padding-right: 5px;
			}
			// display: inline-block;
			+ .es-stream-item-photo {
				position: absolute;
				right: 0;
				padding-left: 5px;
				

			}
		}
	}//2

	&.es-stream-photos-3 {
		.es-stream-item-photo {
			// float: left;
			// display: inline-block;
			// font-size: 0;
			width: 50%;
			.es-photo-image {
				height: 150px;	
			}
			
			&:nth-child(2) {
				clear: left;
				padding-top: 5px;
			}
			&:nth-child(3) {
				position: absolute;
				right: 0;
				padding-left: 10px;
				top: 0;
				.es-photo-image {
					height: 310px;
				}
			}
		}
	}//3

	&.es-stream-photos-4 {
		.es-stream-item-photo {
			width: 49%;
			padding-bottom: 6px;
			.es-photo-image {
				// height: 130px;
				height: auto;
				padding-top: 50%;
				// padding-bottom: 8px;
			}
			&:nth-child(even){
				position: absolute;
				right: 0;
				// padding-left: 10px;
			}
			&:nth-child(2) {
				top: 0;
			}
			&:nth-child(3) {
				clear: left;
				display: block;
			}
			// &:nth-child(3),
			&:nth-child(4) {
				// position: absolute;
				bottom: 0;
				// top: 136px;
			}
		}
	}//4

	&.es-stream-photos-5 {
		.es-stream-item-photo {
			width: 19%;
			padding-right: 5px;
			.es-photo-image {
				// padding-right: 10px;
				height: auto;
				padding-top: 100%; //ratio 1:1
				background-position: center;
				+ .es-photo-image {
					// padding-left: 10px;
				}
			}
		}
	}//5

	&.es-stream-photos-1-4 {
		.es-stream-item-photo {
			width: 24%;
			padding-right: 1%;
			&:first-child {
				width: 98%;
				.es-photo-image {
					padding-top: 50%;
					margin-bottom: 10px;
				}
			}
			.es-photo-image {
				// padding-right: 10px;
				height: auto;
				padding-top: 100%; //ratio 1:1
				background-position: center;
				+ .es-photo-image {
					// padding-left: 10px;
				}
			}
		}
	}//1/4
}

.es-stream-item-photo {
	.es-photo-image {
		height: 180px;
		background-size: cover;
	}
}