/* Ultra CSS 1  */
:root {
	/* The only place margins are useful is outside of grids and mixed with other 
	margin-by-default elements. So, let's centralize this idea to one place for all 
	row margin values.*/
	--u1-row-margin: 1.5rem;
	--u1-col-width: 30rem;
	--u1-gap-row: 2rem;
	--u1-gap-col: 1.5rem;
	--u1-span: 1;
}

.u1-rows {
	/* For simple row spacing and 1 column structure.*/
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--u1-gap-row) var(--u1-gap-col);
}

.u1-flex {
	display: flex;
	flex-direction: row;
	/* gap: var(--u1-gap-row) var(--u1-gap-col); ??When can we use this?? */
	flex-wrap: wrap;
}

.u1-flex > * {
	flex: 1 1 var(--u1-col-width);
	margin: 0 var(--u1-gap-row) var(--u1-gap-col) 0;
}

.u1-flex > * :last-child {
	/* Have last item take up the whole row*/
	flex-grow: 10;
}

.u1-flex-50 {
	flex-basis: 50%;
}

.u1-flex-100 {
	flex-basis: 100%;
}

.u1-flex-shrink {
	flex-shrink: 2;
}

.u1,
[class*="u1-cols-"] {
	display: grid;
	/* NOTE: This will cause contents to overflow a container if the 
	--u1-col-width is wider than the container.	*/
	grid-template-columns: repeat(auto-fit, minmax(var(--u1-col-width), 1fr));

	/* Why: Rows need explict repeat() + minmax() value to avoid unexpected row heights. If nesting
	two sets of grid items (ie, 2 columns with a grid in each) if one is taller than the other
	it stretches the individual rows out in an unexpected way. This can be overriden inline
	if needed.*/
	grid-template-rows: repeat(auto-fit, minmax(1rem, max-content));
	grid-gap: var(--u1-gap-row) var(--u1-gap-col);
	/* grid-column: span var(--u1-span); ??Does not function correctly yet??*/
}

@supports (width: min(10rem, 100%)) {
	/* Why: There is limited browser support for min() at this time. But since this feature solves a very
	very critical overflow bug caused by minmax() with a min value that is larger than the container
	it's worth this sort of hacky bit here until there is wider browser support. */
	.u1,
	[class*="u1-cols-"] {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--u1-col-width), 100%), 1fr));
	}
}

.u1-cols-4 {
	--u1-col-width: calc(100% / 4 - var(--u1-gap-col));
}

.u1-cols-3 {
	--u1-col-width: calc(100% / 3 - var(--u1-gap-col));
}

.u1-cols-2 {
	--u1-col-width: calc(100% / 2 - var(--u1-gap-col));
}

.u1-span-all {
	grid-column: 1/-1;
}

/* The following spans currently produces unpredictable results on some screen sizes and column widths...*/
.u1-span-half {
	grid-column: 1 / -2;
}

.u1-span-last-half {
	grid-column: -3/-1;
}

/* Common Column structures */
.u1-cols-2 {
	grid-template-columns: 1fr 1fr;
}

.u1-cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.u1-cols-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Common column patterns */
.u1-cols-2-1fr-max {
	grid-template-columns: 1fr max-content;
}

.u1-cols-2-max-1fr {
	grid-template-columns: max-content 1fr;
}

.u1-cols-4-max-1fr {
	grid-template-columns: max-content 1fr max-content 1fr;
}

.u1-mobile-cols {
	/* Placeholder class to allow grid to be forced on mobile */
}

.u1-columns {
  /* Use CSS vars to allow inline manipulation */
	column-count: var(--u1-column-count);
	--u1-column-count: 4; /* Default to largest column count likely ever needed for apps */
	column-gap: var(--u1-column-gap);
	--u1-column-gap: 2rem;
	column-width: var(--u1-column-width);
	--u1-column-width: 300px; /* 320 is the target...*/
}

.u1-columns > * { 
	display: block; /* Columns ONLY work on block elements */
}

.u1-columns-no-break > * {
	display: inline-block; /* Inline block elements do not break inside for column wrapping */
}

.u1-column-span {
	column-span: all;
}

@media (max-width: 960px) {
	/*WHY: Why 960px? Because I saw a Samsung tablet once that didn't show the mobile stuff when
	it really should have... ugh. 768px is for one device manufacturer, not all tablet/mobile screens.
	Also, a great mobile app divided up 3 columns into 960 / 3 = 320... the base minimum for mobile. Genius.
	*/
	.u1-cols-4-max-1fr {
		grid-template-columns: max-content 1fr;
	}
	.u1:not(.u1-mobile-cols),
	[class*="u1-cols-"]:not(.u1-mobile-cols) {
		grid-template-columns: 1fr;
	}
	.u1:not(.u1-mobile-cols) > * {
		grid-column: 1/-1;
	}
}