/**
 * News Element — Social block (news-element's "Social List").
 * Structure and quiet defaults only; colours, sizes and type come from the
 * block's controls. Every rule is wrapped whole in :where() (zero
 * specificity), so any control rule wins. The inner list is .ne-soc, not
 * .ne-social, which is the block wrapper's own class.
 */

:where(.ne-soc) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

:where(.ne-soc--box, .ne-soc--border) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:where(.ne-soc--icons, .ne-soc--pills) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Item: icon box, then the text block. */
:where(.ne-soc .ne-soc-item) {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-width: 0;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
	background: #f4f4f4;
	transition: background 0.2s ease, color 0.2s ease;
}

:where(.ne-soc .ne-soc-ico) {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 0;
	transition: background 0.2s ease, color 0.2s ease;
}

:where(.ne-soc .ne-soc-ico .ne-icon) {
	width: 18px;
	height: 18px;
}

:where(.ne-soc .ne-soc-text) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

:where(.ne-soc .ne-soc-sub) {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

:where(.ne-soc .ne-soc-count) {
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.85;
}

/* List: label beside the icon, count pushed to the right. */
:where(.ne-soc--list .ne-soc-text) {
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

/* Border: icon above the label and count, centred. */
:where(.ne-soc--border .ne-soc-item) {
	flex-direction: column;
	justify-content: center;
	padding: 18px 12px;
	text-align: center;
	background: transparent;
	border: 1px solid #e5e5e5;
}

:where(.ne-soc--border .ne-soc-text) {
	align-items: center;
}

/* Icons: round icon-only buttons, sized by the icon box (Icon → Box size). */
:where(.ne-soc--icons .ne-soc-item) {
	padding: 0;
	border-radius: 50%;
}

:where(.ne-soc--icons .ne-soc-ico) {
	width: 40px;
	height: 40px;
}

/* Pills: icon and text on one line. */
:where(.ne-soc--pills .ne-soc-item) {
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
}

:where(.ne-soc--pills .ne-soc-text) {
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}