/*
 * Slideshow
 *
 * Based styles needed for a functional Slideshow.
 */

slideshow-component {
  display: block;
  position: relative;
}

.slideshow__track {
  position: relative;
  overflow: hidden;
}

.slideshow__slide {
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}

.slideshow__slide[aria-hidden='false'] {
  opacity: 1;
  z-index: 2;
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideshow__button[aria-current='true'] {
  background-color: teal;
  color: white;
}

/**
 * Announcements slideshow treatment
 */
.slideshow--announcements {
  background-color: silver;
  padding: 0.5rem;
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.slideshow--announcements .slideshow__track {
  display: grid;
  grid: [stack] auto / [stack] auto;
  text-align: center;
  max-width: 38rem;
  margin: 0 auto;
  grid-row: 1;
  grid-column: 2;
}

.slideshow--announcements .slideshow__slide {
  grid-area: stack;
  margin: auto;
}

.slideshow--announcements .slideshow__button--prev {
  grid-row: 1;
  grid-column: 1;
}

.slideshow--announcements .slideshow__button--next {
  grid-row: 1;
  grid-column: 3;
}

/**
 * Hero slideshow treatment
 */
.slideshow--hero .slideshow__track {
  width: 100%;
  height: 100dvh;
  max-height: 800px;
}

.slideshow--hero .slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slideshow__content {
  background-color: rgba(255, 255, 255, 0.75);
  padding: clamp(0.5rem, 1rem, 1rem);
  position: absolute;
  bottom: 60px;
  left: 20px;
}

/**
 * Optional: Scale transition (Ken Burns effect)
 * The slide is visible on page load, but we still want image transition.
 */
.slideshow--scale img {
  transform: scale(1);
  transition: transform 20s cubic-bezier(0.25, 1, 0.5, 1);
}
.slideshow--scale .slideshow__slide--transition img {
  transform: scale(1.1);
}