.iae-accordion {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.iae-direction-horizontal {
	flex-direction: row;
}

.iae-direction-vertical {
	flex-direction: column;
}

.iae-panel {
	--iae-duration: 500ms;
	--iae-side-margin: 24px;
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	cursor: pointer;
	transition: flex-grow var(--iae-duration) ease;
}

.iae-panel-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform var(--iae-duration) ease;
}

.iae-panel.iae-is-active .iae-panel-bg {
	transform: scale(1.03);
}

.iae-panel-scrim {
	position: absolute;
	inset: 0;
	transition: opacity var(--iae-duration) ease;
}

.iae-panel.iae-is-active .iae-panel-scrim {
	opacity: 0.15;
}

/* Expanded-state overlay: independent from the collapsed scrim above, so
   text stays readable over busy photos regardless of what the collapsed
   tint looks like. Liquid Glass adds a backdrop blur on top of the tint. */
.iae-panel-expand-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--iae-duration) ease;
}

.iae-panel.iae-is-active .iae-panel-expand-overlay {
	opacity: 1;
}

.iae-glass-enabled .iae-panel-expand-overlay {
	backdrop-filter: blur(var(--iae-glass-blur, 14px));
	-webkit-backdrop-filter: blur(var(--iae-glass-blur, 14px));
}

.iae-panel-title {
	position: absolute;
	z-index: 2;
	left: var(--iae-side-margin);
	bottom: 20px;
	right: var(--iae-side-margin);
	font-size: 1.1rem;
	transition: opacity var(--iae-duration) ease, transform var(--iae-duration) ease;
	pointer-events: none;
}

.iae-direction-horizontal .iae-panel:not(.iae-is-active) .iae-panel-title {
	writing-mode: vertical-rl;
	left: auto;
	right: 16px;
	bottom: 16px;
	top: 16px;
}

.iae-panel.iae-is-active .iae-panel-title {
	opacity: 0;
	transform: translateY(10px);
}

/* Collapsed-state button: visible while collapsed, disappears on expand */
.iae-panel-collapsed-btn {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	box-sizing: border-box;
	transition: opacity var(--iae-duration) ease, visibility var(--iae-duration) ease;
}

/* Bottom position stretches between the same margins as the expanded
   content, instead of a fixed width, so longer labels have room. */
.iae-cbtn-pos-bottom .iae-panel-collapsed-btn {
	left: var(--iae-side-margin);
	right: var(--iae-side-margin);
	bottom: 24px;
	width: auto;
}

.iae-cbtn-pos-center .iae-panel-collapsed-btn {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
}

.iae-cbtn-text_link {
	background: transparent !important;
	text-decoration: underline;
}

.iae-cbtn-icon_only {
	border-radius: 50%;
	width: 44px !important;
	height: 44px;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
}

.iae-panel.iae-is-active .iae-panel-collapsed-btn {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.iae-panel-content {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 24px var(--iae-side-margin);
	pointer-events: none;
	overflow: hidden;
}

/* 9-point content position: justify-content = vertical (column main axis),
   align-items = horizontal (cross axis), text-align matches the horizontal side. */
.iae-content-pos-top-left .iae-panel-content       { justify-content: flex-start; align-items: flex-start; text-align: left; }
.iae-content-pos-top-center .iae-panel-content     { justify-content: flex-start; align-items: center;    text-align: center; }
.iae-content-pos-top-right .iae-panel-content      { justify-content: flex-start; align-items: flex-end;  text-align: right; }
.iae-content-pos-center-left .iae-panel-content     { justify-content: center;    align-items: flex-start; text-align: left; }
.iae-content-pos-center-center .iae-panel-content   { justify-content: center;    align-items: center;    text-align: center; }
.iae-content-pos-center-right .iae-panel-content    { justify-content: center;    align-items: flex-end;  text-align: right; }
.iae-content-pos-bottom-left .iae-panel-content    { justify-content: flex-end;  align-items: flex-start; text-align: left; }
.iae-content-pos-bottom-center .iae-panel-content  { justify-content: flex-end;  align-items: center;    text-align: center; }
.iae-content-pos-bottom-right .iae-panel-content   { justify-content: flex-end;  align-items: flex-end;  text-align: right; }

.iae-panel.iae-is-active .iae-panel-content {
	pointer-events: auto;
	overflow-y: auto;
}

/* Micro-animation: title eases in from above, description and button ease
   in from below, both at once. Collapsing reverses the same paths. */
.iae-expand-title,
.iae-expand-description,
.iae-expand-btn {
	opacity: 0;
	transition: opacity var(--iae-duration) ease, transform var(--iae-duration) ease;
}

.iae-expand-title {
	transform: translateY(-20px);
}

.iae-expand-description,
.iae-expand-btn {
	transform: translateY(20px);
}

.iae-panel.iae-is-active .iae-expand-title,
.iae-panel.iae-is-active .iae-expand-description,
.iae-panel.iae-is-active .iae-expand-btn {
	opacity: 1;
	transform: translateY(0);
}

.iae-expand-title {
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 8px;
}

.iae-expand-description {
	margin-bottom: 16px;
}

.iae-expand-description p {
	margin: 0 0 8px;
}

.iae-expand-btn {
	display: inline-block;
	width: fit-content;
	text-decoration: none;
	cursor: pointer;
	background-color: #000000;
	color: #ffffff;
	padding: 12px 20px;
	border-radius: 4px;
}

.iae-panel:focus-visible,
.iae-panel-collapsed-btn:focus-visible,
.iae-expand-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -3px;
}

/* Stack to vertical below breakpoint so a horizontal accordion stays usable */
@media (max-width: 767px) {
	.iae-stack-mobile.iae-direction-horizontal {
		flex-direction: column;
	}

	.iae-stack-mobile.iae-direction-horizontal .iae-panel:not(.iae-is-active) .iae-panel-title {
		writing-mode: initial;
		left: var(--iae-side-margin);
		right: var(--iae-side-margin);
		top: auto;
	}
}