/* Videos (Figma Resources "Talks and public engagements", "Thread Talk"; "Resources - Thread Talk"). */

.vid__head,
.vid__aside {
	display: grid;
	align-content: end;
	justify-items: start;
	gap: 16px;
}

.vid__heading {
	font-size: var(--t-title);
	line-height: var(--lh-title);
}

.vid__text {
	color: var(--c-text-2);
}

/* Video card: poster with a dark fade, title, line, "View Full Video". */
.vid-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 560 / 400;
	overflow: hidden;
	padding: 16px;
	background: var(--c-dark);
	color: var(--c-light);
}

.vid-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0) 75%);
}

.vid-card .vid-poster {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vid-card__title {
	display: -webkit-box;
	margin-bottom: 32px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

.vid-card__foot {
	display: flex;
	align-items: center;
	min-height: 72px;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
}

.vid-card__play {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	font-size: var(--t-button);
	font-weight: 600;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

/* The link covers the whole card. */
.vid-card__play::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vid-card__play .icon {
	width: 24px;
	height: 24px;
}

.vid-card:hover .vid-card__play > span {
	text-decoration: underline;
}

/* YouTube's thumbnail is 4:3 with black bars around a 16:9 picture: a box a third taller than
   the frame, centred, leaves only the picture in view whatever the frame's shape (a hair more,
   so no line of the bars survives rounding). */
.vid .vid-poster.vid-poster--yt {
	position: absolute;
	inset: -17% 0 auto;
	width: 100%;
	height: 134%;
	object-fit: cover;
}

/* Feature and slider: one video, beside or under the heading and text when there are any. */
.vid__media {
	position: relative;
}

.vid--feature .vid__head,
.vid--slider .vid__head {
	margin-bottom: 60px;
}

.vid--feature:not(.vid--aside) .vid-card,
.vid--slider:not(.vid--aside) .vid-card {
	aspect-ratio: 1136 / 639;
}

.vid--aside {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "media aside";
	align-items: end;
	gap: 16px;
}

.vid--aside .vid__media {
	grid-area: media;
}

.vid--aside .vid__aside {
	grid-area: aside;
}

.vid--aside .vid-card {
	aspect-ratio: 560 / 600;
}

.vid__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.vid__track::-webkit-scrollbar {
	display: none;
}

.vid__track > * {
	scroll-snap-align: start;
}

/* Slider arrows sit in the card's bottom row, right (Figma). */
.vid__arrows {
	position: absolute;
	right: 16px;
	bottom: 28px;
	display: flex;
	gap: 8px;
}

.vid__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1.3px solid var(--c-light);
	border-radius: 50%;
	background: none;
	color: var(--c-light);
}

.vid__arrow .icon {
	width: 21px;
	height: 21px;
}

.vid__arrow:hover:not(:disabled) {
	background: var(--c-light);
	color: var(--c-text);
}

.vid__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.vid__arrow:focus-visible {
	outline-color: var(--c-light);
}

/* Grid: two per row under a centred heading, then "View More". */
.vid--grid .vid__head {
	justify-items: center;
	max-width: 560px;
	margin: 0 auto 32px;
	text-align: center;
}

.vid__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vid__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 32px auto 0;
	padding: 0 0 0 8px;
	border: 0;
	background: none;
	font-size: var(--t-button);
	font-weight: 600;
	line-height: 1;
}

.vid__more .icon {
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 50%;
	stroke-width: 2.2;
	transition: background-color 0.2s;
}

.vid__more:hover .icon {
	background: var(--c-beige);
}

/* Episode list: poster with a play mark, title, line, summary. The heading sits in a 72px row
   (Figma "Frame 167": 16px above and below). */
.vid--list .vid__head {
	margin-bottom: 60px;
	padding-block: 16px;
}

.vid__episodes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vid-ep {
	position: relative;
	display: grid;
	align-content: start;
}

.vid-ep__poster {
	position: relative;
	aspect-ratio: 560 / 256;
	margin-bottom: 32px;
	overflow: hidden;
	background: var(--c-dark);
}

.vid-ep__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
}

.vid-ep__poster .vid-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vid-ep__play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	color: var(--c-light);
	translate: -50% -50%;
	transition: scale 0.2s;
}

.vid-ep:hover .vid-ep__play {
	scale: 1.25;
}

.vid-ep__title {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-line);
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

.vid-ep__title a {
	text-decoration: none;
	text-underline-offset: 4px;
}

/* The title link covers the whole episode. */
.vid-ep__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vid-ep:hover .vid-ep__title a {
	text-decoration: underline;
}

.vid-ep__summary {
	margin-top: 16px;
	color: var(--c-muted);
}

@media (max-width: 767px) {
	.vid-card,
	.vid--aside .vid-card,
	.vid--feature:not(.vid--aside) .vid-card,
	.vid--slider:not(.vid--aside) .vid-card {
		aspect-ratio: 328 / 400;
	}

	.vid-card__title {
		-webkit-line-clamp: 1;
	}

	.vid--aside {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "aside" "media";
		gap: 32px;
	}

	.vid--grid .vid__head {
		justify-items: start;
		max-width: none;
		text-align: left;
	}

	.vid__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vid--list .vid__head,
	.vid--feature .vid__head,
	.vid--slider .vid__head {
		margin-bottom: 32px;
	}

	.vid--list .vid__head {
		padding-block: 0;
	}

	.vid__episodes {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vid-ep__poster {
		margin-bottom: 16px;
	}
}

/* No videos: render.php printed nothing, so drop the section's spacing too. */
.s-video:empty {
	display: none;
}