/* Homepage slot while a Digital Cover is promoted there (home.php). */

/* TVI video tile: the video fills the tile's 16:9 box. */
.tvi-cp-home--tvi .tvi-cp-home-video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/* White on #00aeef fails text contrast. #0075a1 is the headline blue. */
.grid-video.tvi-cp-home .video-label {
	background-color: #0075a1;
}

/* No play icon before the label. */
.grid-video.tvi-cp-home .video-label span {
	margin-left: 0;
}

/* Swooon top story: the video keeps the image's proportions. */
#top-story .tvi-cp-home-video {
	aspect-ratio: 744 / 420;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* TVI lead story: a Digital Cover's video over the image, faded in on play. */
.grid-left .tvi-cp-lead-video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.4s;
	width: 100%;
}

.grid-left .tvi-cp-lead-video.is-playing {
	opacity: 1;
}

/* Swooon feature spots: the same layer over the spot's 770x433 image.
   This file only loads on a homepage with a promo or story video, and
   position: relative alone changes nothing in a spot without a video. */
#featured-stories .featured-post {
	position: relative;
}

#featured-stories .tvi-cp-lead-video {
	aspect-ratio: 770 / 433;
	left: 0;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 0.4s;
	width: 100%;
}

#featured-stories .tvi-cp-lead-video.is-playing {
	opacity: 1;
}

/* Pause button over a looping video (cover-promo.js places it, right
   after the story's link). Same rules as cover-promo.css: keep the two in
   step. Desktop: shown on hover or keyboard focus, and
   while paused so the reader can find play again. Phones have no hover, so
   it is always shown. 32px clears WCAG 2.5.8's 24px target; the dark fill
   keeps it visible on any frame. */
.tvi-cp-pause {
	align-items: center;
	background: rgba(0, 0, 0, 0.45);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 32px;
	justify-content: center;
	left: 0;
	opacity: 0;
	padding: 0;

	/* top and left start at 0: cover-promo.js moves it from there. */
	position: absolute;
	top: 0;
	transition: opacity 0.2s, background-color 0.2s;
	width: 32px;
	z-index: 2;
}

.tvi-cp-pause[hidden] {
	display: none;
}

a:hover + .tvi-cp-pause,
video:hover + .tvi-cp-pause,
.tvi-cp-pause:hover,
.tvi-cp-pause:focus-visible,
.tvi-cp-pause.is-paused {
	opacity: 1;
}

.tvi-cp-pause:hover {
	background: rgba(0, 0, 0, 0.7);
}

/* White ring with a black edge: visible on dark and light frames alike. */
.tvi-cp-pause:focus-visible {
	box-shadow: 0 0 0 4px #000;
	outline: 2px solid #fff;
	outline-offset: 0;
}

@media (hover: none), (max-width: 768px) {

	.tvi-cp-pause {
		opacity: 1;
	}
}