/* HILCAM TESTIMONIALS — all selectors remain inside the component namespace. */
.hpi-testimonials,
.hpi-testimonials * { box-sizing: border-box; }

.hpi-testimonials .hpi-testimonials__shell {
	--hpi-testimonial-card-background: #f3eee6;
	--hpi-testimonial-text-color: #36563f;
	--hpi-testimonial-card-opacity: .84;
	--hpi-testimonial-card-radius: 34px;
	--hpi-testimonial-card-padding: 32px;
	--hpi-testimonial-card-gap: 42px;
	--hpi-testimonial-min-height: 300px;
	--hpi-testimonial-blur: 0px;
	--hpi-testimonial-quote-size: 88px;
	--hpi-testimonial-quote-opacity: .12;
	--hpi-testimonial-logo-width: 140px;
	--hpi-testimonial-logo-max-height: 72px;
	--hpi-testimonial-fade-duration: 800ms;
	--hpi-testimonial-stagger-delay: 180ms;
	position: relative;
	display: block;
	width: 100%;
	color: var(--hpi-testimonial-text-color);
}

.hpi-testimonials .hpi-testimonials__viewport {
	position: relative;
	width: 100%;
	transition: height calc(var(--hpi-testimonial-fade-duration) * .45) ease;
}

.hpi-testimonials .hpi-testimonials__items {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: stretch;
	justify-content: center;
	gap: var(--hpi-testimonial-card-gap);
	width: 100%;
}

/* Keep Divi's module wrappers in a real horizontal flex row. This also gives
 * a stable three/two/one-column fallback before JavaScript groups the cards. */
.hpi-testimonials .hpi-testimonials__items:not(.is-grouped) > * {
	display: block;
	flex: 0 1 calc((100% - (2 * var(--hpi-testimonial-card-gap))) / 3) !important;
	width: auto !important;
	min-width: 0;
	max-width: calc((100% - (2 * var(--hpi-testimonial-card-gap))) / 3) !important;
	margin: 0 !important;
}

.hpi-testimonials .hpi-testimonials__items.is-grouped { display: block !important; }
.hpi-testimonials .hpi-testimonials__group {
	--hpi-testimonials-per-view: 3;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--hpi-testimonial-card-gap);
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	opacity: 1;
	transition: opacity var(--hpi-testimonial-fade-duration) ease;
}
.hpi-testimonials .hpi-testimonials__group[hidden],
.hpi-testimonials .hpi-testimonials__group.is-hpi-hidden {
	display: none !important;
}
.hpi-testimonials .hpi-testimonials__group > * { display: block; flex: 0 1 calc((100% - ((var(--hpi-testimonials-per-view) - 1) * var(--hpi-testimonial-card-gap))) / var(--hpi-testimonials-per-view)) !important; min-width: 0; max-width: calc((100% - ((var(--hpi-testimonials-per-view) - 1) * var(--hpi-testimonial-card-gap))) / var(--hpi-testimonials-per-view)) !important; width: auto !important; margin: 0 !important; }
.hpi-testimonials .hpi-testimonials__viewport.is-fading .hpi-testimonials__group:not([hidden]) { opacity: 0; }

/* Optional staggered crossfade: the next group sits over the current one and
 * each corresponding card changes after its own short delay. */
.hpi-testimonials .hpi-testimonials__group.is-hpi-transition-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.hpi-testimonials .hpi-testimonials__group.is-hpi-staggered > * {
	transition-property: opacity, transform !important;
	transition-duration: var(--hpi-testimonial-fade-duration) !important;
	transition-timing-function: ease !important;
	transition-delay: var(--hpi-testimonial-card-delay, 0ms) !important;
}
.hpi-testimonials .hpi-testimonials__group.is-hpi-entering > * {
	opacity: 0 !important;
	transform: translateY(8px) !important;
}
.hpi-testimonials .hpi-testimonials__group.is-hpi-leaving > * {
	opacity: 0 !important;
	transform: translateY(-8px) !important;
}

.hpi-testimonials .hpi-testimonials__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: var(--hpi-testimonial-min-height);
	height: 100%;
	overflow: hidden;
	padding: var(--hpi-testimonial-card-padding);
	border: 0 solid transparent;
	border-radius: var(--hpi-testimonial-card-radius);
	/* Older browsers retain the intended translucent cream default. */
	background: rgba(243, 238, 230, .84);
	color: var(--hpi-testimonial-text-color);
	box-shadow: 0 8px 28px rgba(47, 62, 48, .05);
}

@supports (background: color-mix(in srgb, white, transparent)) {
	.hpi-testimonials .hpi-testimonials__card { background: color-mix(in srgb, var(--hpi-testimonial-card-background) calc(var(--hpi-testimonial-card-opacity) * 100%), transparent); }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.hpi-testimonials .hpi-testimonials__card { -webkit-backdrop-filter: blur(var(--hpi-testimonial-blur)); backdrop-filter: blur(var(--hpi-testimonial-blur)); }
}

.hpi-testimonials .hpi-testimonials__quote {
	position: absolute;
	top: calc(var(--hpi-testimonial-card-padding) * -.1);
	left: var(--hpi-testimonial-card-padding);
	display: block;
	width: var(--hpi-testimonial-quote-size);
	height: var(--hpi-testimonial-quote-size);
	color: var(--hpi-testimonial-text-color);
	opacity: var(--hpi-testimonial-quote-opacity);
	pointer-events: none;
}

.hpi-testimonials .hpi-testimonials__quote-image,
.hpi-testimonials .hpi-testimonials__quote-svg { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.hpi-testimonials .hpi-testimonials__content { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; min-width: 0; }
.hpi-testimonials .hpi-testimonials__text { min-width: 0; }
.hpi-testimonials .hpi-testimonials__text > :first-child { margin-top: calc(var(--hpi-testimonial-quote-size) * .44); }
.hpi-testimonials .hpi-testimonials__text > :last-child { margin-bottom: 0; }
.hpi-testimonials .hpi-testimonials__attribution { display: flex; flex-direction: column; gap: .12rem; margin-top: 1.25rem; }
.hpi-testimonials .hpi-testimonials__role,
.hpi-testimonials .hpi-testimonials__company { opacity: .78; }
.hpi-testimonials .hpi-testimonials__logo { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: flex-end; min-height: var(--hpi-testimonial-logo-max-height); margin-top: 1rem; }
.hpi-testimonials .hpi-testimonials__logo-image { display: block; width: auto; max-width: var(--hpi-testimonial-logo-width); max-height: var(--hpi-testimonial-logo-max-height); object-fit: contain; object-position: right bottom; }

.hpi-testimonials--shortcode .hpi-testimonials__text {
	font-family: var(--hpi-testimonial-font-family);
	font-size: var(--hpi-testimonial-font-size-desktop);
	font-weight: var(--hpi-testimonial-font-weight);
	font-style: var(--hpi-testimonial-font-style);
	line-height: var(--hpi-testimonial-line-height);
	letter-spacing: var(--hpi-testimonial-letter-spacing);
	text-transform: var(--hpi-testimonial-text-transform);
}
.hpi-testimonials--shortcode .hpi-testimonials__attribution {
	font-family: var(--hpi-attribution-font-family);
	font-size: var(--hpi-attribution-font-size-desktop);
	font-weight: var(--hpi-attribution-font-weight);
	font-style: var(--hpi-attribution-font-style);
	line-height: var(--hpi-attribution-line-height);
	letter-spacing: var(--hpi-attribution-letter-spacing);
	text-transform: var(--hpi-attribution-text-transform);
}

@media (max-width: 980px) {
	.hpi-testimonials--shortcode .hpi-testimonials__text { font-size: var(--hpi-testimonial-font-size-tablet); }
	.hpi-testimonials--shortcode .hpi-testimonials__attribution { font-size: var(--hpi-attribution-font-size-tablet); }
	.hpi-testimonials .hpi-testimonials__items:not(.is-grouped) > * {
		flex-basis: calc((100% - var(--hpi-testimonial-card-gap)) / 2) !important;
		max-width: calc((100% - var(--hpi-testimonial-card-gap)) / 2) !important;
	}
}

@media (max-width: 767px) {
	.hpi-testimonials .hpi-testimonials__items,
	.hpi-testimonials .hpi-testimonials__group {
		justify-content: flex-end;
		padding-right: clamp(12px, 4vw, 28px);
	}
	.hpi-testimonials .hpi-testimonials__items:not(.is-grouped) > * {
		display: none;
		flex: 0 0 min(52vw, 100%) !important;
		width: min(52vw, 100%) !important;
		max-width: min(52vw, 100%) !important;
	}
	.hpi-testimonials .hpi-testimonials__items:not(.is-grouped) > :first-child { display: block; }
	.hpi-testimonials .hpi-testimonials__group > * {
		flex: 0 0 min(52vw, 100%) !important;
		width: min(52vw, 100%) !important;
		max-width: min(52vw, 100%) !important;
	}
	.hpi-testimonials .hpi-testimonials__card { min-height: min(var(--hpi-testimonial-min-height), 440px); padding: clamp(1.5rem, 7vw, var(--hpi-testimonial-card-padding)); }
	.hpi-testimonials--shortcode .hpi-testimonials__text { font-size: var(--hpi-testimonial-font-size-mobile); }
	.hpi-testimonials--shortcode .hpi-testimonials__attribution { font-size: var(--hpi-attribution-font-size-mobile); }
}

@media (prefers-reduced-motion: reduce) {
	.hpi-testimonials .hpi-testimonials__viewport,
	.hpi-testimonials .hpi-testimonials__group,
	.hpi-testimonials .hpi-testimonials__group > * { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}
