/*
 * Social Slider: the Instagram strip from crownbridge.com, without the
 * section title, button or padding. Drop it into any section of your theme.
 */

.cbt-ss {
  --cbt-ss-fade: 18, 18, 18;

  position: relative;
  overflow: hidden;
}

.cbt-ss *,
.cbt-ss *::before,
.cbt-ss *::after {
  box-sizing: border-box;
}

.cbt-ss__slider {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.cbt-ss__track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.cbt-ss__item {
  position: relative;
  flex: 0 0 calc(100% / var(--cbt-ss-visible-m, 3));
  min-width: 0;
}

.cbt-ss__item > a,
.cbt-ss__item > .cbt-ss__link {
  position: relative;
  display: block;
  text-decoration: none;
  box-shadow: none;
}

.cbt-ss__img {
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  background: #000;
}

.cbt-ss__img img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  transition: opacity .4s ease;
}

.cbt-ss__hover {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: min(8vw, 40px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.cbt-ss__hover svg {
  display: block;
}

.cbt-ss__item > a:hover .cbt-ss__img img,
.cbt-ss__item > a:focus-visible .cbt-ss__img img {
  opacity: .4;
}

.cbt-ss__item > a:hover .cbt-ss__hover,
.cbt-ss__item > a:focus-visible .cbt-ss__hover {
  opacity: 1;
}

/* Shown instead of the moving strip when the visitor prefers reduced motion. */
.cbt-ss__slider.cbt-ss__slider--static {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Slides up into place when it scrolls into view (only once the script runs). */
.cbt-ss.cbt-ss--js {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity .8s ease, transform .8s ease;
}

.cbt-ss.cbt-ss--js.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cbt-ss.cbt-ss--js {
    transform: none;
  }
}

/* Tablet and up */

@media only screen and (min-width: 768px) {
  /* Soft fade on the left and right edges, in the colour of the background behind. */
  .cbt-ss::before,
  .cbt-ss::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 7.75vw;
    pointer-events: none;
  }

  .cbt-ss::before {
    left: 0;
    background: linear-gradient(90deg, rgba(var(--cbt-ss-fade), 1) 0%, rgba(var(--cbt-ss-fade), 0) 100%);
  }

  .cbt-ss::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(var(--cbt-ss-fade), 1) 0%, rgba(var(--cbt-ss-fade), 0) 100%);
  }

  .cbt-ss.cbt-ss--no-fade::before,
  .cbt-ss.cbt-ss--no-fade::after {
    display: none;
  }

  /* Wider than its box so the outer posts are cut off at the edges. */
  .cbt-ss__slider {
    margin: 0 max(-2.813vw, -45px);
    padding: 0 0 min(2.5vw, 40px);
  }

  .cbt-ss__item {
    flex-basis: calc(100% / var(--cbt-ss-visible-d, 6));
    padding: 0 1px;
  }

  /* Every second post sits a little lower. */
  .cbt-ss__item:nth-child(even) {
    top: min(2.5vw, 40px);
  }

  .cbt-ss__hover {
    font-size: min(3vw, 40px);
  }
}

/* Only logged-in admins see this, when there is nothing to show yet. */
.cbt-ss-notice {
  padding: 12px 16px;
  border-left: 4px solid #d63638;
  background: #fff;
  color: #1d2327;
  font-size: 14px;
}