/**
 * HP4U WPBakery Team Card
 * The typeface is intentionally inherited from the active theme.
 */

.hp4u-team-card {
	position: relative;
	isolation: isolate;
	width: 100%;
	margin: 0 0 24px;
	margin-bottom: clamp(24px, 2.2vw, 32px);
	overflow: hidden;
	background: #fff;
}

.hp4u-team-card__media {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hp4u-team-card__image,
.hp4u-team-card:hover .hp4u-team-card__image,
.hp4u-team-card:focus .hp4u-team-card__image,
.hp4u-team-card:focus-within .hp4u-team-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	opacity: 1;
	filter: none;
	transform: none;
}

.hp4u-team-card__caption {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	padding: 14px 18px;
	padding: clamp(12px, 1.4vw, 18px) clamp(14px, 2vw, 24px);
	background: #819a70;
	background: var(--zahnpost-green, #819a70);
	color: #fff;
	font-size: 18px;
	font-size: clamp(16px, 1.5vw, 24px);
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	overflow-wrap: break-word;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
	pointer-events: none;
}

.hp4u-team-card__name,
.hp4u-team-card__position {
	display: inline;
}

/*
 * Hide the caption only on devices that have a precise hover-capable pointer.
 * Keyboard focus always reveals it. Browsers without hover media-query support
 * retain the visible base state above.
 */
@media (hover: hover) and (pointer: fine) {
	.hp4u-team-card__caption {
		opacity: 0;
		transform: translateY(100%);
	}

	.hp4u-team-card:hover .hp4u-team-card__caption,
	.hp4u-team-card:focus .hp4u-team-card__caption,
	.hp4u-team-card:focus-within .hp4u-team-card__caption {
		opacity: 1;
		transform: translateY(0);
	}
}

.hp4u-team-card:focus,
.hp4u-team-card__media:focus-visible {
	outline: 3px solid #819a70;
	outline: 3px solid var(--zahnpost-green, #819a70);
	outline-offset: 3px;
}

/*
 * WPBakery's vc_col-sm-* columns stack below 768px. Keep a stacked portrait
 * close to its desktop card size instead of letting it fill a tablet-width
 * content column. Narrow phones still use the full available width.
 */
@media (max-width: 767px) {
	.hp4u-team-card {
		width: 100%;
		max-width: 440px;
		margin-right: auto;
		margin-bottom: 24px;
		margin-bottom: clamp(22px, 4vw, 30px);
		margin-left: auto;
	}
}

/*
 * On phones the caption becomes a normal block below the image. It therefore
 * cannot cover a face, and its type and spacing scale down fluidly.
 */
@media (max-width: 660px) {
	.hp4u-team-card {
		overflow: visible;
	}

	.hp4u-team-card__caption {
		position: static;
		padding: 10px 12px;
		padding: clamp(9px, 2.6vw, 12px) clamp(10px, 3.4vw, 16px);
		font-size: 14px;
		font-size: clamp(14px, 4vw, 17px);
		line-height: 1.2;
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp4u-team-card__caption {
		transition: none;
	}
}