/* Webinars & Events listing (itbl-config query-sessions.php). Loaded with core/query. */

.itbl-sessions__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--48);
	padding-top: var(--wp--preset--spacing--64);
}

.itbl-sessions__layout > * {
	margin-block-start: 0;
}

.itbl-sessions__sidebar {
	position: sticky;
	top: calc(var(--wp--preset--admin-bar--height, 0px) + 70px + var(--wp--preset--spacing--24));
	flex: 0 1 248px;
	min-width: 220px;
}

.itbl-sessions__main {
	flex: 1 1 560px;
	min-width: 0;
}

.itbl-sessions__section {
	padding-bottom: var(--wp--preset--spacing--64);
}

#on-demand.itbl-sessions__section {
	padding-bottom: var(--wp--preset--spacing--96);
}

.itbl-sessions__heading {
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.itbl-sessions__section-head {
	align-items: baseline;
}

.itbl-sessions__section-head > p {
	margin: 0;
}

.itbl-sessions p:empty {
	display: none;
}

/* Shared tags: Format badge + Topic. */
.itbl-session__tags {
	align-items: center;
}

.itbl-session__tags > p {
	margin: 0;
}

.itbl-session__badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border: 1px solid var(--wp--preset--color--light-teal);
	border-radius: 999px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
}

.itbl-session--event .itbl-session__badge {
	background-color: var(--wp--preset--color--coral);
	border-color: var(--wp--preset--color--coral);
}

.itbl-session__topic {
	font-weight: 500;
}

.itbl-session__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	color: var(--wp--preset--color--dark);
}

/* The CTA link covers its row or card so the whole item is one link. */
.itbl-sessions .wp-block-post {
	position: relative;
}

.itbl-session__cta {
	margin: 0;
}

.itbl-session__cta .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.itbl-session__cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--light-teal);
	outline-offset: 2px;
}

/* Upcoming rows. */
.itbl-sessions__rows {
	border-top: 1px solid var(--wp--preset--color--neutral-5);
}

.itbl-sessions__rows > .wp-block-post {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-5);
	transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.itbl-sessions__rows > .wp-block-post:hover {
	background-color: rgba(0, 90, 114, 0.035);
}

.itbl-session-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--24);
	align-items: center;
	padding-block: var(--wp--preset--spacing--24);
	padding-inline: 0 var(--wp--preset--spacing--24);
}

.itbl-session-row > * {
	margin-block-start: 0;
}

.itbl-session-row__date {
	text-align: center;
}

.itbl-session-row__date > p {
	margin: 0;
}

.itbl-session__month {
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.itbl-session__day {
	margin-top: 4px;
	line-height: 0.98;
}

.itbl-session__meta {
	line-height: 1.5;
}

.itbl-session__meta > p {
	margin: 0;
}

.itbl-session-row .itbl-session__cta .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.itbl-session-row {
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: start;
	}

	.itbl-session-row .itbl-session__cta {
		grid-column: 2;
	}
}

/* On-demand cards. */
.itbl-session-card {
	height: 100%;
}

.itbl-session-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
}

.itbl-session-card__media .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.itbl-session-card__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.itbl-session-card__media::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(22, 15, 41, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 1.8v10.4L12 7z' fill='%23FFFAF6'/%3E%3C/svg%3E") center / 14px no-repeat;
	backdrop-filter: blur(8px);
	pointer-events: none;
}

.itbl-session-card__duration {
	position: absolute;
	right: 14px;
	bottom: 14px;
	margin: 0;
	padding: 5px 9px;
	border-radius: 6px;
	background: rgba(22, 15, 41, 0.72);
	color: var(--wp--preset--color--light);
	font-weight: 500;
	line-height: 1;
}

.itbl-sessions__cards > .wp-block-post:hover .itbl-session__title {
	color: var(--wp--preset--color--teal);
}

/* Empty states. */
.itbl-sessions__empty {
	padding: var(--wp--preset--spacing--32);
	border-radius: 12px;
}

.itbl-sessions--on-demand .wp-block-query-no-results .itbl-sessions__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--32);
}

.itbl-sessions__empty > * {
	margin: 0;
}

/* Query pagination. Default for every core/query. */
.wp-block-query-pagination {
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--16);
}

.itbl-sessions-pager__controls,
.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--neutral-4);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--dark);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wp-block-query-pagination a:hover {
	background-color: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark);
}

.wp-block-query-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--light);
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	width: 40px;
	padding: 0;
	font-size: 0;
}

.wp-block-query-pagination .wp-block-query-pagination-previous::before,
.wp-block-query-pagination .wp-block-query-pagination-next::before {
	content: "";
	width: 7px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M6 1 1 6l5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M6 1 1 6l5 5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-query-pagination .wp-block-query-pagination-next::before {
	transform: scaleX(-1);
}

.wp-block-query-pagination .wp-block-query-pagination-previous > *,
.wp-block-query-pagination .wp-block-query-pagination-next > * {
	display: none;
}

/* Webinars & Events: recordings range and the rule above the pager. */
.itbl-sessions .itbl-sessions__pager {
	padding-top: var(--wp--preset--spacing--24);
	border-top: 1px solid var(--wp--preset--color--neutral-5);
}

.itbl-sessions-pager__range {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--neutral-1);
}

.itbl-sessions__pager .itbl-sessions-pager__disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 939px) {
	.itbl-sessions__layout {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: var(--wp--preset--spacing--24);
	}

	.itbl-sessions__sidebar {
		top: calc(var(--wp--preset--admin-bar--height, 0px) + 70px);
		z-index: 15;
		flex: none;
		min-width: 0;
		margin-bottom: var(--wp--preset--spacing--24);
	}

	.itbl-sessions__main {
		flex: none;
	}

	#on-demand.itbl-sessions__section {
		scroll-margin-top: calc(var(--wp--preset--admin-bar--height, 0px) + 5.5rem + var(--wp--preset--spacing--64));
	}
}