/*
* L4NC3 Grid - CSS Grid replacement for Skeleton V1.1 (skeleton.css)
* Keeps Skeleton's class names (.container, .sixteen.columns, .one-third.column,
* .offset-by-one, .clear ...) so existing markup works unchanged.
*
* How it works
*   - .container is a 48-track grid (960px max). 48 = 16 x 3, so both the
*     16-column classes (3 tracks each) and the thirds (16 tracks) line up.
*   - Each column keeps Skeleton's 10px side margins, so widths match the old
*     site exactly at 960px (sixteen = 940, eight = 460, one-third = 300 ...).
*   - Wrappers between .container and the columns (section, article, footer,
*     rule/clear divs) become subgrids, so columns nested inside them still
*     sit on the same tracks. No floats or clearing hacks needed.
*   - Rows stretch to their tallest item, which replaces the old jQuery
*     equalHeight() script.
*/

:root {
	--grid-max: 960px;
	--gutter: 10px;            /* half-gutter on each side of a column */
}

/* #Base Grid
================================================== */

.container {
	display: grid;
	grid-template-columns: repeat(48, minmax(0, 1fr));
	align-items: stretch;
	max-width: var(--grid-max);
	margin: 0 auto;
	padding: 0;
}

/* Any non-column wrapper inside a container spans the full row and passes
   the tracks down (two levels deep covers section > article > .columns).
   Specificity is one class (0,1,0): enough to beat base.css's HTML5
   "section, article { display:block }" reset, while l4_styles.css (loaded
   later) can still hide wrappers with .mobile_only / .desktop_only. */
:where(.container) > :not(.column, .columns),
:where(.container > :not(.column, .columns)) > :not(.column, .columns),
:where(.container article) > :not(.column, .columns) {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: stretch;
}

/* <article> wrappers group content semantically but shouldn't break the row:
   their columns sit side by side with their neighbours, as with floats. */
.container article:not(.column, .columns) { display: contents; }

.column,
.columns {
	margin-left: var(--gutter);
	margin-right: var(--gutter);
	min-width: 0;
}

.row { margin-bottom: 20px; }

/* Nested-column helpers kept for compatibility */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }

/* 16-column widths (3 tracks per column) */
.one.column,      .one.columns      { grid-column: span 3; }
.two.columns                        { grid-column: span 6; }
.three.columns                      { grid-column: span 9; }
.four.columns                       { grid-column: span 12; }
.five.columns                       { grid-column: span 15; }
.six.columns                        { grid-column: span 18; }
.seven.columns                      { grid-column: span 21; }
.eight.columns                      { grid-column: span 24; }
.nine.columns                       { grid-column: span 27; }
.ten.columns                        { grid-column: span 30; }
.eleven.columns                     { grid-column: span 33; }
.twelve.columns                     { grid-column: span 36; }
.thirteen.columns                   { grid-column: span 39; }
.fourteen.columns                   { grid-column: span 42; }
.fifteen.columns                    { grid-column: span 45; }
.sixteen.columns                    { grid-column: span 48; }

/* Thirds */
.one-third.column                   { grid-column: span 16; }
.two-thirds.column                  { grid-column: span 32; }

/* Offsets
   On this site an offset column is always the last item in its row, so the
   offset simply pins it to the right edge; the gap before it is the offset. */
.columns[class*="offset-by-"],
.column[class*="offset-by-"]        { grid-column-end: -1; }

/* Images never overflow their column */
.columns img, .column img { max-width: 100%; height: auto; }

/* Equal-height columns (replaces equalHeight() jQuery) */
.columns > .equalcolumn,
.column > .equalcolumn { height: 100%; box-sizing: border-box; }


/* #Clearing
================================================== */

/* Inside column content .clear still clears floats (e.g. floated thumbnails).
   As a grid item it just becomes an empty full-width row. */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	height: 0;
	grid-column: 1 / -1;
}
.clearfix::after,
.row::after { content: ""; display: block; clear: both; }


/* #Mobile (all phones) - one column, fluid
================================================== */

@media only screen and (max-width: 767px) {
	.container { padding-left: 6px; padding-right: 6px; }

	.container :is(.column, .columns) {
		grid-column: 1 / -1;
	}
}