/**
 * Services Hover Panels — frontend styles
 *
 * Defaults live in CSS custom properties; the Elementor controls overwrite
 * them per widget instance.
 *
 * @author Gabriel Rosales
 * @link   https://gabrielrosales.org
 */

.shp {
	--shp-height: 560px;
	--shp-gap: 18px;
	--shp-radius: 26px;
	--shp-grow-active: 3.4;
	--shp-grow-idle: 1;
	--shp-duration: 650ms;
	--shp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--shp-scrim-idle: rgba(0, 0, 0, 0.45);
	--shp-scrim-active: rgba(0, 0, 0, 0);
	--shp-zoom: 1.05;
	--shp-label-color: #fff;
	--shp-label-offset: 28px;
	--shp-card-bg: rgba(70, 70, 70, 0.72);
	--shp-card-blur: 6px;
	--shp-card-radius: 14px;
	--shp-card-offset: 26px;
	--shp-card-max: 82%;
	--shp-card-gap: 4px;
	--shp-title-color: #fff;
	--shp-desc-color: rgba(255, 255, 255, 0.92);

	display: block;
	width: 100%;
}

.shp *,
.shp *::before,
.shp *::after {
	box-sizing: border-box;
}

.shp__track {
	display: flex;
	align-items: stretch;
	gap: var(--shp-gap);
	width: 100%;
	height: var(--shp-height);
}

.shp__item {
	position: relative;
	display: block;
	flex: 1 1 0%;
	flex-grow: var(--shp-grow-idle);
	min-width: 0;
	align-self: stretch;
	overflow: hidden;
	border-radius: var(--shp-radius);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
	transition: flex-grow var(--shp-duration) var(--shp-ease);
	will-change: flex-grow;
}

.shp__item:focus {
	outline: none;
}

.shp__item:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* --- Image ---------------------------------------------------------- */

.shp__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background-color: #d9d9d9;
}

.shp__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale(1);
	transition: transform calc(var(--shp-duration) * 1.25) var(--shp-ease),
		filter var(--shp-duration) var(--shp-ease);
}

.shp__scrim {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
	background-color: var(--shp-scrim-idle);
	transition: background-color var(--shp-duration) var(--shp-ease);
	pointer-events: none;
}

/* --- Collapsed panel label ------------------------------------------ */

.shp__label {
	position: absolute;
	left: 50%;
	bottom: var(--shp-label-offset);
	transform: translateX(-50%);
	width: calc(100% - 24px);
	margin: 0;
	color: var(--shp-label-color);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	opacity: 1;
	transition: opacity calc(var(--shp-duration) * 0.55) var(--shp-ease);
	pointer-events: none;
}

/* Label rotated 90deg, for very narrow collapsed panels */
.shp--vlabel .shp__label {
	width: auto;
	max-width: none;
	max-height: calc(100% - (var(--shp-label-offset) * 2));
	writing-mode: vertical-rl;
	transform: translateX(-50%) rotate(180deg);
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}

/* --- Open panel card ------------------------------------------------- */

.shp__card {
	position: absolute;
	left: 50%;
	bottom: var(--shp-card-offset);
	display: flex;
	flex-direction: column;
	gap: var(--shp-card-gap);
	max-width: var(--shp-card-max);
	padding: 16px 26px;
	border-radius: var(--shp-card-radius);
	background-color: var(--shp-card-bg);
	-webkit-backdrop-filter: blur(var(--shp-card-blur));
	backdrop-filter: blur(var(--shp-card-blur));
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 14px);
	transition: opacity calc(var(--shp-duration) * 0.7) var(--shp-ease),
		transform var(--shp-duration) var(--shp-ease);
	pointer-events: none;
}

.shp__title {
	margin: 0;
	color: var(--shp-title-color);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.shp__desc {
	margin: 0;
	color: var(--shp-desc-color);
	font-size: 16px;
	line-height: 1.45;
}

/* =====================================================================
 * OPEN STATE
 * Three selectors per rule:
 *   1) JS running   -> .is-active
 *   2) no JS yet    -> the default panel
 *   3) no JS yet    -> plain :hover as a fallback
 * ================================================================== */

.shp.is-ready .shp__item.is-active,
.shp:not(.is-ready) .shp__item.is-default,
.shp:not(.is-ready) .shp__track:hover .shp__item:hover {
	flex-grow: var(--shp-grow-active);
}

.shp:not(.is-ready) .shp__track:hover .shp__item.is-default:not(:hover) {
	flex-grow: var(--shp-grow-idle);
}

.shp.is-ready .shp__item.is-active .shp__scrim,
.shp:not(.is-ready) .shp__item.is-default .shp__scrim,
.shp:not(.is-ready) .shp__track:hover .shp__item:hover .shp__scrim {
	background-color: var(--shp-scrim-active);
}

.shp:not(.is-ready) .shp__track:hover .shp__item.is-default:not(:hover) .shp__scrim {
	background-color: var(--shp-scrim-idle);
}

.shp.is-ready .shp__item.is-active .shp__media img,
.shp:not(.is-ready) .shp__item.is-default .shp__media img,
.shp:not(.is-ready) .shp__track:hover .shp__item:hover .shp__media img {
	transform: scale(var(--shp-zoom));
}

.shp:not(.is-ready) .shp__track:hover .shp__item.is-default:not(:hover) .shp__media img {
	transform: scale(1);
}

.shp:not(.shp--keep-label).is-ready .shp__item.is-active .shp__label,
.shp:not(.shp--keep-label):not(.is-ready) .shp__item.is-default .shp__label,
.shp:not(.shp--keep-label):not(.is-ready) .shp__track:hover .shp__item:hover .shp__label {
	opacity: 0;
}

.shp:not(.shp--keep-label):not(.is-ready) .shp__track:hover .shp__item.is-default:not(:hover) .shp__label {
	opacity: 1;
}

.shp.is-ready .shp__item.is-active .shp__card,
.shp:not(.is-ready) .shp__item.is-default .shp__card,
.shp:not(.is-ready) .shp__track:hover .shp__item:hover .shp__card {
	opacity: 1;
	transform: translate(-50%, 0);
}

.shp:not(.is-ready) .shp__track:hover .shp__item.is-default:not(:hover) .shp__card {
	opacity: 0;
	transform: translate(-50%, 14px);
}

/* =====================================================================
 * RESPONSIVE
 * ================================================================== */

/* Vertical stack */
@media (max-width: 767px) {
	.shp--mobile-stack .shp__track {
		flex-direction: column;
		height: auto;
	}

	.shp--mobile-stack .shp__item {
		flex: 0 0 auto;
		height: calc(var(--shp-height) * 0.42);
		transition: height var(--shp-duration) var(--shp-ease);
	}

	.shp--mobile-stack .shp__item.is-active {
		flex-grow: 0;
		height: var(--shp-height);
	}

	/* Horizontal carousel */
	.shp--mobile-scroll .shp__track {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.shp--mobile-scroll .shp__track::-webkit-scrollbar {
		display: none;
	}

	.shp--mobile-scroll .shp__item {
		flex: 0 0 76%;
		scroll-snap-align: center;
	}

	.shp--mobile-scroll .shp__item.is-active {
		flex: 0 0 76%;
	}

	/* Label rotated on mobile only */
	.shp--vlabel-mobile .shp__label {
		width: auto;
		max-width: none;
		max-height: calc(100% - (var(--shp-label-offset) * 2));
		writing-mode: vertical-rl;
		transform: translateX(-50%) rotate(180deg);
		white-space: nowrap;
		overflow: hidden;
		text-align: left;
	}

	.shp--mobile-stack .shp__label,
	.shp--mobile-scroll .shp__label {
		font-size: 16px;
	}

	.shp__title {
		font-size: 18px;
	}

	.shp__desc {
		font-size: 15px;
	}
}

/* Horizontal row on narrow screens: it tightens up, it does not break */
@media (max-width: 560px) {
	.shp--mobile-same .shp__label {
		font-size: 13px;
		width: calc(100% - 12px);
		line-height: 1.2;
	}

	.shp--mobile-same.shp--vlabel .shp__label,
	.shp--mobile-same.shp--vlabel-mobile .shp__label {
		width: auto;
	}

	.shp--mobile-same .shp__card {
		padding: 10px 14px;
	}

	.shp--mobile-same .shp__title {
		font-size: 16px;
	}

	.shp--mobile-same .shp__desc {
		font-size: 13px;
	}
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
	.shp .shp__item,
	.shp .shp__scrim,
	.shp .shp__label,
	.shp .shp__card,
	.shp .shp__media img {
		transition-duration: 1ms !important;
	}
}

/* The Elementor editor must not block clicks inside the widget */
.elementor-editor-active .shp__item {
	pointer-events: auto;
}