/**
 * BASEM Agenda screen styles.
 * Change visual values in agenda-settings.css.
 */
.basem-agenda {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--agenda-colour-ink);
	font-family: var(--agenda-font-family);
	font-size: var(--agenda-font-size);
	font-weight: var(--agenda-font-weight-regular);
	line-height: var(--agenda-line-height);
}

.basem-agenda [hidden] {
	display: none !important;
}

.basem-agenda button,
.basem-agenda input,
.basem-agenda select {
	font: inherit;
}

.basem-agenda button {
	padding: var(--agenda-button-padding-block) var(--agenda-button-padding-inline);
	border: 0;
	border-radius: var(--agenda-button-radius);
	background: var(--agenda-button-background);
	color: var(--agenda-colour-navy);
	cursor: pointer;
	font-size: var(--agenda-button-font-size);
	font-weight: var(--agenda-font-weight-bold);
	text-transform: uppercase;
}

.basem-agenda button[aria-pressed="true"],
.basem-agenda button:hover {
	background: var(--agenda-colour-navy);
	color: var(--agenda-colour-white);
}

.basem-agenda button:focus-visible,
.basem-agenda input:focus-visible,
.basem-agenda select:focus-visible,
.basem-agenda a:focus-visible,
.basem-agenda__grid-scroll:focus-visible {
	outline: 3px solid var(--agenda-colour-focus);
	outline-offset: 2px;
}

.basem-agenda__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.basem-agenda__dates,
.basem-agenda__views {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.basem-agenda__views [data-print] {
	white-space: nowrap;
}

.basem-agenda .basem-agenda__view-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--agenda-view-button-width);
	height: var(--agenda-view-button-height);
	padding: 0;
}

.basem-agenda__view-button svg {
	display: block;
	width: var(--agenda-view-icon-size);
	height: var(--agenda-view-icon-size);
	pointer-events: none;
}

.basem-agenda__status {
	margin: 0.75rem 0;
	color: var(--agenda-colour-muted);
	font-size: 0.9rem;
}

.basem-agenda__loading,
.basem-agenda__error,
.basem-agenda__empty {
	padding: 2rem;
	text-align: center;
}

.basem-agenda__loading {
	padding: 0;
	text-align: initial;
}

.basem-agenda__screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.basem-agenda-skeleton {
	overflow: hidden;
	color: transparent;
}

.basem-agenda-skeleton span {
	display: block;
	border-radius: var(--agenda-skeleton-radius);
	background: linear-gradient(
		90deg,
		var(--agenda-skeleton-background) 25%,
		var(--agenda-skeleton-highlight) 50%,
		var(--agenda-skeleton-background) 75%
	);
	background-size: 220% 100%;
	animation: basem-agenda-skeleton-shimmer 1.4s ease-in-out infinite;
}

.basem-agenda-skeleton__toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.basem-agenda-skeleton__toolbar span {
	width: 64px;
	height: 36px;
}

.basem-agenda-skeleton__toolbar .is-spacer {
	flex: 1;
	background: transparent;
	animation: none;
}

.basem-agenda-skeleton__toolbar .is-icon {
	width: 42px;
}

.basem-agenda-skeleton__toolbar .is-action {
	width: 138px;
}

.basem-agenda-skeleton__grid {
	display: grid;
	grid-template-columns: 70px repeat(5, minmax(150px, 1fr));
	min-width: 850px;
	height: 620px;
}

.basem-agenda-skeleton__times {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	padding-top: 45px;
}

.basem-agenda-skeleton__times span {
	width: 38px;
	height: 8px;
}

.basem-agenda-skeleton__room {
	position: relative;
	padding: 0 6px;
}

.basem-agenda-skeleton__room-tag {
	width: 62px;
	height: 18px;
	margin: 0 auto 28px;
}

.basem-agenda-skeleton__card {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 210px;
}

.basem-agenda-skeleton__card.is-first {
	top: 54px;
}

.basem-agenda-skeleton__card.is-second {
	top: 280px;
	height: 260px;
}

@keyframes basem-agenda-skeleton-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.basem-agenda-skeleton span {
		animation: none;
	}
}

.basem-agenda__error {
	border-left: 4px solid var(--agenda-colour-error);
	background: var(--agenda-colour-error-bg);
}

.basem-agenda__grid-scroll {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-height: var(--agenda-grid-max-height);
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	touch-action: pan-x pan-y;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.75rem;
}

.basem-agenda.has-gsap-pin .basem-agenda__grid-scroll {
	height: var(--agenda-pinned-grid-height, var(--agenda-pin-viewport-height));
	max-height: none;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
}

.basem-agenda.has-gsap-pin .basem-agenda__header {
	margin-bottom: 8px;
	border-radius: var(--agenda-sticky-toolbar-radius);
	background: var(--agenda-sticky-toolbar-background);
	box-shadow: none;
	backdrop-filter: blur(10px);
}

.basem-agenda.has-gsap-pin .basem-agenda__app {
	width: 100%;
	background: var(--agenda-colour-white);
}

.basem-agenda.has-gsap-pin .basem-agenda__grid-scroll.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.basem-agenda__grid {
	--time-width: var(--agenda-grid-time-width);
	--agenda-current-room-gap: var(--agenda-grid-room-gap);
	--agenda-current-room-min-width: var(--agenda-grid-room-min-width);
	--agenda-room-column-width: var(--agenda-current-room-min-width);
	display: grid;
	grid-template-columns: var(--time-width) repeat(var(--room-count), minmax(var(--agenda-room-column-width), 1fr));
	grid-template-rows: var(--agenda-grid-header-height) var(--grid-height);
	min-width: calc(var(--time-width) + var(--room-count) * var(--agenda-room-column-width));
	border: 0;
}

.agenda-grid__corner,
.agenda-grid__room-heading {
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 0.25rem 0.4rem 1rem;
	border: 0;
	background: var(--agenda-colour-white);
	color: var(--agenda-colour-white);
	text-align: center;
}

.agenda-grid__room-heading {
	min-width: var(--agenda-current-room-min-width);
}

.agenda-grid__corner {
	left: 0;
	z-index: 8;
	grid-column: 1;
	grid-row: 1;
	color: transparent;
}

.agenda-grid__room-badge {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	padding: var(--agenda-room-badge-padding);
	border-radius: var(--agenda-room-badge-radius);
	background: var(--room-colour, var(--agenda-room-badge-background));
	color: var(--room-text, var(--agenda-room-badge-colour));
	font-size: var(--agenda-room-badge-font-size);
	font-weight: var(--agenda-font-weight-bold);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.agenda-grid__heading-tags {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: max-content;
	white-space: nowrap;
}

.agenda-grid__stream-badge {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	padding: var(--agenda-room-badge-padding);
	border-radius: var(--agenda-room-badge-radius);
	background: var(--stream-colour, var(--agenda-colour-pale-blue));
	color: var(--stream-text, var(--agenda-colour-navy));
	font-size: var(--agenda-room-badge-font-size);
	font-weight: var(--agenda-font-weight-bold);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.agenda-grid__times,
.agenda-grid__room {
	position: relative;
	min-height: var(--grid-height);
	background-color: var(--agenda-colour-white);
	background-image: radial-gradient(
		circle at center bottom,
		var(--agenda-grid-line-colour) var(--agenda-grid-dot-size),
		transparent calc(var(--agenda-grid-dot-size) + 0.25px)
	);
	background-size: var(--agenda-grid-dot-spacing) var(--quarter-height);
}

.agenda-grid__times {
	position: sticky;
	left: 0;
	grid-column: 1;
	grid-row: 2;
	box-sizing: border-box;
	padding-left: 0;
	z-index: 5;
}

.agenda-grid__room {
	margin: 0 var(--agenda-grid-room-gap);
}

.agenda-grid__session-placeholder {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--agenda-session-radius, 20px);
	background: #faf9f5;
	pointer-events: none;
}

.agenda-grid__session-placeholder .agenda-grid__placeholder-logo {
	display: block;
	width: auto;
	height: 70px;
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

.agenda-grid__all-rooms {
	position: relative;
	z-index: 3;
	grid-column: 2 / -1;
	grid-row: 2;
	min-height: var(--grid-height);
	pointer-events: none;
}

.agenda-grid__all-rooms .agenda-session {
	pointer-events: auto;
}

.agenda-grid__all-rooms .agenda-session--all-rooms {
	right: calc(var(--agenda-current-room-gap) + var(--agenda-card-inline-gap));
	left: calc(var(--agenda-current-room-gap) + var(--agenda-card-inline-gap));
	width: auto;
}

.agenda-session.agenda-session--programme-welcome,
.agenda-list-session.agenda-list-session--programme-welcome {
	--session-colour: var(--agenda-welcome-keyline);
	--programme-background: var(--agenda-welcome-background);
	--programme-text: var(--agenda-welcome-text);
}

.agenda-session.agenda-session--programme-coffee-break,
.agenda-list-session.agenda-list-session--programme-coffee-break {
	--session-colour: var(--agenda-coffee-break-keyline);
	--programme-background: var(--agenda-coffee-break-background);
	--programme-text: var(--agenda-coffee-break-text);
}

.agenda-session.agenda-session--programme-lunch-break,
.agenda-list-session.agenda-list-session--programme-lunch-break {
	--session-colour: var(--agenda-lunch-break-keyline);
	--programme-background: var(--agenda-lunch-break-background);
	--programme-text: var(--agenda-lunch-break-text);
}

.agenda-session--programme,
.agenda-list-session--programme {
	background: var(--programme-background, var(--agenda-session-background));
}

.agenda-session--programme .agenda-session__title {
	font-size: var(--agenda-programme-title-size);
	text-decoration: none;
}

.agenda-list-session--programme .agenda-list-session__title {
	font-size: var(--agenda-list-programme-title-size);
	text-decoration: none;
}

.agenda-session--programme .agenda-session__title:hover,
.agenda-list-session--programme .agenda-list-session__title:hover {
	text-decoration: none;
}

.agenda-session--programme .agenda-session__time,
.agenda-session--programme .agenda-session__title,
.agenda-session--programme .agenda-session__speaker-name,
.agenda-list-session--programme .agenda-list-session__time,
.agenda-list-session--programme .agenda-list-session__time span,
.agenda-list-session--programme .agenda-list-session__title,
.agenda-list-session--programme .agenda-list-session__subtitle,
.agenda-list-session--programme .agenda-list-session__speaker-name {
	color: var(--programme-text, var(--agenda-colour-ink));
}

.agenda-grid__time {
	position: absolute;
	left: var(--agenda-grid-time-label-inset);
	transform: translateY(0.5em);
	white-space: nowrap;
	color: var(--agenda-colour-navy);
	font-size: 0.875rem;
	font-weight: var(--agenda-font-weight-bold);
	text-transform: uppercase;
}

.agenda-session {
	--session-colour: var(--agenda-session-default-colour);
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	overflow: hidden;
	padding: var(--agenda-session-padding);
	border: 0;
	border-left: var(--agenda-session-keyline-width) solid var(--session-colour);
	border-radius: var(--agenda-session-radius);
	background: var(--agenda-session-background);
	box-shadow: none;
}

.agenda-session--compact {
	padding: var(--agenda-session-compact-padding);
}

.agenda-session__time {
	color: var(--agenda-colour-ink);
	font-size: var(--agenda-session-time-size);
	font-weight: var(--agenda-font-weight-bold);
	letter-spacing: 0.01em;
}

.agenda-session__title {
	display: block;
	margin: 0.45rem 0 0.5rem;
	color: var(--agenda-colour-ink);
	font-size: var(--agenda-session-title-size);
	font-weight: var(--agenda-font-weight-bold);
	line-height: var(--agenda-session-title-line-height);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.agenda-session__title:hover,
.agenda-list-session__title:hover {
	text-decoration: underline;
}

.agenda-session__subtitle,
.agenda-list-session__subtitle {
	margin: var(--agenda-programme-subtitle-spacing) 0 0;
	color: var(--programme-text, var(--agenda-colour-muted));
	font-weight: var(--agenda-font-weight-regular);
	line-height: var(--agenda-programme-subtitle-line-height);
}

.agenda-session__subtitle {
	font-size: var(--agenda-programme-subtitle-size);
}

.agenda-list-session__subtitle {
	font-size: var(--agenda-list-subtitle-size);
}

.agenda-session__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.agenda-coffee-break-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0.45rem 0 0.5rem;
}

.agenda-coffee-break-heading > .agenda-session__title,
.agenda-coffee-break-heading > .agenda-list-session__title {
	margin: 0;
}

.agenda-coffee-break-venue {
	display: inline-flex;
	align-items: center;
	padding: 3px 6px;
	border-radius: 8px;
	background: #faf9f5;
	color: #262262;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: uppercase;
}

.agenda-session__tag {
	padding: 3px 6px;
	border-radius: 3px;
	background: #e4e7ed;
	color: var(--agenda-colour-navy);
	font-size: var(--agenda-session-tag-size);
	font-weight: var(--agenda-font-weight-bold);
}

.agenda-session__tag.has-taxonomy-colour {
	background: var(--tag-colour);
	color: var(--tag-text);
}

.agenda-session--has-talks {
	overflow-y: auto;
}

.agenda-session-talks {
	margin-top: 16px;
}

.agenda-session__speakers + .agenda-session-talks,
.agenda-list-session__speakers + .agenda-session-talks {
	border-top: 0.5px solid #262262;
	padding-top: 12px;
}

.agenda-session-talks__heading {
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--agenda-colour-navy);
}

.agenda-session-talks__list {
	display: grid;
	gap: 6px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.agenda-session-talks__link {
	font-size: var(--agenda-session-speaker-size);
	font-weight: 700;
	line-height: 1.4;
	color: var(--agenda-colour-navy);
	text-decoration: underline !important;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.agenda-list-session .agenda-session-talks__link {
	font-size: var(--agenda-list-speaker-size);
}

.agenda-session-talks__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.agenda-speakers__heading {
	flex: 0 0 auto;
	width: 100%;
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--agenda-colour-navy);
}

.agenda-session__speakers {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 30px;
}

.agenda-session__speaker {
	display: flex;
	align-items: center;
	gap: 6px;
}

.agenda-session__speaker-photo {
	width: var(--agenda-session-speaker-photo-size);
	height: var(--agenda-session-speaker-photo-size);
	aspect-ratio: 1 / 1;
	flex: 0 0 var(--agenda-session-speaker-photo-size);
	border-radius: 99px !important;
	object-fit: cover !important;
	object-position: center !important;
}

.agenda-session__speaker-name {
	color: var(--agenda-colour-navy);
	font-size: var(--agenda-session-speaker-size);
	font-weight: var(--agenda-font-weight-regular);
	line-height: 1.2;
}

.agenda-session--compact .agenda-session__tags {
	display: none;
}

.basem-agenda__list {
	display: grid;
	gap: 0.85rem;
}

.agenda-list-session {
	--session-colour: var(--agenda-session-default-colour);
	display: grid;
	grid-template-columns: var(--agenda-list-time-width) 1fr;
	gap: var(--agenda-list-gap);
	align-items: start;
	padding: var(--agenda-list-card-padding);
	border: 1px solid color-mix(in srgb, var(--session-colour) 18%, transparent);
	border-left: var(--agenda-session-keyline-width) solid var(--session-colour);
	border-radius: var(--agenda-list-radius);
	background: var(--agenda-session-background);
	box-shadow: none;
	break-inside: avoid;
	min-width: 0;
}

.agenda-list-session__time {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-top: 0.15rem;
	color: var(--agenda-colour-navy);
}

.agenda-list-session__time strong {
	font-size: 1rem;
	font-weight: var(--agenda-font-weight-bold);
}

.agenda-list-session__time span {
	color: var(--agenda-colour-muted);
	font-size: 0.78rem;
}

.agenda-list-session__body {
	min-width: 0;
}

.agenda-list-session__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.7rem;
}

.agenda-list-session__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.58rem;
	border-radius: 999px;
	background: var(--list-tag-colour, #e4e7ed);
	color: var(--list-tag-text, var(--agenda-colour-navy));
	font-size: var(--agenda-list-tag-size);
	font-weight: var(--agenda-font-weight-bold);
	line-height: 1;
}

.agenda-list-session__tag--room {
	text-transform: uppercase;
}

.agenda-list-session__title {
	display: inline-block;
	color: var(--agenda-colour-ink);
	font-size: var(--agenda-list-title-size);
	font-weight: var(--agenda-font-weight-bold);
	line-height: 1.25;
	text-decoration: none;
}

.agenda-list-session__speakers {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
	margin-top: 1rem;
}

.agenda-list-session__speaker {
	display: inline-flex;
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	align-items: center;
	gap: 0.55rem;
}

.agenda-list-session__speaker-photo {
	width: var(--agenda-list-speaker-photo-size);
	height: var(--agenda-list-speaker-photo-size);
	aspect-ratio: 1 / 1;
	flex: 0 0 var(--agenda-list-speaker-photo-size);
	border: 2px solid var(--agenda-colour-white);
	border-radius: 99px !important;
	box-shadow: 0 2px 8px rgba(16, 15, 66, 0.14);
	object-fit: cover !important;
	object-position: center !important;
}

.agenda-list-session__speaker-name {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--agenda-colour-navy);
	font-size: var(--agenda-list-speaker-size);
	font-weight: var(--agenda-font-weight-bold);
}

/* Keep this breakpoint in sync with mobileBreakpoint in assets/js/config.js. */
@media (max-width: 767px) {
	.basem-agenda__header {
		align-items: stretch;
		flex-direction: column;
	}

	.basem-agenda__dates,
	.basem-agenda__views {
		width: 100%;
	}

	.basem-agenda__views {
		display: grid;
		grid-template-columns: var(--agenda-view-button-width) var(--agenda-view-button-width) minmax(0, 1fr);
	}

	.basem-agenda__views button {
		min-height: 44px;
	}

	.basem-agenda__dates {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 2px 0 6px;
		scrollbar-width: thin;
	}

	.basem-agenda__dates button {
		min-width: max-content;
		min-height: 44px;
	}

	.basem-agenda__grid-scroll {
		width: 100vw;
		max-height: var(--agenda-grid-mobile-max-height);
		margin-inline: calc(50% - 50vw);
		padding-inline: 0;
	}

	.basem-agenda__grid {
		--time-width: var(--agenda-grid-time-width-mobile);
		--agenda-current-room-gap: var(--agenda-grid-room-gap-mobile);
		--agenda-current-room-min-width: var(--agenda-grid-room-min-width-mobile);
	}

	.agenda-grid__room {
		margin-inline: var(--agenda-grid-room-gap-mobile);
	}

	.agenda-grid__time {
		left: var(--agenda-grid-time-label-inset-mobile);
		font-size: 0.78rem;
	}

	.agenda-list-session {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding: 1rem;
	}

	.agenda-list-session__time {
		flex-direction: row;
		align-items: baseline;
		gap: 0.45rem;
	}

	.agenda-list-session__time span::before {
		content: "- ";
	}

	.agenda-list-session__title {
		overflow-wrap: anywhere;
	}

	.agenda-list-session__subtitle {
		overflow-wrap: anywhere;
	}

	.agenda-list-session__speaker-photo {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}
}

/* Keep horizontal room navigation native while vertical gestures drive the pinned page. */
@media (max-width: 1023px) {
	.basem-agenda__grid-scroll {
		max-height: none;
		overflow-x: auto;
		overflow-y: clip;
		overscroll-behavior-x: contain;
		overscroll-behavior-y: auto;
		scrollbar-gutter: auto;
		touch-action: pan-x pan-y pinch-zoom;
	}
}
