/**
 * Masonry grid
 */

/*

In order to solve fluid roundings two elements are inserted with js: .Masonry-gridSizer and .gutter-sizer - they are necessary if your masonry items are using percentage widths.

The horizontal gutter comes from the .Masonry-gutterSizer element only so do not use any margin-left or right on the masonry items nor the .Masonry-gridSizer.

It's important that the items and the grid-sizer have synced widths.
It's important that the gutter-sizer adjust according to the width of the items/grid-sizer

Also see masonry.js
*/


/**
 * The masonry container
 */
.Masonry {

	// Make sure it's clearfixed
	&:after {
		content: '';
		display: block;
		clear: both;
	}

	// Fade in masonry when it is ready. Class is added with js.
	// opacity: 0;
	// transition: 400ms;
	// visibility: hidden;
	// &.is-active {
	// 	visibility: visible;
	// 	opacity: 1;
	// }
}

/**
 * Masonry items
 */

.Masonry-item,
.Masonry-gridSizer {
	// Make sure items have layout. Makes it a lot easier to work with
	float: left;
	width: 100%;
	// Responsive images
	img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}

.Masonry-item {
	outline: 1px solid;
	margin-bottom: 1em;

	// Just for testing
	&:nth-child(4n+1) {
		min-height: 3rem;
	}
}

/**
 * Responsive layout
 */

// Small version
$masonry-s: 560px;
$masonry-s-columns: 2;
// Small/Medium version
$masonry-sm: 730px;
$masonry-sm-columns: 3;
// Medium version
$masonry-m: 1100px;
$masonry-m-columns: 4;
// Medium/Large version
$masonry-ml: 1200px;
$masonry-ml-columns: 5;
// Large version
$masonry-l: 1500px;
$masonry-l-columns: 6;

// Adjust gutter width according to column count
.Masonry-gutterSizer {
	@media (min-width: $masonry-s) { width: gutter($masonry-s-columns); }
	@media (min-width: $masonry-sm) { width: gutter($masonry-sm-columns); }
	@media (min-width: $masonry-m) { width: gutter($masonry-m-columns); }
	@media (min-width: $masonry-ml) { width: gutter($masonry-ml-columns); }
	@media (min-width: $masonry-l) { width: gutter($masonry-l-columns); }
}

// Adjust item width according to column count
.Masonry-item,
.Masonry-gridSizer {
	@media (min-width: $masonry-s) { width: span(1 of $masonry-s-columns); }
	@media (min-width: $masonry-sm) { width: span(1 of $masonry-sm-columns); }
	@media (min-width: $masonry-m) { width: span(1 of $masonry-m-columns); }
	@media (min-width: $masonry-ml) { width: span(1 of $masonry-ml-columns); }
	@media (min-width: $masonry-l) { width: span(1 of $masonry-l-columns); }
}

.Masonry-item {

	// To fade in each masonry item as they load
	// - Uncomment the relevant method in masonry.js
	// - use this css
	// transition: opacity 300ms ease-out;
	// opacity: 0;

	// &.is-loaded {
	// 	opacity: 1;
	// }

	// @for $i from 1 through 30 {
	// 	&:nth-child(#{$i}) {
	// 		$delay: 1s * $i * 0.08;
	// 		transition-delay: $delay;
	// 	}
	// }

	// Adjust featured width according to column count
	&.is-featured {
		@media (min-width: $masonry-s) { width: span(2 of $masonry-s-columns); }
		@media (min-width: $masonry-sm) { width: span(2 of $masonry-sm-columns); }
		@media (min-width: $masonry-m) { width: span(2 of $masonry-m-columns); }
		@media (min-width: $masonry-ml) { width: span(2 of $masonry-ml-columns); }
		@media (min-width: $masonry-l) { width: span(2 of $masonry-l-columns); }
	}
}