/* Epoch Custom Accordion — base layout */

.epa-accordion {
	--epa-image-duration: 400ms;
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 40px;
}

.epa-accordion.epa-no-images {
	display: block;
}

.epa-accordion.epa-pos-top {
	flex-direction: column;
	align-items: stretch;
}

.epa-accordion.epa-pos-top .epa-image-panel {
	width: 100%;
	flex: 0 0 auto;
}

.epa-accordion.epa-pos-right {
	flex-direction: row-reverse;
}

/* --- Image panel (left/right/top layouts) --- */
/* Static 50/50 default. Elementor's own generated CSS for the "Image Column
   Width" control overrides this directly and more specifically (it targets
   .epa-accordion.epa-pos-left/.epa-pos-right .epa-image-panel, a higher
   specificity than this bare-class rule, plus !important on both sides) —
   so whatever the widget's control is set to always wins here. */
.epa-image-panel {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
	overflow: hidden;
	border-radius: 4px;
}

/* Stretch mode: images stack absolutely and crossfade to fill the panel */
.epa-image-panel[data-stretch="yes"] {
	min-height: 320px;
}

.epa-image-panel[data-stretch="yes"] .epa-image-panel__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--epa-image-duration) ease;
}

.epa-image-panel[data-stretch="yes"] .epa-image-panel__img.is-active {
	opacity: 1;
	position: relative;
	z-index: 1;
}

/* Natural-size mode (default): the column width still stays fixed, but the
   image itself displays at its own dimensions inside that column — capped
   by max-width so it never overflows — and can be left/center/right aligned
   within the column via the Image Alignment control. */
.epa-image-panel[data-stretch="no"] {
	overflow: visible;
	border-radius: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.epa-image-panel__display {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	transition: opacity var(--epa-image-duration) ease;
}

/* --- Items list --- */
.epa-items {
	flex: 1 1 auto !important;
	min-width: 0;
}

/* Grid: number sits in column 1 next to the title (row 1); the subtext
   sits in column 2, aligned under the TITLE rather than the number. */
.epa-item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: baseline;
	border-bottom: 1px solid #d9d9d9;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background-color 250ms ease, opacity 250ms ease;
	outline: none;
}

.epa-item__number {
	grid-column: 1;
	font-weight: 600;
	white-space: nowrap;
}

.epa-item__title {
	grid-column: 2;
	display: inline-block;
	transition: transform 300ms ease, color 250ms ease;
	transform-origin: left center;
}

/* Subtext reveal — collapsed by default, opens when .is-active. Placed in
   column 2 so its left edge lines up with the title, not the number. */
.epa-item__subtext-wrap {
	grid-column: 2;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 350ms ease, opacity 300ms ease;
}

.epa-item__subtext-wrap > .epa-item__subtext {
	overflow: hidden;
	min-height: 0;
}

.epa-item.is-active .epa-item__subtext-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
}

.epa-item__subtext p {
	margin: 0 0 0.6em;
}

.epa-item__subtext p:last-child {
	margin-bottom: 0;
}

/* --- Bottom button (per-item "show button when active") --- */
.epa-accordion-buttons {
	display: flex;
	justify-content: flex-start;
}

.epa-accordion-button {
	display: none;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.epa-accordion-button.is-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --- Mobile: hide the image panel entirely when the "mobile show images" switch is off --- */
.epa-accordion[data-mobile-images="no"].epa-mobile-mode .epa-image-panel {
	display: none !important;
}

/* --- Mobile layout adjustments --- */
.epa-accordion.epa-mobile-mode {
	flex-direction: column;
}

.epa-accordion.epa-mobile-mode .epa-image-panel {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	order: -1 !important;
	min-height: 220px;
	margin-bottom: 20px;
}

/* On mobile, natural-size images should still fill the full width instead of
   sitting at their small uploaded size — this only applies below the mobile
   breakpoint; desktop keeps whatever the "Stretch Image to Fill" setting is. */
.epa-accordion.epa-mobile-mode .epa-image-panel[data-stretch="no"] {
	position: relative;
	overflow: hidden;
	justify-content: flex-start;
}

.epa-accordion.epa-mobile-mode .epa-image-panel[data-stretch="no"] .epa-image-panel__display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
}

.epa-accordion.epa-mobile-mode .epa-items {
	order: 0 !important;
}

.epa-accordion.epa-mobile-mode.epa-pos-right .epa-image-panel {
	order: -1 !important;
}

/* Optional: put the number on its own line above the title on mobile,
   instead of beside it. Off by default — only applies when "Stack Number
   Above Title on Mobile" is turned on for this widget instance. */
.epa-accordion[data-stack-number="yes"].epa-mobile-mode .epa-item {
	display: block !important;
}

.epa-accordion[data-stack-number="yes"].epa-mobile-mode .epa-item__number {
	display: block;
	margin-bottom: 4px;
}

.epa-accordion[data-stack-number="yes"].epa-mobile-mode .epa-item__title {
	display: block;
}

@media (max-width: 1024px) {
	.epa-accordion {
		gap: 20px;
	}

	/* Safety net: even if JS hasn't added .epa-mobile-mode yet (or fails to
	   run at all — blocked script, caching issue, etc.), image still stacks
	   above the content at this default breakpoint via pure CSS. This mirrors
	   the JS-driven rules above and matches the JS default of 1024px; if you
	   set a custom "Switch to Tap Below" breakpoint in the widget, the JS
	   class still governs the exact cutoff, but this stays as a floor. */
	.epa-accordion:not(.epa-no-images) {
		flex-direction: column !important;
	}

	.epa-accordion:not(.epa-no-images) .epa-image-panel {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		order: -1 !important;
		margin-bottom: 20px;
	}

	.epa-accordion:not(.epa-no-images) .epa-image-panel[data-stretch="no"] {
		position: relative;
		overflow: hidden;
		min-height: 220px;
	}

	.epa-accordion:not(.epa-no-images) .epa-image-panel[data-stretch="no"] .epa-image-panel__display {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: cover;
	}

	.epa-accordion:not(.epa-no-images) .epa-items {
		order: 0 !important;
	}

	/* Pure-CSS fallback for the number-stacking option, same safety-net
	   pattern as the image-stacking rules above. */
	.epa-accordion[data-stack-number="yes"] .epa-item {
		display: block !important;
	}

	.epa-accordion[data-stack-number="yes"] .epa-item__number {
		display: block;
		margin-bottom: 4px;
	}

	.epa-accordion[data-stack-number="yes"] .epa-item__title {
		display: block;
	}
}