/**
 * 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;
}