/* RPG Connection — Anschlussmoeglichkeiten
   Alles zum Plugin steht hier. */

.rpg-connection { color: var(--md-ink-dim); }

.rpg-connection__head { margin-bottom: 0; padding-bottom: 0; border: 0; }
.rpg-connection__intro { margin-top: .7rem; max-width: 62ch; }

/* ============================================================
   Seitenaufteilung
   ============================================================ */
.rpg-connection__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 13rem;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}
.rpg-connection__main { min-width: 0; }

/* ============================================================
   Filter
   ============================================================ */
.rpg-connection__toolbar {
	display: grid;
	gap: 1.6rem;
	align-content: start;
	padding-left: clamp(1.25rem, 3vw, 2rem);
	border-left: 1px solid var(--md-rule-hair);
}
.rpg-connection__filterrow { display: grid; gap: .45rem; }
.rpg-connection__filterlabel {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-kicker);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpg-connection__filterlist { display: grid; gap: .45rem; }
.rpg-connection__filter {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
	text-decoration: none;
	transition: color var(--md-dur) var(--md-ease);
}
.rpg-connection__filter::before {
	content: "";
	flex: 0 0 var(--md-dash);
	height: 1px;
	background: var(--md-rule-soft);
	transition: background-color var(--md-dur) var(--md-ease);
}
.rpg-connection__filter:hover { color: var(--md-ink); text-decoration: none; }
.rpg-connection__filter--active { color: var(--md-ink-bright); }
.rpg-connection__filter--active::before { background: currentColor; }
.rpg-connection__filter-count {
	margin-left: .35rem;
	font-size: var(--md-t-kicker);
	font-variant-numeric: tabular-nums;
	color: var(--md-rule);
}

.rpg-connection__resultcount {
	margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

/* ============================================================
   Kartenraster
   ============================================================ */
.rpg-connection__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}
.rpg-connection__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	padding: clamp(1rem, 2.5vw, 1.35rem);
	background: var(--md-wash);
	border: 1px solid var(--md-rule-hair);
}

.rpg-connection__cardhead {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .3rem 1rem;
}
.rpg-connection__avatarlink { grid-row: 1 / span 2; line-height: 0; }
.rpg-connection__avatar {
	display: block;
	width: 64px;
	height: 80px;
	object-fit: cover;
	max-width: none;
	max-height: none;
	border: 1px solid var(--md-rule-hair);
	background: var(--md-portrait-ground);
	filter: var(--md-portrait-filter);
}
.rpg-connection__identity { min-width: 0; }
.rpg-connection__name {
	display: block;
	font-family: var(--md-f-serif);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.2;
	letter-spacing: var(--md-ls-display);
	color: var(--md-ink-bright);
	text-decoration: none;
	word-break: break-word;
}
.rpg-connection__name:hover { color: var(--md-accent); text-decoration: none; }
.rpg-connection__badge {
	display: block;
	margin-top: .25rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-accent-soft);
}
.rpg-connection__badge:empty { display: none; }

/* ============================================================
   Metazeilen — Alter, Wohnort, Arbeit
   ============================================================ */
.rpg-connection__meta { display: grid; gap: .35rem; }
.rpg-connection__meta:empty { display: none; }
.rpg-connection__metarow {
	display: grid;
	grid-template-columns: 13px minmax(0, 1fr);
	align-items: baseline;
	gap: .65rem;
	font-size: var(--md-t-micro);
	line-height: 1.6;
	color: var(--md-ink-dim);
}
.rpg-connection__icon {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	color: var(--md-ink-faint);
	transform: translateY(2px);
}
.rpg-connection__metatext { min-width: 0; word-break: break-word; }
.rpg-connection__metatext a { color: var(--md-ink); }
.rpg-connection__metatext a:hover { color: var(--md-accent); }
.rpg-connection__metasep { color: var(--md-rule); }

/* ============================================================
   Steckbrieffelder
   ============================================================ */
.rpg-connection__fields { display: grid; gap: .9rem; }
.rpg-connection__fields:empty { display: none; }
.rpg-connection__description + .rpg-connection__fields { margin-top: -.1rem; }
.rpg-connection__field-label {
	display: block;
	margin-bottom: .3rem;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpg-connection__field-value {
	font-size: var(--md-t-micro);
	line-height: 1.8;
	color: var(--md-ink-dim);
	word-break: break-word;
}

/* Lange Texte werden nicht gekuerzt, sondern gerollt — wie bei den Gesuchen. */
.rpg-connection__field-value--clamped {
	max-height: 15rem;
	padding-right: .6rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--md-rule-soft) transparent;
}
.rpg-connection__field-value--clamped::-webkit-scrollbar { width: 4px; }
.rpg-connection__field-value--clamped::-webkit-scrollbar-thumb { background: var(--md-rule-soft); }

.rpg-connection__field-value img { max-width: 100%; height: auto; filter: var(--md-photo-filter); }
.rpg-connection__field-value blockquote,
.rpg-connection__field-value pre { max-width: 100%; margin: .4rem 0; overflow-x: auto; }

.rpg-connection__chip {
	display: inline-block;
	margin: 0 .3rem .3rem 0;
	padding: .15rem .55rem;
	background: var(--md-chip-bg);
	border: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-dim);
}

/* ============================================================
   Aktion und Leerzustand
   ============================================================ */
.rpg-connection__actions { margin-top: auto; padding-top: .3rem; }
.rpg-connection__pm {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
	text-decoration: none;
	transition: color var(--md-dur) var(--md-ease);
}
.rpg-connection__pm::before {
	content: "";
	flex: 0 0 var(--md-dash);
	height: 1px;
	background: currentColor;
}
.rpg-connection__pm:hover { color: var(--md-accent); text-decoration: none; }

.rpg-connection__empty {
	padding: clamp(1.75rem, 4vw, 2.75rem) 1.5rem;
	border-top: 1px solid var(--md-rule-hair);
	border-bottom: 1px solid var(--md-rule-hair);
	text-align: center;
}
.rpg-connection__empty p {
	margin: 0 0 .9rem;
	font-size: var(--md-t-body);
	color: var(--md-ink-dim);
}
.rpg-connection__empty .rpg-connection__pm { justify-content: center; }

.rpg-connection__pagination { display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2rem); }
.rpg-connection__pagination:empty { display: none; }

@media (max-width: 900px) {
	.rpg-connection__layout { grid-template-columns: minmax(0, 1fr); }
	.rpg-connection__toolbar {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		padding-left: 0;
		padding-top: 1.5rem;
		border-left: 0;
		border-top: 1px solid var(--md-rule-hair);
	}
}