/**
 * FluffyTech SlideShow — frontend styles
 * Version: 3.0.0
 *
 * Changelog
 * 19.08.26 - Added fullscreen media layout, link titles and configurable slide crossfades; renamed styles for FluffyTech SlideShow.
 */

.fluffy-slideshow-hero {
	position: relative;
	width: 100%;
	height: 100%; /* Height is provided by the parent or site stylesheet. */
	overflow: hidden;
	background: #111;
}

.fluffy-slideshow-hero .fluffy-slideshow-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* FluffyTech: dissolve duration and easing follow the slideshow settings. */
	transition: opacity var(--fluffy-slideshow-fade, 900ms) var(--fluffy-slideshow-easing,cubic-bezier(0.42,0,0.58,1));
}

.fluffy-slideshow-hero .fluffy-slideshow-slide.fluffy-slideshow-visible {
	opacity: 1;
}

.fluffy-slideshow-hero .fluffy-slideshow-slide img,
.fluffy-slideshow-hero .fluffy-slideshow-slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fluffy-slideshow-hero a.fluffy-slideshow-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.fluffy-slideshow-hero .fluffy-slideshow-title {
	position: absolute;
	left: auto;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 2;
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.6);
	padding: 0.5rem 0.875rem;
	background: transparent;
}

.fluffy-slideshow-noscript-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* FluffyTech SlideShow / contained layout and optional per-slide HTML. */

.fluffy-slideshow-hero .fluffy-slideshow-slide > img, .fluffy-slideshow-hero .fluffy-slideshow-slide > video,
.fluffy-slideshow-hero .fluffy-slideshow-link > img, .fluffy-slideshow-hero .fluffy-slideshow-link > video { object-fit:var(--fluffy-slideshow-fit,cover); }
.fluffy-slideshow-hero .fluffy-slide-caption { position:absolute; z-index:3; inset:5% 5% auto; text-align:left; color:#fff; pointer-events:none; white-space:pre-line; }
.fluffy-slideshow-hero .fluffy-slide-caption a, .fluffy-slideshow-hero .fluffy-slide-caption button { pointer-events:auto; }
.fluffy-slideshow-hero .fluffy-slide-caption img { position:static; width:auto; height:auto; max-width:100%; }
.fluffy-slideshow-hero .fluffy-slideshow-title { left:auto; right:1.5rem; bottom:1.5rem; max-width:90%; text-align:right; padding:.5rem .875rem; text-shadow:0 .0625rem .25rem rgba(0,0,0,.6); }
@media (prefers-reduced-motion:reduce) { .fluffy-slideshow-hero .fluffy-slideshow-slide { transition:none; } }

.fluffy-slideshow-hero.fluffy-slideshow-contained { width:100%; margin-inline:auto; }

/* FluffyTech: captions and link titles share the parent slide's dissolve. */
.fluffy-slideshow-hero .fluffy-slideshow-slide { z-index:1; }
.fluffy-slideshow-hero.fluffy-navigation-enabled { touch-action:pan-y; }
.fluffy-slideshow-hero .fluffy-slideshow-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; display:flex; align-items:center; justify-content:center; width:3.5rem; height:4rem; padding:.5rem; border:0; border-radius:0; background:transparent; color:#fff; cursor:pointer; box-shadow:none; }
.fluffy-slideshow-hero .fluffy-slideshow-arrow-prev { left:1%; }
.fluffy-slideshow-hero .fluffy-slideshow-arrow-next { right:1%; }
.fluffy-slideshow-hero .fluffy-slideshow-arrow svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; }
/* Keep arrows plain through theme hover, focus and active states. */
.fluffy-slideshow-hero button.fluffy-slideshow-arrow,
.fluffy-slideshow-hero button.fluffy-slideshow-arrow:is(:hover, :focus, :focus-visible, :active) { background:transparent; background-image:none; color:#fff; border:0; outline:0; box-shadow:none; text-shadow:none; opacity:1; filter:none; }
.fluffy-slideshow-hero button.fluffy-slideshow-arrow::before,
.fluffy-slideshow-hero button.fluffy-slideshow-arrow::after { content:none; }

/* FluffyTech: carousel duration and easing are configurable per slideshow. */
.fluffy-slideshow-hero.fluffy-carousel .fluffy-slideshow-slide { opacity:1; transition:transform var(--fluffy-slideshow-fade,600ms) var(--fluffy-slideshow-easing,cubic-bezier(0.42,0,0.58,1)); will-change:transform; }
@media (prefers-reduced-motion:reduce) { .fluffy-slideshow-hero.fluffy-carousel .fluffy-slideshow-slide { transition:none; } }

/* FluffyTech: generous transparent navigation strips at both slide edges. */
.fluffy-slideshow-hero button.fluffy-slideshow-arrow { top:0; bottom:0; transform:none; width:10%; min-width:3.5rem; height:100%; padding:.5rem; }
.fluffy-slideshow-hero button.fluffy-slideshow-arrow-prev { left:0; }
.fluffy-slideshow-hero button.fluffy-slideshow-arrow-next { right:0; }
.fluffy-slideshow-hero button.fluffy-slideshow-arrow svg { width:2.5rem; height:3rem; max-width:100%; flex:none; }

/* FluffyTech: transparent overlays and direct access to this slideshow's editor. */
.fluffy-slideshow-hero .fluffy-slideshow-title,
.fluffy-slideshow-hero .fluffy-slide-caption { background:transparent; background-image:none; }
.fluffy-slideshow-hero a.fluffy-slideshow-edit { position:absolute; top:.75rem; right:.75rem; z-index:6; display:inline-block; padding:0; font-size:.75rem; line-height:1.4; color:#fff; background:transparent; border:0; text-decoration:underline; }


/* FluffyTech: fixed-size frames on one film strip. */
.fluffy-slideshow-hero { aspect-ratio:var(--fluffy-slideshow-ratio,auto); }
/* Selected proportions size the viewport itself, independently of parent height. */
.fluffy-slideshow-hero.fluffy-slideshow-proportional { height:auto; aspect-ratio:var(--fluffy-slideshow-ratio,16/9); }
.fluffy-slideshow-hero.fluffy-nearby-enabled,
.fluffy-slideshow-hero.fluffy-multiple-enabled { background:transparent; }
.fluffy-slideshow-hero.fluffy-nearby-enabled { --fluffy-carousel-gap:min(var(--fluffy-nearby-gap,.375rem),25%); --fluffy-main-width:calc((100% - var(--fluffy-carousel-gap)) / (1 + var(--fluffy-nearby-share,.3333333333))); }
.fluffy-slideshow-hero .fluffy-slideshow-stage { position:absolute; inset:0; overflow:hidden; z-index:2; }
/* The single track preserves fixed widths and carries the gap through the viewport. */
.fluffy-slideshow-hero .fluffy-carousel-track { position:absolute; inset:0; transition:transform var(--fluffy-slideshow-fade,600ms) var(--fluffy-slideshow-easing,cubic-bezier(0.42,0,0.58,1)); will-change:transform; }
/* Equal slides belong to the explicit multiple-slide mode. */
.fluffy-slideshow-hero.fluffy-multiple-enabled { --fluffy-carousel-gap:min(var(--fluffy-nearby-gap,.375rem),calc(50% / (var(--fluffy-visible-count,3) - 1))); --fluffy-main-width:calc((100% - (var(--fluffy-visible-count,3) - 1) * var(--fluffy-carousel-gap)) / var(--fluffy-visible-count,3)); }
.fluffy-slideshow-hero .fluffy-carousel-cell { position:absolute; top:0; bottom:0; width:var(--fluffy-main-width); min-width:0; height:100%; overflow:hidden; background:#111; transition:none; }
.fluffy-slideshow-hero .fluffy-carousel-cell > .fluffy-slideshow-slide { transition:none; }
@media (prefers-reduced-motion:reduce) {
    .fluffy-slideshow-hero .fluffy-carousel-track { transition:none; }
}

/* Natural sizing supports shows that explicitly use container / site CSS. */
.fluffy-slideshow-hero .fluffy-slideshow-sizing { position:relative; display:block; width:100%; height:auto; margin:0; padding:0; border:0; visibility:hidden; pointer-events:none; }