joblist-company {
	&:is([full]) {
		flex-wrap: nowrap;
		gap: calc(var(--s) / 4);
	}
	&:is(:not([full])) {
		flex-wrap: wrap;
	}
	:is(menu) {
		gap: calc(var(--s) / 2);
		:is(li) {
			display: flex;
		}
	}
	:is(summary) {
		padding: calc(var(--s) / 4);
	}
	:is(joblist-heatmap) {
		&:is([no-data="true"]) {
			display: none;
		}
	}
	:is(joblist-board-search) {
		position: sticky;
		top: 0;
		background: var(--c-bg);
	}
	:is(joblist-giscus, joblist-company-edit) {
		:is(details) {
			&:is([open]) {
				background-color: var(--c-bg);
			}
			flex-grow: 1;
			padding: calc(var(--s) / 2);
		}
		:is(summary) {
			float: right;
			text-align: right;
			background-color: var(--c-bg);
		}
		display: flex;
		justify-content: flex-end;
		margin: calc(var(--s) / 4);
	}

	/* Company header with title */
	:is(joblist-company-title) {
		:is(.company-header) {
			display: flex;
			align-items: center;
			justify-content: space-between;
			/* gap: var(--s); */
		}
	}

	:is(joblist-social-widget) {
		:is(ul) {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			gap: var(--s);
		}
		:is(li) {
			flex-grow: 1;
			display: flex;
			align-content: center;
			justify-content: center;
			padding: var(--s);
			background-color: var(--c-bg-alt);
		}
		:is(iframe) {
			/* flex-grow: 1; */

			/* width: 100%; */
		}
		:is(p) {
			max-width: max(20rem, 40vmin);
		}
		:is(iframe) {
			min-height: min(45vh, 100vmin);
			padding: calc(var(--s) / 3);
			border: 1px solid var(--c-bg);
		}

		/* Enhanced social preview styles */
		:is(.social-preview-header) {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: calc(var(--s) / 2);
		}

		:is(.social-preview-cta) {
			display: inline-block;
			background-color: var(--c-bg);
			border: var(--s-border) solid var(--c-border--company);
			border-radius: var(--s-border-radius);
			text-decoration: none;
			font-size: 0.9em;
			transition: background-color 0.2s ease;

			&:hover {
				background-color: var(--c-bg-alt);
			}
		}

		/* Wikipedia specific styles */
		:is(.wikipedia-content) {
			display: flex;
			gap: var(--s);
			align-items: flex-start;
		}

		:is(.wikipedia-image) {
			flex-shrink: 0;
		}

		:is(.wikipedia-text) {
			flex: 1;
			min-width: 0;
		}

		:is(.profile-link) {
			text-decoration: none;
			color: inherit;
			display: flex;
			gap: var(--s);
			align-items: baseline;
			&:hover {
				opacity: 0.8;
			}
		}
	}
	display: flex;
	flex-direction: column;
}
joblist-company {
	&:is([is-highlighted="true"]) {
		:is(joblist-company-title a) {
			border-right: 1px dashed var(--c-link);
			padding-right: var(--s);
		}
	}
}

/* chidlren dom */
joblist-company-title {
	:is(h1) {
		margin: 0;
	}
	&:has(joblist-highlight) {
		text-decoration: underline;
		text-decoration-thickness: 0.1rem;
		text-decoration-color: var(--c-link);
	}
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--s) / 3);
}
joblist-company-tags {
	:is(menu) {
		:is(joblist-company-tag) {
			:is(a) {
				&::before {
					content: "#";
				}
			}
			display: flex;
		}
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		font-style: italic;
	}
}
joblist-company-description {
	:is(joblist-company:not([full])) & :is(p) {
		margin: 0;
		text-overflow: "…";
		overflow: hidden;
	}
	:is(joblist-company[full]) & :is(p) {
		white-space: pre-wrap;
	}
	:is(p) {
		margin: 0;
	}
	max-width: var(--s-container);
}
joblist-company-links {
	:is(menu) {
		background-color: var(--c-bg-alt);
		margin-right: var(--s);
		display: flex;
		flex-wrap: wrap;
	}
	:is(a) {
		display: flex;
		align-items: center;
	}
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--s) / 2);
}

joblist-company-widgets {
	:is(joblist-map-list, joblist-heatmap) {
		flex-grow: 1;
		width: 100%;
		@media (min-width: 70rem) {
			max-width: 50%;
			flex-basis: 45%;
		}
	}
	display: flex;
	flex-wrap: wrap;
	gap: var(--s);
}

joblist-company-edit {
	:is(menu) {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

joblist-company-favicon {
	padding: calc(var(--s) / 5);
	display: flex;
	justify-content: center;
	align-items: center;
	/* border: 1px solid var(--c-link); */
	border-radius: 50%;
	background-color: var(--c-bg-alt);
	img {
		width: calc(var(--s) / 1.5);
	}
}