/*
 * One grid serves both layouts: beside the icon on desktop, wrapping under the icon and title
 * on mobile, where the notice text spans the full width.
 */
.nordemo-notice {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: start;
	gap: 8px 16px;
	padding: 24px 16px;
	background: var(--nordemo-notice-surface);
	border-radius: var(--nordemo-radius);
}

.nordemo-notice__icon {
	grid-row: 1 / span 2;
	flex: none;
	display: block;
	width: 32px;
	height: 32px;
}

.nordemo-notice__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 25px;
	color: var(--nordemo-text);
}

.nordemo-notice__text {
	font-size: 17px;
	line-height: 25px;
	color: var(--nordemo-text-muted);
}

.nordemo-notice__text p {
	margin: 0;
}

/*
 * Narrow layout: the icon pairs with the title on one row and the body text runs the full width
 * beneath both, rather than being squeezed into the column beside the icon.
 */
@media (max-width: 991px) {
	.nordemo-notice {
		align-items: center;
		column-gap: 8px;
	}

	.nordemo-notice__icon {
		grid-row: 1;
	}

	.nordemo-notice__text {
		grid-column: 1 / -1;
	}
}