/* MK Theme — layout.css
   v0.3.9: Sidebar layout wrapper system.
   Controls main + sidebar grid, responsive collapse, widget styling. */

/* ── Layout wrapper ──────────────────────────────────── */

.mk-layout {
	width: min(100%, var(--mk-wide-width));
	margin-inline: auto;
	padding-inline: var(--mk-space-md);
	box-sizing: border-box;
}

/* No sidebar: single column. */
.mk-layout--no-sidebar {
	display: block;
}

/* Movie full-width: remove container constraint so movie template spans viewport. */
.mk-layout--movie-full-width {
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
}

/* Sidebar right: content left, sidebar right. */
.mk-layout--sidebar-right {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mk-sidebar-width, 320px);
	grid-template-areas: "main sidebar";
	gap: var(--mk-sidebar-gap, 32px);
	align-items: start;
}

/* Sidebar left: sidebar left, content right. */
.mk-layout--sidebar-left {
	display: grid;
	grid-template-columns: var(--mk-sidebar-width, 320px) minmax(0, 1fr);
	grid-template-areas: "sidebar main";
	gap: var(--mk-sidebar-gap, 32px);
	align-items: start;
}

/* ── Main content area ───────────────────────────────── */

.mk-layout__main {
	grid-area: main;
	min-width: 0;
}

/* ── Sidebar ─────────────────────────────────────────── */

.mk-layout__sidebar {
	grid-area: sidebar;
	min-width: 0;
}

.mk-sidebar {
	display: grid;
	gap: var(--mk-space-md);
}

/* ── Widget styling ──────────────────────────────────── */

.mk-widget {
	background: var(--mk-color-surface);
	border: 1px solid var(--mk-color-border);
	border-radius: var(--mk-radius);
	padding: var(--mk-space-md);
}

.mk-widget__title {
	margin-top: 0;
	margin-bottom: var(--mk-space-sm);
	font-size: 1rem;
	font-weight: 700;
}

/* Basic widget content styling. */
.mk-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mk-widget li {
	padding: var(--mk-space-xs) 0;
	border-bottom: 1px solid var(--mk-color-border-light, var(--mk-color-border));
}

.mk-widget li:last-child {
	border-bottom: none;
}

.mk-widget a {
	color: var(--mk-color-text);
	text-decoration: none;
}

.mk-widget a:hover {
	color: var(--mk-color-accent);
}

/* ── Responsive collapse ─────────────────────────────── */

@media (max-width: 900px) {
	.mk-layout--sidebar-left,
	.mk-layout--sidebar-right {
		grid-template-columns: 1fr;
		grid-template-areas:
			"main"
			"sidebar";
	}
}