/*
  Image boxes and carousels from the {% gallery %} tag (_plugins/gallery.rb).
  The tag sets --gallery-width and --gallery-image-width on each box.
*/

.gallery {
  width: var(--gallery-width, 100%);
  max-width: 100%;
  margin: 1.5em 0;
}

.gallery--align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Below the theme's $small breakpoint boxes stop floating and go full width,
   as the theme does for .align-left / .align-right images. */
@media (max-width: 599px) {
  .gallery {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .gallery--align-left {
    float: left;
    margin: 0.35em 1.5em 0.6em 0;
  }

  .gallery--align-right {
    float: right;
    margin: 0.35em 0 0.6em 1.5em;
  }

  /* With no caption the box ends at the bottom edge of the image, so the
     bottom margin reads as padding under the picture and costs the wrapping
     text another indented line. Drop it and the text carries straight on
     underneath the image. */
  .gallery--align-left:not(:has(.gallery__caption)),
  .gallery--align-right:not(:has(.gallery__caption)) {
    margin-bottom: 0;
  }
}

/* Slides sit side by side in a horizontally scrolling strip that snaps to
   one slide at a time, so touch swiping works natively. */
.gallery__track {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.gallery__track:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Once gallery.js has added the buttons, the scrollbar isn't needed. */
.gallery--js .gallery__track {
  scrollbar-width: none;
}

.gallery--js .gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45em;
  align-items: start;
}

@media (min-width: 600px) {
  .gallery--caption-right .gallery__slide--captioned {
    grid-template-columns: minmax(0, var(--gallery-image-width, 50%)) minmax(0, 1fr);
    gap: 1.5em;
  }
}

.gallery__image a,
.gallery__image picture,
.gallery__image img,
.gallery__image video {
  display: block;
}

.gallery__image img,
.gallery__image video {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 4px;
}

.gallery__image iframe {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 4px;
}

/* Captions are toned down from the page text so they read as secondary.
   Mixing with currentColor keeps this working on light and dark skins. */
.gallery__caption {
  font-size: 0.8em;
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 75%, transparent);
}

.gallery__caption > :first-child {
  margin-top: 0;
}

.gallery__caption > :last-child {
  margin-bottom: 0;
}

.gallery__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.25em;
}

.gallery__nav[hidden] {
  display: none;
}

.gallery__prev,
.gallery__next,
.gallery__dot {
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.gallery__prev,
.gallery__next {
  padding: 0.1em 0.6em;
  font-size: 0.9em;
  opacity: 0.7;
}

.gallery__prev:hover,
.gallery__next:hover {
  opacity: 1;
}

.gallery__dots {
  display: flex;
  gap: 0.2em;
}

/* The visible dot is drawn inside a larger button so it's easy to tap. */
.gallery__dot {
  position: relative;
  width: 1.4em;
  height: 1.4em;
  padding: 0;
}

.gallery__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.2s;
}

.gallery__dot:hover::before {
  opacity: 0.6;
}

.gallery__dot[aria-current="true"]::before {
  opacity: 1;
}