/* WPUS Videos — the [wpus_videos] library. Colours and spacing come from
   wpus-theme tokens; the fallbacks keep it readable on any other theme. */

/* The page body is a 44rem text column; the library breaks out of it to the
   same inner width as every other section's .container (content width minus
   its side padding), keeping the same gutter on small screens. Negative
   inline margins centre it on the column without a transform. */
.wpus-videos {
	--wpus-videos-width: calc(min(var(--wpus-content, 1230px), 100vw) - 2 * var(--wpus-space-5, 1.25rem));
	width: var(--wpus-videos-width);
	max-width: none;
	margin-top: var(--wpus-space-8, 2rem);
	margin-inline: calc((100% - var(--wpus-videos-width)) / 2);
}

.entry-content > .wpus-videos.alignfull {
	max-width: none;
	margin-inline: calc((100% - var(--wpus-videos-width)) / 2);
}

.wpus-videos__toolbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wpus-space-4, 1rem);
	margin-bottom: var(--wpus-space-6, 1.5rem);
}

.wpus-videos__toolbar[hidden] {
	display: none;
}

.wpus-videos__search {
	width: 100%;
	max-width: 30rem;
}

.wpus-videos__search input {
	width: 100%;
	padding: 12px 20px;
	border: 1px solid var(--wpus-gray-300, #e0e0e0);
	border-radius: var(--wpus-radius-full, 9999px);
	background: var(--wpus-white, #fff);
	font-size: var(--wpus-text-base, 1rem);
}

.wpus-videos__search input:focus-visible {
	border-color: var(--wpus-primary, #5007aa);
}

.wpus-videos__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wpus-space-2, 0.5rem);
}

/* Same shape as the blog's .cat-nav__chip, so filters read alike site-wide. */
.wpus-videos__filters button {
	display: inline-flex;
	align-items: center;
	gap: var(--wpus-space-2, 0.5rem);
	padding: 6px 16px;
	border: 1px solid var(--wpus-gray-300, #e0e0e0);
	border-radius: var(--wpus-radius-full, 9999px);
	background: var(--wpus-white, #fff);
	color: var(--wpus-dark, #313131);
	font-size: var(--wpus-text-sm, 0.875rem);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.wpus-videos__filters button:hover {
	border-color: var(--wpus-primary, #5007aa);
	color: var(--wpus-primary, #5007aa);
}

.wpus-videos__filters button[aria-pressed="true"] {
	background: var(--wpus-primary, #5007aa);
	border-color: var(--wpus-primary, #5007aa);
	color: var(--wpus-white, #fff);
}

.wpus-videos__filters button span {
	font-size: var(--wpus-text-xs, 0.75rem);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.wpus-videos__status {
	margin: 0 0 var(--wpus-space-6, 1.5rem);
	text-align: center;
	color: var(--wpus-text-60, rgba(0, 0, 0, 0.6));
	font-size: var(--wpus-text-sm, 0.875rem);
	font-variant-numeric: tabular-nums;
}

.wpus-videos__status:empty {
	display: none;
}

.entry-content .wpus-videos__grid,
.wpus-videos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wpus-space-10, 2.5rem) var(--wpus-space-8, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Three columns on desktop, two on tablets, one on phones. The page size
   (24) divides evenly by both, so "Show more" never leaves a ragged row. */
@media (max-width: 960px) {
	.entry-content .wpus-videos__grid,
	.wpus-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wpus-space-8, 2rem) var(--wpus-space-6, 1.5rem);
	}
}

@media (max-width: 600px) {
	.entry-content .wpus-videos__grid,
	.wpus-videos__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wpus-videos__item {
	min-width: 0;
	margin: 0;
}

.wpus-videos__item[hidden] {
	display: none;
}

.wpus-videos__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wpus-radius-md, 12px);
	background: var(--wpus-gray-100, #f5f5f7);
}

.wpus-videos__media img,
.wpus-videos__media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* The play control covers the whole thumbnail; the visible mark is a
   centred circle that fills on hover and focus. */
.wpus-videos__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--wpus-white, #fff);
}

.wpus-videos__play svg {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 17px 15px 17px 19px;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.6);
	fill: currentColor;
	transition: background 200ms ease;
}

.wpus-videos__play:hover svg,
.wpus-videos__play:focus-visible svg {
	background: var(--wpus-primary, #5007aa);
}

.wpus-videos__play:focus-visible {
	outline-offset: -3px;
}

.wpus-videos__duration {
	position: absolute;
	right: var(--wpus-space-2, 0.5rem);
	bottom: var(--wpus-space-2, 0.5rem);
	padding: 2px 8px;
	border-radius: var(--wpus-radius-xs, 6px);
	background: rgba(17, 17, 17, 0.8);
	color: var(--wpus-white, #fff);
	font-size: var(--wpus-text-xs, 0.75rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.wpus-videos__media.is-playing .wpus-videos__duration {
	display: none;
}

.entry-content .wpus-videos__title,
.wpus-videos__title {
	margin: var(--wpus-space-3, 0.75rem) 0 var(--wpus-space-1, 0.25rem);
	font-size: var(--wpus-text-base, 1rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

.wpus-videos__title a {
	color: var(--wpus-dark, #313131);
	text-decoration: none;
}

.wpus-videos__title a:hover {
	color: var(--wpus-primary, #5007aa);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content .wpus-videos__meta,
.wpus-videos__meta {
	margin: 0;
	color: var(--wpus-text-60, rgba(0, 0, 0, 0.6));
	font-size: var(--wpus-text-sm, 0.875rem);
	line-height: 1.5;
}

.wpus-videos__empty {
	text-align: center;
	color: var(--wpus-text-60, rgba(0, 0, 0, 0.6));
}

.wpus-videos__more,
.wpus-videos__channel {
	margin-top: var(--wpus-space-12, 3rem);
	text-align: center;
}

.wpus-videos__more[hidden] {
	display: none;
}

.wpus-videos__more + .wpus-videos__channel {
	margin-top: var(--wpus-space-6, 1.5rem);
}