/* Random link card — single full-width banner, standalone */
.links-random-card-wrap {
	--links-banner-height: 120px;
	--links-card-bg: #ffffff;
	--links-card-border: #e2e4e8;
	--links-card-radius: 10px;
	--links-text: #2a2e36;
	--links-banner-bg: #f3f4f6;
	--links-placeholder-bg: #e8edf3;
	--links-placeholder-text: #3b6ea5;
	--links-accent: #3b6ea5;
	margin: 0 0 6px;
}

html.phpbb-dark-mode .links-random-card-wrap {
	--links-card-bg: #0c1420;
	--links-card-border: #38465a;
	--links-text: #e6edf3;
	--links-banner-bg: #0f1724;
	--links-placeholder-bg: #132033;
	--links-placeholder-text: #7cc1ff;
	--links-accent: #7cc1ff;
}

.links-random-card-wrap .links-card {
	position: relative;
	background: var(--links-card-bg);
	border: 1px solid var(--links-card-border);
	border-radius: var(--links-card-radius);
	overflow: hidden;
}

.links-random-card-wrap .links-card-banner {
	position: relative;
	height: var(--links-banner-height);
	background: var(--links-banner-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.links-random-card-wrap .links-card-banner img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

.links-random-card-wrap .links-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--links-placeholder-bg);
	color: var(--links-placeholder-text);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

/* Fills the whole banner — this is the actual click target */
.links-random-card-wrap .links-card-link {
	position: absolute;
	inset: 0;
	display: block;
}

.links-random-card-wrap .links-card-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	font-size: 1.6em;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	text-align: right;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.links-random-card-wrap .links-card-link:hover .links-card-name,
.links-random-card-wrap .links-card-link:focus .links-card-name {
	color: #fff;
}