/* Finish the theme's Owl slideshow on every page of the blog index. */
body.home.blog .carousel-wrap.slideshow {
  position: relative;
  padding: 8px 0 29px;
  background: #fffdfb;
  /* Keep the spacing without a second rule immediately beneath the menu. */
  border-top: 1px solid transparent;
  border-bottom: 1px solid rgba(149, 109, 80, .45);
}

body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-stage-outer {
  position: relative;
  overflow: hidden;
  background: #fffdfb;
}

body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item figure {
  position: relative !important;
  overflow: hidden;
  margin: 0 3px;
  background: #fffdfb;
}

/* The theme's dim layer was covering the six-pixel gap as well as the photo.
   Match its edges to the figure so the existing ivory stage shows between slides. */
body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item .slideshow-desc {
  left: 3px;
  right: 3px;
  width: auto;
}

/* The inner line floats above the picture without taking space or blocking links. */
body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item figure::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 4;
  border: 1px solid rgba(225, 199, 169, .82);
  box-shadow: inset 0 0 0 3px rgba(255, 253, 251, .10);
  pointer-events: none;
}

body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item.active figure img {
  animation: mgEditorialSlideDrift 6.5s ease-out both;
}

/* One slow light sweep passes over the row, leaving the post links clickable. */
body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-stage-outer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 37%,
    rgba(255, 253, 251, .055) 45%,
    rgba(255, 253, 251, .23) 50%,
    rgba(255, 253, 251, .055) 55%,
    transparent 63%
  );
  transform: translateX(-120%);
  animation: mgEditorialSlideLight 18s ease-in-out infinite;
}

body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-dots {
  width: 100%;
  margin: 7px 0 0;
  text-align: center;
}
body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-dot span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 7px 4px;
  border-radius: 0;
  background: #cbb59f;
  transition: width .3s ease, background-color .3s ease;
}
body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-dot.active span {
  width: 28px;
  background: #956d50;
}

@keyframes mgEditorialSlideDrift {
  from { transform: scale(1.005); }
  to { transform: scale(1.035); }
}
@keyframes mgEditorialSlideLight {
  0%, 21% { transform: translateX(-120%); }
  53%, 100% { transform: translateX(120%); }
}

@media (max-width: 650px) {
  body.home.blog .carousel-wrap.slideshow {
    padding-top: 6px;
    padding-bottom: 27px;
  }
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item figure {
    margin: 0 2px;
  }
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item .slideshow-desc {
    left: 2px;
    right: 2px;
  }
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item figure::after {
    inset: 5px;
  }
  /* Paged archives repeat the slideshow before the next set of posts. The
     theme's dots otherwise sit across the first post's gold frame. Keep them
     in their own row under the photo on page 2 and subsequent pages. */
  body.home.blog.paged .carousel-wrap.slideshow .owl-carousel-post .owl-dots {
    position: static !important;
    width: 100%;
    height: auto;
    margin: 10px 0 0 !important;
    padding: 0 0 6px !important;
    transform: none !important;
    text-align: center;
  }
  body.home.blog.paged .carousel-wrap.slideshow {
    padding-bottom: 27px;
    margin-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-item.active figure img,
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-stage-outer::after {
    animation: none;
  }
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-stage-outer::after {
    display: none;
  }
  body.home.blog .carousel-wrap.slideshow .owl-carousel-post .owl-dot span {
    transition: none;
  }
}