/**
 * Divi Vimeo Collage — front-end styles.
 *
 * Layout numbers and tile colours come from CSS custom properties that the
 * module prints through Divi's style system, so responsive and hover values
 * arrive as ordinary Divi-generated rules. Every var() here carries a fallback
 * so the module still looks right before a single option has been touched.
 *
 * The same stylesheet is loaded in the Visual Builder, which renders identical
 * markup.
 */

.dvc .dvc__inner {
	--dvc-cols: 3;
	--dvc-gap: 16px;
	--dvc-ratio: 16 / 9;
}

.dvc .dvc__frame {
	--dvc-play-size: 64px;
	--dvc-play-color: #fff;
	--dvc-play-bg: rgba( 0, 0, 0, 0.55 );
	--dvc-overlay: rgba( 0, 0, 0, 0.25 );
}

/* ---------------------------------------------------------------- grid -- */

/* --dvc-rows is 1fr for equal rows and auto to let each row size itself. Equal
   rows is the default because it is what makes a featured video reliably twice
   the height of an ordinary one: a spanning tile is then two full rows plus a
   gap, even when nothing else sits in its second row to give that row a height.
   Left to size themselves, rows with nothing in them collapse, and a collage of
   three or four videos comes out with the big tile squashed.

   Every one of these properties is per-breakpoint, so columns, gap, row heights
   and aspect ratio can each differ by device. */
.dvc .dvc__grid {
	display: grid;
	grid-template-columns: repeat( var( --dvc-cols, 3 ), minmax( 0, 1fr ) );
	grid-auto-rows: var( --dvc-rows, 1fr );
	gap: var( --dvc-gap, 16px );
	margin: 0;
	padding: 0;
}

/* A column so the frame can stretch to fill a spanning collage cell without
   relying on a percentage height, which has nothing to resolve against when
   every child of the frame is absolutely positioned. */
.dvc .dvc__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Collage: a featured video spans two columns and two rows. With nothing
   explicitly featured, the first tile is promoted. */
.dvc--collage .dvc__item--featured,
.dvc--collage .dvc__grid:not( :has( .dvc__item--featured ) ) > .dvc__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* ---------------------------------------------------------------- card -- */

/* The card wraps thumbnail and text in every placement so the markup has one
   shape. Only the card placement gives it a background and padding. */
.dvc .dvc__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Written with :where() so it carries no specificity at all: anything set
   through the module's Card design options overrides it without a fight. */
:where( .dvc--captions-card .dvc__card ) {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 18px rgba( 0, 0, 0, 0.07 );
	overflow: hidden;
}

:where( .dvc--captions-card .dvc__meta ) {
	padding: 22px 24px 26px;
}

/* The thumbnail sits flush in the card's top corners, unless a corner radius
   has been set explicitly — then that wins here too. */
.dvc--captions-card .dvc__frame {
	border-radius: var( --dvc-radius, 0 );
}

/* --------------------------------------------------------------- tiles -- */

.dvc .dvc__frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: #111;
	border-radius: var( --dvc-radius, 4px );
	aspect-ratio: var( --dvc-ratio, 16 / 9 );
	min-height: var( --dvc-min-height, 0px );
	transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

/* Featured tiles fill the taller cell rather than keeping the ratio. The
   min-height is a floor: if the row height ever ends up indeterminate the tile
   still has a clickable box rather than collapsing to nothing. */
.dvc--collage .dvc__item--featured .dvc__frame,
.dvc--collage .dvc__grid:not( :has( .dvc__item--featured ) ) > .dvc__item:first-child .dvc__frame {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-height: var( --dvc-min-height, 160px );
}

.dvc .dvc__tile {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	cursor: pointer;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	line-height: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.dvc .dvc__tile:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.dvc .dvc__thumb,
.dvc .dvc__thumb--missing {
	display: block;
	width: 100%;
	height: 100%;
}

.dvc .dvc__thumb {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dvc .dvc__thumb--missing {
	background: linear-gradient( 135deg, #1a1a1a 0%, #2e2e2e 100% );
}

.dvc--zoom .dvc__frame:hover .dvc__thumb {
	transform: scale( 1.06 );
}

.dvc .dvc__overlay {
	position: absolute;
	inset: 0;
	background-color: var( --dvc-overlay, rgba( 0, 0, 0, 0.25 ) );
	transition: background-color 0.3s ease;
	pointer-events: none;
}

/* ---------------------------------------------------------- play button -- */

/* Dead centre of the tile, always. Captions are kept to a height that cannot
   reach it — see --dvc-title-lines below. */
.dvc .dvc__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: var( --dvc-play-size, 64px );
	height: var( --dvc-play-size, 64px );
	border-radius: 50%;
	background-color: var( --dvc-play-bg, rgba( 0, 0, 0, 0.55 ) );
	color: var( --dvc-play-color, #fff );
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* The glyph itself — content, font family and colour are printed by Divi from
   the Play Icon setting. Only the size is derived from the button here, and a
   user-set icon size overrides it. */
.dvc .dvc__play::before {
	content: "";
	font-size: calc( var( --dvc-play-size, 64px ) * 0.4 );
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-transform: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.dvc .dvc__frame:hover .dvc__play {
	transform: translate( -50%, -50% ) scale( 1.1 );
}

.dvc .dvc__duration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 2px 7px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.75 );
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* -------------------------------------------------------------- captions -- */

.dvc .dvc__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.dvc--captions-below .dvc__meta,
.dvc--captions-card .dvc__meta {
	text-align: left;
}

.dvc--captions-below .dvc__meta {
	padding-top: 10px;
}

/* Cards in a row line their thumbnails up regardless of title length. */
.dvc--captions-card .dvc__meta {
	flex: 1 1 auto;
}

.dvc--captions-overlay .dvc__meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 16px 14px;
	text-align: left;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), rgba( 0, 0, 0, 0 ) );
	color: #fff;
	pointer-events: none;
}

/* Over a thumbnail a title is held to one line, so the caption has a height the
   play button can be centred against and a long title can never grow into it.
   Below a thumbnail there is room, so it wraps freely. Title Lines overrides
   both. Nothing is lost to the clamp: the full title is on the tile's title
   attribute, which browsers show on hover, and in its aria-label. */
.dvc .dvc__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --dvc-title-lines, none );
	line-clamp: var( --dvc-title-lines, none );
	overflow: hidden;
	font-weight: 600;
}

.dvc--captions-overlay .dvc__title {
	-webkit-line-clamp: var( --dvc-title-lines, 1 );
	line-clamp: var( --dvc-title-lines, 1 );
}

.dvc .dvc__date {
	display: block;
	margin-top: 8px;
}

.dvc .dvc__caption {
	display: block;
	margin-top: 8px;
	white-space: pre-line;
}

/* Over the thumbnail there is no room for a full description; keep it to the
   compact treatment the overlay was designed for. */
.dvc--captions-overlay .dvc__caption {
	opacity: 0.85;
	margin-top: 4px;
}

/* --------------------------------------------------------- slider layout -- */

.dvc--slider .dvc__stage {
	position: relative;
	width: 100%;
	margin-bottom: var( --dvc-gap, 16px );
	background: #000;
	border-radius: var( --dvc-radius, 4px );
	overflow: hidden;
}

.dvc--slider .dvc__grid + .dvc__stage {
	margin-bottom: 0;
	margin-top: var( --dvc-gap, 16px );
}

.dvc--slider .dvc__stage-inner {
	position: relative;
	width: 100%;
	aspect-ratio: var( --dvc-ratio, 16 / 9 );
}

.dvc--slider .dvc__stage-inner iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dvc--slider .dvc__frame.is-active .dvc__overlay {
	background-color: transparent;
}

.dvc--slider .dvc__frame.is-active {
	box-shadow: 0 0 0 3px currentColor;
}

.dvc--slider .dvc__frame.is-active .dvc__play {
	opacity: 0;
}

/* --------------------------------------------------- inline player swap -- */

.dvc .dvc__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 3;
	background: #000;
}

.dvc .dvc__frame.is-playing .dvc__tile {
	opacity: 0;
	pointer-events: none;
}

.dvc--captions-overlay .dvc__frame.is-playing .dvc__meta {
	opacity: 0;
}

/* ------------------------------------------------------------- lightbox -- */

.dvc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5vmin;
	background: rgba( 0, 0, 0, 0.80 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.dvc-lightbox.is-open {
	opacity: 1;
}

.dvc-lightbox__frame {
	position: relative;
	width: 100%;
	max-width: 1200px;
	aspect-ratio: var( --dvc-lightbox-ratio, 16 / 9 );
	max-height: 90vh;
}

.dvc-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The overlay is appended to <body>, so these two properties cannot be printed
   against it by a module-scoped selector. They are printed on .dvc__inner and
   copied across by the front-end script when a lightbox opens. */
.dvc-lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --dvc-close-bg, rgba( 255, 255, 255, 0.15 ) );
	color: var( --dvc-close-color, #fff );
	font-size: 20px;
	line-height: 36px;
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

/* An inset white wash rather than a second colour: it lifts whatever
   background has been chosen without needing a hover value for it. */
.dvc-lightbox__close:hover,
.dvc-lightbox__close:focus-visible {
	box-shadow: inset 0 0 0 999px rgba( 255, 255, 255, 0.18 );
}

body.dvc-lightbox-open {
	overflow: hidden;
}

/* --------------------------------------------------------- builder only -- */

.dvc__item--invalid {
	padding: 24px;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 4px;
	text-align: center;
	font-size: 14px;
	opacity: 0.7;
}

/* ------------------------------------------------------------ responsive -- */

@media ( max-width: 767px ) {
	/* A featured tile spanning 2 columns makes no sense in a single column. */
	.dvc--collage .dvc__item--featured,
	.dvc--collage .dvc__grid:not( :has( .dvc__item--featured ) ) > .dvc__item:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}

	.dvc--collage .dvc__item--featured .dvc__frame,
	.dvc--collage .dvc__grid:not( :has( .dvc__item--featured ) ) > .dvc__item:first-child .dvc__frame {
		aspect-ratio: var( --dvc-ratio, 16 / 9 );
		flex: 0 0 auto;
		min-height: var( --dvc-min-height, 0px );
	}

	.dvc-lightbox__close {
		top: auto;
		bottom: -44px;
		right: 50%;
		transform: translateX( 50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dvc .dvc__thumb,
	.dvc .dvc__play,
	.dvc .dvc__overlay,
	.dvc-lightbox {
		transition: none;
	}

	.dvc--zoom .dvc__frame:hover .dvc__thumb {
		transform: none;
	}
}