/**
 * Image Stack Assist — front-end styles.
 *
 * Cards are stacked absolutely inside .dia-image-stack; stack.js sets each card's
 * transform. Grid layout uses CSS grid; mobile falls back to a scroll/grid view.
 *
 * @author Divi Assist
 */

/* ----- Root + stack ------------------------------------------------------ */
.dia-image-stack-assist {
	position: relative;
	width: 100%;
	max-width: var( --dia-stack-max-width, 600px );
}

.dia-stack-align-center { margin-left: auto; margin-right: auto; }
.dia-stack-align-right { margin-left: auto; }

.dia-image-stack {
	position: relative;
	width: var( --dia-stack-width, 100% );
	height: var( --dia-stack-height, 420px );
	perspective: var( --dia-stack-perspective, 1000px );
	transform-style: preserve-3d;
}

/* Neutralize the Divi child-module wrappers so cards position against the stack.
   Divi gives .et_pb_module `position: relative` with zero height; forcing it to
   static means the absolute cards size against .dia-image-stack, not the wrapper. */
.dia-image-stack > * {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* ----- Card item --------------------------------------------------------- */
.dia-image-stack-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: var( --dia-stack-origin, center );
	backface-visibility: hidden;
	transition:
		transform var( --dia-stack-transition, 500ms ) var( --dia-stack-easing, ease ),
		opacity var( --dia-stack-transition, 500ms ) var( --dia-stack-easing, ease ),
		filter var( --dia-stack-transition, 500ms ) var( --dia-stack-easing, ease );
	will-change: transform, opacity;
	outline: none;
}

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

/* Pure-CSS static stack (fallback + first paint). stack.js overrides these with
   inline transforms on the front end; in the Visual Builder — where React re-renders
   wipe inline styles — these keep the cards fanned into a readable stack. */
.dia-image-stack > *:nth-child( 1 ) .dia-image-stack-item { transform: none; z-index: 20; }
.dia-image-stack > *:nth-child( 2 ) .dia-image-stack-item { transform: translate( var( --dia-offset-x, 24px ), var( --dia-offset-y, 18px ) ) rotate( var( --dia-rotation, 4deg ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) ) ); opacity: calc( 1 - var( --dia-opacity-step, 0.12 ) ); z-index: 19; }
.dia-image-stack > *:nth-child( 3 ) .dia-image-stack-item { transform: translate( calc( var( --dia-offset-x, 24px ) * 2 ), calc( var( --dia-offset-y, 18px ) * 2 ) ) rotate( calc( var( --dia-rotation, 4deg ) * 2 ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) * 2 ) ); opacity: calc( 1 - var( --dia-opacity-step, 0.12 ) * 2 ); z-index: 18; }
.dia-image-stack > *:nth-child( 4 ) .dia-image-stack-item { transform: translate( calc( var( --dia-offset-x, 24px ) * 3 ), calc( var( --dia-offset-y, 18px ) * 3 ) ) rotate( calc( var( --dia-rotation, 4deg ) * 3 ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) * 3 ) ); opacity: calc( 1 - var( --dia-opacity-step, 0.12 ) * 3 ); z-index: 17; }
.dia-image-stack > *:nth-child( 5 ) .dia-image-stack-item { transform: translate( calc( var( --dia-offset-x, 24px ) * 4 ), calc( var( --dia-offset-y, 18px ) * 4 ) ) rotate( calc( var( --dia-rotation, 4deg ) * 4 ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) * 4 ) ); opacity: calc( 1 - var( --dia-opacity-step, 0.12 ) * 4 ); z-index: 16; }
.dia-image-stack > *:nth-child( 6 ) .dia-image-stack-item { transform: translate( calc( var( --dia-offset-x, 24px ) * 5 ), calc( var( --dia-offset-y, 18px ) * 5 ) ) rotate( calc( var( --dia-rotation, 4deg ) * 5 ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) * 5 ) ); opacity: calc( 1 - var( --dia-opacity-step, 0.12 ) * 5 ); z-index: 15; }
.dia-image-stack > *:nth-child( n + 7 ) .dia-image-stack-item { transform: translate( calc( var( --dia-offset-x, 24px ) * 6 ), calc( var( --dia-offset-y, 18px ) * 6 ) ) rotate( calc( var( --dia-rotation, 4deg ) * 6 ) ) scale( calc( 1 - var( --dia-scale-step, 0.05 ) * 6 ) ); opacity: 0; z-index: 14; }

/* Mobile-flow layouts must not inherit the stacked transforms. */
.dia-is-mobile.dia-mobile-scroll-cards .dia-image-stack > * .dia-image-stack-item,
.dia-is-mobile.dia-mobile-grid .dia-image-stack > * .dia-image-stack-item {
	transform: none !important;
	opacity: 1 !important;
	z-index: auto !important;
}

.dia-stack-card {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: var( --dia-card-overflow, hidden );
	background: #ffffff;
	box-shadow: 0 18px 44px -14px rgba( 9, 12, 25, 0.45 );
	cursor: var( --dia-card-cursor, pointer );
}

.dia-image-stack-item.is-active .dia-stack-card {
	box-shadow: 0 26px 60px -16px rgba( 9, 12, 25, 0.55 );
}

/* ----- Image ------------------------------------------------------------- */
.dia-stack-image-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: inherit;
}

.dia-stack-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: var( --dia-image-fit, cover );
	object-position: var( --dia-image-position, center );
	opacity: var( --dia-image-opacity, 1 );
	transform: scale( var( --dia-image-scale, 1 ) );
	transition: transform var( --dia-stack-transition, 500ms ) var( --dia-stack-easing, ease ), filter 0.4s ease;
}

.dia-stack-card:hover .dia-stack-image-wrap img {
	transform: scale( var( --dia-image-hover-scale, 1.05 ) );
}

.dia-image-stack-item.is-active .dia-stack-image-wrap img {
	transform: scale( var( --dia-image-active-scale, 1.03 ) );
}

/* ----- Overlay (off by default; parent enables it) ----------------------- */
.dia-stack-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	display: none;
	border-radius: inherit;
	background: var( --dia-overlay-color, rgba( 0, 0, 0, 0.25 ) );
	mix-blend-mode: var( --dia-overlay-blend, normal );
	transition: background 0.4s ease;
}

.dia-stack-has-overlay .dia-stack-overlay { display: block; }
.dia-stack-has-overlay .dia-image-stack-item.is-active .dia-stack-overlay { background: var( --dia-active-overlay-color, rgba( 0, 0, 0, 0.15 ) ); }
.dia-stack-has-overlay .dia-image-stack-item.is-inactive .dia-stack-overlay { background: var( --dia-inactive-overlay-color, rgba( 0, 0, 0, 0.35 ) ); }

/* ----- Content ----------------------------------------------------------- */
.dia-stack-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, 24px );
	box-sizing: border-box;
	pointer-events: none;
}

/* A soft gradient keeps text readable when no overlay is used. */
.dia-stack-content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --dia-content-scrim, linear-gradient( to top, rgba( 0, 0, 0, 0.6 ) 0%, rgba( 0, 0, 0, 0 ) 55% ) );
	border-radius: inherit;
	pointer-events: none;
}

.dia-stack-content-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: var( --dia-content-max-width, 100% );
	-webkit-backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	backdrop-filter: blur( var( --dia-content-blur, 0px ) );
	color: #ffffff;
	text-align: var( --dia-content-text-align, left );
	pointer-events: auto;
	align-items: var( --dia-content-align, flex-start );
}

/* Show content only on the active card. */
.dia-stack-content-active-only:not( .is-active ) .dia-stack-content { opacity: 0; }

/* Content reveal on the active card. */
.dia-image-stack-item:not( .is-active ) .dia-stack-content-box {
	opacity: var( --dia-inactive-content-opacity, 1 );
}
.dia-stack-reveal-fade_up .dia-image-stack-item:not( .is-active ) .dia-stack-content-box { transform: translateY( 14px ); }
.dia-stack-reveal-fade_down .dia-image-stack-item:not( .is-active ) .dia-stack-content-box { transform: translateY( -14px ); }
.dia-stack-reveal-zoom_in .dia-image-stack-item:not( .is-active ) .dia-stack-content-box { transform: scale( 0.92 ); }
.dia-image-stack-item .dia-stack-content-box {
	transition: opacity var( --dia-content-reveal-duration, 400ms ) var( --dia-stack-easing, ease ), transform var( --dia-content-reveal-duration, 400ms ) var( --dia-stack-easing, ease );
}
.dia-image-stack-item.is-active .dia-stack-content-box { opacity: 1; transform: none; }

.dia-stack-badge {
	display: inline-block;
	align-self: var( --dia-content-align, flex-start );
	padding: var( --dia-badge-padding, 4px 12px );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
	background: #2563eb;
	border-radius: 999px;
	margin-bottom: 6px;
}

.dia-stack-title { margin: 0; color: #ffffff; font-size: 22px; line-height: 1.25; }
.dia-stack-description { margin: 0; color: rgba( 255, 255, 255, 0.9 ); font-size: 15px; line-height: 1.55; }
.dia-stack-description :last-child { margin-bottom: 0; }
.dia-stack-content .et_pb_button_wrapper { margin-top: 8px; }

.dia-image-stack-item:focus-visible .dia-stack-card { outline: 2px solid rgba( 255, 255, 255, 0.9 ); outline-offset: 3px; }

/* ----- Polaroid frame ---------------------------------------------------- */
.dia-stack-layout-polaroid .dia-stack-card {
	background: #ffffff;
	padding: 12px 12px 44px;
	border-radius: 6px;
}
.dia-stack-layout-polaroid .dia-stack-image-wrap { inset: 12px 12px 44px; border-radius: 2px; }

/* ----- Inactive state (blur / grayscale / opacity) ----------------------- */
.dia-image-stack-item.is-inactive {
	filter: blur( var( --dia-inactive-blur, 0px ) ) grayscale( var( --dia-inactive-grayscale, 0% ) );
}
.dia-stack-ifilter-grayscale .dia-image-stack-item:not( .is-active ) .dia-stack-image-wrap img { filter: grayscale( 100% ); }
.dia-stack-ifilter-sepia .dia-image-stack-item:not( .is-active ) .dia-stack-image-wrap img { filter: sepia( 80% ); }
.dia-stack-ifilter-blur .dia-image-stack-item:not( .is-active ) .dia-stack-image-wrap img { filter: blur( 3px ); }
.dia-stack-ifilter-desaturate .dia-image-stack-item:not( .is-active ) .dia-stack-image-wrap img { filter: saturate( 0.4 ); }
.dia-stack-ifilter-darken .dia-image-stack-item:not( .is-active ) .dia-stack-image-wrap img { filter: brightness( 0.65 ); }

/* ----- Entrance (before animate-in) -------------------------------------- */
.dia-stack-entrance-none .dia-image-stack-item { opacity: 1; }
.dia-image-stack-assist[data-anim-trigger] .dia-image-stack:not( .is-animated-in ) .dia-image-stack-item { }

/* ----- Design hooks (parent Design tab) ---------------------------------- */
/* Active card shadow + border. */
.dia-image-stack-item.is-active .dia-stack-card {
	outline: var( --dia-active-border-width, 0px ) solid var( --dia-active-border, transparent );
	outline-offset: -1px;
}

/* ----- Autoplay progress ------------------------------------------------- */
.dia-stack-progress {
	position: relative;
	margin-top: 14px;
	height: var( --dia-progress-height, 3px );
	width: 100%;
	background: rgba( 255, 255, 255, 0.25 );
	border-radius: 999px;
	overflow: hidden;
}
.dia-stack-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: #ffffff;
}

/* ----- Mobile fallback --------------------------------------------------- */
.dia-image-stack-assist.dia-is-mobile.dia-mobile-scroll-cards .dia-image-stack {
	display: flex;
	flex-direction: row;
	gap: 16px;
	height: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	perspective: none;
	-webkit-overflow-scrolling: touch;
}
.dia-is-mobile.dia-mobile-scroll-cards .dia-image-stack > * { position: relative !important; flex: 0 0 82%; scroll-snap-align: center; }
.dia-is-mobile.dia-mobile-scroll-cards .dia-image-stack-item { position: relative; width: 100%; height: var( --dia-stack-height, 420px ); transform: none !important; opacity: 1 !important; filter: none !important; }

.dia-image-stack-assist.dia-is-mobile.dia-mobile-grid .dia-image-stack {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 14px;
	height: auto;
	perspective: none;
}
.dia-is-mobile.dia-mobile-grid .dia-image-stack > * { position: relative !important; }
.dia-is-mobile.dia-mobile-grid .dia-image-stack-item { position: relative; width: 100%; height: 240px; transform: none !important; opacity: 1 !important; filter: none !important; }

.dia-is-mobile.dia-mobile-single .dia-image-stack-item:not( .is-active ) { pointer-events: none; }

/* ----- Reduced motion ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-reduce-motion .dia-image-stack-item,
	.dia-reduce-motion .dia-stack-image-wrap img,
	.dia-reduce-motion .dia-stack-content-box {
		transition: none !important;
	}
}

/* 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-stack-title { font-size: 37px; }
h2.dia-stack-title { font-size: 29px; }
h3.dia-stack-title { font-size: 22px; }
h4.dia-stack-title { font-size: 19px; }
h5.dia-stack-title { font-size: 16px; }
h6.dia-stack-title { font-size: 14px; }