/**
 * Digital Cover promo band (mu-plugins/tvi-cover-promo).
 *
 * The band takes the host site's colors; the card inside keeps the look of
 * the site the cover lives on. Fonts load from each theme's own files under
 * their own family names, so they never clash with the host theme's faces.
 */

@font-face {
	font-display: swap;
	font-family: "TVICP Plex Condensed";
	font-weight: 700;
	src: url("../../themes/tv/assets/fonts/IBMPlexSansCondensed-Bold.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "TVICP Plex";
	font-weight: 400;
	src: url("../../themes/tv/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "TVICP Plex";
	font-weight: 700;
	src: url("../../themes/tv/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "TVICP Canela";
	font-weight: 300;
	src: url("../../themes/swooon/assets/fonts/CanelaLight.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "TVICP Graphik";
	font-weight: 400;
	src: url("../../themes/swooon/assets/fonts/GraphikRegular.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "TVICP Graphik";
	font-weight: 500;
	src: url("../../themes/swooon/assets/fonts/GraphikMedium.woff2") format("woff2");
}

/* ---- Band: host site's colors ---- */

.tvi-cp-band {
	--tvi-cp-band-bg: #eceef0;
	--tvi-cp-band-line: #d3d8db;
	--tvi-cp-band-text: #5d666c;
	--tvi-cp-band-accent: #00aeef;

	background: var(--tvi-cp-band-bg);
	border-bottom: 1px solid var(--tvi-cp-band-line);
	border-top: 1px solid var(--tvi-cp-band-line);
	box-sizing: border-box;
	clear: both;
	display: block;
	float: none;
	margin: 32px auto 36px;

	/* Both themes centre article children at 768px; band = column + padding. */
	max-width: 864px;
	padding: 20px 48px 16px;
	position: relative;
	width: 100%;
}

.tvi-cp-band.tvi-cp-band--host-swooon {
	--tvi-cp-band-bg: #f7eef3;
	--tvi-cp-band-line: #ead7e1;
	--tvi-cp-band-text: #7a6670;
	--tvi-cp-band-accent: #9a0065;
}

/* Swooon's theme pads every article <p> by 8px; the band sets its own. */
.tvi-cp-band p {
	padding-left: 0;
	padding-right: 0;
}

.tvi-cp-band .tvi-cp-label,
.tvi-cp-band .tvi-cp-continue {
	color: var(--tvi-cp-band-text);
	font-family: "TVICP Plex", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	margin: 0;
	text-transform: uppercase;
}

.tvi-cp-band .tvi-cp-label {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.tvi-cp-band .tvi-cp-label::before,
.tvi-cp-band .tvi-cp-label::after {
	background: var(--tvi-cp-band-line);
	content: "";
	flex: 1;
	height: 1px;
}

.tvi-cp-band .tvi-cp-continue {
	margin-top: 14px;
	text-align: center;
}

/* ---- Card: the cover's own site ---- */

.tvi-cp-band a.tvi-cp-card {
	background: #0f1112;
	border-radius: 6px;
	color: #fff;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.tvi-cp-band a.tvi-cp-card:focus-visible {
	outline: 3px solid var(--tvi-cp-band-accent);
	outline-offset: 3px;
}

.tvi-cp-band .tvi-cp-media {
	aspect-ratio: 16 / 9;
	background: #000;
	max-width: 100%;
	position: relative;
}

.tvi-cp-band .tvi-cp-media video {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.tvi-cp-band .tvi-cp-body {
	display: grid;
	gap: 8px;
	padding: 18px 22px 20px;
}

.tvi-cp-band .tvi-cp-body p {
	margin: 0;
}

.tvi-cp-band .tvi-cp-eyebrow {
	color: #00aeef;
	font-family: "TVICP Plex", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.tvi-cp-band .tvi-cp-hed {
	color: #fff;
	font-family: "TVICP Plex Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.08;
	text-wrap: balance;
}

.tvi-cp-band .tvi-cp-dek {
	color: #c7ccd0;
	font-family: "TVICP Plex", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
}

.tvi-cp-band .tvi-cp-cta {
	color: #00aeef;
	font-family: "TVICP Plex", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	margin-top: 4px;
}

.tvi-cp-band a.tvi-cp-card:hover .tvi-cp-hed {
	text-decoration: underline;
	text-decoration-color: #00aeef;
	text-underline-offset: 4px;
}

/* Swooon cover: white card, Canela headline, Graphik text, magenta accents. */

.tvi-cp-band a.tvi-cp-card--swooon {
	background: #fff;
	border: 1px solid #ead7e1;
	color: #1b1418;
}

.tvi-cp-band .tvi-cp-card--swooon .tvi-cp-eyebrow,
.tvi-cp-band .tvi-cp-card--swooon .tvi-cp-cta {
	color: #9a0065;
	font-family: "TVICP Graphik", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
}

.tvi-cp-band .tvi-cp-card--swooon .tvi-cp-hed {
	color: #1b1418;
	font-family: "TVICP Canela", Georgia, serif;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.1;
}

.tvi-cp-band .tvi-cp-card--swooon .tvi-cp-dek {
	color: #5b4f56;
	font-family: "TVICP Graphik", "Helvetica Neue", Arial, sans-serif;
}

.tvi-cp-band a.tvi-cp-card--swooon:hover .tvi-cp-hed {
	text-decoration-color: #9a0065;
}

/* ---- Phones: edge to edge ---- */

@media (max-width: 599px) {

	.tvi-cp-band {
		margin: 28px 0 30px calc(50% - 50vw);
		max-width: none;
		padding: 16px 0 14px;
		width: 100vw;
	}

	.tvi-cp-band .tvi-cp-label {
		padding: 0 16px;
	}

	.tvi-cp-band a.tvi-cp-card {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
	}

	.tvi-cp-band .tvi-cp-body {
		padding: 14px 16px 16px;
	}

	.tvi-cp-band .tvi-cp-hed {
		font-size: 24px;
	}

	.tvi-cp-band .tvi-cp-card--swooon .tvi-cp-hed {
		font-size: 27px;
	}

	.tvi-cp-band .tvi-cp-dek {
		font-size: 15px;
	}
}

/* Pause button over the band's looping video (cover-promo.js places it,
   right after the card's link). Same rules as home.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;
	}
}