/**
 * Grid
 *
 * Description: Contains the grid-system.
 * @see: http://oocss.org/grids_docs.html
 * Version: 1.1.0
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Layout classes
 * 2.0 - Layout width
 * 3.0 - Layout units
 * 4.0 - Layout content
 * 5.0 - Layout grid
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Layout classes
 * -----------------------------------------------------------------------------
 */

.clearfix {
	@include clearfix();
}
.layout-left {
	float: left;
}
.layout-right {
	float: right;
}
.layout-inline, .layout-stacked {
	padding: 0;
}
.layout-inline > * {
	display: inline-block;
	vertical-align: top;
}
.layout-stacked > * {
	display: block;
}
.layout-center {
	margin-left: auto;
	margin-right: auto;
	float: none !important;
	display: block !important;
}




/**
 * 2.0 - Layout width
 * -----------------------------------------------------------------------------
 */

.layout-width-full {
	@include clearfix();
	margin-bottom: $margin-standard;
}

.layout-width-constrained {
	@include clearfix();
	width: 96%;
	max-width: $device-large-max;
	margin-left: auto;
	margin-right: auto;
}




/**
 * 3.0 - Layout units
 * -----------------------------------------------------------------------------
 */

.layout-unit-container {
	margin-left: -($margin-standard / 4);
	margin-right: -($margin-standard / 4);
	word-spacing: -0.36em;

	.layout-width-full & {
		margin-left: 0;
		margin-right: 0;
		overflow: hidden;
	}

	&.reset-margin, & .layout-unit-container.reset-margin {
		margin-left: -($margin-standard);
		margin-right: -($margin-standard);
	}

	> * {
		word-spacing: normal;
	}

	.layout-unit-container {
		margin-left: 0;
		margin-right: 0;
	}

	.layout-unit-container.with-margin {
		margin-left: -($margin-standard / 2);
		margin-right: -($margin-standard / 2);
	}

	@media (max-width: $device-small-max) {
		&, & .layout-unit-container, & .layout-unit-container.with-margin {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

.layout-unit {
	margin: 0 $margin-standard / 2 $margin-standard $margin-standard / 2;

	@media (max-width: $device-medium-max) {
		margin: 0 $margin-standard / 4 $margin-standard / 2 $margin-standard / 4;
	}

	@media (max-width: $device-small-max) {
		.layout-unit {
			margin: 0 $margin-standard / 4 $margin-standard / 2 $margin-standard / 4;
		}
		margin: 0 0 $margin-standard 0;
	}
}



/**
 * 4.0 - Layout content
 * -----------------------------------------------------------------------------
 */

.layout-content, .layout-content-small {
	padding: $margin-standard * 2;

	&.narrow-top {
		padding-top: em(40px);
	}

	@media (max-width: $device-medium-max) {
		padding: $margin-standard / 2;

		&.narrow-top {
			padding-top: $margin-standard / 2;
		}
	}
}

.layout-content-small {
	padding: $margin-standard;
}



/**
 * 5.0 - Layout grid
 * -----------------------------------------------------------------------------
 */

// Base settings
[class^="layout-size"], [class*=" layout-size"], 
[class^="layout-medium-size"], [class*=" layout-medium-size"], 
[class^="layout-small-size"], [class*=" layout-small-size"] {
	position: relative;
	float: left;

	.layout-unit-container > & {
		display: inline-block;
		vertical-align: top;
		float: none;
	}

	&.layout-flipped {
		float: right;
	}
}

// Standard grid
.layout-size1of1 { width: 100%; }
.layout-size1of2 { width: 50%; }
.layout-size1of3 { width: 33.33333%; }
.layout-size2of3 { width: 66.66666%; }
.layout-size1of4 { width: 25%; }
.layout-size3of4 { width: 75%; }
.layout-size1of5 { width: 20%; }
.layout-size2of5 { width: 40%; }
.layout-size3of5 { width: 60%; }
.layout-size4of5 { width: 80%; }

// Grid for medium devices
@media (min-width: $device-medium-min) and (max-width: $device-medium-max) {
	.layout-medium-size1of1 { width: 100%; }
	.layout-medium-size1of2 { width: 50%; }
	.layout-medium-size1of3 { width: 33.33333%; }
	.layout-medium-size2of3 { width: 66.66666%; }
	.layout-medium-size1of4 { width: 25%; }
	.layout-medium-size3of4 { width: 75%; }
	.layout-medium-size1of5 { width: 20%; }
	.layout-medium-size2of5 { width: 40%; }
	.layout-medium-size3of5 { width: 60%; }
	.layout-medium-size4of5 { width: 80%; }
}

// Grid for small devices
@media (max-width: $device-small-max) {
	[class^="layout-size"], [class*=" layout-size"] {
		width: 100%;
		float: none;

		&.layout-flipped {
			float: none;
		}
	} 

	.layout-small-size1of1 { width: 100%; }
	.layout-small-size1of2 { width: 50%; }
	.layout-small-size1of3 { width: 33.33333%; }
	.layout-small-size2of3 { width: 66.66666%; }
	.layout-small-size1of4 { width: 25%; }
	.layout-small-size3of4 { width: 75%; }
	.layout-small-size1of5 { width: 20%; }
	.layout-small-size2of5 { width: 40%; }
	.layout-small-size3of5 { width: 60%; }
	.layout-small-size4of5 { width: 80%; }
}