/* ============================================================
   OE Event Timeline / Session / Speaker — shared styles
   ------------------------------------------------------------
   Loaded whenever an Event Timeline is on the page (the timeline is the
   parent of every session), so all agenda styling lives here, mirroring the
   oe/tabs convention. Track-group grid styling lives in its own stylesheet.

   Layout: each session is a [ time ][ content ] row separated by a subtle
   horizontal divider (no vertical rail, no dots). The time is prefixed with a
   subtle grey clock icon.

   Brand tokens are declared on the timeline root with fallbacks, so the blocks
   are self-contained but overridable via GenerateBlocks Global Styles or the
   global --oe-* variables.
   ============================================================ */

.oe-block-event-timeline {
	/* Layout */
	--oe-event-time-w: 6.5em;
	--oe-event-col-gap: 1.25rem;
	--oe-event-row-pad: 1rem;
	--oe-event-avatar-size: 46px;

	/* Colour */
	--oe-event-navy: var(--oe-colour-navy, #003469);
	--oe-event-accent: var(--oe-colour-sky, #00addc);
	--oe-event-time-colour: var(--oe-color-base, #1a1a1a);
	--oe-event-icon-colour: var(--oe-colour-grey, #aab3bf);
	--oe-event-divider: var(--oe-colour-line, #e5e9ef);
	--oe-event-muted: var(--oe-colour-text-muted, #5b6875);

	color: var(--oe-event-navy);
	line-height: var(--oe-line-height-large, 1.5);
}

.oe-block-event-timeline__label {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-weight: 700;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--oe-event-navy);
	padding: var(--oe-spacing-xsmall, 0.35em) var(--oe-spacing-small, 0.85em);
	border-radius: var(--oe-border-radius-xsmall, 2px);
	background: color-mix(in srgb, var(--oe-event-navy) 7%, #ffffff);
	margin-bottom: 1rem;
}

/* An empty track label is hidden by default (e.g. a stand-alone timeline). */
.oe-block-event-timeline__label.is-empty {
	display: none;
}

/* ...but inside a track group it stays as a TRANSPARENT stripe, so a named
   track and an unnamed one still line up horizontally (same reserved height). */
.oe-block-event-track-group .oe-block-event-timeline__label.is-empty {
	display: block;
	background: transparent;
}

/* ...UNLESS no track in the group has a label at all — then drop the reserved
   space so there's no unnaturally large empty gap. (`:has()` = the track group
   contains no non-empty label.) */
.oe-block-event-track-group:not(:has(.oe-block-event-timeline__label:not(.is-empty))) .oe-block-event-timeline__label.is-empty {
	display: none;
}

.oe-block-event-timeline__heading {
	margin: 1rem 0 1.2rem;
	font-size: var(--oe-font-size-large);
	font-weight: bold;
}

/* ---- Session row -------------------------------------------------------- */

.oe-block-event-session {
	display: grid;
	grid-template-columns: var(--oe-event-time-w) 1fr;
	column-gap: var(--oe-event-col-gap);
	align-items: start;
	padding-block: var(--oe-event-row-pad);
}

/* Divider BETWEEN rows only — no line above the first or below the last. */
.oe-block-event-session:not(:first-child) {
	border-top: 1px solid var(--oe-event-divider);
}

/* Optional per-row padding removal (toggled per Event Session). Scoped to the
   block so it reliably overrides the row's own padding-block. */
.oe-block-event-session.oe-padding-remove-top {
	padding-top: 0;
}
.oe-block-event-session.oe-padding-remove-bottom {
	padding-bottom: 0;
}

/* Empty spacer row — blank vertical space, e.g. to align parallel tracks when
   one track has a session at a time the other does not. */
.oe-block-event-session.oe-block-event-session--empty {
	display: block;
	border-top: none;
	padding: 0;
	min-height: var(--oe-event-empty-height, 3.5rem);
}

.oe-block-event-session__empty-note {
	display: block;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--oe-event-muted);
	padding: 0.5rem 0;
}

/* Divider row — a standalone subtle horizontal line. */
.oe-block-event-session.oe-block-event-session--divider {
	display: block;
	border-top: none;
	padding: 0;
}

.oe-block-event-session--divider::before {
	content: "";
	display: block;
	border-top: 1px solid var(--oe-event-divider);
	margin-block: 0.75rem;
}

/* Avoid doubling the line where a divider row meets the next row. */
.oe-block-event-session--divider + .oe-block-event-session {
	border-top: none;
}

.oe-block-event-session__time {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	font-weight: 700;
	line-height: var(--oe-line-height-large, 1.5);
	color: var(--oe-event-time-colour);
	white-space: nowrap;
}

.oe-block-event-session__time-icon {
	flex: none;
	align-self: flex-start; /* sit on the first line, next to the start time */
	margin-top: 0.2em;      /* nudge the icon onto the text line */
	width: 1.05em;
	height: 1.05em;
	color: var(--oe-event-icon-colour);
}

/* End time drops to its own line beneath the start (so a range never overflows
   into the title). */
.oe-block-event-session__time-end {
	display: block;
}

.oe-block-event-session__content {
	min-width: 0;
}

.oe-block-event-session__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: var(--oe-line-height-large, 1.5);
	color: var(--oe-event-time-colour);
}

.oe-block-event-session__desc {
	margin: 0.25rem 0 0;
	color: var(--oe-event-muted);
	font-size: 0.95rem;
	line-height: var(--oe-line-height-large, 1.5);
	white-space: pre-line; /* honour line breaks typed into the description */
}

.oe-block-event-session__hint {
	margin: 0.25rem 0 0;
	color: var(--oe-event-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* ---- Speakers row ------------------------------------------------------- */

.oe-block-event-speakers {
	list-style: none;
	margin: 0.65rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.oe-block-event-speaker {
	position: relative;
	width: var(--oe-event-avatar-size);
	height: var(--oe-event-avatar-size);
	border-radius: 50%;
	outline: none;
}

.oe-block-event-speaker__avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: color-mix(in srgb, var(--oe-event-navy) 12%, #ffffff);
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--oe-event-divider);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.oe-block-event-speaker__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.2s ease;
}

.oe-block-event-speaker__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--oe-event-navy);
}

/* Hover / focus: lift the ring and desaturate the photo to black & white. */
.oe-block-event-speaker:hover .oe-block-event-speaker__avatar,
.oe-block-event-speaker:focus-visible .oe-block-event-speaker__avatar,
.oe-block-event-speaker:focus-within .oe-block-event-speaker__avatar {
	transform: translateY(-2px);
}

.oe-block-event-speaker:hover .oe-block-event-speaker__img,
.oe-block-event-speaker:focus-visible .oe-block-event-speaker__img,
.oe-block-event-speaker:focus-within .oe-block-event-speaker__img {
	filter: grayscale(1);
}

/* Hover / focus reveal card — white tooltip. */
.oe-block-event-speaker__card {
	--oe-card-shift: 0px; /* set by view.js to keep the card on-screen */
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translate(calc(-50% + var(--oe-card-shift)), 4px);
	z-index: 20;
	min-width: 260px;
	max-width: 320px;
	padding: 0.85rem 1.25rem;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid var(--oe-event-divider);
	color: var(--oe-event-navy);
	text-align: center;
	line-height: 1.35;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	box-shadow: 0 10px 30px rgba(0, 33, 71, 0.16);
}

.oe-block-event-speaker:hover .oe-block-event-speaker__card,
.oe-block-event-speaker:focus-visible .oe-block-event-speaker__card,
.oe-block-event-speaker:focus-within .oe-block-event-speaker__card {
	opacity: 1;
	visibility: visible;
	transform: translate(calc(-50% + var(--oe-card-shift)), 0);
}

/* view.js adds this when there isn't room above the avatar. */
.oe-block-event-speaker.is-below .oe-block-event-speaker__card {
	top: calc(100% + 12px);
	bottom: auto;
}

.oe-block-event-speaker__name {
	display: block;
	font-weight: 700;
	font-size: var(--oe-font-size-small);
	color: var(--oe-event-navy);
}

.oe-block-event-speaker__role {
	display: block;
	font-size: var(--oe-font-size-small);
	color: var(--oe-event-muted);
	margin-top: 0.15rem;
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 600px) {
	.oe-block-event-timeline {
		--oe-event-time-w: 5.25em;
		--oe-event-col-gap: 0.85rem;
		--oe-event-avatar-size: 40px;
	}

	.oe-block-event-session__time {
		font-size: 0.9rem;
	}
}

/* ---- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.oe-block-event-speaker__avatar,
	.oe-block-event-speaker__img,
	.oe-block-event-speaker__card {
		transition: none;
	}

	.oe-block-event-speaker:hover .oe-block-event-speaker__avatar,
	.oe-block-event-speaker:focus-within .oe-block-event-speaker__avatar {
		transform: none;
	}
}

/* ============================================================
   Block editor only.

   IMPORTANT: WordPress AUTO-PREFIXES every selector in a block's editor
   stylesheet with `.editor-styles-wrapper`. So we must NOT write that prefix
   ourselves — doing so yields `.editor-styles-wrapper .editor-styles-wrapper …`,
   which needs two nested wrappers (there is only one) and matches nothing.
   Instead every rule below is anchored on a class that exists ONLY in the
   editor (`.block-editor-*`, `.block-list-appender`, `.block-editor-block-list__block`),
   so WP's single auto-prefix makes them editor-scoped and they never touch the
   front end (those classes don't exist there).
   ============================================================ */

/* Show the parallel tracks as COLUMNS in the editor (wrapping flex). The
   track-group's own "add track" appender is forced onto its own full-width row
   so it can never collide with the per-track "add session" appenders. */
.oe-block-event-track-group > .block-editor-inner-blocks > .block-editor-block-list__layout,
.oe-block-event-track-group > .block-editor-block-list__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	align-items: flex-start;
}

.oe-block-event-track-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block,
.oe-block-event-track-group > .block-editor-block-list__layout > .wp-block {
	flex: 1 1 220px;
	min-width: 220px;
}

.oe-block-event-track-group > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender,
.oe-block-event-track-group > .block-editor-block-list__layout > .block-list-appender {
	flex: 1 0 100%;
}

/* Appender wrapper: Gutenberg sets it position:absolute (confirmed via live
   DOM — that was the overlap). Put it back in normal flow, below its list. */
.oe-block-event-timeline .block-editor-block-list__layout > .block-list-appender.wp-block,
.oe-block-event-track-group .block-editor-block-list__layout > .block-list-appender.wp-block {
	position: static !important;
	inset: auto !important;
	display: block;
	float: none;
	clear: both;
	width: 100%;
	margin: 1rem 0 0;
	text-align: left;
}

/* Appender button: a plain, left-aligned "Add Block" control. */
.oe-block-event-timeline .block-editor-button-block-appender,
.oe-block-event-track-group .block-editor-button-block-appender {
	display: inline-flex !important;
	position: static !important;
	inset: auto !important;
	float: none !important;
	align-items: center;
	justify-content: flex-start;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	min-height: 40px;
	padding: 0 0.9em !important;
	gap: 0.45em;
	white-space: nowrap;
}

.oe-block-event-timeline .block-editor-button-block-appender::after,
.oe-block-event-track-group .block-editor-button-block-appender::after {
	content: "Add Block";
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
}

/* Subtle top + bottom guide line on each session row. Anchored on
   `.block-editor-block-list__block` (an editor-only class), so it appears in the
   editor but NEVER on the front end. Applies to every session, incl. in tracks. */
.block-editor-block-list__block .oe-block-event-session {
	border-top: 1px solid #cbd3dd !important;
	border-bottom: 1px solid #cbd3dd !important;
}