/**
 * Event Listing Element Styles
 *
 * @package Food4Biodiv
 * @subpackage VC_Elements
 * @since 1.0.0
 */

/* ============================================
   Container
   ============================================ */

.f4b-event-listing {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.f4b-event-listing__rows {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ============================================
   Header
   ============================================ */

.f4b-event-listing__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--f4b-spacing-sm);
	margin-bottom: var(--f4b-spacing-lg);
}

.f4b-event-listing__heading {
	margin: 0;
	font-size: var(--f4b-font-size-xl);
	font-weight: 700;
	line-height: var(--f4b-line-height-tight);
}

.f4b-event-listing__range {
	display: inline-flex;
	align-items: center;
	padding: calc(var(--f4b-spacing-base) * 0.25) var(--f4b-spacing-sm);
	background: rgb(var(--f4b-color-background));
	border-radius: var(--f4b-border-radius-xl);
	color: rgb(var(--f4b-color-primary));
	font-size: var(--f4b-font-size-sm);
	font-weight: 600;
	line-height: var(--f4b-line-height-normal);
	white-space: nowrap;
}

/* ============================================
   Rows
   ============================================ */

.f4b-event-listing__row {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(var(--f4b-color-black), 0.1);
}

.f4b-event-listing__row:last-child {
	border-bottom: none;
}

.f4b-event-listing__trigger,
.f4b-event-listing__static {
	display: grid;
	grid-template-columns: minmax(calc(var(--f4b-spacing-base) * 5.5), auto) 1fr auto;
	align-items: start;
	gap: var(--f4b-spacing-md);
	width: 100%;
	padding: var(--f4b-spacing-md) var(--f4b-spacing-md) var(--f4b-spacing-md) 0;
	text-align: left;
}

.f4b-event-listing__trigger {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.f4b-event-listing__trigger:focus {
	outline: none;
}

.f4b-event-listing__trigger:focus-visible {
	outline: 2px solid rgb(var(--f4b-color-primary));
	outline-offset: 2px;
	border-radius: var(--f4b-border-radius-sm);
}

.f4b-event-listing__row--break .f4b-event-listing__static {
	background: transparent;
}

.f4b-event-listing__time {
	color: rgb(var(--f4b-color-gray));
	font-size: var(--f4b-font-size-md);
	line-height: var(--f4b-line-height-normal);
	white-space: nowrap;
}

.f4b-event-listing__main {
	display: flex;
	align-items: flex-start;
	gap: var(--f4b-spacing-sm);
	min-width: 0;
}

.f4b-event-listing__title {
	font-size: var(--f4b-font-size-md);
	font-weight: 700;
	line-height: var(--f4b-line-height-normal);
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* ============================================
   Chevron
   ============================================ */

.f4b-event-listing__chevron {
	flex-shrink: 0;
	width: var(--f4b-spacing-md);
	height: var(--f4b-spacing-md);
	margin-top: calc(var(--f4b-spacing-base) * 0.25);
	position: relative;
}

.f4b-event-listing__chevron::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--f4b-spacing-base) * 0.4);
	height: calc(var(--f4b-spacing-base) * 0.4);
	border-right: 2px solid rgb(var(--f4b-color-black));
	border-bottom: 2px solid rgb(var(--f4b-color-black));
	transform: translate(-60%, -50%) rotate(-45deg);
	transition: transform var(--f4b-transition-fast);
}

.f4b-event-listing__row--is-open .f4b-event-listing__chevron::before {
	transform: translate(-50%, -70%) rotate(45deg);
}

/* ============================================
   Accordion Panel
   ============================================ */

.f4b-event-listing__panel {
	padding: 0 var(--f4b-spacing-md) var(--f4b-spacing-md);
	padding-left: calc(var(--f4b-spacing-base) * 5.5 + var(--f4b-spacing-md));
}

.f4b-event-listing__panel[hidden] {
	display: none;
}

.f4b-event-listing__content {
	display: block;
	font-size: var(--f4b-font-size-md);
	font-weight: 400;
	line-height: var(--f4b-line-height-relaxed);
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
}

.f4b-event-listing__content > *:first-child {
	margin-top: 0;
}

.f4b-event-listing__content > *:last-child {
	margin-bottom: 0;
}

/* Force TinyMCE soft-breaks (Shift+Enter) to render as real line breaks */
.f4b-event-listing__content br {
	display: block;
	content: "";
	margin-top: 0;
}

.f4b-event-listing__content p,
.f4b-event-listing__content > div,
.f4b-event-listing__content .elementToProof > p,
.f4b-event-listing__content .elementToProof > div {
	display: block;
	margin: 0 0 var(--f4b-spacing-sm);
	white-space: normal;
}

.f4b-event-listing__content p:last-child,
.f4b-event-listing__content > div:last-child,
.f4b-event-listing__content .elementToProof > p:last-child,
.f4b-event-listing__content .elementToProof > div:last-child {
	margin-bottom: 0;
}

/* Gap between TinyMCE lines/paragraphs */
.f4b-event-listing__content p + p,
.f4b-event-listing__content .elementToProof > p + p {
	margin-top: calc(var(--f4b-spacing-base) * 0.35);
}

.f4b-event-listing__content ul,
.f4b-event-listing__content ol {
	margin: 0 0 var(--f4b-spacing-sm);
	padding-left: var(--f4b-spacing-md);
}

.f4b-event-listing__content ul {
	list-style: disc;
}

.f4b-event-listing__content li {
	margin: 0 0 calc(var(--f4b-spacing-base) * 0.25);
}

.f4b-event-listing__content b,
.f4b-event-listing__content strong {
	font-weight: 700;
}

/*
 * Editor: prefix speaker lines with "# " — marker is stripped on render.
 * Speakers are separate <p>s technically (from soft-breaks), but stack like <br>.
 */
.f4b-event-listing__content .f4b-event-listing__speaker {
	padding-left: var(--f4b-spacing-md);
	margin-top: 0;
	margin-bottom: 0;
}

.f4b-event-listing__content p + .f4b-event-listing__speaker {
	margin-top: calc(var(--f4b-spacing-base) * 0.35);
}

.f4b-event-listing__content .f4b-event-listing__speaker + .f4b-event-listing__speaker {
	margin-top: 0;
}

/* ============================================
   Dark Mode Support (.style-dark)
   ============================================ */

.style-dark .f4b-event-listing__row {
	border-bottom-color: rgba(var(--f4b-color-white), 0.15);
}

.style-dark .f4b-event-listing__range {
	background: rgba(var(--f4b-color-white), 0.1);
}

.style-dark .f4b-event-listing__range {
	color: rgb(var(--f4b-color-white));
}

.style-dark .f4b-event-listing__time {
	color: rgba(var(--f4b-color-white), 0.7);
}

.style-dark .f4b-event-listing__chevron::before {
	border-color: rgb(var(--f4b-color-white));
}

.style-dark .f4b-event-listing__trigger:focus-visible {
	outline-color: rgb(var(--f4b-color-white));
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 569px) {
	.f4b-event-listing__heading {
		font-size: var(--f4b-font-size-lg);
	}

	.f4b-event-listing__trigger,
	.f4b-event-listing__static {
		grid-template-columns: 1fr auto;
		gap: var(--f4b-spacing-xs) var(--f4b-spacing-sm);
	}

	.f4b-event-listing__time {
		grid-column: 1 / -1;
		font-size: var(--f4b-font-size-sm);
	}

	.f4b-event-listing__main {
		grid-column: 1;
	}

	.f4b-event-listing__chevron {
		grid-column: 2;
		grid-row: 2;
	}

	.f4b-event-listing__panel {
		padding-left: 0;
	}
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.f4b-event-listing__chevron::before {
		transition: none !important;
	}
}