/*
 * What a public video needs that a chapter's does not.
 *
 * assets/css/video-facade.css is the shared base and does most of this: the
 * 16:9 stage, the poster cover, the round play button, the player that fills
 * the box afterwards. This file is only the differences, and it is loaded only
 * by a page holding [smartg_public_video].
 *
 * EVERY RULE IS INSIDE .smartg-video--public. This loads on a page that belongs
 * to somebody else's theme — Divi, here — next to that theme's own video
 * embeds. Nothing may reach past the shortcode's own wrapper, and there is no
 * element selector and no :root in the file.
 *
 * THE CHAPTER FACADE IS NOT TOUCHED BY ANY OF IT. The modifier class exists on
 * the public wrapper only, so a chapter cannot match a rule in here even if
 * this file were somehow loaded on one.
 */

/*
 * Fills the column it is placed in. The reader constrains its own facade to the
 * reading measure; a public page has no measure, and the point is to sit at the
 * same width as the theme's other embeds in the same column.
 */
.smartg-video--public {
	width: 100%;
	max-width: none;
	margin: 0 0 1.5rem;
}

/*
 * The stage keeps its 16:9 whatever the theme does to figures, so the player
 * that replaces the button lands in a box of exactly the same height and the
 * page does not jump on click.
 */
.smartg-video--public .smartg-video__stage {
	aspect-ratio: 16 / 9;
	width: 100%;
}

/*
 * A poster, or a dark panel — never an empty white box. The background colour
 * is on the button in the shared base; it is repeated here because a theme that
 * styles buttons can overwrite the shorthand, and a blank white rectangle where
 * a video should be is the failure this whole file exists to fix.
 */
.smartg-video--public .smartg-video__button {
	background-color: #223038;
	background-size: cover;
	background-position: center;
	border: 0;
	border-radius: inherit;
	box-shadow: none;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	text-transform: none;
	transition: none;
}

/*
 * With no poster the title is the whole of what the box shows, so it is given
 * room to be read rather than left as a caption-sized chip on an empty panel.
 */
.smartg-video--public.smartg-video--no-poster .smartg-video__label {
	max-width: 24ch;
	padding: 0.5rem 1rem;
	font-size: 1.05rem;
	line-height: 1.3;
}

/* A larger target than the reader's, because this is the only thing to press. */
.smartg-video--public .smartg-video__icon {
	width: 5rem;
	height: 5rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	transition: transform 120ms ease-out;
}

.smartg-video--public .smartg-video__button:hover .smartg-video__icon {
	transform: scale( 1.06 );
}

@media ( prefers-reduced-motion: reduce ) {
	.smartg-video--public .smartg-video__icon {
		transition: none;
	}

	.smartg-video--public .smartg-video__button:hover .smartg-video__icon {
		transform: none;
	}
}

/*
 * A visible focus ring. The reader has one, scoped to .smartg-reader-shell,
 * which a public page does not have — so without this the only way to see where
 * the keyboard is would be whatever the theme happens to do to a button with no
 * border. Inset, because the button fills the stage and an outside ring would
 * be clipped by the stage's overflow.
 */
.smartg-video--public .smartg-video__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -5px;
}

/* Browsers without :focus-visible still get a ring, and a mouse press does not. */
.smartg-video--public .smartg-video__button:focus {
	outline: 3px solid #fff;
	outline-offset: -5px;
}

.smartg-video--public .smartg-video__button:focus:not(:focus-visible) {
	outline: none;
}

/*
 * The running time. Its own element, and on a public page it sits under the
 * title rather than being run together with it — which is what the unstyled
 * version did, reading "What cancer taught me about living46:27".
 */
.smartg-video--public .smartg-video__duration {
	margin-top: 0.1rem;
	background: rgba(31, 41, 51, 0.72);
	font-size: 0.8rem;
}

/*
 * The caption, when the author wrote one. Quiet, and below the box.
 */
.smartg-video--public .smartg-video__note {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.8;
}

.smartg-video--public .smartg-video__player {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #223038;
}