/**
 * Event tabs — a list of event types that swaps the description beside it on
 * desktop, and collapses into an accordion on mobile.
 *
 * Moved out of a Divi Code module embedded in the Corporate Events page.
 *
 * Two deliberate differences from the original block:
 *   - The `.cta-button` rules are dropped. The markup uses `.hero-cta`, so
 *     those rules matched nothing on any page.
 *   - `.hero-cta` is NOT styled here. It is already styled in Customizer →
 *     Additional CSS, and restyling it would change buttons across the site.
 *
 * Everything else is verbatim, except that the values an editor can now change
 * are read from custom properties set on the section by the renderer. Every
 * var() keeps the original hardcoded value as its fallback, so this file still
 * renders correctly on its own if the properties are ever absent.
 *
 * The 768px breakpoint is NOT a custom property: a media query cannot read one,
 * and the script matches the same width in matchMedia. It is hardcoded in both
 * on purpose — see inc/appearance.php.
 */

.event-section {
	font-family: sans-serif;
	color: var(--iwo-et-text, #ffffff);
}

.event-container {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	gap: var(--iwo-et-gap, 160px);
}

.event-left {
	flex: 0 1 calc(var(--iwo-et-list-width, 50) * 1%);
	min-width: 0;
}

.event-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.event-item {
	font-size: var(--iwo-et-item-size, 2.5rem);
	font-weight: 400;
	padding: var(--iwo-et-item-padding, 16px) 0;
	color: var(--iwo-et-text, #ffffff);
	line-height: 1.1em;
	cursor: pointer;
	display: flex;
	align-items: center;
	position: relative;
	transition: color 0.3s ease;
	border-bottom: 1px dashed var(--iwo-et-divider, rgba(255, 255, 255, 0.1));
}

/* Bullet that appears beside the active/hovered item. */
.event-item .bullet {
	width: var(--iwo-et-bullet-size, 12px);
	height: var(--iwo-et-bullet-size, 12px);
	background-color: var(--iwo-et-accent, #f15a24);
	border-radius: 50%;
	margin-right: 15px;
	opacity: 0;
	flex: none;
	display: var(--iwo-et-bullet-display, block);
	transform: scale(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.event-item:hover,
.event-item.active {
	color: var(--iwo-et-accent, #f15a24);
}

.event-item:hover .bullet,
.event-item.active .bullet {
	opacity: 1;
	transform: scale(1);
}

.event-right {
	flex: 0 1 calc(var(--iwo-et-pane-width, 50) * 1%);
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.content-pane {
	display: none;
	animation: fadeInEffect 0.5s ease forwards;
}

.content-pane.active {
	display: block;
}

.content-pane p {
	font-size: var(--iwo-et-body-size, 1.5rem);
	line-height: 1.6;
	color: var(--iwo-et-text, #ffffff);
	margin-bottom: 25px;
}

.inline-link {
	color: var(--iwo-et-accent, #f15a24);
	text-decoration: underline;
}

.cta-block {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--iwo-et-divider, rgba(255, 255, 255, 0.1));
}

@keyframes fadeInEffect {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.event-container { flex-direction: column; gap: 30px; }
	.event-left,
	.event-right { flex-basis: auto; }

	/* ---- accordion mode ---- */
	.event-item {
		font-size: var(--iwo-et-item-size-mobile, 1.7rem);
		display: block;
		padding: 18px 0;
	}

	.event-row { display: flex; align-items: center; }

	.event-row::after {
		content: "";
		flex: none;
		margin-left: auto;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.3s ease;
	}

	.event-item.active .event-row::after { transform: rotate(-135deg); }

	.event-section.is-accordion .event-right { display: none; }

	.event-panel {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.45s ease;
	}

	.event-panel.open { max-height: 1500px; }

	.event-panel .content-pane {
		display: block;
		animation: none;
		padding: 14px 0 6px;
	}

	.event-panel .content-pane p {
		font-size: var(--iwo-et-body-size-mobile, 1.05rem);
		line-height: 1.55;
		margin-bottom: 18px;
	}

	.event-panel .cta-block { margin-top: 20px; padding-top: 16px; }
}