/*
 * The session gallery as one 16:9 frame that crossfades.
 *
 * Twelve thumbnails in a grid pushed the registration button a screen and a
 * half down the page; this holds the same photos in the space of one.
 */

.vfm-session-slideshow {
	margin: 24px 0;
}

.vfm-session-slideshow__frame {
	position: relative;
	/* 16:9, whatever the photos are. aspect-ratio is the shape; the
	   padding-top fallback is for anything that does not know it. */
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--vfm-radius-lg, 16px);
	background-color: #e8edf0;
}

@supports not (aspect-ratio: 16 / 9) {
	.vfm-session-slideshow__frame {
		height: 0;
		padding-top: 56.25%;
	}
}

.vfm-session-slideshow__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	/* Out of the tab order and off the screen reader while hidden, without
	   display:none -- which would kill the crossfade. */
	visibility: hidden;
	transition: opacity 900ms ease-in-out, visibility 0s linear 900ms;
}

.vfm-session-slideshow__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms ease-in-out, visibility 0s;
}

.vfm-session-slideshow__image {
	display: block;
	width: 100%;
	height: 100%;
	/* Cover, so a portrait photo and a landscape one are the same shape and
	   the frame never letterboxes. */
	object-fit: cover;
	object-position: center;
}

.vfm-session-slideshow__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 28px 16px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.35;
}

.vfm-session-slideshow__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.vfm-session-slideshow__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #c3ccd2;
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease;
}

.vfm-session-slideshow__dot:hover,
.vfm-session-slideshow__dot:focus-visible {
	background-color: var(--vfm-event-text, var(--vfm-event-accent, var(--vfm-navy-dark, #1d4852)));
}

.vfm-session-slideshow__dot.is-active {
	background-color: var(--vfm-event-text, var(--vfm-event-accent, var(--vfm-navy-dark, #1d4852)));
	transform: scale(1.25);
}

/* ---- the arrows ---- */

/*
 * Hidden until the visitor reaches for them: the photo is the point, and two
 * permanent chevrons sitting on it are two things to look at instead of one.
 * Hover, keyboard focus anywhere in the slideshow, or a touch screen (which
 * has no hover to give) all bring them up.
 */
.vfm-session-slideshow__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.86);
	color: var(--vfm-navy-dark, #1d4852);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.vfm-session-slideshow__nav--prev { left: 12px; }
.vfm-session-slideshow__nav--next { right: 12px; }

.vfm-session-slideshow__nav svg {
	width: 20px;
	height: 20px;
}

.vfm-session-slideshow:hover .vfm-session-slideshow__nav,
.vfm-session-slideshow:focus-within .vfm-session-slideshow__nav {
	opacity: 1;
}

.vfm-session-slideshow__nav:hover,
.vfm-session-slideshow__nav:focus-visible {
	background-color: #fff;
}

/* No hover to give, so the arrows simply stay. */
@media (hover: none) {
	.vfm-session-slideshow__nav { opacity: 1; }
}

@media (max-width: 480px) {
	.vfm-session-slideshow__nav { width: 34px; height: 34px; }
	.vfm-session-slideshow__nav--prev { left: 8px; }
	.vfm-session-slideshow__nav--next { right: 8px; }
	.vfm-session-slideshow__nav svg { width: 17px; height: 17px; }
}

/* ---- an embedded video in the same description ---- */

/*
 * WordPress hands back whatever width the oEmbed provider felt like (560px
 * for YouTube), so the player sat narrower than the text above it, square
 * cornered, flush against the paragraph. It is a block in the same column as
 * the slideshow, so it gets the same shape: full width, 16:9, the same
 * rounded corners, and air above and below.
 *
 * The iframe is matched directly rather than through a wrapper class because
 * WordPress's own oEmbed output has no wrapper of ours to hook -- what comes
 * back is the provider's <iframe>, sometimes inside a theme's own div.
 */
.vfm-event-sessions .vfm-event-session iframe,
.vfm-event-session iframe,
.vfm-event-day__description iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/*
	 * The theme zeroes margins on embedded media, and a bare
	 * `.vfm-event-session iframe` lost to it: measured on staging the player
	 * sat flush against the slideshow under it. The selector is repeated
	 * with the section class in front to outrank that reset, and the gap is
	 * stated on the slideshow too, since two touching 16:9 panels read as
	 * one broken element.
	 */
	margin: 28px 0;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--vfm-radius-lg, 16px);
	/* The player paints its own black box; the radius has to clip it. */
	overflow: hidden;
}

/* Whichever order they fall in, the two keep their air. */
.vfm-event-session iframe + .vfm-session-slideshow,
.vfm-event-session .vfm-session-slideshow + iframe {
	margin-top: 28px;
}

@supports not (aspect-ratio: 16 / 9) {
	.vfm-event-session iframe,
	.vfm-event-day__description iframe {
		height: 56.25vw;
		max-height: 540px;
	}
}

/*
 * Motion the visitor has asked not to see. The slideshow stops advancing on
 * its own (vfm-event-slideshow-01.js checks the same query) and the fade
 * between photos a dot picks is instant.
 */
@media (prefers-reduced-motion: reduce) {
	.vfm-session-slideshow__slide,
	.vfm-session-slideshow__slide.is-active,
	.vfm-session-slideshow__nav {
		transition: none;
	}
}