/**
 * News Element — Trending block (news-element's trending-2 / 4 / 6).
 * Structure only; spacing, number box, colours and cover come from the
 * block's controls. Runs inside the Grid view (.ne-grid-items).
 */

/* Default columns until Layout → Column width is set: one column for the
   lists, 3 / 2 / 1 for cards. :where() keeps them at zero specificity: this
   file loads after the per-post control CSS, so without it the Column width
   control lost to these defaults (three squeezed card columns in a sidebar). */
:where(.ne-grid-items.trend_list > .ne-df-20,
.ne-grid-items.trend_featured > .ne-df-20) {
	flex: 0 0 100%;
	max-width: 100%;
}

:where(.ne-grid-items.trend_cards > .ne-df-20) {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

@media (max-width: 1024px) {
	:where(.ne-grid-items.trend_cards > .ne-df-20) {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (max-width: 767px) {
	:where(.ne-grid-items.trend_cards > .ne-df-20) {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.ne-trend-item,
.ne-trend-row,
.ne-trend-card {
	display: block;
}

/* No divider / gap after the last row. */
.ne-df-20:last-child > .ne-trend-item,
.ne-df-20:last-child > .ne-trend-row {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ne-trend-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* List: big number behind the text, vertically centred on the right. Size and weight sit in :where() so Number typography can change them. */
:where(.ne-trend-item) .ne-trend-num {
	font-size: 60px;
	font-weight: 800;
}

.ne-trend-item .ne-trend-num {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.ne-trend-item .excerpt-wrap {
	z-index: 1;
}

/* Cards: number + meta centred over the cover. */
.ne-trend-card .ft-thumbwrap {
	display: block;
}

.ne-trend-card .ft-thumbwrap.has-overlay::after {
	transition: background 0.4s cubic-bezier(0.25, 1, 0.2, 1);
}

.ne-trend-card .excerpt-wrap {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	transition: color 0.3s ease;
}

/* :where(): on subsites this stylesheet loads after the post CSS; Number → Border radius / width / Space below must win. */
:where(.ne-trend-card) .ne-trend-num {
	margin-bottom: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

/* Featured: number box on the left of each row's text. */
.ne-trend-row .ft-thumbwrap {
	display: block;
}

.ne-trend-row .ne-trend-num {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
	.ne-trend-card .ft-thumbwrap.has-overlay::after,
	.ne-trend-card .excerpt-wrap {
		transition: none;
	}
}

/* Featured post → Row thumbnails (opt-in): a small image right of each
   numbered row; the row turns into a flex line. */
.ne-trend-rthumb {
	display: none;
}

.ne-trend-rthumb-yes .ne-trend-row:not(.is-big),
.ne-trend-rthumb-yes.ne-trend-flat-yes .ne-trend-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ne-trend-rthumb-yes .ne-trend-row:not(.is-big) > .excerpt-wrap,
.ne-trend-rthumb-yes.ne-trend-flat-yes .ne-trend-row > .excerpt-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.ne-trend-rthumb-yes .ne-trend-row:not(.is-big) > .ne-trend-rthumb,
.ne-trend-rthumb-yes.ne-trend-flat-yes .ne-trend-row > .ne-trend-rthumb {
	display: block;
	flex: 0 0 auto;
}

/* Size: Row thumbnail size wins over this default. */
:where(.ne-trend-rthumb) {
	width: 64px;
	height: 64px;
}

.ne-trend-rthumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Featured post → First post as a row (opt-in): no big image, the first
   post is laid out like the other rows. */
.ne-trend-flat-yes .ne-trend-row.is-big > .ft-thumbwrap {
	display: none;
}

.ne-trend-flat-yes .ne-trend-row.is-big > .excerpt-wrap {
	margin-top: 0;
}