/* YouClip Slider */

.youclip {
	--youclip-max-width: 620px;
	--youclip-title-size: inherit;
	--youclip-text-size: inherit;
	--youclip-title-color: inherit;
	--youclip-text-color: inherit;
	--youclip-arrow-bg: #7c8160;
	--youclip-arrow-color: #ffffff;
	--youclip-arrow-size: 34px;
	--youclip-dot: #c7cabc;
	--youclip-dot-active: #7c8160;
	--youclip-gap: 28px;
	--youclip-speed: 420ms;

	position: relative;
	width: 100%;
}

.youclip *,
.youclip *::before,
.youclip *::after {
	box-sizing: border-box;
}

/* Stage: arrow, viewport, arrow */

.youclip__stage {
	display: flex;
	align-items: center;
	gap: var(--youclip-gap);
}

.youclip__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.youclip__track {
	display: flex;
	align-items: stretch;
	transition: transform var(--youclip-speed) cubic-bezier(.33, .8, .35, 1);
	will-change: transform;
}

.youclip.is-dragging .youclip__track {
	transition: none;
}

/* Slide */

.youclip-slide {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 4px;
}

.youclip--align-center .youclip-slide {
	text-align: center;
}

.youclip--align-left .youclip-slide {
	text-align: left;
}

.youclip--align-right .youclip-slide {
	text-align: right;
}

.youclip-slide__media,
.youclip-slide__title,
.youclip-slide__text {
	max-width: var(--youclip-max-width);
}

.youclip--align-center .youclip-slide__media,
.youclip--align-center .youclip-slide__title,
.youclip--align-center .youclip-slide__text {
	margin-left: auto;
	margin-right: auto;
}

.youclip--align-right .youclip-slide__media,
.youclip--align-right .youclip-slide__title,
.youclip--align-right .youclip-slide__text {
	margin-left: auto;
}

.youclip-slide__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.youclip-slide__media {
	margin-bottom: 18px;
}

.youclip-slide__title {
	margin: 0 0 10px;
	font-size: var(--youclip-title-size);
	color: var(--youclip-title-color);
	line-height: 1.25;
}

.youclip-slide__text {
	font-size: var(--youclip-text-size);
	color: var(--youclip-text-color);
	line-height: 1.6;
}

.youclip-slide__text > *:first-child {
	margin-top: 0;
}

.youclip-slide__text > *:last-child {
	margin-bottom: 0;
}

.youclip-slide__link {
	display: inline-block;
	margin-top: 16px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Fade mode: slides stack and cross-fade */

.youclip--effect-fade .youclip__track {
	display: grid;
	transform: none !important;
	transition: none;
}

.youclip--effect-fade .youclip-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--youclip-speed) ease;
}

.youclip--effect-fade .youclip-slide.is-current {
	opacity: 1;
	visibility: visible;
}

/* Arrows */

.youclip__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--youclip-arrow-size);
	height: var(--youclip-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--youclip-arrow-bg);
	color: var(--youclip-arrow-color);
	cursor: pointer;
	transition: opacity 160ms ease, filter 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.youclip__arrow svg {
	width: 55%;
	height: 55%;
	display: block;
}

.youclip__arrow:hover {
	filter: brightness(1.12);
}

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

.youclip__arrow[disabled] {
	opacity: .35;
	cursor: default;
	filter: none;
}

/* Arrows under the text */

.youclip--arrows-below .youclip__stage {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
}

.youclip--arrows-below .youclip__viewport {
	flex: 0 0 100%;
	order: 0;
}

.youclip--arrows-below .youclip__arrow {
	margin: 20px 7px 0;
}

.youclip--arrows-below .youclip__arrow--prev {
	order: 1;
}

.youclip--arrows-below .youclip__arrow--next {
	order: 2;
}

/* Dots */

.youclip__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
}

.youclip--align-left .youclip__dots {
	justify-content: flex-start;
}

.youclip--align-right .youclip__dots {
	justify-content: flex-end;
}

.youclip__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--youclip-dot);
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.youclip__dot.is-current {
	background: var(--youclip-dot-active);
	transform: scale(1.25);
}

.youclip__dot:focus-visible {
	outline: 2px solid var(--youclip-dot-active);
	outline-offset: 3px;
}

/* Small screens: arrows move under the text so the column keeps its width */

@media (max-width: 600px) {
	.youclip__stage {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
	}

	.youclip__viewport {
		flex: 0 0 100%;
		order: 0;
	}

	.youclip__arrow {
		margin: 18px 7px 0;
	}

	.youclip__arrow--prev {
		order: 1;
	}

	.youclip__arrow--next {
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.youclip__track,
	.youclip-slide,
	.youclip__dot {
		transition: none !important;
	}
}