/*
 * Recent galleries filmstrip on the front page. See lib/home-filmstrip.php.
 *
 * The strip is a fixed overlay along the bottom edge. Everything but the cards is
 * click-through, so the slideshow underneath keeps its full-screen click target.
 *
 * Colour, type and timing come from css/tokens.css, declared as a dependency of
 * this stylesheet in lib/home-filmstrip.php. Nothing here should reintroduce a
 * literal colour: an undefined custom property drops its whole declaration, so a
 * token that has gone missing must fail visibly rather than fall back to a
 * hardcoded value that then drifts from the rest of the site.
 */

.otr-filmstrip {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	padding-bottom: 24px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--otr-scrim) 100%);
}

.otr-filmstrip__head {
	display: flex;
	align-items: baseline;
	padding: 22px 34px 12px;
}

.otr-filmstrip__heading {
	margin: 0;
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	line-height: 1;
	letter-spacing: var(--otr-tracking-wide);
	text-transform: uppercase;
	color: var(--otr-text);
}

.otr-filmstrip__track {
	display: flex;
	gap: 14px;
	padding: 0 34px 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	pointer-events: auto;
	cursor: grab;
}

.otr-filmstrip__track::-webkit-scrollbar {
	display: none;
}

.otr-filmstrip__track.is-dragging {
	cursor: grabbing;
}

.otr-filmstrip__card {
	flex: 0 0 auto;
	width: 340px;
	color: var(--otr-text);
	text-decoration: none;
}

.otr-filmstrip__shot {
	display: block;
	height: 214px;
	border-radius: 3px;
	background-color: var(--otr-surface-raised);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 6px 18px var(--otr-scrim-soft);
	transition: transform 350ms ease, box-shadow 350ms ease;
}

.otr-filmstrip__card:hover .otr-filmstrip__shot,
.otr-filmstrip__card:focus-visible .otr-filmstrip__shot {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
}

.otr-filmstrip__title {
	display: block;
	margin: 10px 0 3px;
	font-size: var(--otr-size-body);
	line-height: 1.3;
	color: var(--otr-text);
}

.otr-filmstrip__meta {
	display: block;
	font-size: var(--otr-size-label);
	letter-spacing: var(--otr-tracking-slight);
	color: var(--otr-text-dim);
}

.otr-filmstrip__place {
	color: var(--otr-accent);
}

.otr-filmstrip__sep {
	margin: 0 3px;
}

/* The slideshow caption would sit along the bottom edge, where the strip now is.
   Move it to the top right instead, clear of the translucent header bar, whose
   height home-filmstrip.js measures and publishes. The `html` prefix is there to
   outrank supersized.shutter.css and tg_frame.css, which are enqueued by the
   gallery template and so are printed after this file. */
html #slidecaption {
	top: calc(var(--otr-header-height, 0px) + 20px);
	right: 34px;
	bottom: auto;
	left: auto;
	width: auto;
	max-width: 46vw;
}

html #slidecaption #gallery_caption {
	position: static;
	bottom: auto;
	width: auto;
	text-align: right;
}

html #slidecaption #gallery_caption .tg_caption {
	float: none;
	margin: 0;
}

/* Short viewports: a laptop should not give a third of its screen to the drawer. */
@media (min-width: 769px) and (max-height: 850px) {
	.otr-filmstrip__card {
		width: 268px;
	}

	.otr-filmstrip__shot {
		height: 168px;
	}

	.otr-filmstrip__head {
		padding-top: 16px;
	}
}

@media (max-width: 768px) {
	.otr-filmstrip {
		padding-bottom: 10px;
	}

	.otr-filmstrip__head {
		padding: 10px 18px 8px;
	}

	html #slidecaption {
		right: 18px;
		max-width: 62vw;
		/* The caption sets no size of its own - it inherits body's 16px, which over
		   a photograph on a phone competes with the logo and wraps a place name to
		   three lines inside 62vw. A step down in the scale, with the leading
		   tightened to match. reset.css puts font-size:100% on every div, so this
		   reaches .tg_caption by inheritance without naming it. */
		font-size: var(--otr-size-small);
		line-height: 1.35;
	}

	.otr-filmstrip__track {
		gap: 10px;
		padding: 0 18px 4px;
	}

	.otr-filmstrip__card {
		width: 150px;
	}

	.otr-filmstrip__shot {
		height: 94px;
	}

	/* Step down to the next size already in the scale rather than inventing a
	   breakpoint-only value. */
	.otr-filmstrip__title {
		margin: 7px 0 2px;
		font-size: var(--otr-size-small);
	}

	.otr-filmstrip__meta {
		font-size: var(--otr-size-label);
		/* The full line - place, date, image count - wrapped to two lines in a
		   150px card, which silently cost ~19px of screen on every phone. The
		   count is dropped below instead, and nowrap guards against an unusually
		   long place name doing the same thing again. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Place and date survive; the image count is the one datum worth losing to
	   keep the strip off a third of the screen. It carries its own separator, so
	   hiding it leaves no dangling middot. */
	.otr-filmstrip__images {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.otr-filmstrip__shot {
		transition: none;
	}

	.otr-filmstrip__card:hover .otr-filmstrip__shot,
	.otr-filmstrip__card:focus-visible .otr-filmstrip__shot {
		transform: none;
	}
}