/* Homepage feature slider -- replaces bjqs.css.
 *
 * bjqs positioned every slide absolutely and hid the <ul> until its JS ran
 * (ul.bjqs{display:none}), so with JS off the slider vanished entirely.
 * This uses a flex track instead: with JS off the first slide simply shows
 * and the rest are clipped by .feature's existing overflow:hidden.
 *
 * Class names are bjqs's own so the theme's arrow styling in style.css --
 * and the accent colour injected inline by base.html -- keep applying.
 */
.feature { position: relative; }

ul.bjqs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}
ul.bjqs.bjqs-ready { transition: transform 450ms ease; }

ul.bjqs > li {
	position: relative;      /* the theme's caption bar is absolute within */
	flex: 0 0 100%;
	max-width: 100%;
	list-style: none;

	/* FIXED: pin the slide to the frame height.
	 *
	 * .feature clips at 410px, but the featured images are 1200x900, which
	 * render 720px tall at the container's 960px width. The caption bar is
	 * absolutely positioned at bottom:0 of the slide, so it sat at 720px --
	 * 310px below the clip. The article titles have been invisible on the
	 * live slider for years; bjqs behaved the same way, so this is a
	 * long-standing bug rather than a regression from the port.
	 *
	 * Pinning the slide to 410px puts the caption back on screen. object-fit
	 * on the image keeps the photo filling the frame without distortion. */
	height: 410px;
	overflow: hidden;
}
ul.bjqs > li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Controls are injected by slider.js, so they exist only when usable. */
ul.bjqs-controls {
	list-style: none;
	margin: 0;
	padding: 0;
	z-index: 20;
}
ul.bjqs-controls.v-centered li a { position: absolute; top: 50%; }
ul.bjqs-controls.v-centered li.bjqs-prev a { left: 0; }
ul.bjqs-controls.v-centered li.bjqs-next a { right: 0; }

@media (prefers-reduced-motion: reduce) {
	ul.bjqs.bjqs-ready { transition: none; }
}

/* The theme hides the slider and shows .mobile-feature below its breakpoint;
   at that width a fixed 410px frame would letterbox badly, so let the
   slides size to the image there. */
@media (max-width: 960px) {
	ul.bjqs > li { height: auto; }
	ul.bjqs > li img { height: auto; object-fit: initial; }
}