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

/* !important forces full-width here since Elementor's dasformat CSS loads after and would otherwise win. */
.dpi-single-hero-image {
	position: relative;
	width: 100% !important;
	max-width: none !important;
}

.dpi-single-hero-image__portrait-wrap {
	position: relative;
	width: 100%;
}

.dpi-single-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Profile logos sit above the role-model image without changing their intrinsic proportions. */
.dpi-single-hero-image__logo {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-bottom: 20px;
}

.dpi-single-hero-image__logo img {
	position: static !important;
	inset: auto !important;
	width: auto;
	max-width: 230px;
	max-height: 70px;
	height: auto !important;
	object-fit: contain !important;
}

/* Light transparent logos become black without affecting their transparent pixels. */
.dpi-single-hero-image__logo--light img {
	filter: brightness(0);
}

/* Full-height gradient over the image, independent of the label's own box. */
.dpi-single-hero-image__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(13, 13, 13, 0.85) 0%, rgba(13, 13, 13, 0.35) 40%, rgba(13, 13, 13, 0) 70%);
	border-radius: 0;
	pointer-events: none;
}

.dpi-single-hero-image__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px;
}

.dpi-single-hero-image__label-tag {
	font-family: var(--dpi-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #d5d5d5;
}

.dpi-single-hero-image__label-name {
	font-family: var(--dpi-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--dpi-fg-on-dark);
}

.dpi-single-hero-image__label-company {
	font-family: var(--dpi-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--dpi-fg-on-dark);
	text-decoration: underline;
}