/**
 * mod_gridlayout — front-end grid.
 *
 * A plain 12-column CSS grid. It deliberately does not rely on Bootstrap or on
 * any template framework, so the same layout renders identically under
 * ja_blockk (T4) and under tpl_vietnamchess2.
 */

.mod-gridlayout {
	--gl-gutter: 24px;
	--gl-rowgap: 32px;
}

.mod-gridlayout .gl-row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gl-gutter);
	row-gap: var(--gl-gutter);
}

.mod-gridlayout .gl-row + .gl-row {
	margin-top: var(--gl-rowgap);
}

.mod-gridlayout .gl-col {
	/* Nested fallbacks: a breakpoint inherits the next narrower one when unset. */
	grid-column: span var(--gl-xs, 12);
	min-width: 0;
}

@media (min-width: 576px) {
	.mod-gridlayout .gl-col {
		grid-column: span var(--gl-sm, var(--gl-xs, 12));
	}
}

@media (min-width: 768px) {
	.mod-gridlayout .gl-col {
		grid-column: span var(--gl-md, var(--gl-sm, var(--gl-xs, 12)));
	}
}

@media (min-width: 992px) {
	.mod-gridlayout .gl-col {
		grid-column: span var(--gl-lg, var(--gl-md, var(--gl-sm, var(--gl-xs, 12))));
	}
}

.mod-gridlayout .gl-item + .gl-item,
.mod-gridlayout .gl-item + .gl-divider,
.mod-gridlayout .gl-divider + .gl-item {
	margin-top: var(--gl-gutter);
}

.mod-gridlayout .gl-divider {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: .15;
	margin: var(--gl-gutter) 0;
}

/* ------------------------------------------------- child module headings

   Children are rendered with the "none" chrome (no heading), so the grid
   prints their title itself when "Show title" is on. */

.mod-gridlayout .gl-item-heading {
    margin: 0 0 14px;
    line-height: 1.25;
}

.mod-gridlayout .gl-head-underline {
    padding-bottom: 8px;
    border-bottom: 2px solid currentColor;
}

.mod-gridlayout .gl-head-bar {
    padding-left: 12px;
    border-left: 4px solid var(--gl-accent, #b02a2a);
}

.mod-gridlayout .gl-head-boxed {
    padding: 8px 12px;
    background: rgba(127, 127, 127, .14);
    border-radius: 4px;
}