/**
 * Image Accordion Assist — front-end styles.
 *
 * Flex-based accordion (horizontal or vertical). Each child wrapper is a flex
 * item sized by --dia-item-size, which accordion.js sets per item.
 *
 * @author Divi Assist
 */

/* ----- Root + track ------------------------------------------------------ */
.dia-image-accordion-assist {
	width: 100%;
}

.dia-image-accordion {
	display: flex;
	gap: var( --dia-item-gap, 0px );
	width: 100%;
	height: var( --dia-accordion-height, 500px );
	min-height: var( --dia-accordion-min-height, 350px );
	border-radius: inherit;
	overflow: hidden;
}

.dia-accordion-layout-horizontal .dia-image-accordion {
	flex-direction: row;
}

.dia-accordion-layout-vertical .dia-image-accordion {
	flex-direction: column;
}

/* ----- Flex items (the Divi child-module wrappers) ----------------------- */
.dia-image-accordion > * {
	flex: 1 1 var( --dia-item-size, 12% );
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	border-radius: inherit;
	cursor: pointer;
	transition:
		flex-basis var( --dia-transition-duration, 600ms ) var( --dia-transition-easing, ease ),
		flex-grow var( --dia-transition-duration, 600ms ) var( --dia-transition-easing, ease ),
		opacity var( --dia-transition-duration, 600ms ) var( --dia-transition-easing, ease ),
		filter var( --dia-transition-duration, 600ms ) var( --dia-transition-easing, ease );
}

.dia-image-accordion > .is-inactive {
	opacity: var( --dia-inactive-opacity, 1 );
	filter: blur( var( --dia-inactive-blur, 0px ) ) grayscale( var( --dia-inactive-grayscale, 0% ) );
}

.dia-image-accordion > .dia-accordion-item-disabled {
	display: none;
}

/* ----- Item inner -------------------------------------------------------- */
.dia-image-accordion-item {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	outline: none;
}

/* ----- Image ------------------------------------------------------------- */
.dia-accordion-image-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
}

.dia-accordion-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: var( --dia-image-fit, cover );
	object-position: var( --dia-image-position, center );
	transform: scale( var( --dia-image-scale, 1 ) );
	transition: transform var( --dia-image-transition, 600ms ) var( --dia-transition-easing, ease );
}

.dia-image-accordion > .is-active .dia-accordion-image-wrap img {
	transform: scale( var( --dia-active-image-scale, 1.08 ) );
}

/* ----- Overlay ----------------------------------------------------------- */
.dia-accordion-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var( --dia-overlay-color, linear-gradient( to top, rgba( 0, 0, 0, 0.65 ) 0%, rgba( 0, 0, 0, 0.05 ) 65% ) );
	mix-blend-mode: var( --dia-overlay-blend, normal );
	transition: background var( --dia-transition-duration, 600ms ) ease, opacity 0.4s ease;
}

.dia-image-accordion > .is-active .dia-accordion-overlay {
	background: var( --dia-active-overlay-color, linear-gradient( to top, rgba( 0, 0, 0, 0.55 ) 0%, rgba( 0, 0, 0, 0.02 ) 60% ) );
}

.dia-image-accordion > .is-inactive .dia-accordion-overlay {
	background: var( --dia-inactive-overlay-color, rgba( 0, 0, 0, 0.35 ) );
}

/* ----- Content box ------------------------------------------------------- */
/* Fills the panel and positions the content box (9-way) via justify/align. */
.dia-accordion-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: var( --dia-content-align, flex-start );
	justify-content: var( --dia-content-justify, flex-end );
	padding: var( --dia-content-pad, 30px );
	box-sizing: border-box;
	pointer-events: none;
}

.dia-accordion-content-box {
	display: flex;
	flex-direction: column;
	align-items: var( --dia-content-align, flex-start );
	gap: 10px;
	max-width: var( --dia-content-max-width, 100% );
	padding: var( --dia-content-padding, 0px );
	color: #ffffff;
	text-align: var( --dia-content-text-align, left );
	background: var( --dia-content-bg, transparent );
	border-radius: var( --dia-content-radius, 0px );
	-webkit-backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	pointer-events: auto;
	box-sizing: border-box;
}

/* Content reveal: hidden on inactive panels, revealed when active. */
.dia-image-accordion > *:not( .is-active ) .dia-accordion-content {
	opacity: 0;
	transform: translateY( 16px );
	transition:
		opacity var( --dia-reveal-duration, 500ms ) var( --dia-transition-easing, ease ) var( --dia-reveal-delay, 60ms ),
		transform var( --dia-reveal-duration, 500ms ) var( --dia-transition-easing, ease ) var( --dia-reveal-delay, 60ms );
}

.dia-image-accordion > .is-active .dia-accordion-content {
	opacity: 1;
	transform: none;
	transition:
		opacity var( --dia-reveal-duration, 500ms ) var( --dia-transition-easing, ease ) var( --dia-reveal-delay, 120ms ),
		transform var( --dia-reveal-duration, 500ms ) var( --dia-transition-easing, ease ) var( --dia-reveal-delay, 120ms );
}

/* Always-visible / show-on-inactive overrides. */
.dia-accordion-content-always .dia-accordion-content,
.dia-accordion-content-inactive .dia-accordion-content {
	opacity: 1 !important;
	transform: none !important;
}

/* ----- Content pieces ---------------------------------------------------- */
.dia-accordion-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	color: #ffffff;
	background: #2563eb;
	border-radius: 999px;
}

.dia-accordion-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

/* Icon color comes from the native Background panel (color or gradient), painted
   onto the glyph via background-clip:text. The default background keeps the icon
   visible; `color` is the fallback for browsers without clip support. */
.dia-accordion-icon .et-pb-icon {
	font-family: 'ETmodules' !important;
	font-size: var( --dia-icon-size, 42px );
	line-height: 1;
	color: #ffffff;
	background: #ffffff;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Base title/description colour is the native Title/Description Font group; the
   values below are the defaults, and the active/inactive states override them. */
.dia-accordion-title {
	margin: 0;
	color: #ffffff;
	font-size: 22px;
	line-height: 1.25;
}

.dia-accordion-description {
	margin: 0;
	color: rgba( 255, 255, 255, 0.9 );
	font-size: 15px;
	line-height: 1.55;
}

.dia-accordion-description :last-child { margin-bottom: 0; }

.dia-accordion-content .et_pb_button_wrapper { margin-top: 6px; }

/* Keep the whole panel keyboard-focusable and visible on focus. */
.dia-image-accordion-item:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.85 );
	outline-offset: -2px;
}

/* ----- Design hooks (parent Design tab) ---------------------------------- */
/* Accordion layout. */
.dia-image-accordion-assist { max-width: var( --dia-accordion-max-width, 100% ); }
.dia-accordion-align-center { margin-left: auto; margin-right: auto; }
.dia-accordion-align-right { margin-left: auto; }
.dia-image-accordion > * { border-radius: var( --dia-item-radius, 0px ); }

/* Image opacity + inactive filter presets. */
.dia-accordion-image-wrap img { opacity: var( --dia-image-opacity, 1 ); }
.dia-image-accordion > .is-inactive .dia-accordion-image-wrap img { transform: scale( var( --dia-inactive-image-scale, 1 ) ); }
.dia-accordion-ifilter-grayscale .is-inactive .dia-accordion-image-wrap img { filter: grayscale( 100% ); }
.dia-accordion-ifilter-sepia .is-inactive .dia-accordion-image-wrap img { filter: sepia( 80% ); }
.dia-accordion-ifilter-blur .is-inactive .dia-accordion-image-wrap img { filter: blur( 3px ); }
.dia-accordion-ifilter-darken .is-inactive .dia-accordion-image-wrap img { filter: brightness( 0.6 ); }
.dia-accordion-ifilter-desaturate .is-inactive .dia-accordion-image-wrap img { filter: saturate( 0.4 ); }

/* Overlay enable/disable. */
.dia-accordion-no-overlay .dia-accordion-overlay { display: none; }

/* Active / inactive item state. */
.dia-image-accordion > .is-active { opacity: var( --dia-active-opacity, 1 ); transform: scale( var( --dia-active-scale, 1 ) ); z-index: 2; }
.dia-image-accordion > .is-inactive { opacity: var( --dia-inactive-opacity, 1 ); }
.dia-image-accordion > .is-active .dia-accordion-content-box { opacity: var( --dia-active-content-opacity, 1 ); }
.dia-accordion-content-inactive.is-inactive .dia-accordion-content-box,
.dia-image-accordion > .is-inactive .dia-accordion-content-box { opacity: var( --dia-inactive-content-opacity, 1 ); }

/* Icon box. */
.dia-accordion-icon {
	background: var( --dia-icon-bg, transparent );
	padding: var( --dia-icon-padding, 0px );
	border-radius: var( --dia-icon-radius, 0px );
	margin-bottom: var( --dia-icon-margin, 4px );
}

/* Badge colors + position. */
.dia-accordion-badge {
	color: var( --dia-badge-color, #ffffff );
	background: var( --dia-badge-bg, #2563eb );
	padding: var( --dia-badge-padding, 4px 12px );
	border-radius: var( --dia-badge-radius, 999px );
}
.dia-accordion-badge-top-right .dia-accordion-badge { left: auto; right: 16px; }
.dia-accordion-badge-bottom-left .dia-accordion-badge { top: auto; bottom: 16px; }
.dia-accordion-badge-bottom-right .dia-accordion-badge { top: auto; bottom: 16px; left: auto; right: 16px; }
.dia-accordion-badge-inline .dia-accordion-badge { position: static; align-self: var( --dia-content-align, flex-start ); }

/* Optional per-state title / description colours (Design tab); unset keeps the
   base colour above. */
.dia-image-accordion > .is-active .dia-accordion-title { color: var( --dia-title-active-color, #ffffff ); }
.dia-image-accordion > .is-inactive .dia-accordion-title { color: var( --dia-title-inactive-color, #ffffff ); }
.dia-image-accordion > .is-active .dia-accordion-description { color: var( --dia-desc-active-color, rgba( 255, 255, 255, 0.9 ) ); }
.dia-image-accordion > .is-inactive .dia-accordion-description { color: var( --dia-desc-inactive-color, rgba( 255, 255, 255, 0.9 ) ); }

/* Content reveal animation presets (applied to inactive → active). */
.dia-accordion-reveal-fade > *:not( .is-active ) .dia-accordion-content { transform: none; }
.dia-accordion-reveal-fade_down > *:not( .is-active ) .dia-accordion-content { transform: translateY( -16px ); }
.dia-accordion-reveal-fade_left > *:not( .is-active ) .dia-accordion-content { transform: translateX( 16px ); }
.dia-accordion-reveal-fade_right > *:not( .is-active ) .dia-accordion-content { transform: translateX( -16px ); }
.dia-accordion-reveal-zoom_in > *:not( .is-active ) .dia-accordion-content { transform: scale( 0.9 ); }
.dia-accordion-reveal-blur_in > *:not( .is-active ) .dia-accordion-content { filter: blur( 6px ); }
.dia-accordion-reveal-none > *:not( .is-active ) .dia-accordion-content { transform: none; opacity: 1; }

/* ----- Mobile fallback --------------------------------------------------- */
.dia-image-accordion-assist.dia-is-mobile.dia-mobile-stacked .dia-image-accordion,
.dia-image-accordion-assist.dia-is-mobile.dia-mobile-vertical .dia-image-accordion {
	flex-direction: column;
	height: auto;
	min-height: 0;
}

.dia-is-mobile.dia-mobile-stacked .dia-image-accordion > *,
.dia-is-mobile.dia-mobile-vertical .dia-image-accordion > * {
	flex: none;
	width: 100%;
	height: var( --dia-mobile-item-height, 240px );
}

.dia-is-mobile.dia-mobile-stacked .dia-accordion-content,
.dia-is-mobile.dia-mobile-vertical .dia-accordion-content {
	opacity: 1 !important;
	transform: none !important;
}

.dia-is-mobile.dia-mobile-scroll .dia-image-accordion {
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.dia-is-mobile.dia-mobile-scroll .dia-image-accordion > * {
	flex: 0 0 80%;
	scroll-snap-align: start;
}

.dia-is-mobile.dia-mobile-scroll .dia-accordion-content { opacity: 1 !important; transform: none !important; }

/* ----- Reduced motion ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-reduce-motion .dia-image-accordion > *,
	.dia-reduce-motion .dia-accordion-image-wrap img,
	.dia-reduce-motion .dia-accordion-content,
	.dia-reduce-motion .dia-accordion-overlay {
		transition: none !important;
	}
	.dia-reduce-motion .dia-image-accordion > .is-active .dia-accordion-image-wrap img {
		transform: none;
	}
}

/* Default heading-level sizes for the title/caption (overridable via the
   Title font group in the Design tab). Applies to whichever h1-h6 tag the
   chosen heading level renders. */
h1.dia-accordion-title { font-size: 37px; }
h2.dia-accordion-title { font-size: 29px; }
h3.dia-accordion-title { font-size: 22px; }
h4.dia-accordion-title { font-size: 19px; }
h5.dia-accordion-title { font-size: 16px; }
h6.dia-accordion-title { font-size: 14px; }