/* Rogue front-page carousel. Paired with _carousel.php. */

/* Lock the frame to 16:9 and crop to fill. Session posters and the
   _platform.jpg placeholder are both 1280x720, so nothing is cropped today --
   this is here so one odd-sized poster cannot make the carousel jump height
   between slides, which is the usual way these break. */
.clevr-carousel .carousel-item img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: #000;
}

/* Legibility scrim. White text over an arbitrary video frame is unreadable
   often enough that this is not optional -- a bright poster washes out the
   title completely. Bottom-weighted so it darkens only the caption area. */
.clevr-carousel .clevr-carousel-scrim {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 60%;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0) 100%);
	pointer-events: none;
}

/* Bootstrap centers the caption and floats it 20px off the bottom. Pull it
   left and into the lower third instead. */
.clevr-carousel .clevr-carousel-caption {
	left: 0; right: 0; bottom: 0;
	padding: 1rem 1.25rem 1.5rem 1.25rem;
	text-align: left;
	/* Sits above the whole-slide link, so it would otherwise eat every click
	   landing on the title or description -- exactly where people aim. */
	pointer-events: none;
}
.clevr-carousel .clevr-carousel-title {
	font-weight: 700;
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.clevr-carousel .clevr-carousel-description {
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
	/* Two lines, then ellipsis -- descriptions are free text and a long one
	   would otherwise push the caption over the whole image. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.clevr-carousel .clevr-carousel-viewers {
	font-size: 0.8rem;
	text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Indicators sit below the caption text by default and collide with it.
   Move them to the top-right, out of the way of the title. */
.clevr-carousel .carousel-indicators {
	z-index: 25;
	top: 0.75rem;
	bottom: auto;
	right: 1rem;
	left: auto;
	margin: 0;
	justify-content: flex-end;
}
.clevr-carousel .carousel-indicators li {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.7);
	background-color: rgba(0,0,0,0.35);
}
.clevr-carousel .carousel-indicators li.active {
	background-color: #ffffff;
}

/* Whole-slide click target. An explicit anchor rather than stretched-link,
   which resolves against the nearest positioned ancestor -- and that is
   .carousel-caption (position:absolute), so it never reached the image. */
.clevr-carousel .clevr-carousel-link {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 5;
}

/* Explicit stacking order, because Bootstrap's own values collide here:
     image/scrim   auto
     link            5
     caption        10  (Bootstrap's default)
     controls       20
     indicators     25
   Controls have to clear the caption: this caption is widened to the full
   slide, so at Bootstrap's default it would sit over the lower half of both
   arrow hit areas. Indicators then have to clear the controls, since they are
   moved to the top right and overlap the right arrow's column. */
.clevr-carousel .carousel-control-prev,
.clevr-carousel .carousel-control-next {
	z-index: 20;
	width: 12%;
}
.clevr-carousel .carousel-control-prev-icon,
.clevr-carousel .carousel-control-next-icon {
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
}

@media (max-width: 767px) {
	.clevr-carousel .clevr-carousel-caption { padding: 0.75rem 0.9rem 1rem 0.9rem; }
	.clevr-carousel .clevr-carousel-title { font-size: 1.05rem; }
}

/* The whole slide is clickable now, so it should say so. */
.clevr-carousel .carousel-item img {
	transition: transform 0.35s ease, filter 0.35s ease;
}
.clevr-carousel .clevr-carousel-link:hover ~ .carousel-caption .clevr-carousel-title,
.clevr-carousel .clevr-carousel-link:focus ~ .carousel-caption .clevr-carousel-title {
	text-decoration: underline;
}
.clevr-carousel:hover .carousel-item.active img {
	transform: scale(1.02);
	filter: brightness(1.06);
}

/* Keyboard focus ring -- the anchor is empty, so without this there is no
   visible indication of where focus is. */
.clevr-carousel .clevr-carousel-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.clevr-carousel .carousel-item img { transition: none; }
	.clevr-carousel:hover .carousel-item.active img { transform: none; }
}