/* ==========================================================================
   Ovation — Videos
   The video library. A navy title band leading with one featured video, over
   a white band holding the filter pills and a four-up grid of videos.

   The comp is a wireframe in a green, round-cornered kit; as with the Art
   page, this is the same layout in the site's own voice - navy and orange,
   uppercase Inter headings, square corners. Content sits in the narrow
   (1100) container, as the comp draws it inside the header's width.

   The player that opens over the page lives in video-modal.css.
   ========================================================================== */

.o-videos {
	background-color: var(--o-white);
	color: var(--o-ink);
}

/*
 * The orange play disc, shared by the featured video and the cards. Centred
 * over its picture; the link that plays the video stretches over both.
 */
.o-videos__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 3rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--o-orange);
	color: var(--o-white);
	box-shadow: var(--o-shadow-float);
	transform: translate(-50%, -50%);
	transition:
		background-color var(--o-transition),
		transform var(--o-transition);
}

.o-videos__play-glyph {
	width: 55%;
	height: auto;
}

/*
 * The link that plays a video is the title; its ::after stretches over the
 * whole card or feature, so the picture needs no link of its own and each
 * video is one tab stop.
 */
.o-videos__link {
	color: inherit;
	text-decoration: none;
}

.o-videos__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The ring belongs round what the link stretches over, not the text. */
.o-videos__link:focus-visible {
	outline: none;
}

.o-videos__link:focus-visible::after {
	outline: 2px solid var(--o-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Title band
   -------------------------------------------------------------------------- */
.o-videos__band {
	position: relative; /* Anchors the pattern. */
	padding-block: clamp(3rem, 2rem + 3vw, 5rem);
	background-color: var(--o-navy);
	color: var(--o-white);
}

/*
 * Dark waves in the lower-right corner, fading out across the band: the
 * shared .o-pattern (components.css) in black at 12%, which darkens the navy
 * the way the Centered CTA band does.
 */
.o-videos__pattern {
	--o-pattern-ink: #000000;
}

.o-videos__pattern::before {
	opacity: 0.12;
}

.o-videos__band > .o-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--o-space-xl);
}

.o-videos__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.o-videos__eyebrow {
	letter-spacing: var(--o-label-tracking);
}

.o-videos__title {
	margin: 0;
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: var(--o-fs-h1);
	line-height: 1.08;
	text-transform: uppercase;
}

.o-videos__lede {
	margin: 0;
	color: var(--o-mist);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.55;
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Featured video
   21:9 rather than 16:9: the comp draws a wide, cinematic frame, and a
   standard ratio crops a 16:9 thumbnail by only its top and bottom edges.

   The caption shares the picture's grid cell rather than being positioned,
   so the title link's ::after still stretches over the whole figure.
   -------------------------------------------------------------------------- */
.o-videos__feature {
	position: relative;
	display: grid;
	margin: 0;
}

.o-videos__feature-media,
.o-videos__feature-caption {
	grid-area: 1 / 1;
}

.o-videos__feature-media {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background-color: var(--o-navy-ink);
}

.o-videos__feature-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-videos__feature .o-videos__play {
	width: clamp(4rem, 3rem + 2vw, 5rem); /* 64 -> 80, the testimonials disc */
}

.o-videos__feature-caption {
	z-index: 1;
	align-self: end;
	justify-self: start;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	max-width: min(32rem, calc(100% - 4rem));
	margin: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	padding: 1rem 1.25rem;
	background-color: rgba(15, 31, 64, 0.85); /* --o-navy-ink */
	color: var(--o-white);
}

.o-videos__feature-title {
	margin: 0;
	color: inherit; /* Follows the card it sits on, not the navy heading default. */
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: var(--o-fs-body-lg);
	line-height: 1.3;
	text-wrap: pretty;
}

.o-videos__feature .o-videos__meta {
	gap: 0.625rem;
	color: var(--o-mist);
	font-size: var(--o-fs-small);
}

.o-videos__feature:hover .o-videos__link {
	color: var(--o-orange);
}

.o-videos__feature:hover .o-videos__feature-img {
	transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Library heading and filter pills
   The pill is the events, articles and art one: 2px navy outline, solid navy
   when active.
   -------------------------------------------------------------------------- */
.o-videos__library {
	padding-block: var(--o-section-y);
}

.o-videos__library-head {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 48rem;
	margin-bottom: var(--o-space-lg);
}

.o-videos__library-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-bold);
	font-size: var(--o-fs-h2);
	line-height: 1.1;
	text-transform: uppercase;
}

.o-videos__library-lede {
	margin: 0;
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	line-height: 1.55;
	text-wrap: pretty;
}

.o-videos__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-space-xs) 1rem;
	margin-bottom: var(--o-space-xl);
}

.o-videos__pill {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--o-navy);
	border-radius: var(--o-radius-pill);
	background-color: var(--o-white);
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-body);
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--o-transition),
		color var(--o-transition);
}

.o-videos__pill:hover,
.o-videos__pill:focus-visible,
.o-videos__pill.is-active {
	background-color: var(--o-navy);
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Grid
   Four up, as the comp draws it, stepping down through three and two.
   -------------------------------------------------------------------------- */
.o-videos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--o-space-xl) var(--o-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-videos__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.o-videos__card-media {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.5rem;
	overflow: hidden;
	background-color: var(--o-ice);
}

.o-videos__card-media--placeholder {
	background-color: var(--o-navy);
}

.o-videos__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--o-transition-slow);
}

.o-videos__duration {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.125rem 0.375rem;
	border-radius: var(--o-radius-sm);
	background-color: rgba(15, 31, 64, 0.85); /* --o-navy-ink */
	color: var(--o-white);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-medium);
	font-size: var(--o-fs-xs);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.o-videos__card-title {
	margin: 0;
	color: var(--o-navy);
	font-family: var(--o-font-ui);
	font-weight: var(--o-fw-semibold);
	font-size: var(--o-fs-body);
	line-height: 1.35;
	overflow-wrap: break-word;
	text-wrap: pretty;
	transition: color var(--o-transition);
}

.o-videos__card .o-videos__meta {
	gap: 0.5rem;
	color: var(--o-ink-soft);
	font-size: var(--o-fs-small);
}

/* Short items never need to stack, unlike the events line this borrows. */
.o-videos__meta {
	flex-direction: row;
	align-items: center;
}

.o-videos__meta .o-events__dot {
	display: block;
	width: 4px;
	height: 4px;
}

.o-videos__card:hover .o-videos__link {
	color: var(--o-orange);
}

.o-videos__card:hover .o-videos__card-img {
	transform: scale(1.04);
}

.o-videos__card:hover .o-videos__play,
.o-videos__feature:hover .o-videos__play {
	background-color: var(--o-orange-dark);
	transform: translate(-50%, -50%) scale(1.06);
}

.o-videos__empty {
	margin: 0;
	padding: var(--o-space-xl) var(--o-space-lg);
	border: 1.5px solid var(--o-rule-cool);
	color: var(--o-ink-soft);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-body-lg);
	text-align: center;
}

.o-videos__more {
	margin: var(--o-space-xl) 0 0;
	text-align: center;
}

.o-videos__more .o-btn {
	color: var(--o-navy);
}

.o-videos__more .o-btn:hover,
.o-videos__more .o-btn:focus-visible {
	color: var(--o-white);
}

/* --------------------------------------------------------------------------
   Narrower screens
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.o-videos__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	/* A 16:9 frame, and the caption steps out from over the picture. */
	.o-videos__feature-media {
		aspect-ratio: 16 / 9;
	}

	.o-videos__feature-caption {
		grid-area: 2 / 1;
		justify-self: stretch;
		max-width: none;
		margin: 0;
		background-color: var(--o-navy-ink);
	}
}

@media (max-width: 560px) {
	.o-videos__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The pills scroll sideways rather than wrapping to several rows, running
	 * out to the screen edges so the cut-off pill shows there is more. The
	 * vertical padding keeps focus rings unclipped.
	 */
	.o-videos__filters {
		flex-wrap: nowrap;
		margin-inline: calc(var(--o-gutter) * -1);
		padding: 4px var(--o-gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.o-videos__filters::-webkit-scrollbar {
		display: none;
	}
}

/* Motion is decoration here; respect a request to do without it. */
@media (prefers-reduced-motion: reduce) {
	.o-videos__feature-img,
	.o-videos__card-img,
	.o-videos__play {
		transition: none;
	}

	.o-videos__feature:hover .o-videos__feature-img,
	.o-videos__card:hover .o-videos__card-img {
		transform: none;
	}

	.o-videos__card:hover .o-videos__play,
	.o-videos__feature:hover .o-videos__play {
		transform: translate(-50%, -50%);
	}
}