/**
 *
 * Partner Links extension for the phpBB Forum Software package.
 *
 * @copyright (c) 2026 stoker - https://phpbb3bbcodes.com/
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 * 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;
}
@media (max-width: 700px) {
	.links-random-card-wrap .links-card-banner {
		height: 90px;
	}
	.links-random-card-wrap .links-card {
		border-radius: 0px;
		border-left: none;
		border-right: none;
		margin-left: -5px;
		margin-right: -5px;
	}
}