/* Info pages: Archive. */

/*
 * Archive (/archive/, tools/sections/info-archive.js), as the source's Elementor page:
 * ARCHIVE fades in on tablets and phones only (1.25s ease, assets/js/info-archive.js
 * adds .is-revealed); the banners' gradient shades, whose opacity changes per width;
 * the JEWELRY label's chevron (14px, 12px on phones; after the word, before it on
 * right-aligned banners); photo pairs stacking on phones; the image carousels.
 */
@media (width <= 1024px) {
	.tillander-motion .is-style-archive-title:not(.is-revealed) {
		visibility: hidden;
	}

	.is-style-archive-title.is-revealed {
		animation: tillander-fade-in 1.25s ease both;
	}
}

@media (width <= 1024px) and (prefers-reduced-motion: reduce) {
	.tillander-motion .is-style-archive-title:not(.is-revealed) {
		visibility: visible;
	}

	.is-style-archive-title.is-revealed {
		animation: none;
	}
}

.is-style-archive-banner::before,
.is-style-archive-banner-diagonal::before,
.is-style-archive-banner-light::before,
.is-style-archive-banner-side::before {
	position: absolute;
	inset: 0;
	content: "";
	background-image: linear-gradient(180deg, rgb(173 173 173 / 0%) 0%, rgb(7 7 7 / 78%) 100%);
	opacity: 0;
	pointer-events: none;
}

.is-style-archive-banner > *,
.is-style-archive-banner-diagonal > *,
.is-style-archive-banner-light > *,
.is-style-archive-banner-side > * {
	position: relative;
}

.is-style-archive-banner-diagonal::before {
	background-image: linear-gradient(171deg, rgb(173 173 173 / 0%) 0%, rgb(7 7 7 / 78%) 100%);
	opacity: 0.51;
}

.is-style-archive-banner-light::before {
	background-image: linear-gradient(180deg, rgb(173 173 173 / 0%) 0%, rgb(255 255 255 / 78%) 100%);
}

.is-style-archive-banner-side::before {
	background-image: linear-gradient(281deg, rgb(173 173 173 / 0%) 0%, rgb(7 7 7 / 78%) 100%);
	opacity: 0.4;
}

.is-style-archive-toggle {
	padding-left: 5px;
}

.is-style-archive-toggle::after,
.is-style-archive-toggle.has-text-align-right::before {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	vertical-align: -2px;
	content: "";
	background-color: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-archive-toggle.has-text-align-right {
	padding-left: 0;
}

.is-style-archive-toggle.has-text-align-right::before {
	margin-right: 13px;
	margin-left: 0;
}

.is-style-archive-toggle.has-text-align-right::after {
	content: none;
}

.is-style-archive-carousel {
	padding: 0 30px;
}

.wp-block-group.is-style-archive-carousel > .wp-block-image:not(:first-child) {
	display: none;
}

/* Each slide is 1006px: the image (its block sizes it to 100%, contained) and the 6px
   the source's inline image leaves under it. */
.wp-block-group.is-style-archive-carousel > .wp-block-image:first-child,
.wp-block-group.is-style-archive-carousel .tillander-archive-carousel__track > .wp-block-image {
	box-sizing: border-box;
	flex: 0 0 100%;
	height: 1006px;
	margin: 0;
	padding-bottom: 6px;
}

.is-style-archive-carousel .tillander-archive-carousel__viewport {
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}

.is-style-archive-carousel .tillander-archive-carousel__track {
	display: flex;
	will-change: transform;
}

.is-style-archive-carousel .tillander-archive-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	padding: 0;
	font-size: 2rem;
	color: #c4c4c4;
	cursor: pointer;
	background: none;
	border: 0;
	transform: translateY(-50%);
}

.wp-block-group.is-style-archive-carousel .tillander-archive-carousel__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentcolor;
}

.is-style-archive-carousel .tillander-archive-carousel__arrow--prev {
	left: 0;
}

.is-style-archive-carousel .tillander-archive-carousel__arrow--next {
	right: 0;
}

.is-style-archive-carousel .tillander-archive-carousel__dots {
	position: absolute;
	right: 0;
	bottom: 26px;
	left: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
	justify-content: center;
}

.is-style-archive-carousel .tillander-archive-carousel__dot {
	width: 1rem;
	height: 1rem;
	padding: 0;
	margin: 0 6px;
	cursor: pointer;
	background: #cacaca;
	border: 0;
	border-radius: 50%;
}

.is-style-archive-carousel .tillander-archive-carousel__dot.is-active {
	background: #646464;
}

@media (768px <= width <= 1024px) {
	.is-style-archive-banner-diagonal::before {
		opacity: 0;
	}

	.is-style-archive-banner-light::before {
		opacity: 0.19;
	}

	.is-style-archive-banner-side::before {
		opacity: 0.47;
	}
}

@media (width <= 1024px) {
	.wp-block-group.is-style-archive-carousel > .wp-block-image:first-child,
	.wp-block-group.is-style-archive-carousel .tillander-archive-carousel__track > .wp-block-image {
		height: 506px;
	}

	/* Rows of bullets 24px apart, the last row lowest (the source's line boxes). */
	.is-style-archive-carousel .tillander-archive-carousel__dots {
		row-gap: 14.4px;
	}

	.is-style-archive-carousel .tillander-archive-carousel__dot {
		width: 0.6rem;
		height: 0.6rem;
	}
}

@media (width <= 767px) {
	.is-style-archive-banner::before,
	.is-style-archive-banner-diagonal::before,
	.is-style-archive-banner-light::before {
		opacity: 0.5;
	}

	.is-style-archive-banner-side::before {
		opacity: 0.48;
	}

	.is-style-archive-toggle::after,
	.is-style-archive-toggle.has-text-align-right::before {
		width: 12px;
		height: 12px;
	}

	.is-style-archive-pair {
		flex-direction: column;
	}

	.is-style-archive-pair-flip {
		flex-direction: column-reverse;
	}

	.wp-block-group.is-style-archive-carousel > .wp-block-image:first-child,
	.wp-block-group.is-style-archive-carousel .tillander-archive-carousel__track > .wp-block-image {
		height: 356px;
	}

	.is-style-archive-carousel .tillander-archive-carousel__arrow {
		font-size: 1.2rem;
	}
}