/*
 * Cross-fading photos (template-parts/components/fade-slider.php). The
 * user asked for it on 2026-10-27 for the Miejsce rooms: one room at a
 * time, a gentle fade, back and forward. The new photo fades in on top;
 * the old one stays under it until the fade ends, so the picture never
 * dims halfway. Round arrows over the photo, as in the carousel, and with
 * autoplay a smaller pause button in the lower right corner: with a mouse
 * on a computer they appear on hover or keyboard focus, on touch screens
 * they are always there.
 */

.hf-fade
{
	--hf-fade-duration: 0.9s;
	--hf-fade-arrow: 3rem;
	/* 1 shows the arrows, 0 hides them (still focusable). */
	--hf-fade-arrows: 1;

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hf-fade__slide
{
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	/* Leaves only once the new photo covers it. */
	transition: opacity 0s linear var(--hf-fade-duration), visibility 0s linear var(--hf-fade-duration);
}

.hf-fade__slide.is-active
{
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--hf-fade-duration) ease-in-out;
}

.hf-fade__image
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hf-fade__arrow
{
	position: absolute;
	z-index: 2;
	top: 50%;
	display: grid;
	width: var(--hf-fade-arrow);
	height: var(--hf-fade-arrow);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hf-color-surface);
	box-shadow: 0 4px 18px color-mix(in srgb, var(--hf-color-heading) 16%, transparent);
	color: var(--hf-color-heading);
	cursor: pointer;
	opacity: var(--hf-fade-arrows);
	place-items: center;
	transform: translateY(-50%);
	transition: opacity var(--hf-transition), background-color var(--hf-transition);
}

.hf-fade__arrow[hidden]
{
	display: none;
}

.hf-fade__arrow:hover
{
	background: var(--hf-color-bg);
}

.hf-fade__arrow--prev
{
	left: 0.75rem;
}

.hf-fade__arrow--next
{
	right: 0.75rem;
}

.hf-fade__arrow-icon
{
	width: 1.5rem;
	height: 1.5rem;
}

/* Pause (autoplay only): pressed = stopped, the icon turns into play. */
.hf-fade__pause
{
	position: absolute;
	z-index: 2;
	right: 0.75rem;
	bottom: 0.75rem;
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hf-color-surface);
	box-shadow: 0 4px 18px color-mix(in srgb, var(--hf-color-heading) 16%, transparent);
	color: var(--hf-color-heading);
	cursor: pointer;
	opacity: var(--hf-fade-arrows);
	place-items: center;
	transition: opacity var(--hf-transition), background-color var(--hf-transition);
}

.hf-fade__pause[hidden],
.hf-fade__pause-icon[hidden]
{
	display: none;
}

.hf-fade__pause:hover
{
	background: var(--hf-color-bg);
}

.hf-fade__pause-icon
{
	width: 1.25rem;
	height: 1.25rem;
}

/* Mouse on a computer: arrows on hover or with the keyboard inside. */
@media (min-width: 72em) and (hover: hover) and (pointer: fine)
{
	.hf-fade
	{
		--hf-fade-arrows: 0;
	}

	.hf-fade:hover,
	.hf-fade:focus-within
	{
		--hf-fade-arrows: 1;
	}
}