/*
 * Watch and Contact pages. Loaded only there.
 */

.page-hero--watch {
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 0%, rgba(11, 11, 13, .6) 40%, rgba(11, 11, 13, 0) 65%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, var(--wp--preset--color--ink) 100%),
		/* Guitar close-up, live (2024 shoot), full width, centred on the knobs. */
		url("../img/watch-hero-desktop.webp") 50% 50% / cover no-repeat,
		var(--wp--preset--color--ink);
}

.page-hero--contact {
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 0%, rgba(11, 11, 13, .75) 60%, rgba(11, 11, 13, .2) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, var(--wp--preset--color--ink) 100%),
		url("../img/press-hero-desktop.webp") 50% 50% / cover no-repeat,
		var(--wp--preset--color--ink);
}

.page-hero--contact .eyebrow {
	color: var(--wp--preset--color--bone);
}

/* ---------- Video library ---------- */
.video-grid {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 20px;
}

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

.video-card > * + * {
	margin-block-start: 10px;
}

.video-card .yt img {
	aspect-ratio: 16 / 9;
}

.video-card .yt__play {
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
}

.video-card .yt__play::before {
	left: 21px;
	top: 17px;
	border-width: 9px 0 9px 15px;
}

.video-card__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.video-grid.sessions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sessions__lede {
	max-width: 620px;
	margin-block-end: 28px;
}

.video-more {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	margin-top: 36px;
}

/* ---------- Contact ---------- */
.channels {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.channels a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	background: var(--wp--preset--color--soot);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast) ease, transform var(--wp--custom--motion--fast) ease;
}

.channels a:hover {
	border-color: var(--wp--preset--color--corridor);
	transform: translateY(-2px);
}

.channels .meta {
	color: var(--wp--preset--color--corridor-text);
}

.channels__handle {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--wp--preset--color--bone);
	overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	/* Phones: the photo is a strip on top, the text below it. */
	.page-hero--watch {
		min-height: 0;
		padding-block: calc(62.5vw + 16px) 40px;
		background:
			linear-gradient(180deg, rgba(11, 11, 13, 0) 35vw, var(--wp--preset--color--ink) 62.5vw),
			url("../img/watch-hero-mobile.webp") 50% 0% / 100% auto no-repeat,
			var(--wp--preset--color--ink);
	}

	.page-hero--contact {
		min-height: 0;
		padding-block: 300px 40px;
		background:
			linear-gradient(180deg, rgba(11, 11, 13, .1) 0%, rgba(11, 11, 13, .45) 40%, var(--wp--preset--color--ink) 70%),
			url("../img/press-hero-mobile.webp") 50% 0% / 100% auto no-repeat,
			var(--wp--preset--color--ink);
	}

	.video-grid,
	.video-grid.sessions,
	.channels {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.channels {
		gap: 10px;
	}

	.channels a {
		padding: 18px 16px;
	}
}