/* Photo carousel (behaviour in /js/carousel.js) */
.carousel {
  position: relative;
  margin: 1em 0 2em;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.carousel ul {
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 480px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
  cursor: grab;
  user-select: none;
}

.carousel ul::-webkit-scrollbar { display: none; }
.carousel ul.grabbing { cursor: grabbing; scroll-behavior: auto; }

.carousel ul li {
  flex: 0 0 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}

.carousel ul li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* Prev / next arrows */
.carousel .prev,
.carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 0.15em;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}

.carousel .prev { left: 0.75rem; }
.carousel .next { right: 0.75rem; }

.carousel .prev:hover,
.carousel .next:hover { background: rgba(0, 0, 0, 0.8); }

.carousel .prev:focus-visible,
.carousel .next:focus-visible,
.carousel ul:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: -3px;
}

/* "3 / 28" counter. The dot bullets are hidden, since there are too many for dots. */
.carousel .counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 9;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  pointer-events: none;
}

.carousel ol { display: none; }

@media (max-width: 600px) {
  .carousel { border-radius: 6px; }
  .carousel .prev,
  .carousel .next {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.5rem;
  }
  .carousel .prev { left: 0.4rem; }
  .carousel .next { right: 0.4rem; }
}