/*
 * Global Co-operation House — YouTube playlist galleries.
 *
 * Styles for the gch-light / gch-circles mod_youtubevideos layouts: the look of the old "YouTuber"
 * plugin's light and circles1 themes (class names kept from its mxyt-* markup), on CSS grid instead
 * of floats, plus the native <dialog> lightbox that replaces fancybox. Behaviour: js/youtube.js.
 */

.mxYouTubeR {
	--mxyt-cols: 3;
	--mxyt-gap: 20px;
	--mxyt-line: #e2e2e2;
	margin-block-end: 20px;
	font: 13px / 100% Roboto, sans-serif;
}

.mxyt-heading {
	margin-block: 0 15px;
}

.mxyt-playlist {
	display: grid;
	grid-template-columns: repeat(var(--mxyt-cols), minmax(0, 1fr));
	gap: var(--mxyt-gap);
	/* Rows size to their tallest card, but cards keep their own height, as the old float rows did. */
	align-items: start;

	@media (max-width: 768px) {
		&.mxyt-cols-sm {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

/* Items beyond the first page wait for "Load more..." (js/youtube.js); without scripting all show. */
@media (scripting: enabled) {
	.mxYouTubeR .mxyt-playlist > [hidden] {
		display: none;
	}
}

@media (scripting: none) {
	.mxyt-more {
		display: none;
	}
}

/* "Load more..." */
.mxyt-more {
	margin-block-start: 10px;
	text-align: center;

	.mxYouTubeR_theme_circles1 & {
		margin-block-start: 30px;
	}
}

.mxyt-button {
	padding: 2px 40px 0;
	border: 0;
	border-block-start: 1px solid #999;
	border-radius: 0;
	background: none;
	color: #666;
	font: inherit;
	line-height: 1.5;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		color: #222;
	}
}

/* Play icon (the plugin used a font glyph): a white triangle with a soft shadow */
.mxyt-play {
	display: block;
	inline-size: 65px;
	block-size: 65px;
	filter: drop-shadow(2px 2px 2px rgb(0 0 0 / .6));

	&::before {
		content: "";
		display: block;
		inline-size: 100%;
		block-size: 100%;
		background: #fff;
		clip-path: polygon(30% 18%, 82% 50%, 30% 82%);
	}
}

/* Light theme: cards ------------------------------------------------------------------------- */

.mxYouTubeR_theme_light {
	.mxyt-playlist-item {
		display: flex;
		flex-direction: column;
		background: #fff;
		box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 1px 2px rgb(0 0 0 / .24);
	}

	.mxyt-videolink {
		display: block;
		position: relative;
		border: 0;
		text-decoration: none;

		img {
			display: block;
			inline-size: 100%;
			block-size: auto;
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}

		.mxyt-play,
		.mxyt-time {
			position: absolute;
			opacity: .7;
			transition: opacity .3s;
		}

		.mxyt-play {
			inset: 50% auto auto 50%;
			translate: -50% -50%;
		}

		.mxyt-time {
			inset: auto 5px 5px auto;
			padding: 6px 8px 7px;
			background: #000;
			color: #fff;
			font-size: 12px;
			line-height: 1;
		}

		&:hover,
		&:focus-visible {
			.mxyt-play,
			.mxyt-time {
				opacity: 1;
			}
		}

		&:focus-visible {
			outline-offset: -2px;
		}
	}

	.mxyt-title,
	.mxyt-description {
		padding: 13px 15px 15px;
		border-block-end: 1px solid var(--mxyt-line);
	}

	.mxyt-title {
		padding-block-end: 10px;

		h3 {
			margin: 0;
			padding: 0;
			color: #222;
			font-size: 14px;
			font-weight: bold;
			line-height: 1.2;
			text-transform: none;
			letter-spacing: normal;
		}
	}

	.mxyt-description {
		color: #222;
		font-size: 13px;
		line-height: 18px;
	}
}

/* Description, clipped to 100px with a fade when it is longer (js/youtube.js adds the classes) */
.mxyt-text-description {
	position: relative;
	white-space: pre-wrap;
	overflow-wrap: break-word;

	&.mxyt-less {
		max-block-size: 100px;
		overflow: hidden;
	}

	&.mxyt-less.hasMore::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		block-size: 40px;
		background: linear-gradient(to bottom, rgb(255 255 255 / .2), #fff);
		pointer-events: none;
	}

	a {
		text-decoration: none;
		overflow-wrap: anywhere;
	}

	&:hover a {
		text-decoration: underline;
	}
}

.mxyt-text-description-btn {
	display: block;
	inline-size: 100%;
	margin: 7px 0 -13px;
	padding: 0;
	border: 0;
	border-block-start: 1px solid var(--mxyt-line);
	border-radius: 0;
	background: none;
	/* #767676 is the lightest grey with 4.5:1 on white (the plugin's #aaa was 2.3:1). */
	color: #767676;
	font: inherit;
	line-height: 28px;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s;

	&:hover,
	&:focus-visible {
		color: #444;
	}
}

/* Circles theme ------------------------------------------------------------------------------ */

.mxYouTubeR_theme_circles1 {
	.mxyt-playlist-item-blank {
		position: relative;
		aspect-ratio: 1;
	}

	.ch-item {
		position: absolute;
		inset: 0;
		display: block;
		overflow: hidden;
		border: 0;
		border-radius: 50%;
		box-shadow: 0 1px 2px rgb(0 0 0 / .1);
		text-align: center;
		text-decoration: none;

		/* The translucent ring, drawn over the thumbnail */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: inset 0 0 0 16px rgb(255 255 255 / .6);
			transition: box-shadow .4s ease-in-out;
		}
	}

	.ch-img {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.ch-info {
		position: absolute;
		inset: 0;
		z-index: 1;
		border-radius: 50%;
		background: rgb(0 0 0 / .7);
		opacity: 0;
		scale: .01;
		transition: opacity .4s ease-in-out, scale .4s ease-in-out;

		h3 {
			position: absolute;
			inset: 45% 20px auto;
			margin: 0;
			padding: 0;
			overflow: hidden;
			color: #fff;
			font-size: 17px;
			font-weight: normal;
			line-height: 1.1;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-shadow: 0 0 1px #fff, 0 1px 2px rgb(0 0 0 / .3);
			translate: 0 -50%;
		}

		.mxyt-play {
			position: absolute;
			inset: auto auto 15px 50%;
			translate: -50% 0;
			inline-size: 50px;
			block-size: 50px;
			filter: drop-shadow(0 0 6px #000);
		}
	}

	.ch-item:hover,
	.ch-item:focus-visible {
		&::after {
			box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
		}

		.ch-info {
			opacity: 1;
			scale: 1;
		}
	}
}

/* Lightbox: native modal <dialog> ------------------------------------------------------------ */

.mxyt-dialog {
	--mxyt-dialog-pad: 56px;
	position: fixed;
	inset: 0;
	inline-size: 100%;
	block-size: 100dvh;
	max-inline-size: none;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	overflow: hidden;
	opacity: 0;
	transition:
		opacity .3s ease,
		overlay .3s allow-discrete,
		display .3s allow-discrete;

	&[open] {
		display: grid;
		place-items: center;
		opacity: 1;

		@starting-style {
			opacity: 0;
		}
	}

	&::backdrop {
		background: rgb(30 30 30 / .9);
	}

	@media (max-width: 600px) {
		--mxyt-dialog-pad: 8px;
	}
}

.mxyt-dialog__body {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	padding: var(--mxyt-dialog-pad);
	box-sizing: border-box;
}

.mxyt-dialog__frame {
	/* As large as fits: 16:9, inside the padding, leaving room for the caption */
	inline-size: min(100%, calc((100dvh - 2 * var(--mxyt-dialog-pad) - 3em) * 16 / 9), 1280px);
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 10px 30px rgb(0 0 0 / .5);

	iframe {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		border: 0;
	}
}

.mxyt-dialog__caption {
	margin: .75em 0 0;
	font: 15px / 1.3 Roboto, sans-serif;
	text-align: center;
}

.mxyt-dialog__close,
.mxyt-dialog__nav {
	position: absolute;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(30 30 30 / .6);
	color: #fff;
	cursor: pointer;
	opacity: .8;
	transition: opacity .2s;

	&:hover,
	&:focus-visible {
		opacity: 1;
	}
}

.mxyt-dialog__close {
	inset: 8px 8px auto auto;
	font: 32px / 1 sans-serif;
}

.mxyt-dialog__nav {
	inset-block-start: calc(50% - 22px);
	background: rgb(30 30 30 / .6) url(../images/arrow-next.svg) center / 32px no-repeat;

	&.mxyt-dialog__nav--prev {
		inset-inline-start: 6px;
		background-image: url(../images/arrow-prev.svg);
	}

	&.mxyt-dialog__nav--next {
		inset-inline-end: 6px;
	}

	.mxyt-dialog--single & {
		display: none;
	}

	@media (max-width: 600px) {
		inset-block-start: auto;
		inset-block-end: 8px;
	}
}

html.mxyt-dialog-open {
	overflow: hidden;
}