/**
 * Futurion YouTube feed module.
 * Mobile first; breakpoints follow the theme's 768 / 1100 / 1440 steps and the
 * card, eyebrow and arrow treatments follow the rapport and events modules.
 *
 * Relies on the theme's shared .site-grid, .futurion-module__eyebrow and
 * .futurion-widget-button, and on its colour tokens (with fallbacks).
 */

.futurion-youtube-feed {
	/*
	 * Slide width lives in a variable so the arrows can centre on the 16:9
	 * thumbnail with plain CSS -- no JS measuring like the rapport slider.
	 */
	--futurion-youtube-slide-width: min(78vw, 320px);
	--futurion-youtube-meta-color: var(--futurion-blue, #5e72ed);

	position: relative;
	z-index: 2;
	overflow: hidden;
	padding-top: 44px;
	padding-bottom: 60px;
	background: var(--futurion-cream, #fff8e7);
	color: var(--futurion-purple, #422c6e);
}

.futurion-youtube-feed--grey {
	background: var(--futurion-grey, #f0e8d7);
}

.futurion-youtube-feed--purple {
	--futurion-youtube-meta-color: var(--futurion-pink, #f2c3d3);

	background: var(--futurion-purple, #422c6e);
	color: var(--futurion-white, #fffefa);
}

.futurion-youtube-feed__heading {
	margin: 0 0 30px;
}

/* Blue has no contrast on purple; green is the newsletter panel's accent there. */
.futurion-youtube-feed--purple .futurion-youtube-feed__heading {
	color: var(--futurion-green, #b7ff73);
}

.futurion-youtube-feed__slider-shell {
	position: relative;
}

.futurion-youtube-feed__slider {
	overflow: visible;
	width: 100%;
}

.futurion-youtube-feed__slider .swiper-slide.futurion-youtube-feed__slide {
	flex-shrink: 0;
	width: var(--futurion-youtube-slide-width);
	height: auto;
}

/*
 * Without Swiper (script blocked or missing) the row still works as a native
 * horizontal scroller.
 */
.futurion-youtube-feed:not(.is-slider) .futurion-youtube-feed__slider {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.futurion-youtube-feed:not(.is-slider) .swiper-wrapper {
	gap: 16px;
}

.futurion-youtube-feed:not(.is-slider) .futurion-youtube-feed__slide {
	scroll-snap-align: start;
}

.futurion-youtube-feed__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.futurion-youtube-feed__card:focus-visible {
	outline: 2px solid var(--futurion-blue, #5e72ed);
	outline-offset: 4px;
	border-radius: 5px;
}

.futurion-youtube-feed__thumb {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 5px;
	background: rgba(63, 42, 115, 0.08);
	transform: translateZ(0);
}

/* hqdefault is 4:3 with letterbox bars; cover crops them away. */
.futurion-youtube-feed__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Same translucent rounded square as the slider arrows, with a play glyph. */
.futurion-youtube-feed__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	background: rgba(75, 54, 118, 0.55);
	backdrop-filter: blur(3px);
	transform: translate(-50%, -50%);
	transition: background-color 180ms ease;
	box-sizing: border-box;
}

.futurion-youtube-feed__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--futurion-white, #fffefa);
	transform: translate(-40%, -50%);
}

/*
 * YouTube's own icon in full colour, as the brand guidelines ask, so the
 * cards read as YouTube content at a glance. Decorative: the link already
 * goes to YouTube and the play badge carries the affordance.
 */
.futurion-youtube-feed__logo {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: block;
	width: 28px;
	height: 20px;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.futurion-youtube-feed__date {
	display: block;
	margin: 18px 0 9px;
	color: var(--futurion-youtube-meta-color);
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	text-transform: uppercase;
}

/*
 * The overflow that clamps the title also clips anything below its last line,
 * which is where the hover underline sits (offset 4px below the baseline). The
 * bottom padding gives the underline room inside the clip; it is small enough
 * not to reveal the top of a clamped fourth line.
 */
.futurion-youtube-feed__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	padding-bottom: 0.15em;
	color: inherit;
	font-size: 20px;
	line-height: 1.08;
	font-weight: 500;
}

@media (hover: hover) {
	.futurion-youtube-feed__card:hover .futurion-youtube-feed__image {
		transform: translateZ(0) scale(1.025);
	}

	.futurion-youtube-feed__card:hover .futurion-youtube-feed__play {
		background: rgba(75, 54, 118, 0.8);
	}

	.futurion-youtube-feed__card:hover .futurion-youtube-feed__title {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}
}

.futurion-youtube-feed__footer {
	margin: 36px 0 0;
}

.futurion-youtube-feed--purple .futurion-youtube-feed__channel-link {
	border-color: var(--futurion-white, #fffefa);
	color: var(--futurion-white, #fffefa);
}

.futurion-youtube-feed--purple .futurion-youtube-feed__channel-link:hover,
.futurion-youtube-feed--purple .futurion-youtube-feed__channel-link:focus-visible {
	color: var(--futurion-purple, #422c6e);
	background: var(--futurion-white, #fffefa);
}

/* Arrows: the rounded-square button shared by the board, rapport and events sliders. */
.futurion-youtube-feed__navigation {
	position: absolute;
	top: calc(var(--futurion-youtube-slide-width) * 9 / 32);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	color: var(--futurion-white, #fffefa);
	background: rgba(75, 54, 118, 0.55);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		opacity 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease;
}

.futurion-youtube-feed__navigation--previous {
	left: 12px;
}

.futurion-youtube-feed__navigation--next {
	right: 12px;
}

.futurion-youtube-feed__navigation span {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.futurion-youtube-feed__navigation span::before,
.futurion-youtube-feed__navigation span::after {
	content: "";
	position: absolute;
}

.futurion-youtube-feed__navigation span::before {
	top: 5px;
	left: 0;
	width: 12px;
	height: 1px;
	background: currentColor;
}

.futurion-youtube-feed__navigation span::after {
	top: 2px;
	right: 0;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.futurion-youtube-feed__navigation--previous span {
	transform: rotate(180deg);
}

.futurion-youtube-feed:not(.is-slider) .futurion-youtube-feed__navigation,
.futurion-youtube-feed__navigation.swiper-button-disabled,
.futurion-youtube-feed__navigation.swiper-button-lock {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.futurion-youtube-feed__navigation:focus-visible {
	outline: 2px solid var(--futurion-blue, #5e72ed);
	outline-offset: 3px;
}

@media (hover: hover) {
	.futurion-youtube-feed__navigation:hover,
	.futurion-youtube-feed__navigation:focus-visible {
		border-color: var(--futurion-white, #fffefa);
		background: rgba(75, 54, 118, 0.75);
	}
}

@media (min-width: 768px) {
	.futurion-youtube-feed {
		--futurion-youtube-slide-width: min(43vw, 400px);

		padding-top: 70px;
		padding-bottom: 80px;
	}

	.futurion-youtube-feed__play {
		width: 58px;
		height: 58px;
	}

	.futurion-youtube-feed__logo {
		top: 12px;
		right: 12px;
		width: 32px;
		height: 23px;
	}

	.futurion-youtube-feed__date {
		margin-top: 20px;
		font-size: 14px;
	}

	.futurion-youtube-feed__title {
		font-size: 21px;
	}

	.futurion-youtube-feed__footer {
		margin-top: 44px;
	}
}

@media (min-width: 1024px) {
	.futurion-youtube-feed__navigation--previous {
		left: 20px;
	}

	.futurion-youtube-feed__navigation--next {
		right: 20px;
	}
}

@media (min-width: 1100px) {
	.futurion-youtube-feed {
		/* About three cards per row, like the rapport slider. */
		--futurion-youtube-slide-width: clamp(300px, 28vw, 480px);

		padding-top: 104px;
		padding-bottom: 95px;
	}

	.futurion-youtube-feed__heading {
		margin-bottom: 34px;
	}

	.futurion-youtube-feed__play {
		width: 64px;
		height: 64px;
	}

	.futurion-youtube-feed__play::before {
		border-width: 10px 0 10px 16px;
	}

	.futurion-youtube-feed__logo {
		top: 14px;
		right: 14px;
		width: 36px;
		height: 26px;
	}

	.futurion-youtube-feed__date {
		margin-top: 22px;
		font-size: clamp(14px, calc(14px + (100vw - 1100px) * 0.0059), 16px);
	}

	.futurion-youtube-feed__title {
		font-size: clamp(21px, calc(21px + (100vw - 1100px) * 0.00588), 23px);
		line-height: 1.06;
	}
}

@media (min-width: 1440px) {
	.futurion-youtube-feed__title {
		font-size: 23px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.futurion-youtube-feed__image {
		transition: none;
	}
}

/**
 * Player overlay. A native <dialog>, created once by youtube-feed.js and
 * shared by every module on the page.
 */
html.futurion-youtube-dialog-open {
	overflow: hidden;
}

.futurion-youtube-dialog {
	/* Fits the width, and on short landscape screens the height too. */
	width: min(92vw, 1200px, calc((100vh - 110px) * 16 / 9));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	overflow: visible;
	color: var(--futurion-white, #fffefa);
	background: transparent;
}

.futurion-youtube-dialog::backdrop {
	background: rgba(33, 22, 56, 0.88);
	backdrop-filter: blur(4px);
}

.futurion-youtube-dialog__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 14px;
}

.futurion-youtube-dialog__title {
	margin: 0;
	color: inherit;
	font-size: 16px;
	line-height: 1.15;
	font-weight: 500;
}

.futurion-youtube-dialog__close {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	color: var(--futurion-white, #fffefa);
	background: rgba(75, 54, 118, 0.55);
	cursor: pointer;
	transition:
		background-color 180ms ease,
		border-color 180ms ease;
}

.futurion-youtube-dialog__close::before,
.futurion-youtube-dialog__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1px;
	background: currentColor;
}

.futurion-youtube-dialog__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.futurion-youtube-dialog__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.futurion-youtube-dialog__close:hover,
.futurion-youtube-dialog__close:focus-visible {
	border-color: var(--futurion-white, #fffefa);
	background: rgba(75, 54, 118, 0.85);
}

.futurion-youtube-dialog__close:focus-visible {
	outline: 2px solid var(--futurion-green, #b7ff73);
	outline-offset: 3px;
}

.futurion-youtube-dialog__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 5px;
	background: #000;
}

.futurion-youtube-dialog__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 768px) {
	.futurion-youtube-dialog__title {
		font-size: 20px;
	}
}