/* Stremmel exhibition hero: full-bleed crossfade slideshow built from a stack
   of installation photographs in a Bricks canvas. See inc/exhibition-slideshow.php.

   The bleed geometry (width, margin-left) is NOT set here -- canvas-mobile.php
   targets the same element by id, and an id beats any class selector, so the
   script sets those two properties inline where nothing can outrank them. */

.sga-ss { position: relative; overflow: hidden; background: #F1F1F1; }
.sga-ss.is-ready { aspect-ratio: var(--sga-ss-ratio, 3 / 2); max-height: 86vh; row-gap: 0; }

.sga-ss-slides { position: absolute; inset: 0; }

/* Faded-out slides stay in the layout, so without the visibility flip a
   keyboard user could tab into an invisible image and a screen reader would
   read all four. visibility switches at the END of the fade out and at the
   START of the fade in, which leaves the crossfade itself untouched. Same
   approach as the homepage hero. */
.sga-ss-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s; }
.sga-ss-slide.is-active { opacity: 1; visibility: visible;
  transition: opacity .9s ease, visibility 0s linear 0s; }
.sga-ss-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --sg matches the page gutter the rest of the site uses. */
.sga-ss { --sg: clamp(24px, 4vw, 80px); }

.sga-ss-arrows { position: absolute; left: var(--sg); bottom: 28px; display: flex; gap: 6px; z-index: 2; }
.sga-ss-arrow { width: 44px; height: 44px; background: rgba(0,0,0,0.4); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  font-size: 20px; line-height: 1; font-family: inherit; }
.sga-ss-arrow:hover { background: rgba(0,0,0,0.6); }
.sga-ss-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sga-ss-counter { position: absolute; right: var(--sg); bottom: 40px; color: #fff; font-size: 10px;
  line-height: 10px; letter-spacing: 1px; z-index: 2; text-shadow: 0 0 6px rgba(0,0,0,0.5); }

@media (max-width: 767px) {
  .sga-ss-arrows { left: 12px; bottom: 12px; }
  .sga-ss-counter { right: 16px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .sga-ss-slide, .sga-ss-slide.is-active { transition: none; }
}