/**
 * SNYCF — Videos
 *
 * Loads on /videos/ and on a single video only. The player box reserves its
 * ratio before anything is in it, so activating a video never moves the page.
 *
 * @package snycf
 */

/* =====================================================================
 * Archive intro
 * ================================================================== */

.snycf-videos-intro__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var( --snycf-space-md ) var( --snycf-space-xl );
	border-top: var( --snycf-rule-top );
	padding-top: var( --snycf-rule-gap );
}

.snycf-videos-intro__text {
	min-width: 0;
	flex: 1 1 20rem;
}

.snycf-videos-intro__title {
	margin: var( --snycf-space-2xs ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-display );
	line-height: var( --snycf-leading-tight );
	letter-spacing: var( --snycf-tracking-display );
	text-transform: none;
}

.snycf-videos-intro__deck {
	margin: var( --snycf-space-sm ) 0 0;
	max-width: 46ch;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-deck );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-videos-intro__meta {
	flex: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var( --snycf-space-3xs );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-videos-intro__count {
	color: var( --snycf-accent );
	font-weight: var( --snycf-weight-black );
}

/* =====================================================================
 * Featured video
 * ================================================================== */

.snycf-videos-featured__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-lg );
	align-items: start;
}

@media ( min-width: 60rem ) {

	.snycf-videos-featured__inner {
		grid-template-columns: 7fr 5fr;
		gap: var( --snycf-space-3xl );
	}
}

.snycf-videos-featured__media {
	position: relative;
	display: block;
	min-width: 0;
	background-color: var( --snycf-ink );
}

.snycf-videos-featured__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --snycf-paper );
	pointer-events: none;
}

.snycf-videos-featured__play svg {
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.75rem;
	background-color: var( --snycf-accent );
	box-sizing: content-box;
}

.snycf-videos-featured__duration,
.snycf-videos-list .snycf-video-card__duration {
	font-variant-numeric: tabular-nums;
}

.snycf-videos-featured__duration {
	position: absolute;
	right: var( --snycf-space-2xs );
	bottom: var( --snycf-space-2xs );
	padding: 0.15rem 0.4rem;
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-badge );
	font-weight: var( --snycf-weight-extrabold );
	pointer-events: none;
}

.snycf-videos-featured__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --snycf-space-xs );
}

.snycf-videos-featured__title {
	margin: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h3 );
	line-height: var( --snycf-leading-snug );
	letter-spacing: var( --snycf-tracking-headline );
	text-transform: none;
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.snycf-videos-featured__deck {
	margin: 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-prose-sm );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-videos-featured__meta {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

/* =====================================================================
 * Archive list
 * ================================================================== */

.snycf-videos-list__count {
	margin: 0;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
	white-space: nowrap;
}

.snycf-videos-list__items {
	margin-top: var( --snycf-space-2xs );
	border-top: var( --snycf-divider );
}

.snycf-videos-discover__columns {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var( --snycf-space-xl ) var( --snycf-space-4xl );
}

@media ( min-width: 60rem ) {

	.snycf-videos-discover__columns {
		grid-template-columns: 7fr 5fr;
	}
}

/* =====================================================================
 * Video detail header
 * ================================================================== */

.snycf-video-header {
	padding-top: var( --snycf-space-2xl );
}

.snycf-video-header__breadcrumb {
	margin: 0 0 var( --snycf-space-md );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-bold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-video-header__divider {
	color: var( --snycf-rule-soft );
	margin-inline: var( --snycf-space-3xs );
}

.snycf-video-header__title {
	margin: var( --snycf-space-sm ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-weight: var( --snycf-weight-bold );
	font-size: var( --snycf-size-h1 );
	line-height: var( --snycf-leading-headline );
	letter-spacing: var( --snycf-tracking-headline );
	text-transform: none;
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.snycf-video-header__deck {
	margin: var( --snycf-space-md ) 0 0;
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: var( --snycf-size-deck );
	line-height: var( --snycf-leading-deck );
	color: var( --snycf-text-prose );
	text-wrap: pretty;
}

.snycf-video-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --snycf-space-2xs ) var( --snycf-space-sm );
	margin-top: var( --snycf-space-lg );
	padding-block: var( --snycf-space-xs );
	border-top: var( --snycf-border-width-hair ) solid var( --snycf-ink );
	border-bottom: var( --snycf-divider );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-meta );
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	color: var( --snycf-text-meta );
}

.snycf-video-header__credits {
	margin: 0;
	min-width: 0;
}

.snycf-video-header__byline {
	color: var( --snycf-text );
	font-weight: var( --snycf-weight-extrabold );
}

.snycf-video-header__comments {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: var( --snycf-target-min );
	color: var( --snycf-accent );
	font-weight: var( --snycf-weight-extrabold );
}

/* =====================================================================
 * Player
 * ================================================================== */

.snycf-player-wrap {
	margin: var( --snycf-space-xl ) 0 0;
}

/*
 * The ratio is on the box, not on whatever ends up inside it. Poster, native
 * <video> and provider iframe all fill the same reserved space, so pressing
 * Play swaps the contents without the page moving under the reader.
 */
.snycf-player {
	position: relative;
	width: 100%;
	background-color: var( --snycf-ink );
}

.snycf-player__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.snycf-player__frame > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.snycf-player__iframe,
.snycf-player__video {
	border: 0;
	display: block;
	object-fit: contain;
	background-color: var( --snycf-ink );
}

.snycf-player__poster {
	display: block;
}

.snycf-player__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.snycf-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --snycf-paper );
	cursor: pointer;
}

.snycf-player__play svg {
	width: 2rem;
	height: 2rem;
	padding: 1.875rem;
	background-color: var( --snycf-accent );
	box-sizing: content-box;
	transition: background-color 120ms ease;
}

@media ( prefers-reduced-motion: reduce ) {

	.snycf-player__play svg {
		transition: none;
	}
}

.snycf-player__play:hover svg {
	background-color: var( --snycf-accent-deep );
}

.snycf-player__play:focus-visible {
	outline: 3px solid var( --snycf-paper );
	outline-offset: -6px;
}

.snycf-player__fallback,
.snycf-player__unavailable {
	position: absolute;
	inset: auto 0 0 0;
	height: auto;
	margin: 0;
	padding: var( --snycf-space-xs ) var( --snycf-space-sm );
	background-color: var( --snycf-ink );
	color: var( --snycf-paper );
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: var( --snycf-size-kicker );
	font-weight: var( --snycf-weight-extrabold );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
}

.snycf-player__fallback {
	display: block;
	min-height: var( --snycf-target-min );
	line-height: 2;
}

.snycf-player__caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var( --snycf-space-3xs ) var( --snycf-space-sm );
	padding: var( --snycf-space-2xs ) 0 var( --snycf-space-xs );
	border-bottom: var( --snycf-divider );
	font-size: 0.71875rem;
	color: var( --snycf-text-meta );
}

.snycf-player__credit {
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-weight: var( --snycf-weight-semibold );
	letter-spacing: var( --snycf-tracking-meta );
	text-transform: uppercase;
	flex: none;
}

/* =====================================================================
 * Chapters
 * ================================================================== */

.snycf-chapters__list {
	list-style: none;
	margin: var( --snycf-space-2xs ) 0 0;
	padding: 0;
	counter-reset: none;
}

/* Beats the ol[class] padding rule in base.css, which is one level stronger. */
ol.snycf-chapters__list {
	padding-inline-start: 0;
}

.snycf-chapters__item {
	margin: 0;
}

.snycf-chapters__link {
	display: flex;
	align-items: baseline;
	gap: var( --snycf-space-xs );
	width: 100%;
	min-height: var( --snycf-target-min );
	padding: var( --snycf-space-xs ) 0;
	border: 0;
	border-bottom: var( --snycf-divider );
	background: transparent;
	text-align: start;
	cursor: pointer;
	color: inherit;
}

.snycf-chapters__link.is-static {
	cursor: default;
}

.snycf-chapters__link:hover .snycf-chapters__label {
	color: var( --snycf-accent );
}

.snycf-chapters__time {
	flex: none;
	width: 2.9rem;
	font-family: var( --snycf-font-ui ), 'Archivo Fallback';
	font-size: 0.71875rem;
	font-weight: var( --snycf-weight-black );
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var( --snycf-accent );
}

.snycf-chapters__label {
	font-family: var( --snycf-font-editorial ), 'Source Serif Fallback';
	font-size: 0.9375rem;
	line-height: 1.4;

	/* A long chapter title wraps beside the timestamp rather than pushing it. */
	min-width: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}