.chmf-connection {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 2rem;
	padding-block: 1.25rem;
}

.chmf-connection + .chmf-connection {
	border-top: 1px solid var(--pl-color-border, #ddd);
	padding-block-start: 1.5rem;
}

.chmf-connection__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--chmf-connection-logo-max-width, 160px);
	max-width: var(--chmf-connection-logo-max-width, 160px);
	max-height: var(--chmf-connection-logo-max-height, 120px);
	background: var(--chmf-connection-logo-bg, transparent);
	border-radius: var(--pl-radius-md, 0.75rem);
	padding: 0.5rem;
}

.chmf-connection__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.chmf-connection__logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--chmf-connection-logo-max-height, 120px);
	object-fit: contain;
}

.chmf-connection__logo-image--placeholder {
	width: 100%;
	height: auto;
	opacity: 0.95;
}

.chmf-connection__body {
	flex: 1;
	min-width: 0;
}

.chmf-connection__name {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pl-color-text-primary, #1d221e);
}

.chmf-connection__name a {
	color: var(--pl-color-primary, #358551);
	text-decoration-line: underline;
	text-decoration-color: var(--pl-link-underline-color, color-mix(in srgb, currentColor 45%, transparent));
	text-decoration-thickness: var(--pl-link-underline-thickness-heading, 0.06em);
	text-underline-offset: var(--pl-link-underline-offset, 0.18em);
	text-decoration-skip-ink: auto;
	transition:
		color var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-decoration-color var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-decoration-thickness var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-underline-offset var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease);
}

.chmf-connection__name a:hover,
.chmf-connection__name a:focus-visible {
	color: var(--pl-color-primary-dark, #2a6840);
	text-decoration-color: var(--pl-link-underline-color-hover, currentColor);
	text-decoration-thickness: var(--pl-link-underline-thickness-hover, 0.12em);
	text-underline-offset: 0.22em;
}

.chmf-connection__description {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--pl-color-text, #1d221e);
}

.chmf-connection__description > :first-child {
	margin-top: 0;
}

.chmf-connection__description > :last-child {
	margin-bottom: 0;
}

.chmf-connection__description a {
	color: var(--pl-color-primary, #358551);
	text-decoration-line: underline;
	text-decoration-color: var(--pl-link-underline-color, color-mix(in srgb, currentColor 45%, transparent));
	text-decoration-thickness: var(--pl-link-underline-thickness, 0.08em);
	text-underline-offset: var(--pl-link-underline-offset, 0.18em);
	text-decoration-skip-ink: auto;
	transition:
		color var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-decoration-color var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-decoration-thickness var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease),
		text-underline-offset var(--pl-duration-fast, 0.15s) var(--pl-easing-default, ease);
}

.chmf-connection__description a:hover,
.chmf-connection__description a:focus-visible {
	color: var(--pl-color-primary-dark, #2a6840);
	text-decoration-color: var(--pl-link-underline-color-hover, currentColor);
	text-decoration-thickness: var(--pl-link-underline-thickness-hover, 0.12em);
	text-underline-offset: 0.22em;
}

.chmf-connection-editor .chmf-connection--editor {
	border: 1px dashed var(--pl-color-border, #ccc);
	border-radius: var(--pl-radius-md, 0.75rem);
	padding: 1rem;
}

.chmf-connection-editor .chmf-connection__name-preview {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pl-color-text-primary, #1d221e);
}

@media (max-width: 640px) {
	.chmf-connection {
		flex-direction: column;
		gap: 1rem;
	}

	.chmf-connection__logo {
		width: 100%;
		max-width: var(--chmf-connection-logo-max-width, 160px);
	}
}