/**
 *
 * 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)
 *
 */

.links-directory {
	--links-banner-height: 140px;
	--links-card-bg: #ffffff;
	--links-card-border: #e2e4e8;
	--links-card-radius: 10px;
	--links-text: #2a2e36;
	--links-text-muted: #6b7280;
	--links-accent: #3b6ea5;
	--links-banner-bg: #f3f4f6;
	--links-placeholder-bg: #e8edf3;
	--links-placeholder-text: #3b6ea5;
	margin: 10px 0;
}

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

.links-dir-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--links-card-border);
}

.links-dir-title {
	margin: 0;
	font-size: 1.8em;
	font-weight: 600;
	color: var(--links-text);
}

.links-dir-count {
	font-size: 0.9em;
	color: var(--links-text-muted);
}

.links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.links-cols-1 .links-grid {
	grid-template-columns: repeat(1, 1fr);
}

.links-cols-2 .links-grid {
	grid-template-columns: repeat(2, 1fr);
}

.links-cols-3 .links-grid {
	grid-template-columns: repeat(3, 1fr);
}

.links-cols-4 .links-grid {
	grid-template-columns: repeat(4, 1fr);
}

.links-card {
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	background: var(--links-card-bg);
	border: 1px solid var(--links-card-border);
	border-radius: var(--links-card-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.links-card:hover,
.links-card:focus-visible {
	border-color: var(--links-accent);
}

.links-cols-2 { --links-banner-height: 110px; }
.links-cols-3 { --links-banner-height: 90px; }
.links-cols-4 { --links-banner-height: 60px; }

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

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

.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;
}

/* Two columns: name and description stack on the left, the meta block sits
   alongside them on the right so it costs no extra card height */
.links-card-body {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	column-gap: 10px;
	row-gap: 6px;
	padding: 6px 10px;
	flex: 1;
}

.links-card-name {
	grid-column: 1;
	grid-row: 1;
	font-size: 1.5em;
	font-weight: 600;
	color: var(--links-text);
	text-decoration: none;
}

.links-card-name:hover,
.links-card-name:focus {
	color: var(--links-accent);
	text-decoration: none;
}

/* Stretched link: the card name covers the whole card, so anywhere on the
   card is clickable while the anchor stays a real anchor (middle-click,
   keyboard focus and "copy link address" keep working). Not an <a> wrapper,
   because BBCode descriptions may already contain anchors. */
.links-card-name::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Real links inside the card must sit above the overlay */
.links-card-desc a {
	position: relative;
	z-index: 1;
}

.links-card-desc {
	grid-column: 1;
	grid-row: 2;
	font-size: 1.1em;
	line-height: 1.2;
	color: var(--links-text-muted);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.links-card-desc img {
	max-width: 100%;
	height: auto;
}

.links-card-meta {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: 1em;
	text-align: right;
}

.links-card-clicks {
	color: var(--links-text-muted);
	white-space: nowrap;
}

.links-card-clicks i.icon {
	margin-right: 2px;
}

.links-card-go {
	color: var(--links-accent);
	text-decoration: none;
	white-space: nowrap;
}

/* The go label is a span, not a link — the card's stretched anchor handles
   the click, so its hover state is driven by the card */
.links-card:hover .links-card-go,
.links-card:focus-within .links-card-go {
	text-decoration: none;
}

.links-card-go i.icon {
	margin-left: 2px;
}

/* At 3 and 4 per row the cards are too narrow to give up a column to the
   meta block, so those layouts keep the original stacked arrangement */
.links-cols-3 .links-card-body,
.links-cols-4 .links-card-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.links-cols-3 .links-card-desc,
.links-cols-4 .links-card-desc {
	flex: 1;
}

.links-cols-3 .links-card-meta,
.links-cols-4 .links-card-meta {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	text-align: left;
}

.links-empty {
	grid-column: 1 / -1;
	padding: 24px;
	text-align: center;
	color: var(--links-text-muted);
	border: 1px dashed var(--links-card-border);
	border-radius: var(--links-card-radius);
}

.links-backlink {
	margin-top: 50px;
	padding: 10px 12px;
	background: var(--links-card-bg);
	border: 1px solid var(--links-card-border);
	border-radius: var(--links-card-radius);
}

.links-backlink-title {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: var(--links-text);
}

.links-backlink-explain {
	margin: 2px 0 8px;
	font-size: 1em;
	color: var(--links-text-muted);
}

.links-backlink-field {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.links-backlink-field:last-child {
	margin-bottom: 0;
}

.links-backlink-field label {
	flex: 0 0 100px;
	line-height: 20px;
	font-size: 1em;
	font-weight: 600;
	color: var(--links-text);
}

.links-backlink-control {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	flex: 1;
	min-width: 220px;
}

.links-backlink-control input,
.links-backlink-control textarea,
.links-copy,
.links-backlink-view {
	box-sizing: border-box;
	height: 20px;
	margin: 0;
	font-size: 1em;
	border: 1px solid var(--links-card-border);
	border-radius: 4px;
	background: var(--links-banner-bg);
}

.links-backlink-control input,
.links-backlink-control textarea {
	flex: 1;
	min-width: 0;
	padding: 0 6px;
	font-family: inherit;
	line-height: 20px;
	color: var(--links-text);
}

.links-backlink-control textarea {
	height: auto;
	padding: 4px 6px;
	line-height: 1.4;
	resize: vertical;
}

.links-backlink-control input:focus,
.links-backlink-control textarea:focus {
	border-color: var(--links-accent);
	outline: none;
}

.links-copy,
.links-backlink-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	padding: 0;
	line-height: 1;
	color: var(--links-accent);
	cursor: pointer;
	text-decoration: none;
}

.links-copy i.icon,
.links-backlink-view i.icon {
	line-height: 1;
	width: auto;
}

/* phpBB underlines anchors on hover and keeps focus styling after a click */
.links-copy:focus,
.links-copy:active,
.links-backlink-view:focus,
.links-backlink-view:active {
	text-decoration: none;
	outline: none;
}

.links-copy:hover,
.links-backlink-view:hover {
	border-color: var(--links-accent);
	text-decoration: none;
}

.links-copy:focus-visible,
.links-backlink-view:focus-visible {
	outline: 2px solid var(--links-accent);
	outline-offset: 1px;
}

.links-copy.links-copied {
	width: auto;
	padding: 0 8px;
	gap: 4px;
	color: #2e7d32;
	border-color: #2e7d32;
}

.links-copy.links-copied:hover {
	border-color: #2e7d32;
}

@media (max-width: 700px) {
	.links-grid,
	.links-cols-1 .links-grid,
	.links-cols-2 .links-grid,
	.links-cols-3 .links-grid,
	.links-cols-4 .links-grid {
		grid-template-columns: 1fr;
	}

	/* One card per row here, so 3 and 4 are wide enough for the meta column */
	.links-cols-3 .links-card-body,
	.links-cols-4 .links-card-body {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		column-gap: 10px;
		row-gap: 6px;
	}

	.links-cols-3 .links-card-meta,
	.links-cols-4 .links-card-meta {
		flex-direction: column;
		align-items: flex-end;
		gap: 4px;
		text-align: right;
	}
	.links-card-banner {
		height: 90px;
	}
	.links-card-name {
		font-size: 1.3em;
	}				 
	.links-backlink-field label {
		flex: 0 0 100%;
		line-height: 1.4;
	}
	.links-directory .links-grid .links-card {
		border-radius: 0px;
		border-left: none;
		border-right: none;
		margin-left: -5px;
		margin-right: -5px;
	}
}