/**
 * About Card widget — leadership team (.about-card).
 * Loaded only when the widget is present (Elementor on-demand).
 *
 * Target (Webflow about-v2):
 *  - Desktop: height 23.0625rem, pad 1.5rem, silver 1px border
 *  - Hover (≥992): 3px orange border + inset 2px shadow; image saturate 0→100%
 *  - Position: height 0 desktop, expands on hover; ≤991 always open
 *  - ≤479: height 18rem, pad bottom/left 0.75rem; image always full color
 *
 * Grid columns stay on the Elementor Grid Container (project: 4 / 2 / 2).
 */

/* Stretch to grid cell. */
.elementor-widget-jdw-ee-about-card {
	height: 100%;
	width: 100%;
}

.elementor-widget-jdw-ee-about-card > .jdw-ee-about-card {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	cursor: default;
}

a.jdw-ee-about-card {
	cursor: pointer;
}

.jdw-ee-about-card {
	/* Style controls may override via custom properties / selectors. */
	--jdw-ee-about-hover-border: #f65e1e;
	--jdw-ee-about-hover-border-width: 3px;
	--jdw-ee-about-img-saturate: 0%;
	--jdw-ee-about-img-saturate-hover: 100%;
	--jdw-ee-about-img-filter-duration: 0.3s;

	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	overflow: hidden;
	height: 23.0625rem;
	min-height: 23.0625rem;
	padding: 1.5rem;
	border: 1px solid #c7c6c4;
	background-color: #f9f8f6;
	color: #fff;
	text-align: center;
	/* Border/shadow match target cubic-bezier(.215,.61,.355,1). */
	transition:
		border-width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
		border-color 0.2s,
		box-shadow 0.2s;
}

/* Content row over image (target .about-card-content). */
.jdw-ee-about-card__content {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100%;
	max-width: 100%;
	gap: 0.5rem;
	pointer-events: none;
}

.jdw-ee-about-card__identity {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0.2rem;
	text-align: left;
	min-width: 0;
}

.jdw-ee-about-card__name {
	margin: 0;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

/*
 * Target .about-position: desktop height 0 + overflow hidden;
 * expands via JS on hover. ≤991: height auto (always visible).
 */
.jdw-ee-about-card__position {
	height: 0;
	overflow: hidden;
	color: #f65e1e;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: left;
}

@media (min-width: 992px) {
	.jdw-ee-about-card__position {
		transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

.jdw-ee-about-card__arrow-wrap {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.jdw-ee-about-card__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: #f65e1e;
	/* Target cards use a corner-up arrow feel. */
	transform: rotate(45deg);
	line-height: 1;
}

.jdw-ee-about-card__arrow i,
.jdw-ee-about-card__arrow svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
}

/* Absolute fill photo (target .about-card-image-wrap). */
.jdw-ee-about-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Desktop greyscale; phone/tablet override below. */
	filter: saturate(var(--jdw-ee-about-img-saturate));
	transition: filter var(--jdw-ee-about-img-filter-duration) ease-in-out;
}

.jdw-ee-about-card__media .jdw-ee-about-card__image {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center top;
	border: 0;
}

/*
 * Desktop hover: orange border + full color image.
 * Prefix with .elementor-widget-jdw-ee-about-card so we beat Elementor
 * Style-control selectors like `.elementor-element-xxx .jdw-ee-about-card`.
 */
@media (min-width: 992px) {
	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card:hover,
	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card:focus-visible,
	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card.is-hover {
		border-style: solid;
		border-width: var(--jdw-ee-about-hover-border-width) !important;
		border-color: var(--jdw-ee-about-hover-border) !important;
		/* Target: inset 0 0 0 2px orange (keeps inner edge crisp with 3px outer). */
		box-shadow: inset 0 0 0 2px var(--jdw-ee-about-hover-border);
	}

	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card:hover .jdw-ee-about-card__media,
	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card:focus-visible .jdw-ee-about-card__media,
	.elementor-widget-jdw-ee-about-card .jdw-ee-about-card.is-hover .jdw-ee-about-card__media {
		filter: saturate(var(--jdw-ee-about-img-saturate-hover));
	}
}

/* Tablet / small desktop: position always visible; image full color. */
@media (max-width: 991px) {
	.jdw-ee-about-card__position {
		height: auto !important;
		overflow: visible;
	}

	.jdw-ee-about-card__media {
		filter: none;
	}
}

/* Phone: shorter card + tighter bottom/left pad (Style controls also set defaults). */
@media (max-width: 479px) {
	.jdw-ee-about-card {
		height: 18rem;
		min-height: 18rem;
		padding-bottom: 0.75rem;
		padding-left: 0.75rem;
	}

	.jdw-ee-about-card__media {
		filter: none;
	}
}

/* Editor canvas: show position so content is editable without hover. */
.elementor-editor-active .jdw-ee-about-card__position {
	height: auto !important;
	overflow: visible;
}