/* MJ Grid Framework
--------------------------------------------------------- */

/* Breakpoints
---------------------------------------------------------
	Base 	= 0px+ (mobile)
	xs 		= 639px- (mobile overwrites)
	s 		= 640px+ (small/landscape phones)
	m 		= 768px+ (tablets)
	l 		= 1024px+ (laptops)
	xl 		= 1280px+ (large desktops)
	xxl 	= 1536px+ (extra large screens)
--------------------------------------------------------- */

/*
12 GRID LAYOUT

Columns: 

	  1     2     3     4     5     6     7     8     9    10    11    12
	----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
   1     2     3     4     5     6     7     8     9     10    11    12    13

Column Start and End points
--------------------------------------------------------- */

/* Defaults, mobile first
--------------------------------------------------------- */
.grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	grid-gap: var(--gap-default, 20px);
	width: 100%;
}
.grid.gap-0 { grid-gap: 0; }
.grid.gap-half { grid-gap: var(--gap-half, 10px); }
.column.col-reverse {
	grid-column-end: -1;
}
.column {
	width: 100%;
	min-height: 1px;
	grid-column: span 1;
}
.column.empty-col { display: none; }

/* Small devices (640px+) – landscape phones */
@media (min-width: 640px) {
	.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.grid.gap-s { grid-gap: var(--space-s); }
	.grid.gap-m { grid-gap: var(--space-m); }
	.grid.gap-l { grid-gap: var(--space-l); }
	.grid.gap-xl { grid-gap: var(--space-xl); }

	.column { grid-column: span 12; }
	
	/* default unprefixed are half / fullwidth */
	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6 { grid-column: span 6; }
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 { grid-column: span 12; }

	.col-s-1 { grid-column: span 1; }
	.col-s-2 { grid-column: span 2; }
	.col-s-3 { grid-column: span 3; }
	.col-s-4 { grid-column: span 4; }
	.col-s-5 { grid-column: span 5; }
	.col-s-6 { grid-column: span 6; }
	.col-s-7 { grid-column: span 7; }
	.col-s-8 { grid-column: span 8; }
	.col-s-9 { grid-column: span 9; }
	.col-s-10 { grid-column: span 10; }
	.col-s-11 { grid-column: span 11; }
	.col-s-12 { grid-column: span 12; }

	/* col-span */
	.col-span-1 { grid-column: auto / span 1; }
	.col-span-2 { grid-column: auto / span 2; }
	.col-span-3 { grid-column: auto / span 3; }
	.col-span-4 { grid-column: auto / span 4; }
	.col-span-5 { grid-column: auto / span 5; }
	.col-span-6 { grid-column: auto / span 6; }
	.col-span-7 { grid-column: auto / span 7; }
	.col-span-8 { grid-column: auto / span 8; }
	.col-span-9 { grid-column: auto / span 9; }
	.col-span-10 { grid-column: auto / span 10; }
	.col-span-11 { grid-column: auto / span 11; }
	.col-span-12 { grid-column: auto / span 12; }
	/* col-start */
	.col-start-1 { grid-column-start: 1; }
	.col-start-2 { grid-column-start: 2; }
	.col-start-3 { grid-column-start: 3; }
	.col-start-4 { grid-column-start: 4; }
	.col-start-5 { grid-column-start: 5; }
	.col-start-6 { grid-column-start: 6; }
	.col-start-7 { grid-column-start: 7; }
	.col-start-8 { grid-column-start: 8; }
	.col-start-9 { grid-column-start: 9; }
	.col-start-10 { grid-column-start: 10; }
	.col-start-11 { grid-column-start: 11; }
	.col-start-12 { grid-column-start: 12; }
	/* col-end */
	.col-end-2 { grid-column-end: 2; }
	.col-end-3 { grid-column-end: 3; }
	.col-end-4 { grid-column-end: 4; }
	.col-end-5 { grid-column-end: 5; }
	.col-end-6 { grid-column-end: 6; }
	.col-end-7 { grid-column-end: 7; }
	.col-end-8 { grid-column-end: 8; }
	.col-end-9 { grid-column-end: 9; }
	.col-end-10 { grid-column-end: 10; }
	.col-end-11 { grid-column-end: 11; }
	.col-end-12 { grid-column-end: 12; }
	.col-end-13 { grid-column-end: 13; }
}
/* Tablets (768px+) */
@media (min-width: 768px) {
	.col-m-1 { grid-column: span 1; }
	.col-m-2 { grid-column: span 2; }
	.col-m-3 { grid-column: span 3; }
	.col-m-4 { grid-column: span 4; }
	.col-m-5 { grid-column: span 5; }
	.col-m-6 { grid-column: span 6; }
	.col-m-7 { grid-column: span 7; }
	.col-m-8 { grid-column: span 8; }
	.col-m-9 { grid-column: span 9; }
	.col-m-10 { grid-column: span 10; }
	.col-m-11 { grid-column: span 11; }
	.col-m-12 { grid-column: span 12; }
}
/* Laptops/desktops (1024px+) */
@media (min-width: 1024px) {
	.column.empty-col { display: block; }
	
	/* default unprefixed switch to their exact values */
	.col-1 { grid-column: span 1; }
	.col-2 { grid-column: span 2; }
	.col-3 { grid-column: span 3; }
	.col-4 { grid-column: span 4; }
	.col-5 { grid-column: span 5; }
	.col-6 { grid-column: span 6; }
	.col-7 { grid-column: span 7; }
	.col-8 { grid-column: span 8; }
	.col-9 { grid-column: span 9; }
	.col-10 { grid-column: span 10; }
	.col-11 { grid-column: span 11; }
	.col-12 { grid-column: span 12; }

	.col-l-1 { grid-column: span 1; }
	.col-l-2 { grid-column: span 2; }
	.col-l-3 { grid-column: span 3; }
	.col-l-4 { grid-column: span 4; }
	.col-l-5 { grid-column: span 5; }
	.col-l-6 { grid-column: span 6; }
	.col-l-7 { grid-column: span 7; }
	.col-l-8 { grid-column: span 8; }
	.col-l-9 { grid-column: span 9; }
	.col-l-10 { grid-column: span 10; }
	.col-l-11 { grid-column: span 11; }
	.col-l-12 { grid-column: span 12; }
}

/* Large desktops (1280px+) */
@media (min-width: 1280px) {
	.col-xl-1 { grid-column: span 1; }
	.col-xl-2 { grid-column: span 2; }
	.col-xl-3 { grid-column: span 3; }
	.col-xl-4 { grid-column: span 4; }
	.col-xl-5 { grid-column: span 5; }
	.col-xl-6 { grid-column: span 6; }
	.col-xl-7 { grid-column: span 7; }
	.col-xl-8 { grid-column: span 8; }
	.col-xl-9 { grid-column: span 9; }
	.col-xl-10 { grid-column: span 10; }
	.col-xl-11 { grid-column: span 11; }
	.col-xl-12 { grid-column: span 12; }
}

/* Extra large screens (1536px+) */
@media (min-width: 1536px) {
	.col-xxl-1 { grid-column: span 1; }
	.col-xxl-2 { grid-column: span 2; }
	.col-xxl-3 { grid-column: span 3; }
	.col-xxl-4 { grid-column: span 4; }
	.col-xxl-5 { grid-column: span 5; }
	.col-xxl-6 { grid-column: span 6; }
	.col-xxl-7 { grid-column: span 7; }
	.col-xxl-8 { grid-column: span 8; }
	.col-xxl-9 { grid-column: span 9; }
	.col-xxl-10 { grid-column: span 10; }
	.col-xxl-11 { grid-column: span 11; }
	.col-xxl-12 { grid-column: span 12; }
}
@media (max-width: 639px) {
	.grid.grid-xs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.grid-xs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.grid-xs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	
	.col-xs-2 { grid-column: span 2; }
	.col-xs-3 { grid-column: span 3; }
	.col-xs-4 { grid-column: span 4; }
}

/* Flex
--------------------------------------------------------- */
.flex-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gap-half, 10px) * -1);
	margin-right: calc(var(--gap-half, 10px) * -1);
}
.flex-wrap-wrap {
	flex-wrap: wrap;
}
.flex-col {
	min-height: 1px;
	width: 100%;
	position: relative;
}
.flex-direction-column { flex-direction: column; }

/* Mobile defaults */
.flex-col {
	flex-basis: 100%;
	padding: var(--gap-half, 10px);
}

/* Tablets (768px+) */
@media (min-width: 768px) {
	.flex-col { flex-basis: calc(100% / 3); }
}

/* Laptops/desktops (1024px+) */
@media (min-width: 1024px) {
	.flex .col-1,
	.flex.cols-1 .flex-col {flex-basis:calc(100% / 1); }
	.flex .col-2,
	.flex.cols-2 .flex-col {flex-basis:calc(100% / 2); }
	.flex .col-3,
	.flex.cols-3 .flex-col {flex-basis:calc(100% / 3); }
	.flex .col-4,
	.flex.cols-4 .flex-col {flex-basis:calc(100% / 4); }
	.flex .col-5,
	.flex.cols-5 .flex-col {flex-basis:calc(100% / 5); }
	.flex .col-6,
	.flex.cols-6 .flex-col {flex-basis:calc(100% / 6); }
	.flex .col-7,
	.flex.cols-7 .flex-col {flex-basis:calc(100% / 7); }
	.flex .col-8,
	.flex.cols-8 .flex-col {flex-basis:calc(100% / 8); }
	.flex .col-9,
	.flex.cols-9 .flex-col {flex-basis:calc(100% / 9); }
	.flex .col-10,
	.flex.cols-10 .flex-col{flex-basis:calc(100% / 10);}
	.flex .col-11,
	.flex.cols-11 .flex-col{flex-basis:calc(100% / 11);}
	.flex .col-12,
	.flex.cols-12 .flex-col{flex-basis:calc(100% / 12);}
}