/* Styling for the unified Hero Content widget (left column, Profile or Career). Depends on dpi-global (tokens, .dpi-pill). */

.dpi-single-hero-content {
	color: var(--dpi-fg-on-dark);
}

.dpi-single-hero-content__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
}

.dpi-single-hero-content__title {
	margin: 0;
	font-family: var(--dpi-font);
	font-size: clamp(28px, 6vw, 48px);
	font-weight: 800;
	line-height: 1.1;
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
}

.dpi-single-hero-content__subtitle {
	margin: 0 0 16px;
	font-family: var(--dpi-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #d5d5d5;
	text-wrap: pretty;
}

.dpi-single-hero-content__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dpi-single-hero-content__title-row + .dpi-single-hero-content__pills {
	margin-top: 16px;
}

.dpi-single-hero-content .dpi-single-hero-content__save {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: transparent;
	padding: 0;
	color: var(--dpi-fg-on-dark);
	cursor: pointer;
}

.dpi-single-hero-content .dpi-single-hero-content__save:hover,
.dpi-single-hero-content .dpi-single-hero-content__save:focus {
	background: transparent;
}

/* Covers both icon-font and inline-svg render modes from Icons_Manager. */
.dpi-single-hero-content .dpi-single-hero-content__save-icon,
.dpi-single-hero-content .dpi-single-hero-content__save-icon.e-font-icon-svg {
	display: inline-flex;
	width: 1em;
	height: 1em;
	font-size: 18px;
	line-height: 1;
	fill: currentColor;
}

.dpi-single-hero-content .dpi-single-hero-content__save-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Fixed SVG size per design, while icon fonts use font-size. */
.dpi-single-hero-content .dpi-single-hero-content__save .dpi-single-hero-content__save-icon svg {
	width: 29px;
	height: 38px;
}

.dpi-single-hero-content .dpi-single-hero-content__save i.dpi-single-hero-content__save-icon {
	width: auto;
	height: auto;
	font-size: 38px;
	line-height: 1;
}

/* Saved state – outline/filled icon pair, same toggle pattern as .dpi-career-grid__save. */

.dpi-single-hero-content .dpi-single-hero-content__save-icon.dpi-single-hero-content__save-icon--filled {
	display: none;
}

.dpi-single-hero-content .dpi-single-hero-content__save.is-saved .dpi-single-hero-content__save-icon:not(.dpi-single-hero-content__save-icon--filled) {
	display: none;
}

.dpi-single-hero-content .dpi-single-hero-content__save.is-saved .dpi-single-hero-content__save-icon--filled {
	display: inline-flex;
}

.dpi-single-hero-content .dpi-single-hero-content__save.is-saved .dpi-single-hero-content__save-icon,
.dpi-single-hero-content .dpi-single-hero-content__save.is-saved .dpi-single-hero-content__save-icon svg,
.dpi-single-hero-content .dpi-single-hero-content__save.is-saved .dpi-single-hero-content__save-icon svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.dpi-single-hero-content .dpi-single-hero-content__save.is-saved {
	box-shadow: none;
}