/* Homepage "What's new" strip (assets/php/whats_new.php). Same palette as updates.css. */

.wn-area {
	--c-client: #2bb3d6;
	--c-server: #e5745c;
	--c-blueprint: #7c5cff;
	--c-blender: #f29a2e;
}

.wn-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 10px;
}

.wn-card {
	--cat: var(--c-server);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 18px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid #ececf0;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	color: #3f4654;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
}
.wn-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--cat);
}
.wn-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(16, 24, 40, .12);
	border-color: color-mix(in srgb, var(--cat) 35%, #ececf0);
	color: #3f4654;
}
.wn-card[data-cat="client"] { --cat: var(--c-client); }
.wn-card[data-cat="server"] { --cat: var(--c-server); }
.wn-card[data-cat="blueprint"] { --cat: var(--c-blueprint); }
.wn-card[data-cat="blender"] { --cat: var(--c-blender); }

.wn-meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #6b7280; }
.wn-cat {
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
	color: var(--cat);
	background: color-mix(in srgb, var(--cat) 12%, #fff);
}

.wn-title {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 600;
	color: #1d2433;
}
.wn-title .upd-emoji { flex: 0 0 auto; font-size: 1.15rem; line-height: 1.15; }
.wn-title img.upd-emoji { width: 20px; height: 20px; margin-top: 1px; }

.wn-points {
	margin: 0;
	padding-left: 1.1em;
	font-size: 14px;
	line-height: 1.5;
	flex: 1;
}
.wn-points li { margin: 2px 0; }
.wn-points li::marker { color: var(--cat); }
.wn-points code {
	font-family: ui-monospace, Consolas, monospace;
	font-size: .85em;
	padding: 0 5px;
	border-radius: 5px;
	background: #f3f2f7;
	color: #5b3fd6;
}
.wn-points strong { color: #1d2433; font-weight: 600; }
.wn-points img.upd-emoji { width: 16px; height: 16px; vertical-align: -3px; }
.wn-points .upd-user { font-weight: 600; color: #1d2433; }

.wn-people {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px dashed #ececf0;
	font-size: 13px;
	color: #6b7280;
}
.wn-faces { display: inline-flex; }
.wn-faces img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-left: -6px;
	object-fit: cover;
	background: #eee;
}
.wn-faces img:first-child { margin-left: 0; }

.wn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	margin-top: 30px;
	flex-wrap: wrap;
}
.wn-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: 999px;
	background: #e5745c;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(229, 116, 92, .3);
}
.wn-btn:hover { background: #d8644c; color: #fff; }
.wn-btn .bx { font-size: 20px; transition: transform .2s; }
.wn-btn:hover .bx { transform: translateX(3px); }
.wn-link { color: #1d2433; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wn-link:hover { color: #e5745c; }

@media (max-width: 1199px) {
	.wn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
	.wn-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		margin-inline: -12px;
		padding-inline: 12px;
		scrollbar-width: none;
	}
	.wn-grid::-webkit-scrollbar { display: none; }
	.wn-card { scroll-snap-align: start; }
}