/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== SWIPERS ============================== */

:root {
	--swiper-gap: 1em;
	--swiper-disabled-opacity: .33; /*.33;*/
	--swiper-disabled-filter: grayscale(.33);

	--swiper-thumb-ratio: 16/9;
}


/* ============================== CONTROLS ============================== */

:root {
	--swiper-controls-font-size: calc(var(--font-size) * 1.5); /*var(--font-size);*/
	--swiper-controls-bullet-size: 1em;
	--swiper-controls-fraction-size: .375em;

	--swiper-controls-button-top: 50%;

	--swiper-min-controls-previous-from: translate(-100%, -50%);
	--swiper-min-controls-previous-to: translate(-50%, -50%);
	--swiper-min-controls-next-from: translate(100%, -50%);
	--swiper-min-controls-next-to: translate(50%, -50%);

	--swiper-full-controls-button-top: 50%;
	--swiper-full-controls-previous-from: translate(-100%, -50%);
	--swiper-full-controls-previous-to: translate(50%, -50%);
	--swiper-full-controls-next-from: translate(100%, -50%);
	--swiper-full-controls-next-to: translate(-50%, -50%);

	--swiper-scrollbar-size: .5rem;

	--swiper-controls-button-color: var(--button-text-color);
	--swiper-controls-button-background: var(--button-background-color);
	--swiper-controls-button-hover-color: var(--button-hover-text-color);
	--swiper-controls-button-hover-background: var(--button-hover-background-color);
}

@media (max-width: 1000px) {
	:root {
		--swiper-controls-font-size: calc(var(--font-size) * .75);

		/*--swiper-min-controls-previous-to: translate(25%, -50%);
		--swiper-min-controls-next-to: translate(-25%, -50%);*/
		--swiper-min-controls-previous-to: translate(-25%, -50%);
		--swiper-min-controls-next-to: translate(25%, -50%);

		--swiper-full-controls-button-top: 100%;
		--swiper-full-controls-previous-from: translate(-50%, -150%);
		--swiper-full-controls-previous-to: translate(50%, -150%);
		--swiper-full-controls-next-from: translate(50%, -150%);
		--swiper-full-controls-next-to: translate(-50%, -150%);
	}
}

.swiper-controls {
	--swiper-disabled-opacity: 0;
}


/* ============================== SIZES ============================== */

:root {
	--slides-per-row: 1;
}
.swiper-container {
	--slide-width: calc(100% / var(--slides-per-row, 1));
}

.medium-size { --slides-per-row: 1; }
.short-size { --slides-per-row: 2; }
.min-size { --slides-per-row: 3; }

@media (min-width: 760px) {
	.medium-size { --slides-per-row: 2; }
	.short-size { --slides-per-row: 3; }
	.min-size { --slides-per-row: 6; }
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* =============== DEFAULT =============== */

:root {
	--swiper-wrapper-transition-timing-function: var(--ease);
}

.swiper-container.is-faster {
	--swiper-wrapper-transition-timing-function: var(--ease-fast);
}

.swiper-slide-content {
	transition: opacity var(--duration-normal) var(--easeInQuint);
}
.swiper-controls a {
	transition: all var(--duration-fast) var(--easeInQuint);
}


/* =============== NAV =============== */

nav.swiperable {
	transition: opacity var(--duration-fast) var(--ease);
}


/* =============== CUSTOM =============== */

.images .swiper-container {
	--swiper-wrapper-transition-timing-function: var(--easeInOutQuint-fast);
}
.content .swiper-container {
	--swiper-wrapper-transition-timing-function: var(--easeInOutQuint);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== SWIPERS ============================== */

/* =============== SWIPER-CONTAINER =============== */

/* .clipped for inside <section-content> + <aside> */

.swiper-container {
	position: relative;
	width: 100%;
}


/* =============== SWIPER-SLIDE =============== */

.swiper-slide {
	display: flex;
	height: auto;
	margin: 0;
}


/* =============== SWIPER-SLIDE-CONTENT =============== */

.swiper-container .swiper-slide-content {
	position: relative;
	height: 100%;
	width: 100%;
	opacity: var(--swiper-disabled-opacity);
}
.swiper-slide.swiper-slide-active .swiper-slide-content {
	opacity: 1;
}


/* =============== CLIPPED =============== */

.swiper-container.clipped .swiper-slide:not(.swiper-slide-visible) .swiper-slide-content {
	opacity: 0;
	pointer-events: none;
}


/* =============== SWIPER NOTIFICATION =============== */

.swiper-notification {
	position: absolute;
	z-index: -1000;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
}


/* =============== ON OFF =============== */

/* JS > if < 2 slides */

.swiper-container.off .swiper-wrapper {
	transform: translate3d(0, 0, 0) !important;
}
.swiper-container.off .swiper-controls .previous,
.swiper-container.off .swiper-controls .next,
.swiper-container.off + .swiper-controls .previous,
.swiper-container.off + .swiper-controls .next {
	display: none;
}


/* =============== ONLOAD =============== */

.swiper-container.onload {
	opacity: 0;
	overflow: hidden;
}
.swiper-container.onload .swiper-controls {
	opacity: 0;
}
nav.swiper-container:not(.swiper-initialized) a,
nav.swiperable:not(.swiper-initialized) a {
	opacity: 0;
	pointer-events: none;
}
body.onload .swiper-container.clipped {
	overflow-y: visible;
	overflow-x: clip;
}
body.onload .swiper-container.clipped .swiper-slide .swiper-slide-content {
	transition: none;
}


/* ============================== SWIPERABLE ============================== */

/* grid <> swiper — flex instead of grid */

/* =============== AS GRID =============== */

.grid.swiperable .items {
	display: flex;
	gap: 0;
	justify-content: unset;
}
.grid.swiperable .item {
	position: relative;
	display: flex;
	height: auto;
	width: var(--item-width);
	flex-shrink: 0;
}
.grid.swiperable .item-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}


/* =============== AS SWIPER =============== */

.swiperable .swiper-wrapper {
	gap: 0;
}
.swiperable .swiper-slide {
	position: relative;
	display: flex;
	height: auto;
}
.swiperable .swiper-slide.empty {
	display: none;
}
.swiperable .grid-message {
	display: none;
}


/* =============== AS NAV =============== */

nav.swiperable {
	flex-wrap: nowrap;
}
nav.swiper-container .swiper-slide,
nav.swiperable .swiper-slide {
	width: auto;
	transition: none;
}
nav.swiperable .swiper-slide:not(.swiper-slide-visible) {
	opacity: 1;
}


/* =============== INACTIVE =============== */

/* scoped to multi-slide only */

.swiperable:has(.swiper-slide:nth-child(2)) .swiper-slide:not(.swiper-slide-visible),
.swiper-container[class*="-size"]:has(.swiper-slide:nth-child(2)) .swiper-slide:not(.swiper-slide-visible) {
	pointer-events: none;
	opacity: var(--swiper-disabled-opacity);
	filter: var(--swiper-disabled-filter);
}


/* =============== MARGIN =============== */

/* padding instead of margin — fixes swiper offset bug */

.swiperable {
	margin-inline: calc(var(--grid-gap) * -.5);
	width: calc(100% + var(--grid-gap));
}
.swiperable .item,
.swiperable .swiper-slide {
	margin: 0;
}
.swiperable .item-content {
	margin: 0 calc(var(--grid-gap) * .5);
}
.swiperable .swiper-controls {
	margin-inline: calc(var(--grid-gap) * .5);
}


/* =============== MIN =============== */

.swiperable.min .swiper-controls {
	left: 0;
	width: 100%;
	margin: 0;
}
.swiperable.min .swiper-controls .previous {
	left: calc(var(--grid-gap) * .5);
}
.swiperable.min .swiper-controls .next {
	right: calc(var(--grid-gap) * .5);
}


/* =============== @MEDIA =============== */

@media (min-width: 1200px) {
	.swiper-container.swiperable {
		overflow: visible;
	}
}


/* ============================== CONTROLS ============================== */

/**
 * .swiper-controls > .previous + .swiper-pagination + .next
 * default == after swiper-wrapper
 * min    == in swiper-container (absolute)
 */


/* =============== DEFAULT =============== */

.swiper-controls {
	position: relative;
	z-index: 10;
	flex-wrap: unset;
	gap: var(--swiper-gap);
	font-size: var(--swiper-controls-font-size);
	min-height: var(--swiper-controls-font-size);
	pointer-events: none;
}
.swiper-controls > * {
	z-index: 100;
	margin: 0;
	font-size: inherit;
	pointer-events: auto;
}


/* =============== VISIBILITY =============== */

.swiper-container:has(.swiper-button-lock ~ .swiper-button-lock) .swiper-controls {
	display: none;
}


/* =============== BUTTONS =============== */

.swiper-controls a {
	aspect-ratio: 1/1;
	padding: 0;
}


/* =============== NEXT PREVIOUS =============== */

.swiper-controls a.previous { left: 0; order: 1; }
.swiper-controls a.next { right: 0; order: 3; }


/* =============== ICONS =============== */

.swiper-controls a [class^="icon-"] {
	padding: 1em;
	height: 100%;
	color: var(--swiper-controls-button-color);
	border-radius: 50%;
}
.swiper-controls a [class^="icon-"]::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--swiper-controls-button-background);
	border-radius: 50%;
}


/* =============== DISABLED =============== */

.swiper-controls a.swiper-button-disabled {
	opacity: var(--swiper-disabled-opacity);
	pointer-events: none !important;
}


/* ============================== MODIFIERS ============================== */

/* =============== MIN =============== */

.swiper-container.min .swiper-controls {
	position: absolute;
	inset: 0;
	margin: 0;
}
.swiper-container.min .swiper-controls a.previous,
.swiper-container.min .swiper-controls a.next {
	position: absolute;
	top: var(--swiper-controls-button-top);
	opacity: 0;
}
.swiper-container.min .swiper-controls a.previous {
	transform: var(--swiper-min-controls-previous-from);
}
.swiper-container.min .swiper-controls a.next {
	transform: var(--swiper-min-controls-next-from);
}


/* =============== FULL =============== */

.swiper-container.min.full .swiper-controls a {
	top: var(--swiper-full-controls-button-top);
}
.swiper-container.min.full .swiper-controls a.previous {
	transform: var(--swiper-full-controls-previous-from);
}
.swiper-container.min.full .swiper-controls a.next {
	transform: var(--swiper-full-controls-next-from);
}


/* ============================== HOVER ============================== */

@media (hover: hover) {
	.swiper-controls a:hover [class^="icon-"] { color: var(--swiper-controls-button-hover-color); }
	.swiper-controls a:hover [class^="icon-"]::after { background: var(--swiper-controls-button-hover-background); transform: scale(1.25); }

	.swiper-container.min:hover .swiper-controls a:not(.swiper-button-disabled) { opacity: 1 !important; }
	.swiper-container.min:hover .swiper-controls a.swiper-button-disabled { opacity: var(--swiper-disabled-opacity) !important; }
	.swiper-container.min:hover .swiper-controls a.previous { transform: var(--swiper-min-controls-previous-to); }
	.swiper-container.min:hover .swiper-controls a.next { transform: var(--swiper-min-controls-next-to); }

	.swiper-container.min.full:hover .swiper-controls a.previous { transform: var(--swiper-full-controls-previous-to); }
	.swiper-container.min.full:hover .swiper-controls a.next { transform: var(--swiper-full-controls-next-to); }
}
@media (hover: none) {
	.swiper-controls a.hover [class^="icon-"] { color: var(--swiper-controls-button-hover-color); }
	.swiper-controls a.hover [class^="icon-"]::after { background: var(--swiper-controls-button-hover-background); transform: scale(1.25); }

	.swiper-container.min.hover .swiper-controls a:not(.swiper-button-disabled) { opacity: 1 !important; }
	.swiper-container.min.hover .swiper-controls a.swiper-button-disabled { opacity: var(--swiper-disabled-opacity) !important; }
	.swiper-container.min.hover .swiper-controls a.previous { transform: var(--swiper-min-controls-previous-to); }
	.swiper-container.min.hover .swiper-controls a.next { transform: var(--swiper-min-controls-next-to); }

	.swiper-container.min.full.hover .swiper-controls a.previous { transform: var(--swiper-full-controls-previous-to); }
	.swiper-container.min.full.hover .swiper-controls a.next { transform: var(--swiper-full-controls-next-to); }
}


/* ============================== MOBILE ============================== */

/* touch device only */

@media (pointer: coarse) {
	.swiper-controls a.previous,
	.swiper-controls a.next {
		opacity: 1 !important;
	}
	.swiper-controls a.previous.swiper-button-disabled,
	.swiper-controls a.next.swiper-button-disabled {
		opacity: var(--swiper-disabled-opacity) !important;
	}
	.swiper-container.min .swiper-controls a.previous { left: 0; transform: var(--swiper-min-controls-previous-to); }
	.swiper-container.min .swiper-controls a.next { right: 0; transform: var(--swiper-min-controls-next-to); }
	.swiper-container.min.full .swiper-controls a.previous { left: 0; transform: var(--swiper-full-controls-previous-to); }
	.swiper-container.min.full .swiper-controls a.next { right: 0; transform: var(--swiper-full-controls-next-to); }
}


/* ============================== THUMBS ============================== */

.swiper-container + .swiper-thumbs {
	margin-top: var(--grid-gap);
}
.swiper-thumbs .swiper-slide {
	cursor: pointer;
}
.swiper-thumbs figure {
	height: 100%;
	width: 100%;
	
	--img-height: 100%;
	--img-fit: cover;
	aspect-ratio: var(--swiper-thumb-ratio);
	margin: 0;
}
.swiper-thumbs .swiper-slide:not(.swiper-slide-thumb-active) .swiper-slide-content {
	opacity: var(--swiper-disabled-opacity);
}

@media (hover: hover) {
	.swiper-thumbs .swiper-slide:not(.swiper-slide-thumb-active):hover .swiper-slide-content { opacity: 1; }
}
@media (hover: none) {
	.swiper-thumbs .swiper-slide:not(.swiper-slide-thumb-active).hover .swiper-slide-content { opacity: 1; }
}


/* ============================== PAGINATION ============================== */


/* =============== DEFAULT =============== */

.swiper-pagination {
	position: relative;
	z-index: 10;
	display: inline-flex;
	justify-content: center;
	gap: var(--swiper-gap);
	order: 2;
}
.swiper-pagination .swiper-pagination-bullet {
	display: inline-flex;
	align-items: center;
	height: var(--swiper-controls-bullet-size);
	width: var(--swiper-controls-bullet-size);
	opacity: var(--swiper-disabled-opacity);
	margin: 0 !important;
	background: none;
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--swiper-controls-bullet-size);
}
.swiper-pagination-bullet.active,
.swiper-pagination .swiper-pagination-bullet-active {
	opacity: 1;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.swiper-pagination .swiper-pagination-bullet:hover { opacity: 1; }
}
@media (hover: none) {
	.swiper-pagination .swiper-pagination-bullet.hover { opacity: 1; }
}


/* =============== ABSOLUTE =============== */

.swiper-container.min .swiper-pagination,
.swiperable .swiper-pagination {
	position: absolute;
	bottom: 0;
	padding: var(--gutter-gap);
	transform: translate3d(0, 0, 0);
}


/* =============== FRACTION =============== */

.swiper-container.min .swiper-pagination.swiper-pagination-fraction,
.swiper-pagination.swiper-pagination-fraction {
	top: 0;
	bottom: auto;
	justify-content: flex-end;
	gap: 0;
	font-size: var(--swiper-controls-fraction-size);
	font-weight: var(--font-weight-bold);
	text-align: right;
	pointer-events: none;
}


/* ============================== PARALLAX ============================== */

/* WIP */

.swiper-container.has-parallax .swiper-slide .infos {
	opacity: 0;
	transform: translate(0, 100%);
	transition: all var(--duration-normal);
}
.swiper-container.has-parallax .swiper-slide.swiper-slide-active .infos {
	opacity: 1;
	transform: translate(0, 0);
	transition-delay: .5s;
}


/* ============================== SCROLLBAR ============================== */

/* WIP */

.swiper-scrollbar {
	bottom: calc(var(--gutter-gap) / 4 * -1) !important;
	height: calc(var(--swiper-scrollbar-size) * 4);
	margin-inline: calc(var(--gutter-gap) * 2);
	max-width: var(--content-max-width);
	width: calc(100% - var(--gutter-gap) * 4) !important;
}
.swiper-scrollbar-drag {
	background: currentColor !important;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.swiper-container:hover .swiper-scrollbar { opacity: 1 !important; }
}
@media (hover: none) {
	.swiper-container.hover .swiper-scrollbar { opacity: 1 !important; }
}


/* ============================== MARGINS ============================== */

.swiper-container:not(.clipped):not(.full),
.swiper-container[class*="-size"].clipped {
	margin-inline: calc(var(--grid-gap) * -.5);
	width: calc(100% + var(--grid-gap));
}
.swiper-container:not(.clipped):not(.full) .swiper-slide-content,
.swiper-container[class*="-size"].clipped .swiper-slide-content {
	margin: 0 calc(var(--grid-gap) * .5);
}
main > .swiper-container:not(.clipped):not(.full) {
	margin-inline: calc(var(--section-gap) - var(--grid-gap) * .5) !important;
	width: calc(100% - var(--section-gap) * 2 + var(--grid-gap)) !important;
	max-width: calc(var(--content-max-width) + var(--grid-gap)) !important;
}


/* ============================== SIZES ============================== */

.swiper-container[class*="-size"] .swiper-slide {
	display: flex;
	width: var(--slide-width);
}
.swiper-container[class*="-size"] .swiper-slide-content {
	opacity: 1;
}


/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for custom animation overrides */


/* =============== IMAGE =============== */

.swiper-container figure.image {
	margin: 0;
}

.swiper-thumbs picture {
	display: contents;
}