/**
 * Boksiowo Portal Engine PRO — Trending module styles.
 * Only the rank badge and view count get their own rules — the grid and
 * card layout itself is inherited from assets/css/homepage.css to avoid
 * duplicating styles.
 */

.bpe-trending__card {
	position: relative;
}

.bpe-trending__rank {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #172b4d;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
}

.bpe-trending__views {
	font-size: 0.85rem;
	color: #46515f;
}

/* ETAP 3: the 6 cards render in rank order as plain siblings of
   .bpe-trending__grid (checked live DOM — no wrapper per item), so
   :nth-child(-n+3) reliably targets ranks 1-3. Same accent orange the
   rest of the homepage already uses for emphasis (no new color), just a
   touch larger — a deliberately small difference, not a redesign of the
   badge. */
.bpe-trending__grid > .bpe-trending__card:nth-child(-n+3) .bpe-trending__rank {
	width: 32px;
	height: 32px;
	font-size: 0.95rem;
	background: var(--bpe-hb-color-accent, #ff6b1a);
}

.bpe-homepage-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ETAP 2 (kompozycja): rank #1 becomes a full-width horizontal spotlight
   card (image left, title/meta right) instead of just another cell in
   the 3-column grid — ranks 2-6 are untouched, still the regular grid
   (templates/trending/grid.php markup and the ranking data/order are
   unchanged; this is presentation only). Desktop/tablet only: at mobile
   width .bpe-homepage-grid already collapses to 1 column, where a
   horizontal card would cramp the image, so the spotlight layout is
   skipped there and rank #1 just renders like every other card. */
@media (min-width: 601px) {
	.bpe-trending__grid > .bpe-trending__card:first-child {
		grid-column: 1 / -1;
		display: flex;
		flex-direction: row;
		gap: 24px;
	}

	.bpe-trending__grid > .bpe-trending__card:first-child .bpe-homepage-card__thumb {
		width: 45%;
		height: 280px;
		flex-shrink: 0;
	}

	.bpe-trending__grid > .bpe-trending__card:first-child .bpe-homepage-card__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 8px;
	}

	.bpe-trending__grid > .bpe-trending__card:first-child .bpe-homepage-card__title {
		font-size: 1.4rem;
	}

	.bpe-trending__grid > .bpe-trending__card:first-child .bpe-trending__rank {
		width: 40px;
		height: 40px;
		font-size: 1.1rem;
	}
}