/**
 * Layout grid engine shared by the theme, Gutenberg blocks and Elementor
 * widgets so a layout renders identically in every context.
 */

.snmp-grid {
	display: grid;
	gap: var(--snmp-gap, 1.5rem);
	grid-template-columns: repeat(var(--snmp-cols, 3), minmax(0, 1fr));
}

.snmp-grid--1 { --snmp-cols: 1; }
.snmp-grid--2 { --snmp-cols: 2; }
.snmp-grid--3 { --snmp-cols: 3; }
.snmp-grid--4 { --snmp-cols: 4; }
.snmp-grid--5 { --snmp-cols: 5; }
.snmp-grid--6 { --snmp-cols: 6; }

.snmp-grid--masonry {
	display: block;
	column-count: var(--snmp-cols, 3);
	column-gap: var(--snmp-gap, 1.5rem);
}

.snmp-grid--masonry > * {
	break-inside: avoid;
	margin-block-end: var(--snmp-gap, 1.5rem);
}

.snmp-grid--list,
.snmp-grid--timeline {
	--snmp-cols: 1;
}

.snmp-grid--mixed > *:first-child {
	grid-column: span 2;
}

.snmp-grid--featured > *:first-child {
	grid-column: 1 / -1;
}

.snmp-grid--alternating > *:nth-child(even) {
	direction: var(--snmp-alt-dir, initial);
}

.snmp-layout {
	display: grid;
	gap: var(--snmp-gap, 2rem);
	align-items: start;
}

.snmp-layout--none { grid-template-columns: minmax(0, 1fr); }
.snmp-layout--full { grid-template-columns: minmax(0, 1fr); }
.snmp-layout--right { grid-template-columns: minmax(0, 1fr) var(--snmp-sidebar-w, 320px); }
.snmp-layout--left { grid-template-columns: var(--snmp-sidebar-w, 320px) minmax(0, 1fr); }
.snmp-layout--dual { grid-template-columns: var(--snmp-sidebar-w, 280px) minmax(0, 1fr) var(--snmp-sidebar-w, 280px); }

.snmp-layout--left > .snmp-layout__main { order: 2; }
.snmp-layout--left > .snmp-sidebar { order: 1; }

.snmp-timeline > * {
	border-inline-start: 2px solid var(--snmp-color-border, currentColor);
	padding-inline-start: 1.5rem;
}

.snmp-overlay {
	position: relative;
	display: grid;
	align-content: end;
	min-height: var(--snmp-overlay-h, 320px);
	overflow: hidden;
}

.snmp-overlay__media,
.snmp-overlay__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.snmp-overlay__body {
	position: relative;
	padding: 1.25rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
	color: #fff;
}

@media (max-width: 1024px) {
	.snmp-layout--right,
	.snmp-layout--left,
	.snmp-layout--dual {
		grid-template-columns: minmax(0, 1fr);
	}

	.snmp-layout--left > .snmp-layout__main,
	.snmp-layout--left > .snmp-sidebar {
		order: initial;
	}

	.snmp-grid { --snmp-cols: 2; }
	.snmp-grid--masonry { column-count: 2; }
}

@media (max-width: 640px) {
	.snmp-grid,
	.snmp-grid--mixed > *:first-child { --snmp-cols: 1; grid-column: auto; }
	.snmp-grid--masonry { column-count: 1; }
}

@media (max-width: 480px) {
	.snmp-grid { --snmp-gap: 1rem; }
}