/*
 * Wide News: sidebar.css
 * Sidebar του θέματος (single posts, archives): δεξιά στήλη 348px από 992px, κρυφή από κάτω.
 * Μόνο tokens του base.css, καμία τιμή χρώματος εδώ. Mobile-first: οι media queries είναι min-width.
 * Η στήλη περιεχομένου μένει όπως ήταν σε tablet και mobile.
 */

:root {
	--wn-sidebar-width: 348px;
}

.wn-sidebar {
	display: none;
}

.wn-widget + .wn-widget {
	margin-top: var(--wn-space-6);
}

.wn-widget__list,
.wn-widget__links {
	display: grid;
	gap: var(--wn-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-widget__links {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wn-space-2);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.wn-widget__links .children {
	display: grid;
	gap: var(--wn-space-1);
	margin: var(--wn-space-1) 0 0;
	padding-left: var(--wn-space-3);
	list-style: none;
}

.wn-widget__links a {
	color: var(--wn-color-ui);
	text-decoration: none;
}

.wn-sidebar a:not(.wn-pill):hover,
.wn-sidebar a:not(.wn-pill):focus-visible {
	color: var(--wn-color-heading-alt);
	text-decoration: underline;
}

.wn-sidebar .wn-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wn-space-2);
	margin: 0;
}

.wn-sidebar .wn-search-form__field {
	flex: 1 1 140px;
	min-width: 0;
	padding: var(--wn-space-2) var(--wn-space-3);
	border: 2px solid var(--wn-color-border);
	border-radius: var(--wn-radius);
	background: var(--wn-color-surface);
	color: var(--wn-color-text);
	font-family: var(--wn-font-body);
	font-size: 15px;
}

@media (min-width: 992px) {
	.wn-layout--sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--wn-sidebar-width);
		column-gap: var(--wn-space-6);
		align-items: start;
		width: min(100%, 90vw);
		max-width: var(--wn-container);
		margin: 0 auto;
	}

	/* Το main κρατά το δικό του κάθετο padding, χάνει μόνο το κεντράρισμα και το max-width. */
	.wn-layout--sidebar > .wn-main {
		width: auto;
		max-width: none;
		margin: 0;
	}

	.wn-sidebar {
		display: block;
		min-width: 0;
		padding: var(--wn-space-7) 0;
	}

	/* Δίπλα στη sidebar η στήλη του main είναι στενή (περίπου 495px στα 992px): οι κάρτες λίστας μένουν
	 * στοιβαγμένες (εικόνα πάνω, κείμενο κάτω) και πάνε δίπλα-δίπλα μόνο από 1250px. */
	.wn-layout--sidebar .wn-card--list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1250px) {
	.wn-layout--sidebar .wn-card--list {
		grid-template-columns: var(--wn-list-media) minmax(0, 1fr);
	}
}