/*
 * NAZADA Site Enhancements: Divi Pixel Image Accordion companion fixes.
 *
 * The original Divi Pixel content wrapper and its entrance animation are left
 * untouched. A separate, non-interactive copy of the title is shown only while
 * an accordion panel is collapsed. This prevents descriptions and buttons from
 * reflowing visibly while the panel is expanding.
 */

/* The cloned collapsed-title layer is absolutely positioned inside the same
 * Divi Pixel alignment wrapper, so it does not change the module's layout. */
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi_image_accordion_child_content_wrapper {
	position: relative;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .nazada-dipi-collapsed-title-wrap {
	position: absolute;
	inset: 0;
	z-index: 21;
	display: flex;
	box-sizing: border-box;
	padding: inherit;
	pointer-events: none;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease;
}

/* Match the horizontal and vertical alignment selected in the Divi module. */
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-horizontal-left > .nazada-dipi-collapsed-title-wrap {
	justify-content: flex-start;
	text-align: left;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-horizontal-center > .nazada-dipi-collapsed-title-wrap {
	justify-content: center;
	text-align: center;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-horizontal-right > .nazada-dipi-collapsed-title-wrap {
	justify-content: flex-end;
	text-align: right;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-vertical-top > .nazada-dipi-collapsed-title-wrap {
	align-items: flex-start;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-vertical-center > .nazada-dipi-collapsed-title-wrap {
	align-items: center;
}

body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi-align-vertical-bottom > .nazada-dipi-collapsed-title-wrap {
	align-items: flex-end;
}

/* Reuse Divi Pixel's title class so all title typography and responsive design
 * settings apply to the collapsed copy too. */
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .nazada-dipi-collapsed-title {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
}

/* As the panel activates, hand the title back to Divi Pixel's original content
 * animation. The rest of the content remains governed entirely by Divi Pixel. */
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi_image_accordion_child.dipi-active .nazada-dipi-collapsed-title-wrap {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease 0.2s, visibility 0s linear 0.35s;
}

/* Preserve the normal configured overlay/gradient on the expanded panel.
 * A separately configured hover overlay can still remain layered above it. */
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi_image_accordion_child:hover .dipi_image_accordion_bg.dipi_hide_on_hover,
body.nazada-dipi-image-accordion-fixes .dipi_image_accordion .dipi_image_accordion_child.dipi-active .dipi_image_accordion_bg.dipi_hide_on_hover {
	opacity: 1 !important;
}