/* IPS Card Accordion, ported from the reference HTML mockup.
   Sizing/color knobs come in as CSS custom properties set by the
   widget's Elementor controls (see includes/class-widget.php);
   everything else about the structure/behavior matches the reference
   file exactly. */

.ips-h-accordion {
	--ips-ca-height: 500px;
	--ips-ca-gap: 16px;
	--ips-ca-radius: 22px;
	--ips-ca-normal-grow: 1;
	--ips-ca-expanded-grow: 3.4;
	--ips-ca-collapsed-bg: #ececed;
	--ips-ca-icon-size: 48px;
	--ips-ca-icon-glyph-size: 22px;
	--ips-ca-name-align: left;
	--ips-ca-anim-duration: 450ms;

	display: flex;
	align-items: stretch;
	width: 100%;
	height: var(--ips-ca-locked-height, var(--ips-ca-height));
	gap: var(--ips-ca-gap);
	font-family: inherit;
}

.ips-h-accordion__item {
	position: relative;
	flex: var(--ips-ca-normal-grow, 1) 1 0;
	min-width: 70px;
	background: var(--ips-ca-collapsed-bg);
	border-radius: var(--ips-ca-radius);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 22px 14px;
	transition: flex 0.55s cubic-bezier(.4,0,.2,1), background 0.4s ease, box-shadow 0.3s ease;
	overflow: hidden;
}

.ips-h-accordion__item.is-active {
	flex: var(--ips-ca-expanded-grow) 1 0;
	align-items: flex-start;
	padding: 20px;
}

.ips-h-accordion__icon {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ips-ca-icon-size);
	height: var(--ips-ca-icon-size);
	margin: 0 auto;
	border-radius: 50%;
	color: #fff;
	transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ips-h-accordion__icon svg,
.ips-h-accordion__icon i,
.ips-h-accordion__icon img {
	color: inherit;
	fill: currentColor;
	width: var(--ips-ca-icon-glyph-size);
	height: var(--ips-ca-icon-glyph-size);
	font-size: var(--ips-ca-icon-glyph-size);
	object-fit: contain;
	display: block;
}

/* Icon vertical position (independent of the label's position) */
.ips-icon-pos-top .ips-h-accordion__icon {
	top: var(--ips-ca-anchor-top, 22px);
}
.ips-icon-pos-middle .ips-h-accordion__icon {
	top: 50%;
	transform: translateY(-50%);
}
.ips-icon-pos-bottom .ips-h-accordion__icon {
	bottom: var(--ips-ca-anchor-bottom, 22px);
}

.ips-h-accordion__item.is-active .ips-h-accordion__icon {
	display: none;
}

.ips-h-accordion__label {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	text-align: var(--ips-ca-name-align, left);
}

/* Item name (label) vertical position (independent of the icon's position) */
.ips-label-pos-top .ips-h-accordion__label {
	top: var(--ips-ca-anchor-top, 22px);
}
.ips-label-pos-middle .ips-h-accordion__label {
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
}
.ips-label-pos-bottom .ips-h-accordion__label {
	bottom: var(--ips-ca-anchor-bottom, 22px);
}

.ips-h-accordion__item.is-active .ips-h-accordion__label {
	display: none;
}

.ips-h-accordion__media {
	display: none;
	width: 100%;
	height: 220px;
	border-radius: 16px;
	overflow: hidden;
	flex: 0 0 auto;
}
.ips-h-accordion__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ips-h-accordion__item.is-active .ips-h-accordion__media {
	flex: 0 0 auto;
}

.ips-h-accordion__body {
	display: none;
	width: 100%;
	padding-top: 18px;
}

.ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-h-accordion__item.is-active .ips-h-accordion__body {
	display: block;
}

.ips-h-accordion__item.is-active .ips-h-accordion__body {
	flex: 0 0 auto;
}

.ips-h-accordion__expanded-icon {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: flex-start;
}
.ips-h-accordion__expanded-icon svg,
.ips-h-accordion__expanded-icon i,
.ips-h-accordion__expanded-icon img {
	width: 28px;
	height: 28px;
	font-size: 28px;
	fill: #1e9be9;
	color: #1e9be9;
	object-fit: contain;
	display: block;
}

.ips-h-accordion__body h3 {
	margin: 0;
	font-size: 19px;
	text-align: var(--ips-ca-name-align, left);
}

.ips-h-accordion__body p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
}

.ips-h-accordion__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ips-h-accordion__tag {
	font-size: 12.5px;
	border: 1px solid #e2e2e4;
	border-radius: 999px;
	padding: 6px 14px;
}

.ips-h-accordion__button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: fit-content;
	max-width: 100%;
	margin-top: 20px;
	padding: 14px 10px 14px 24px;
	border-radius: 999px;
	background: #1e9be9;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
	transition: background 0.2s ease, color 0.2s ease;
}

.ips-h-accordion__button-text {
	white-space: nowrap;
}

.ips-h-accordion__button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	color: #1e9be9;
}
.ips-h-accordion__button-icon svg,
.ips-h-accordion__button-icon i {
	width: 14px;
	height: 14px;
	font-size: 14px;
	fill: currentColor;
	color: inherit;
	object-fit: contain;
	display: block;
}

.ips-h-accordion__item:focus-visible {
	outline: 2px solid #1e9be9;
	outline-offset: 2px;
}

/* Mobile-stacking rules are generated per-widget-instance in
   includes/class-widget.php render(), scoped to each widget's own
   element ID and using that instance's "Switch to mobile layout
   below" control value as the @media threshold. That can't be done
   with a static rule here, since CSS custom properties/Elementor
   selectors can't populate an @media condition, and different
   instances of this widget on the same page can each choose their
   own breakpoint. */

/* ------------------------------------------------------------------ */
/* ENTRANCE ANIMATIONS                                                 */
/* Played on an item's content the moment it becomes active. Choice   */
/* of style comes from Style > Animation > "Entrance Animation",      */
/* which adds one of the .ips-anim-* classes below to the widget.     */
/* Default (no class matches, i.e. "None") = no animation, instant.   */
/* ------------------------------------------------------------------ */

@keyframes ipsCaFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ipsCaFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ipsCaFadeDown {
	from { opacity: 0; transform: translateY(-14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ipsCaFadeScale {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes ipsCaZoomIn {
	from { opacity: 0; transform: scale(0.82); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes ipsCaSlideIn {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes ipsCaBlurIn {
	from { opacity: 0; filter: blur(6px); }
	to   { opacity: 1; filter: blur(0); }
}

.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-fade .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaFadeIn var(--ips-ca-anim-duration) ease both;
}

.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-fade-up .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaFadeUp var(--ips-ca-anim-duration) cubic-bezier(.22,.61,.36,1) both;
}

.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-fade-scale .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaFadeScale var(--ips-ca-anim-duration) cubic-bezier(.22,.61,.36,1) both;
}

.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-fade-down .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaFadeDown var(--ips-ca-anim-duration) cubic-bezier(.22,.61,.36,1) both;
}

.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-zoom .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaZoomIn var(--ips-ca-anim-duration) cubic-bezier(.22,.61,.36,1) both;
}

.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-blur .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaBlurIn var(--ips-ca-anim-duration) ease both;
}

.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__media,
.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__body h3,
.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__body p,
.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__button,
.ips-anim-slide .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation: ipsCaSlideIn var(--ips-ca-anim-duration) cubic-bezier(.22,.61,.36,1) both;
}

/* Stagger: each piece reveals slightly after the one before it.
   Only applied when Style > Animation > "Stagger..." is On. Off (or
   the class not present) leaves every piece animating at once. */
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__media {
	animation-delay: 0ms;
}
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon {
	animation-delay: calc(var(--ips-ca-anim-duration) * 0.15);
}
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__body h3 {
	animation-delay: calc(var(--ips-ca-anim-duration) * 0.28);
}
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__body p {
	animation-delay: calc(var(--ips-ca-anim-duration) * 0.40);
}
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__tags {
	animation-delay: calc(var(--ips-ca-anim-duration) * 0.52);
}
.ips-stagger-yes .ips-h-accordion__item.is-active .ips-h-accordion__button {
	animation-delay: calc(var(--ips-ca-anim-duration) * 0.64);
}

@media (prefers-reduced-motion: reduce) {
	.ips-h-accordion__item.is-active .ips-h-accordion__media,
	.ips-h-accordion__item.is-active .ips-h-accordion__expanded-icon,
	.ips-h-accordion__item.is-active .ips-h-accordion__body h3,
	.ips-h-accordion__item.is-active .ips-h-accordion__body p,
	.ips-h-accordion__item.is-active .ips-h-accordion__tags,
	.ips-h-accordion__item.is-active .ips-h-accordion__button {
		animation: none !important;
	}
}

/* While frontend.js is measuring every item's needed height (to lock
   the accordion to one consistent height), transitions/animations are
   suppressed so the rapid class swapping never paints a visible
   flicker on the live widget. */
.ips-ca-measuring,
.ips-ca-measuring * {
	transition: none !important;
	animation: none !important;
}