.wp-block-wrd-accordion-gallery-item {
	--wp-block-wrd-accordion-gallery-item__padding: 1.5rem;
	--wp-block-wrd-accordion-gallery-item__closed-size: 5rem;
	max-height: var(--wp-block-wrd-accordion-gallery-item__closed-size);
	flex-grow: 0;
	flex-shrink: 1;
	transition: flex-grow var(--ease-in-out-circ) 800ms,
		max-height var(--ease-in-out-circ) 800ms,
		width var(--ease-in-out-circ) 800ms;
}

.wp-block-wrd-accordion-gallery-item:not(.is-style-plain)
	.wp-block-wrd-accordion-gallery-item__image {
	--wp-block-wrd-accordion-gallery-item__mask-distance: 100%;
	--wp-block-wrd-accordion-gallery-item__mask-strength--end: 90%;
	--wp-block-wrd-accordion-gallery-item__mask-strength--start: 50%;

	mask-image: linear-gradient(
		black 0%,
		rgba(
				0 0 0 / var(--wp-block-wrd-accordion-gallery-item__mask-strength--start)
			)
			var(--wp-block-wrd-accordion-gallery-item__mask-distance),
		rgba(0 0 0 / var(--wp-block-wrd-accordion-gallery-item__mask-strength--end))
			100%
	);
	mask-size: 100%;
	mask-repeat: no-repeat;
	mask-position: bottom;
	transition: --wp-block-wrd-accordion-gallery-item__mask-strength--start
			var(--ease-in-out-circ) 1500ms,
		--wp-block-wrd-accordion-gallery-item__mask-strength--end
			var(--ease-in-out-circ) 1500ms,
		--wp-block-wrd-accordion-gallery-item__mask-distance var(--ease-in-out-circ)
			1500ms;
}

.wp-block-wrd-accordion-gallery:not(.alignfull)
	.wp-block-wrd-accordion-gallery-item:first-child {
	border-top-left-radius: 2rem;
}
.wp-block-wrd-accordion-gallery:not(.alignfull)
	.wp-block-wrd-accordion-gallery-item:last-child {
	border-bottom-right-radius: 2rem;
}

.wp-block-wrd-accordion-gallery-item__label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	min-height: var(--wp-block-wrd-accordion-gallery-item__closed-size);
	font-size: max(
		calc(var(--wp-block-wrd-accordion-gallery-item__closed-size) / 6),
		1rem
	);
	display: flex;
	align-items: center;
	padding-left: var(--wp-block-wrd-accordion-gallery-item__padding);
	padding-right: var(--wp-block-wrd-accordion-gallery-item__padding);
	cursor: pointer;
	transition: transform 500ms var(--ease-out-circ) 200ms,
		opacity 500ms var(--ease-out-circ) 200ms;
}

.wp-block-wrd-accordion-gallery-item__content {
	overflow: clip;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: var(--wp-block-wrd-accordion-gallery-item__padding);
	padding: var(--wp-block-wrd-accordion-gallery-item__padding);
	padding-top: calc(3 * var(--wp-block-wrd-accordion-gallery-item__padding));
	pointer-events: none;
}

.wp-block-wrd-accordion-gallery-item__content .prose {
	transition: opacity 900ms var(--ease-out-circ),
		transform 500ms var(--ease-out-circ), clip-path 750ms var(--ease-out-circ);
	opacity: 0;
	transform: translateY(4rem);
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.wp-block-wrd-accordion-gallery-item__controls {
	display: none;
}

.wp-block-wrd-accordion-gallery-item[data-accordion-item="true"] {
	max-height: fit-content;
	flex-grow: 1;

	.wp-block-wrd-accordion-gallery-item__image {
		--wp-block-wrd-accordion-gallery-item__mask-distance: 25%;
		--wp-block-wrd-accordion-gallery-item__mask-strength--end: 5%;
		--wp-block-wrd-accordion-gallery-item__mask-strength--start: 85%;
	}

	.wp-block-wrd-accordion-gallery-item__label {
		transform: translateY(-2rem);
		opacity: 0;
		pointer-events: none;
	}

	.wp-block-wrd-accordion-gallery-item__content {
		pointer-events: auto;
	}

	.wp-block-wrd-accordion-gallery-item__content .prose {
		opacity: 1;
		transform: translateY(0);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		transition-delay: 750ms;
	}
}

@media (width >= 768px) {
	.wp-block-wrd-accordion-gallery-item {
		--wp-block-wrd-accordion-gallery-item__padding: 2rem;
	}
}

@media screen and (width >= 1024px) {
	.wp-block-wrd-accordion-gallery-item {
		--wp-block-wrd-accordion-gallery-item__padding: 2.5rem;
	}

	.wp-block-wrd-accordion-gallery.is-style-horizontal {
		&.alignfull {
			.wp-block-wrd-accordion-gallery-item {
				--wp-block-wrd-accordion-gallery-item__closed-size: 7.5rem;
				--wp-block-wrd-accordion-gallery-item__padding: 2.5rem;
			}

			.wp-block-wrd-accordion-gallery-item
				.wp-block-wrd-accordion-gallery-item__image {
				--wp-block-wrd-accordion-gallery-item__mask-distance: 75%;
			}

			.wp-block-wrd-accordion-gallery-item[data-accordion-item="true"]
				.wp-block-wrd-accordion-gallery-item__image {
				--wp-block-wrd-accordion-gallery-item__mask-distance: 25%;
				--wp-block-wrd-accordion-gallery-item__mask-strength--end: 10%;
				--wp-block-wrd-accordion-gallery-item__mask-strength--start: 100%;
			}
		}

		.wp-block-wrd-accordion-gallery-item {
			display: flex;
			align-items: end;
			min-height: 75vh;
			width: var(--wp-block-wrd-accordion-gallery-item__closed-size);
		}

		.wp-block-wrd-accordion-gallery-item:first-child {
			border-top-left-radius: 0;
		}
		.wp-block-wrd-accordion-gallery-item:last-child {
			border-bottom-right-radius: 0;
		}

		.wp-block-wrd-accordion-gallery-item__label {
			bottom: 0;
			top: 0;
			width: var(--wp-block-wrd-accordion-gallery-item__closed-size);
			right: auto;
			padding-left: 0;
			padding-right: 0;
			padding-top: var(--wp-block-wrd-accordion-gallery-item__padding);
			padding-bottom: var(--wp-block-wrd-accordion-gallery-item__padding);
			writing-mode: sideways-lr;
			white-space: nowrap;
		}

		.wp-block-wrd-accordion-gallery-item__controls {
			display: flex;
			opacity: 0;
			transition: opacity 500ms var(--ease-in-out-circ);
		}

		.wp-block-wrd-accordion-gallery-item__content {
			height: auto;
			width: 100%;
			padding-top: var(--wp-block-wrd-accordion-gallery-item__padding);
		}

		.wp-block-wrd-accordion-gallery-item__content .prose {
			width: 65ch;
			max-width: 50vw;
			transform: translateX(4rem);
		}

		.wp-block-wrd-accordion-gallery-item[data-accordion-item="true"] {
			flex-grow: 1;

			.wp-block-wrd-accordion-gallery-item__content .prose {
				transform: translateX(0);
			}

			.wp-block-wrd-accordion-gallery-item__controls {
				opacity: 1;
				transition-duration: 1000ms;
				transition-delay: 1000ms;
			}
		}
	}
}

@media screen and (width >= 1280px) {
	.wp-block-wrd-accordion-gallery.is-style-horizontal.alignfull {
		.wp-block-wrd-accordion-gallery-item {
			--wp-block-wrd-accordion-gallery-item__padding: 3rem;
			--wp-block-wrd-accordion-gallery-item__closed-size: 9rem;
		}
	}

	.wp-block-wrd-accordion-gallery-item__content {
		flex-direction: row;
		align-items: end;
	}
}

@media screen and (width >= 1536px) {
	.wp-block-wrd-accordion-gallery.is-style-horizontal.alignfull {
		.wp-block-wrd-accordion-gallery-item {
			--wp-block-wrd-accordion-gallery-item__padding: 5rem;
		}
	}
}

@property --wp-block-wrd-accordion-gallery-item__mask-strength--start {
	initial-value: 0%;
	inherits: false;
	syntax: "<percentage>";
}

@property --wp-block-wrd-accordion-gallery-item__mask-strength--end {
	initial-value: 0%;
	inherits: false;
	syntax: "<percentage>";
}

@property --wp-block-wrd-accordion-gallery-item__mask-distance {
	initial-value: 0%;
	inherits: false;
	syntax: "<percentage>";
}