/* Styling for saved Career Test snapshots and the final repeat-test CTA. */

.dpi-career-test-saved-results {
	--dpi-gap: 20px;
	--dpi-test-results-columns: 1;
}

@media (min-width: 768px) {
	.dpi-career-test-saved-results {
		--dpi-test-results-columns: 2;
	}
}

@media (min-width: 1025px) {
	.dpi-career-test-saved-results {
		--dpi-test-results-columns: 3;
	}
}

.dpi-career-test-saved-results__grid {
	display: grid;
	grid-template-columns: repeat(var(--dpi-test-results-columns), minmax(0, 1fr));
	gap: var(--dpi-gap);
}

.dpi-career-test-saved-results__card {
	position: relative;
	display: flex;
	min-height: 300px;
	border-radius: 0;
	color: var(--dpi-orange-fg);
	overflow: hidden;
}

.dpi-career-test-saved-results__card.dpi-card--blue {
	color: var(--dpi-blue-fg);
}

.dpi-career-test-saved-results__card.dpi-card--lime {
	color: var(--dpi-lime-fg);
}

/* Beat Elementor kit link colours (.elementor-kit-* a) inside coloured cards. */
.dpi-career-test-saved-results__card.dpi-card--orange a,
.dpi-career-test-saved-results__card.dpi-card--orange a:hover,
.dpi-career-test-saved-results__card.dpi-card--orange a:focus {
	color: var(--dpi-orange-fg);
}

.dpi-career-test-saved-results__card.dpi-card--blue a,
.dpi-career-test-saved-results__card.dpi-card--blue a:hover,
.dpi-career-test-saved-results__card.dpi-card--blue a:focus {
	color: var(--dpi-blue-fg);
}

.dpi-career-test-saved-results__card.dpi-card--lime a,
.dpi-career-test-saved-results__card.dpi-card--lime a:hover,
.dpi-career-test-saved-results__card.dpi-card--lime a:focus {
	color: var(--dpi-lime-fg);
}

.dpi-career-test-saved-results__card-link,
.dpi-career-test-saved-results__card-link:hover,
.dpi-career-test-saved-results__card-link:focus {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px 25px;
	border-radius: 0;
	color: inherit;
	text-align: left;
	text-decoration: none;
}

.dpi-career-test-saved-results__card-link:focus-visible,
.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button:focus-visible {
	outline: 2px solid var(--dpi-lime);
	outline-offset: -2px;
}

.dpi-career-test-saved-results__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding-right: 44px;
}

.dpi-career-test-saved-results__badge {
	align-self: flex-start;
}

.dpi-career-test-saved-results__card.dpi-card--blue .dpi-career-test-saved-results__badge {
	background: var(--dpi-orange);
	color: var(--dpi-orange-fg);
}

.dpi-career-test-saved-results__card-bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dpi-career-test-saved-results__percentage {
	font-family: var(--dpi-font);
	font-size: 96px;
	font-weight: 700;
	line-height: 0.9;
}

.dpi-career-test-saved-results__title {
	font-family: var(--dpi-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

.dpi-career-test-saved-results__card .dpi-career-test-saved-results__remove {
	position: absolute;
	top: var(--dpi-card-padding-top, 20px);
	right: var(--dpi-card-padding-right, 25px);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.dpi-career-test-saved-results__card .dpi-career-test-saved-results__remove:hover,
.dpi-career-test-saved-results__card .dpi-career-test-saved-results__remove:focus {
	background: transparent;
	color: inherit;
}

.dpi-career-test-saved-results__card .dpi-career-test-saved-results__remove svg,
.dpi-career-test-saved-results__card .dpi-career-test-saved-results__remove svg * {
	width: 21px;
	height: 27px;
	fill: currentColor;
	stroke: currentColor;
}

/* Read-only shared-results view (opened via a #dpi-testergebnisse= link): editing controls make no sense on someone else's data. */
.dpi-career-test-saved-results.is-shared-view .dpi-career-test-saved-results__remove,
.dpi-career-test-saved-results.is-shared-view [data-dpi-test-results-clear-all] {
	display: none;
}

.dpi-career-test-saved-results__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 16px;
	padding: 20px 25px;
	background: transparent;
}

.dpi-career-test-saved-results__cta-text {
	font-family: var(--dpi-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dpi-blue);
}

.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button,
.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button:hover,
.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 0;
	background: var(--dpi-blue);
	color: var(--dpi-blue-fg);
	font-family: var(--dpi-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button svg,
.dpi-career-test-saved-results__cta .dpi-career-test-saved-results__cta-button svg * {
	width: 1em;
	height: 1em;
	fill: currentColor;
	stroke: currentColor;
}

.dpi-career-test-saved-results__empty {
	margin: 0;
	padding: 40px 32px;
	background: var(--dpi-lime);
	color: var(--dpi-lime-fg);
	font-family: var(--dpi-font);
}