/**
 * Layout primitives — mobile-first
 */
.fc-container {
	width: 100%;
	max-width: var(--fc-container);
	margin-inline: auto;
	padding-inline: var(--fc-space-4);
}

.fc-content {
	width: 100%;
	max-width: var(--fc-content-width);
}

.fc-stack {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-4);
}

.fc-stack--sm { gap: var(--fc-space-2); }
.fc-stack--lg { gap: var(--fc-space-6); }

.fc-split {
	display: flex;
	flex-direction: column;
	gap: var(--fc-space-5);
	min-width: 0;
}

.fc-panel {
	background: var(--fc-color-surface);
	border: 1px solid var(--fc-color-border);
	border-radius: var(--fc-radius-lg);
	box-shadow: var(--fc-shadow-sm);
	padding: var(--fc-space-5);
}

.fc-grid {
	display: grid;
	gap: var(--fc-space-4);
	grid-template-columns: 1fr;
}

.fc-grid--2,
.fc-grid--3,
.fc-grid--4 {
	grid-template-columns: 1fr;
}

.fc-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-3);
	align-items: center;
}

.fc-flex--between {
	justify-content: space-between;
}

.fc-flex--end {
	justify-content: flex-end;
}

.fc-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-space-2);
	align-items: center;
}

@media (min-width: 48rem) {
	.fc-split {
		flex-direction: row;
		align-items: flex-start;
	}

	.fc-split > .fc-sidebar {
		flex: 0 0 var(--fc-sidebar-width);
		width: var(--fc-sidebar-width);
	}

	.fc-split > .fc-main {
		flex: 1 1 auto;
		min-width: 0;
	}

	.fc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.fc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fc-container { padding-inline: var(--fc-space-6); }
}