/**
 * Gallery arrows
 *
 * Large prev/next buttons over the machine gallery (neweb/post-gallery block):
 * 120x120 black glass square (backdrop blur) with a soft drop shadow, white arrow.
 * On hover the shadow tightens and the square sinks slightly (pressed effect),
 * a white panel wipes in and the arrow turns black, with the theme's gold accent.
 * On mobile: narrow rectangle, arrow head only.
 */

.wp-block-neweb-post-gallery.has-st-gallery-arrows {
	--st-ga-width: 120px;
	--st-ga-height: 120px;
	--st-ga-icon: 56px;
	--st-ga-shift: 6px;
	--st-ga-ease: cubic-bezier(.22, .61, .36, 1);
	--st-ga-duration: .5s;
	--st-ga-gold: var(--wp--preset--color--primary, #D79514);
	--st-ga-shadow: 0 40px 80px 0 rgba(0, 0, 0, .85), 0 18px 36px 0 rgba(0, 0, 0, .6), 0 0 60px 8px rgba(0, 0, 0, .45);
	--st-ga-shadow-pressed: 0 12px 24px -4px rgba(0, 0, 0, .7), 0 4px 10px -2px rgba(0, 0, 0, .5), 0 0 16px 0 rgba(0, 0, 0, .3);
	--st-ga-shadow-active: 0 3px 8px -2px rgba(0, 0, 0, .6), 0 1px 3px 0 rgba(0, 0, 0, .4), 0 0 0 0 rgba(0, 0, 0, 0);
	position: relative;
}

.st-gallery-arrow {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: var(--st-ga-center, 200px);
	z-index: 5;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--st-ga-width);
	height: var(--st-ga-height);
	margin: 0;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background-color: rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
	border: 0;
	border-radius: 0;
	box-shadow: var(--st-ga-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		color var(--st-ga-duration) var(--st-ga-ease),
		box-shadow var(--st-ga-duration) var(--st-ga-ease),
		transform var(--st-ga-duration) var(--st-ga-ease);
	-webkit-tap-highlight-color: transparent;
	animation: st-ga-enter .9s var(--st-ga-ease) .2s backwards;
}

.st-gallery-arrow[hidden] {
	display: none !important;
}

.st-gallery-arrow--prev {
	left: 0;
	--st-ga-from: -16px;
}

.st-gallery-arrow--next {
	right: 0;
	--st-ga-from: 16px;
}

/* gold hairline on the bottom edge */
.st-gallery-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	pointer-events: none;
	background-color: var(--st-ga-gold);
	transform: scaleX(0);
	transition: transform var(--st-ga-duration) var(--st-ga-ease);
}

.st-gallery-arrow--prev::after {
	transform-origin: right center;
}

.st-gallery-arrow--next::after {
	transform-origin: left center;
}

/* white panel that wipes in on hover */
.st-gallery-arrow__fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, .94);
	transform: scaleX(0);
	transition: transform var(--st-ga-duration) var(--st-ga-ease);
}

.st-gallery-arrow--prev .st-gallery-arrow__fill {
	transform-origin: right center;
}

.st-gallery-arrow--next .st-gallery-arrow__fill {
	transform-origin: left center;
}

.st-gallery-arrow__icon {
	position: relative;
	display: block;
	width: var(--st-ga-icon);
	height: auto;
	overflow: visible;
	transition:
		transform var(--st-ga-duration) var(--st-ga-ease),
		opacity var(--st-ga-duration) var(--st-ga-ease);
}

/* arrow head only (mobile) */
.st-gallery-arrow__icon--compact {
	display: none;
}

.st-gallery-arrow--next .st-gallery-arrow__icon {
	transform: scaleX(-1);
}

.st-gallery-arrow__icon path {
	fill: currentColor;
	transition: fill var(--st-ga-duration) var(--st-ga-ease);
}

/* hover: the square sinks slightly into the page */
@media (hover: hover) {
	.st-gallery-arrow:not(:disabled):hover {
		color: #000;
		box-shadow: var(--st-ga-shadow-pressed);
		transform: translateY(-50%) scale(.97);
	}

	.st-gallery-arrow:not(:disabled):hover .st-gallery-arrow__fill,
	.st-gallery-arrow:not(:disabled):hover::after {
		transform: scaleX(1);
	}

	.st-gallery-arrow:not(:disabled):hover .st-gallery-arrow__head-bottom {
		fill: var(--st-ga-gold);
	}

	.st-gallery-arrow--prev:not(:disabled):hover .st-gallery-arrow__icon {
		transform: translateX(calc(var(--st-ga-shift) * -1));
	}

	.st-gallery-arrow--next:not(:disabled):hover .st-gallery-arrow__icon {
		transform: translateX(var(--st-ga-shift)) scaleX(-1);
	}
}

.st-gallery-arrow:not(:disabled):active {
	box-shadow: var(--st-ga-shadow-active);
	transform: translateY(-50%) scale(.94);
	transition-duration: .15s;
}

.st-gallery-arrow:focus {
	outline: none;
}

.st-gallery-arrow:focus-visible {
	outline: 2px solid var(--st-ga-gold);
	outline-offset: -6px;
}

/* first / last position: the glass square stays, the arrow fades */
.st-gallery-arrow:disabled {
	cursor: default;
}

.st-gallery-arrow:disabled .st-gallery-arrow__icon {
	opacity: .3;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.st-gallery-arrow {
		background-color: rgba(0, 0, 0, .72);
	}
}

@keyframes st-ga-enter {
	from {
		opacity: 0;
		transform: translate(var(--st-ga-from, 0), -50%);
	}
}

@media (max-width: 781px) {
	.wp-block-neweb-post-gallery.has-st-gallery-arrows {
		--st-ga-width: 36px;
		--st-ga-height: 64px;
		--st-ga-icon: 11px;
		--st-ga-shadow: 0 20px 40px 0 rgba(0, 0, 0, .85), 0 8px 16px 0 rgba(0, 0, 0, .6), 0 0 28px 4px rgba(0, 0, 0, .45);
	}

	.st-gallery-arrow__icon--full {
		display: none;
	}

	.st-gallery-arrow__icon--compact {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.st-gallery-arrow,
	.st-gallery-arrow::after,
	.st-gallery-arrow__fill,
	.st-gallery-arrow__icon,
	.st-gallery-arrow__icon path {
		animation: none;
		transition: none;
	}
}