/*
 * Sistema de grids sense necessitat de posar .row pel mig i que mantè unificades
 * les alçades dels elements d'una mateixa fila.
 * nota: Hi ha un generador inplementat en PHP per cada un d'ells...
 * 
 * - Grids "automàtics" (responsive)
 * <div class="grid-rows grid-cols">
 *		<div class="grid-col-lg grid-col-md grid-col-sm grid-col-xs">
 *			...
 *		</div>
 *		<div class="grid-col-lg grid-col-md grid-col-sm grid-col-xs">
 *			...
 *		</div>
 *		<div class="grid-break-cols grid-break-sm"></div>
 *		<div class="grid-col-lg grid-col-md grid-col-sm grid-col-xs">
 *			...
 *		</div>
 *		<div class="grid-break-cols grid-break-md"></div>
 *		<div class="grid-col-lg grid-col-md grid-col-sm grid-col-xs">
 *			...
 *		</div>
 *		<div class="grid-break-cols grid-break-sm grid-break-lg"></div>
 *		...
 *	</div>
 *
 * - Grid amb un nùmero específic (i "fix") de columnes:
 * <div class="grid-rows grid-4cols">
 *		<div class="grid-col">
 *			...
 *		</div>
 *		<div class="grid-col">
 *			...
 *		</div>
 *		<div class="grid-break-cols grid-break-3cols"></div>
 *		<div class="grid-col">
 *			...
 *		</div>
 *		...
 * </div>
 *
 * - Grid amb un nùmero "variable" (responsive) de columnes:
 * <div class="grid-rows grid-lg-6cols grid-md-3cols grid-sm-2cols grid-xs-1cols">
 *		<div class="grid-col">
 *			...
 *		</div>
 *		<div class="grid-col">
 *			...
 *		</div>
 *		<div class="grid-break-cols grid-break-3cols"></div>
 *		<div class="grid-col">
 *			...
 *		</div>
 *		...
 * </div>
 *
 * - Si no es volen "perdre" els marges drea i esquerra del primer i ùltim 
 * elemnt de cada fila es pot envoltar-ho tot amn la classe .grid-container.
 */

// Number of columns in the grid.
$grid-columns:              12 !default;

// Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         20px !default;

$grid-padding-left:  floor(($grid-gutter-width / 2));
$grid-padding-right: ceil(($grid-gutter-width / 2));

@mixin include-grid-col() {
	float: left;
	position: relative;
	min-height: 1px;
	padding-left: $grid-padding-left;
	padding-right: $grid-padding-right;
}

.grid-container {
	padding-left: $grid-padding-left;
	padding-right: $grid-padding-right;
}

.grid-rows {
	margin-left: -$grid-padding-left;
	margin-right: -$grid-padding-right;
	padding-left: 0;
	padding-right: 0;
	@include clearfix;

	&.compact-cols {
		margin-left: 0;
		margin-right: 0;

		.grid-col {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

.grid-col {
	@include include-grid-col;

	&.compact-col {
		padding-left: 0;
		padding-right: 0;
	}

	&.mb10-col {
		margin-bottom: 10px;
	}
	
	&.mb20-col {
		margin-bottom: 20px;
	}
}

.grid-break-cols {
	float: left;
	overflow: hidden;
}

/*
 * Grids específicant nùmero de columnes:
 */
@mixin make-grid-cols($size) {

	@for $i from 1 through 10 {

		.grid-#{$size}#{$i}cols {
			.grid-col {
				width: percentage(   floor((1 / $i) * 1000) / 1000  );
			}

			.grid-break-#{$i}cols {
				clear: both;
			}
		}
	}
}

// Versió "no responsive"
// Genera .grid-2cols, .grid-3cols, etz...
@include make-grid-cols('');

// Versions "responsive"
// Genera .grid-xs-2cols, .grid-xs-3cols, etz...
@media (max-width: $screen-xs-max) {
	@include make-grid-cols('xs-');
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
	@include make-grid-cols('sm-');
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
	@include make-grid-cols('md-');
}

@media (min-width: $screen-lg-min) {
	@include make-grid-cols('lg-');
}

// Columnes "automàtiques" en funció de la mida de la pantalla (responsives)
.grid-cols {
	// xs: 1 columna
	.grid-col-xs {
		@include include-grid-col;
		width: percentage(12 / $grid-columns);
	}

	// sm: 2 columnes
	@media (min-width: $screen-sm-min) {
		.grid-col-sm {
			@include include-grid-col;
			width: percentage(6 / $grid-columns);
		}
	}

	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		.grid-break-sm {
			clear: both;
		}
	}

	// md: 3 columnes
	@media (min-width: $screen-md-min) {
		.grid-col-md {
			@include include-grid-col;
			width: percentage(4 / $grid-columns);
		}
	}

	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		.grid-break-md {
			clear: both;
		}
	}

	// lg: 4 columnes
	@media (min-width: $screen-lg-min) {
		.grid-col-lg {
			@include include-grid-col;
			width: percentage(3 / $grid-columns);
		}
	}

	@media (min-width: $screen-lg-min) {
		.grid-break-lg {
			clear: both;
		}
	}
}

// Grid responsive amb mides diferens de columnes.
.grid-narrow {

	// xs: 1 columna
	.grid-col-xs {
		@include include-grid-col;
		width: percentage(12 / $grid-columns);
	}

	// sm
	@media (min-width: $screen-sm-min) {
		.grid-col-sm {
			@include include-grid-col;

			// 2 columnes
			width: percentage(6 / $grid-columns);
		}
	}

	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
		.grid-narrow-break-sm {
			clear: both;
		}
	}

	// md
	@media (min-width: $screen-md-min) {
		.grid-col-md {
			@include include-grid-col;
			// 2 columnes
			width: percentage(6 / $grid-columns);
		}
	}

	@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
		.grid-narrow-break-md {
			clear: both;
		}
	}

	// lg
	@media (min-width: $screen-lg-min) {
		.grid-col-lg {
			@include include-grid-col;
			// 3 columnes
			width: percentage(4 / $grid-columns);
		}
	}

	@media (min-width: $screen-lg-min) {
		.grid-narrow-break-lg {
			clear: both;
		}
	}

	.grid-break-sm {
		clear: none !important;
	}

	.grid-break-md {
		clear: none !important;
	}

	.grid-break-lg {
		clear: none !important;
	}
}