/* Latest YouTube videos and Shorts, filled in by assets/js/youtube-feed.js */

	.yt-feed {
		margin: 0 0 2em 0;
	}

		.yt-feed:not(.is-loaded) {
			display: none;
		}

	.yt-group {
		margin: 0 0 2.5em 0;
	}

		.yt-group:last-child {
			margin-bottom: 0;
		}

		.yt-heading {
			color: #c6b3ff;
			margin: 0 0 1.25em 0;
		}

	/* Videos: two columns, with the newest one full width when there's an odd number */

	.yt-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2em 1.5em;
	}

		.yt-grid > .yt-card:first-child:nth-last-child(odd) {
			grid-column: 1 / -1;
		}

	/* Shorts: a swipeable row, four across on desktop */

	.yt-shorts {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 3em) / 4);
		gap: 1em;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75em;
		scrollbar-width: thin;
		scrollbar-color: rgba(198, 179, 255, 0.4) transparent;
	}

		.yt-shorts > .yt-card {
			scroll-snap-align: start;
		}

	/* Cards */

	.yt-media {
		position: relative;
		aspect-ratio: 16 / 9;
		background: #000;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 0 2px rgba(198, 179, 255, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
	}

		.yt-card.is-short .yt-media {
			aspect-ratio: 9 / 16;
		}

		.yt-media > .yt-thumb,
		.yt-media > .yt-thumb:hover,
		.yt-media > .yt-thumb:active,
		.yt-media > iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
			box-shadow: none;
			line-height: normal;
		}

		.yt-thumb img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.4s ease, filter 0.4s ease;
			filter: saturate(0.9);
		}

		.yt-thumb:hover img,
		.yt-thumb:focus-visible img {
			transform: scale(1.04);
			filter: saturate(1.05);
		}

		.yt-play {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 3.5em;
			height: 3.5em;
			margin: -1.75em 0 0 -1.75em;
			border-radius: 100%;
			background: rgba(18, 15, 26, 0.65);
			border: 2px solid rgba(198, 179, 255, 0.75);
			transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
		}

			.yt-play:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -0.6em 0 0 -0.35em;
				border-style: solid;
				border-width: 0.6em 0 0.6em 1em;
				border-color: transparent transparent transparent #ffffff;
			}

			.yt-thumb:hover .yt-play,
			.yt-thumb:focus-visible .yt-play {
				background: rgba(120, 80, 160, 0.85);
				transform: scale(1.08);
			}

	.yt-info {
		padding: 0.75em 0.1em 0 0.1em;
		line-height: 1.4;
	}

		.yt-title {
			display: block;
			border-bottom: 0;
			font-weight: 600;
		}

			.yt-card.is-short .yt-title {
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 0.9em;
			}

		.yt-meta {
			display: block;
			margin-top: 0.2em;
			font-size: 0.8em;
			opacity: 0.65;
		}

	@media screen and (max-width: 736px) {

		.yt-grid {
			grid-template-columns: minmax(0, 1fr);
		}

		.yt-shorts {
			grid-auto-columns: 44%;
		}

	}