/*==========================================================================
 * Matrix grid
 *
 * The matrix layout is a stacked list if items on small viewports
 * When enough room is available it will put 2 items on a row
 * The maximum number of items in a row is 3, then it wraps to the next row.
 * ========================================================================== */


/**
 * Magic numbers to make the gutter a percentage value so it scales nicely
 * Value is based on the largest possible width of the container,
 * with the negative margin on the component taken into account
 */

$l-matrix-gutter: 			3.87%; 		// translates to max. half of 100px (50px)
$l-matrix-gutter--dense: 	2.8773%; 	// translates to max. half of 75px (36.5px)
$l-matrix-bp:				768;

.l-matrix {
	@include flex(center column);
	margin: 0;
	list-style: none;
}

.l-matrix__item {
	@include flex(stretch);
	//margin: 0 0 6vh 0; 	// stretch the margin based on the HEIGHT of the viewport
	max-width: 350px; 	// keep the item reasonably sized
	width: 100%;
}

@include mq($max: $l-matrix-bp) {
	.l-matrix__item + .l-matrix__item{
		margin-top: 6vh;

		.l-matrix--mobile-divider & {
			margin-top: 8vh;
		}
	}
}



@include mq($l-matrix-bp) {
	.l-matrix {
		@include flex(stretch wrap);
		margin: -#{$l-matrix-gutter}; // Negative margin to compensate the extra margin on the items
	}

	.l-matrix-slider {
		@include flex(stretch);
		margin: -#{$l-matrix-gutter}; // Negative margin to compensate the extra margin on the items
	}

	.l-matrix__item {
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: #{(100% - ($l-matrix-gutter * 2 * 3)) / 3};
		min-width: 258px;
		margin: $l-matrix-gutter;
	}

	.l-matrix--dense {
		margin: -#{$l-matrix-gutter--dense}; // Negative margin to compensate the extra margin on the items

		& .l-matrix__item {
			flex-basis: #{(100% - ($l-matrix-gutter--dense * 2 * 3)) / 3};
			margin: $l-matrix-gutter--dense;
		}
	}

	.l-matrix--center {
		.l-matrix__item {
			align-items: center;
		}
	}
}

@include mq($max: $l-matrix-bp) {
	.l-matrix--mobile-divider {
		.l-matrix__item{
			position: relative;
		}

		.l-matrix__item + .l-matrix__item{
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: -4vh;
				width: 100%;
				height: 1px;
				background-color: palette(neutral, 100);
			}
		}
	}
}

.l-matrix[data-max-columns="2"] {
	@include mq(850) {
		justify-content: space-between;
	}

	@include mq(950) {
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	& .l-matrix__item {
		flex: 1 1 auto;
		max-width: 350px;
	}
}

.l-matrix.l-matrix--half {
	.l-matrix__item {
		@include mq(1040) {
			flex-basis: calc(50% - 32px) !important;
		}
	}
}


@include mq($max: $l-matrix-bp) {
	.l-matrix__item--slide + .l-matrix__item--slide{
		margin-top: 0vh;

		.l-matrix--mobile-divider & {
			margin-top: 0vh;
		}
	}
}