/**
 * Video tiles in the gallery, and the player they open.
 *
 * The tile itself is an ordinary FooGallery image item - the poster frame -
 * so everything here is an overlay. Nothing changes the tile's box, which is
 * what keeps masonry, thumbnails and ordering working untouched.
 */

/* ------------------------------------------------------------------ tile */

.foogallery .fg-item.vnk-has-video .fg-item-inner {
	position: relative;
}

/*
 * The hairline, drawn on the item rather than on .fg-item-inner where the rest
 * of the gallery gets it.
 *
 * FooGallery fades .fg-item-inner in with an animation, and the border rides
 * on that element's opacity; on a video tile it was only showing once the
 * cursor was over it. The item itself is never animated, so a border here is
 * there from the first paint. It sits exactly where the other one does, so
 * when both are present they are indistinguishable.
 */
.foogallery .fg-item.vnk-has-video {
	box-shadow: 0 0 0 1px #6e6e6e;
}

.foogallery .fg-item.vnk-has-video:hover {
	box-shadow: 0 0 0 1px #8a8a8a;
}

/*
 * No magnifier on a video.
 *
 * The gallery is set to fg-hover-zoom, which puts a magnifying glass over
 * every tile on hover - the right prompt for a photograph that will open
 * larger, the wrong one for something that plays. The play badge already says
 * what this tile does.
 */
.foogallery .fg-item.vnk-has-video .fg-image-overlay {
	display: none;
}

/* Play badge, centred over the poster. */
.foogallery .fg-item.vnk-has-video .fg-item-inner::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	/* The triangle is a background image rather than a second element: an item
	   has only two pseudo-elements and the duration pill needs the other. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 54% 50%;
	background-size: 26px 26px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
	pointer-events: none;
	transition: background-color 0.18s ease, transform 0.18s ease;
	/*
	 * Above FooGallery's own layers, which are not obvious from the markup:
	 * .fg-item-inner is z-index 5 and .fg-thumb inside it is 4, so anything
	 * below 4 here is painted under the photograph. The badge was invisible
	 * at 3 even though the pseudo-element existed and had a background.
	 */
	z-index: 6;
}

.foogallery .fg-item.vnk-has-video .fg-item-inner:hover::after {
	background-color: rgba(0, 0, 0, 0.75);
	transform: scale(1.08);
}

/* Duration, bottom right. Set from the attribute so there is no second
   element and no server-side markup change. */
.foogallery .fg-item.vnk-has-video .fg-thumb::after {
	content: attr(data-vnk-video-length);
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 7px;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-family: var(--font-body), sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	pointer-events: none;
	/* Inside .fg-thumb, where the image itself sits at z-index 7. */
	z-index: 8;
}

/* An item with no duration would show an empty pill. */
.foogallery .fg-item.vnk-has-video .fg-thumb:not([data-vnk-video-length])::after {
	content: none;
}

/* --------------------------------------------------- inside the lightbox */

/**
 * Play button drawn over the poster while FooGallery's lightbox is showing it.
 *
 * Its panel cannot be taught about video in the free edition, so it displays
 * the poster as an ordinary photograph and this sits on top. Positioned
 * against the panel's own media element, so it follows the image as the
 * lightbox resizes it.
 */
/* The panel does not position .fg-media itself, and without this the button
   would be placed against the page rather than against the picture. */
.fg-panel .fg-media {
	position: relative;
}

.vnk-lightbox-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
	color: #fff;
	cursor: pointer;
	z-index: 10;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.vnk-lightbox-play:hover,
.vnk-lightbox-play:focus-visible {
	background-color: rgba(0, 0, 0, 0.78);
	transform: translate(-50%, -50%) scale(1.07);
}

.vnk-lightbox-play svg {
	width: 34px;
	height: 34px;
	margin-left: 4px;   /* optical centring: the triangle's mass sits left */
}

/* ---------------------------------------------------------------- player */

.vnk-vplayer {
	position: fixed;
	inset: 0;
	/*
	 * Above FooGallery's lightbox, which sits at 999999.
	 *
	 * The player can be opened from inside that lightbox, and at a lower value
	 * it was rendered underneath: the video played, audible and invisible,
	 * behind the poster the panel was still showing.
	 */
	z-index: 1000001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background-color: rgba(17, 17, 17, 0.94);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.vnk-vplayer.is-open {
	opacity: 1;
}

.vnk-vplayer video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	background: #000;
	box-shadow: 0 0 0 1px #6e6e6e;
	outline: none;
}

.vnk-vplayer-close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.vnk-vplayer-close:hover,
.vnk-vplayer-close:focus-visible {
	background-color: rgba(255, 255, 255, 0.22);
}

.vnk-vplayer-close svg {
	width: 20px;
	height: 20px;
}

/* Shown when the browser refuses the file - almost always HEVC from an
   iPhone, which only Safari plays. Silence would look like a broken site. */
.vnk-vplayer-error {
	max-width: 34ch;
	color: #ececec;
	font-family: var(--font-body), sans-serif;
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 600px) {
	.vnk-vplayer { padding: 0; }
	.foogallery .fg-item.vnk-has-video .fg-item-inner::after {
		width: 44px;
		height: 44px;
		margin: -22px 0 0 -22px;
		background-size: 21px 21px;
	}
}

/* ------------------------------------------------------------ the credit --- */

/*
 * Who added a photograph, where that was not whose trip it is.
 *
 * A mark rather than a name: fifty tiles with a name written across the corner
 * is a page of labels with photographs behind them. Point at one and it opens
 * into the name; a device with no pointer gets the same sentence on the
 * tooltip, and the whole of it when the photograph is opened.
 *
 * The z-index is the point of the whole block. Everything positioned inside a
 * FooGallery tile carries one - the image wrap five, the link seven, the hover
 * overlay eight - and a positioned element without one loses to all of them
 * however late it comes in the markup. Painted underneath the photograph, this
 * was present, correct and invisible.
 *
 * Lives in this stylesheet because it goes on the same tile the play badge
 * does, and both are loaded by the same rule: any page rendering a trip.
 */
.foogallery .fg-item.vnk-credited .fg-item-inner {
	position: relative;
}

.foogallery .fg-item.vnk-credited .vnk-credit {
	position: absolute;
	left: 6px;
	bottom: 6px;
	z-index: 9;
	display: flex;
	align-items: center;
	max-width: calc(100% - 12px);
	padding: 3px;
	border-radius: 999px;
	background-color: rgba(10, 10, 10, 0.55);
	color: #e8e8e8;
	/* Never in the way of the photograph it belongs to. */
	pointer-events: none;
}

.foogallery .fg-item.vnk-credited .vnk-credit-mark {
	display: block;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.foogallery .fg-item.vnk-credited .vnk-credit-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The name, folded away. max-width rather than display, so it has something to
 * open from - and no transition on a device that would rather not have one.
 */
.foogallery .fg-item.vnk-credited .vnk-credit-name {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: max-width 0.18s ease, opacity 0.18s ease, padding 0.18s ease;
}

.foogallery .fg-item.vnk-credited:hover .vnk-credit-name,
.foogallery .fg-item.vnk-credited:focus-within .vnk-credit-name {
	max-width: 14rem;
	padding: 0 5px 0 4px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.foogallery .fg-item.vnk-credited .vnk-credit-name {
		transition: none;
	}
}

/* A photograph too small to hold a name keeps the mark and drops the rest. */
@media (max-width: 480px) {
	.foogallery .fg-item.vnk-credited:hover .vnk-credit-name {
		max-width: 8rem;
	}
}