/* ==========================================================================
   YouTube Videos page
   ========================================================================== */

/* Three even columns on wide screens. */
@media (min-width: 1100px) {
	.page-template-template-videos .video-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 28px;
	}
}

/* ---------- Video search (pages/videos.js) ---------- */

.video-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 560px;
	margin: 0 auto 40px;
}

.video-search[hidden],
.video-card[hidden] {
	display: none;
}

.video-search > .icon {
	position: absolute;
	left: 20px;
	width: 20px;
	height: 20px;
	color: var(--coral-deep);
	pointer-events: none;
}

.video-search input {
	width: 100%;
	min-height: 54px;
	padding: 12px 22px 12px 52px;
	border: 1.5px solid var(--line);
	border-radius: var(--pill);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	font-size: 1rem;
}

.video-search input:focus {
	outline: none;
	border-color: var(--coral-deep);
	box-shadow: 0 0 0 4px rgba(196, 59, 51, 0.12);
}

.video-search__empty {
	text-align: center;
	color: var(--muted);
}