/* Home page carousel - blocks/fiction/{ar,en}/Block-carousel.php
 *
 * The block emitted a .slide-overlay on every slide and there was NO rule for it
 * anywhere in this template, so the scrim did nothing and white caption text sat
 * directly on the photograph. The caption was also d-none d-md-block, i.e. invisible
 * on every phone.
 *
 * Linked by templates/fiction/home_ar.dwt and home_en.dwt. Bump the ?v= when editing:
 * these links carry no filemtime() stamp, so a cached browser keeps the old copy. */

/* The scrim. Drawn only over a photo that carries text (the block decides), and kept
   as a bottom-weighted gradient rather than a flat wash so the picture still reads. */
#myCarousel .slide-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, 0) 68%);
}

/* The caption. No d-none here: a caption that disappears below 768px is a caption
   nobody on a phone ever sees. */
/* bottom clears the indicators, which sit at the very bottom and are 23px tall with a
   13px margin. At 1.5rem the subtitle and the indicator bars overlapped by 18px
   vertically and 869px horizontally - measured, not guessed. */
#myCarousel .carousel-caption {
	position: absolute;
	right: 8%;
	left: 8%;
	bottom: 2.75rem;
	top: auto;
	z-index: 2;
	padding: 0;
	text-align: center;
}

/* The text panel.
 *
 * Its colour is the slide's own BGColor, handed over by the block as an "r, g, b"
 * triplet in --sld-cap-rgb rather than a finished background-color - which is what lets
 * the fade below be built from several rgba() stops and retuned in one place. A slide
 * that stores no colour simply gets no .slide-caption-fade class, stays transparent,
 * and relies on the scrim above.
 *
 * It is a full-width block, not an inline-block hugging the text: a gradient needs room
 * above the words to fade out in, or the fade reads as a hard edge. */
#myCarousel .slide-caption-box {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: .75rem 1.25rem;
	border-radius: .65rem;
}

/* The fade. Solid where the text sits, gone by the top, so the caption melts into the
   photograph instead of sitting on a rectangle. The lower stops stay above ~.8 alpha
   because that band is what the text is actually read against. */
#myCarousel .slide-caption-box.slide-caption-fade {
	/* The fade reaches the slide's bottom edge, so the indicators sit INSIDE it - the
	   bottom padding is what keeps the subtitle clear of them. */
	padding: 2.5rem 1.5rem 2.9rem;
	border-radius: 0 0 .65rem .65rem;
	background: linear-gradient(to top,
		rgba(var(--sld-cap-rgb), .95) 0%,
		rgba(var(--sld-cap-rgb), .88) 32%,
		rgba(var(--sld-cap-rgb), .62) 60%,
		rgba(var(--sld-cap-rgb), .28) 80%,
		rgba(var(--sld-cap-rgb), 0) 100%);
}

/* With a fading panel the caption reaches the slide's edges, or the gradient stops
   short of them and the hard corners come back. The class is put on by the block when
   the slide has a colour - deliberately not :has(), which this does not need. */
#myCarousel .carousel-caption-flush {
	right: 0;
	left: 0;
	/* The flush variant owns its own bottom padding (above), so it starts at the edge. */
	bottom: 0;
}

#myCarousel .slide-title {
	margin: 0;
	font-size: clamp(1.1rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1.35;
	/* The block sets colour inline from HeaderColor. This is the fallback for a row
	   that stores none - the overwhelming majority of the legacy rows. */
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	overflow-wrap: break-word;
}

#myCarousel .slide-title-link,
#myCarousel .slide-title-link:hover,
#myCarousel .slide-title-link:focus {
	color: inherit;
	text-decoration: none;
}

#myCarousel .slide-title-link:hover { text-decoration: underline; }

#myCarousel .slide-sub {
	margin: .35rem 0 0;
	font-size: clamp(.8rem, 1.4vw, 1.05rem);
	line-height: 1.6;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	overflow-wrap: break-word;
}

/* On a narrow screen the 16/9 box is short, so the caption needs the room back. */
@media (max-width: 575.98px) {
	#myCarousel .carousel-caption {
		right: 4%;
		left: 4%;
		bottom: .75rem;
	}

	#myCarousel .slide-caption-box { padding: .5rem .75rem; }

	#myCarousel .slide-sub {
		/* Two lines at most: below this width a long subtitle covers the picture
		   entirely. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* The arrows sit on photographs of any brightness, so they get their own backing
   rather than relying on the image behind them. */
#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next {
	width: 8%;
	opacity: 1;
}

#myCarousel .carousel-control-prev-icon,
#myCarousel .carousel-control-next-icon {
	width: 2.4rem;
	height: 2.4rem;
	padding: .65rem;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .35);
	background-size: 1.1rem 1.1rem;
	transition: background-color .15s ease;
}

#myCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#myCarousel .carousel-control-next:hover .carousel-control-next-icon {
	background-color: rgba(0, 0, 0, .6);
}

/* A slide with no image and no background colour would otherwise be a blank white
   gap with no indication anything is there. */
#myCarousel .carousel-item { background-color: #1a2b4c; }