/**
 * Screenshot gallery (#screenshots) and homepage carousel (.screenshot-carousel).
 * Loaded only when page.lightbox or page.carousel (see _includes/header.html).
 */

/* Homepage / gallery screenshot grid */
#screenshots .row {
  display: flex;
  flex-wrap: wrap;
}

#screenshots .col-md-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 0.9375rem;
}

#screenshots figure {
  width: 100%;
}

#screenshots figure a,
#screenshots figure img.screenshot {
  display: block;
  width: 100%;
}

#screenshots figure img {
  width: 100%;
  display: block;
  object-fit: contain;
}

#screenshots figure figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
}

#screenshots figure figcaption strong {
  font-weight: 600;
  display: block;
}

#screenshots ul li {
  float: left;
  width: 18.5rem;
  padding: 0.3125rem 0.625rem;
  background: url("../img/thumbnail-backdrop.png") 0 0 no-repeat;
}

#screenshots ul li a {
  float: left;
  padding: 0.5625rem;
  border: 1px solid #fff;
  background: #fff;
}

#screenshots ul li a:hover {
  border-color: #dcdad4;
}

#screenshots ul li img {
  float: left;
  width: 17.25rem;
  height: 11.25rem;
}

@media (max-width: 61.9375rem) {
  #screenshots .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 47.9375rem) {
  #screenshots .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Homepage screenshot carousel (stacked slides + shadows) */
.screenshot-carousel {
  width: 100%;
  max-width: 100%;
  min-height: 28.125rem;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  margin: 0 auto;
}

.carousel-container {
  width: 100%;
  min-height: 28.125rem;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
}

.carousel-track {
  position: relative;
  width: 100%;
  min-height: 28.125rem;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  max-width: 100%;
  left: 50%;
  top: 50%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, z-index 0s;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  box-sizing: border-box;
}

.carousel-slide.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 5;
  pointer-events: auto;
}

.carousel-slide.prev {
  opacity: 0.2;
  transform: translate(calc(-50% - 3.125rem), -50%) scale(0.85);
  z-index: 2;
  filter: blur(0.125rem);
}

.carousel-slide.next {
  opacity: 0.7;
  transform: translate(calc(-50% + 3.75rem), -50%) scale(0.95);
  z-index: 3;
}

.carousel-slide.next2 {
  opacity: 0.6;
  transform: translate(calc(-50% + 6.25rem), -50%) scale(0.9);
  z-index: 2;
}

.carousel-slide figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.carousel-slide figure a {
  display: block;
  text-align: center;
}

.carousel-slide img {
  width: auto;
  max-height: 20rem;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
  border-radius: 0.25rem;
  object-fit: contain;
}

.carousel-slide.active img {
  box-shadow: 0 0.9375rem 2.5rem rgba(0, 0, 0, 0.4);
}

.carousel-slide.prev img {
  box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.15);
}

.carousel-slide.next img {
  box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
}

.carousel-slide.next2 img {
  box-shadow: 0 0.3125rem 1.125rem rgba(0, 0, 0, 0.25);
}

.carousel-slide figcaption {
  padding: 1.25rem 1.25rem 1.25rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.625rem;
}

.carousel-slide.active figcaption {
  opacity: 1;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 0.125rem solid #fff;
  border-radius: 50%;
  width: 3.125rem;
  height: 3.125rem;
  font-size: 2rem;
  line-height: 1;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.carousel-btn:focus-visible {
  outline: 0.1875rem solid #fff;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.1875rem rgba(0, 0, 0, 0.6);
}

.carousel-prev {
  left: 0.625rem;
}

.carousel-next {
  right: 0.625rem;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  position: relative;
  z-index: 10;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.carousel-indicator {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 0.125rem solid #878380;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-indicator:hover {
  background: rgba(135, 131, 128, 0.5);
}

.carousel-indicator.active {
  background: #878380;
  border-color: #878380;
}

.carousel-indicator:focus-visible {
  outline: 0.125rem solid #878380;
  outline-offset: 0.125rem;
}

@media (max-width: 48rem) {
  .screenshot-carousel,
  .carousel-container {
    min-height: 28.125rem;
    width: 100%;
    max-width: 100%;
  }

  .carousel-slide img {
    width: auto;
    max-height: 20rem;
    height: auto;
  }

  .carousel-slide.prev {
    transform: translate(calc(-50% - 1.875rem), -50%) scale(0.8);
  }

  .carousel-slide.next {
    transform: translate(calc(-50% + 3.75rem), -50%) scale(0.88);
  }

  .carousel-slide.next2 {
    transform: translate(calc(-50% + 7.5rem), -50%) scale(0.85);
  }

  .carousel-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }

  .carousel-prev {
    left: 0.3125rem;
  }

  .carousel-next {
    right: 0.3125rem;
  }
}

.screenshot {
  padding: 0.375rem;
  box-sizing: border-box;
  border-radius: 0.375rem;
  border: 1px solid lightgrey;
  background: #fff;
  display: block;
}

#screenshots .screenshot,
.carousel-slide .screenshot {
  object-fit: contain;
}

#screenshots .screenshot {
  width: 100%;
}

.carousel-slide .screenshot {
  width: auto;
  max-height: 20rem;
  height: auto;
}

.screenshot:hover {
  border-color: #6a635f;
}