/* ============================================================
   Accordion Dynamic Bric - Runtime CSS
   Exported with the project for browser rendering.
   ============================================================ */

/* --- Main Container --- */
.acc-dynamic {
	display: flex;
	flex-direction: row;
	gap: var(--acc-gap, 8px);
	min-height: var(--acc-min-height, 400px);
	width: 100%;
	overflow: hidden;
}

/* Vertical layout */
.acc-dynamic.acc-vertical {
	flex-direction: column;
}

/* --- Individual Panel --- */
.acc-dynamic-panel {
	position: relative;
	flex: 1 1 0%;
	overflow: hidden;
	border-radius: var(--acc-radius, 12px);
	cursor: pointer;
	-webkit-transition: flex-grow var(--acc-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);
	transition: flex-grow var(--acc-speed, 0.5s) cubic-bezier(0.4, 0, 0.2, 1);
	
	/* GPU Composite layer acceleration (highly optimized for macOS WebKit/Safari & iOS) */
	will-change: flex-grow;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/* Ensure dropped content fills the panel */
	display: flex;
	flex-direction: column;
}

.acc-dynamic-panel > * {
	flex-grow: 1;
	width: 100%;
	height: 100%;
}

/* Hover expansion */
.acc-dynamic-panel:hover {
	flex-grow: var(--acc-hover-scale, 3);
}

/* Keyboard focus expansion & outline */
.acc-dynamic-panel:focus-within {
	flex-grow: var(--acc-hover-scale, 3);
	outline: 2px solid var(--acc-title-color, #ffffff);
	outline-offset: -3px;
}

/* Touch active state (mobile tap) */
.acc-dynamic-panel.acc-touch-active {
	flex-grow: var(--acc-hover-scale, 3);
}

/* --- Optional Dark Overlay --- */
.acc-dynamic-panel.acc-has-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}

.acc-dynamic-panel.acc-has-overlay:hover::after {
	opacity: 0.7;
}

/* --- Responsive: stack on mobile --- */
@media (max-width: 767px) {
	.acc-dynamic {
		flex-direction: column;
		min-height: 0;
	}
	.acc-dynamic-panel {
		min-height: 120px;
		flex-grow: 1;
	}
	.acc-dynamic-panel:hover {
		flex-grow: var(--acc-hover-scale, 3);
	}
}

/* --- Panel Titles (visible on hover) --- */
.acc-panel-title {
	position: absolute;
	z-index: 2;
	opacity: 0;
	/* Override the panel > * rule that forces 100% width/height */
	width: auto !important;
	height: auto !important;
	flex-grow: 0 !important;
	-webkit-transition: opacity var(--acc-speed, 0.5s) ease, -webkit-transform var(--acc-speed, 0.5s) ease;
	transition: opacity var(--acc-speed, 0.5s) ease, transform var(--acc-speed, 0.5s) ease;
	pointer-events: none;
	font-family: var(--acc-title-font, inherit);
	font-size: var(--acc-title-size, 24px);
	color: var(--acc-title-color, #ffffff);
	padding: 12px 18px;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	line-height: 1.2;
	white-space: nowrap;
	max-width: 100%;
	box-sizing: border-box;
}

.acc-panel-title.acc-title-top {
	top: 0; left: 0; right: 0;
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}
.acc-panel-title.acc-title-bottom {
	bottom: 0; left: 0; right: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
}
.acc-panel-title.acc-title-left {
	left: 0; top: 0; bottom: 0;
	display: flex;
	align-items: center;
	height: 100% !important;
	writing-mode: vertical-lr;
	-webkit-transform: rotate(180deg) translateX(10px);
	transform: rotate(180deg) translateX(10px);
}
.acc-panel-title.acc-title-right {
	right: 0; top: 0; bottom: 0;
	display: flex;
	align-items: center;
	height: 100% !important;
	writing-mode: vertical-lr;
	-webkit-transform: translateX(10px);
	transform: translateX(10px);
}

/* Show titles on hover, touch, and keyboard focus */
.acc-dynamic-panel:hover .acc-panel-title.acc-title-top,
.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-top,
.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-top {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-bottom,
.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-bottom,
.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-bottom {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-left,
.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-left,
.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-left {
	opacity: 1;
	-webkit-transform: rotate(180deg) translateX(0);
	transform: rotate(180deg) translateX(0);
}
.acc-dynamic-panel:hover .acc-panel-title.acc-title-right,
.acc-dynamic-panel:focus-within .acc-panel-title.acc-title-right,
.acc-dynamic-panel.acc-touch-active .acc-panel-title.acc-title-right {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

/* Panel link overlay */
.acc-panel-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	text-decoration: none;
	cursor: pointer;
}