/* [lg_slider] — replaces the licensed Soliloquy slider. Deliberately unscoped class names
   unique to this element, so there is nothing to collide with in Kino Flo's theme. */
.lg-slider { position: relative; margin: 0 auto; max-width: 100%; }
.lg-slider img { width: 100%; height: auto; display: block; }
.lg-slider .lg-slide { position: relative; }
.lg-slider .lg-slide-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0.75rem 1rem; background: rgba(0,0,0,.6); color: #fff;
}
/* Slick needs a height before init or the first paint collapses. */
.lg-slider:not(.slick-initialized) .lg-slide + .lg-slide { display: none; }

/*
 * Keep the pagination dots INSIDE the slider box.
 *
 * Slick's own CSS positions `.slick-dots` at `bottom: -25px`, i.e. hanging below the slider it
 * belongs to. On the microsites that lands them past the bottom edge of the black hero section,
 * on the white page background lg-layout.css sets for these pages — a white band across the full
 * width of an otherwise black page, with the dots floating in it.
 *
 * Measured on /spectrum-os/: section ends at 1787, dots run 1785 to 1812.
 *
 * Reserving the strip as padding on the slider and pinning the dots to `bottom: 0` puts them back
 * inside the section that is supposed to be behind them, without moving them relative to the
 * slides or touching slick's JS.
 */
.lg-microsite .lg-slider.slick-dotted.slick-slider {
	/* Slick's own `.slick-dotted.slick-slider { margin-bottom: 30px }` is what produced the white
	   band: the slider is the last thing in the black hero, so its bottom MARGIN falls outside the
	   section, onto the white page background. The dot strip lives in padding now, so the margin
	   has no job left. Specificity has to clear slick's 0,3,0 or the vendor rule wins. */
	margin-bottom: 0;
	padding-bottom: 27px;
}

.lg-microsite .lg-slider .slick-dots {
	bottom: 0;
}

/* Slick draws its dots as a black "•". That was legible only by accident, while they sat on the
   white band this fix removes; against the hero they are black on black and the slider looks like
   it has no controls at all. White, with the inactive ones dimmed, matches how the dots read on
   the original's dark sections. */
.lg-microsite .lg-slider .slick-dots li button::before {
	color: #fff;
	opacity: 0.45;
}

.lg-microsite .lg-slider .slick-dots li.slick-active button::before {
	color: #fff;
	opacity: 1;
}

/*
 * Bring the arrows back on screen.
 *
 * Slick positions them at `left: -25px` / `right: -25px`, which assumes a slider inset from the
 * page edge. These sliders are FULL BLEED, so on a 1440px viewport the arrows sat at x=-25 and
 * x=1445 — present, styled, white, and entirely outside the window. The slider looked like it had
 * no controls at all.
 *
 * Inset far enough to clear the edge, and enlarged: a 20x20 hit target at the vertical midpoint of
 * an 840px slide is hard to find and harder to hit.
 */
.lg-microsite .lg-slider .slick-prev,
.lg-microsite .lg-slider .slick-next {
	width: 44px;
	height: 44px;
	z-index: 2;
}

.lg-microsite .lg-slider .slick-prev { left: 24px; }
.lg-microsite .lg-slider .slick-next { right: 24px; }

.lg-microsite .lg-slider .slick-prev::before,
.lg-microsite .lg-slider .slick-next::before {
	font-size: 34px;
	color: #fff;
	opacity: 0.7;
}

.lg-microsite .lg-slider .slick-prev:hover::before,
.lg-microsite .lg-slider .slick-next:hover::before {
	opacity: 1;
}