/* DSD Services Slider - the small base every block starts from.
   Everything a person can change is written per block by the plugin, so this file
   holds only structure and the few things that must exist for the layout to work. */

.dsd-ss, .dsd-ss * { box-sizing: border-box }

.dsd-ss {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font, "Poppins", sans-serif);
  --cols: 3;
  --gap: 16px;
  --zoom: 1.045;
  --inset-t: 36px;
  --inset-r: 42px;
  --inset-b: 38px;
  --inset-l: 42px;
  --mark-size: 26px;
  --mark-gap: 10px;
  --mark-move: 8px;
  --speed: 450ms;
  text-align: left;
}

/* the theme's alignment and clearfix never reach inside the block */
.dsd-ss__header, .dsd-ss__stage, .dsd-ss__viewport, .dsd-ss__track, .dsd-ss__card, .dsd-ss__media,
.dsd-ss__content, .dsd-ss__under, .dsd-ss__title, .dsd-ss__desc, .dsd-ss__cardtitle, .dsd-ss__cardtext { text-align: inherit }
.dsd-ss__head::before, .dsd-ss__head::after, .dsd-ss__track::before, .dsd-ss__track::after,
.dsd-ss__btn::before, .dsd-ss__btn::after { content: none; display: none }

/* header ---------------------------------------------------------------- */

.dsd-ss__header { position: relative }

.dsd-ss__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.dsd-ss__title { margin: 0 }

.dsd-ss__line {
  display: block;
  flex: 0 0 auto;
  width: 128px;
  height: 1px;
  background: #dedede;
}

.dsd-ss__desc {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* cards ----------------------------------------------------------------- */

.dsd-ss__stage { position: relative }
.dsd-ss__viewport { overflow: hidden }

.dsd-ss__track {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}

.dsd-ss.is-slider .dsd-ss__track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
  touch-action: pan-y;
}

.dsd-ss.is-slider .dsd-ss__card {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

.dsd-ss__card {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  overflow: hidden;
}

.dsd-ss__media {
  position: relative;
  height: 610px;
  overflow: hidden;
  border-width: 0;
  border-style: solid;
}

.dsd-ss__media img,
.dsd-ss__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center center);
  transition: transform var(--speed) ease;
}

.dsd-ss.effect-zoom-in .dsd-ss__card:hover .dsd-ss__media img,
.dsd-ss.effect-zoom-in .dsd-ss__card:hover .dsd-ss__media video { transform: scale(var(--zoom)) }
.dsd-ss.effect-zoom-out .dsd-ss__media img,
.dsd-ss.effect-zoom-out .dsd-ss__media video { transform: scale(var(--zoom)) }
.dsd-ss.effect-zoom-out .dsd-ss__card:hover .dsd-ss__media img,
.dsd-ss.effect-zoom-out .dsd-ss__card:hover .dsd-ss__media video { transform: scale(1) }

.dsd-ss__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 38%, #000 100%);
  opacity: .46;
  transition: opacity var(--speed) ease, background var(--speed) ease;
}

.dsd-ss__content {
  position: absolute;
  left: var(--inset-l);
  right: var(--inset-r);
  z-index: 2;
  color: #fff;
}
.dsd-ss__content--top { top: var(--inset-t) }
.dsd-ss__content--bottom { bottom: var(--inset-b) }
.dsd-ss__under { padding: 16px 2px }

.dsd-ss__cardtitle { margin: 0 }
.dsd-ss__cardtext { margin: 0 }

/* button ---------------------------------------------------------------- */

.dsd-ss__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mark-gap);
  color: inherit;
  text-decoration: none;
  border-width: 0;
  border-style: solid;
  transition: background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
}

.dsd-ss__mark { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; overflow: visible }
.dsd-ss__mark svg { height: var(--mark-size); width: auto; overflow: visible; stroke-width: 1.2 }
.dsd-ss__mark.is-line svg { width: var(--mark-size); height: auto }

.dsd-ss__mark.is-line .shaft {
  transform-origin: right center;
  transform: scaleX(.62);
  transition: transform var(--speed) cubic-bezier(.22,.61,.36,1);
}
.dsd-ss__mark.is-line .head { transition: transform var(--speed) cubic-bezier(.22,.61,.36,1) }
.dsd-ss__btn:hover .is-line .shaft, .dsd-ss__btn:focus .is-line .shaft { transform: scaleX(1) }
.dsd-ss__btn:hover .is-line .head, .dsd-ss__btn:focus .is-line .head { transform: translateX(calc(var(--mark-move) * .35)) }

.dsd-ss__mark.is-chevron svg,
.dsd-ss__mark.is-circle svg,
.dsd-ss__mark.is-diagonal svg { transition: transform var(--speed) cubic-bezier(.22,.61,.36,1) }
.dsd-ss__btn:hover .is-chevron svg, .dsd-ss__btn:focus .is-chevron svg { transform: translateX(var(--mark-move)) }
.dsd-ss__mark.is-circle .ring { opacity: .45; transition: opacity var(--speed) ease }
.dsd-ss__btn:hover .is-circle .ring, .dsd-ss__btn:focus .is-circle .ring { opacity: 1 }
.dsd-ss__btn:hover .is-circle svg, .dsd-ss__btn:focus .is-circle svg { transform: translateX(calc(var(--mark-move) * .5)) }
.dsd-ss__btn:hover .is-diagonal svg, .dsd-ss__btn:focus .is-diagonal svg { transform: translate(calc(var(--mark-move) * .6), calc(var(--mark-move) * -.6)) }

/* arrows ---------------------------------------------------------------- */

.dsd-ss__arrow {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-radius: 24px;
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, opacity .25s ease, color .25s ease, border-color .25s ease;
}
.dsd-ss__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.dsd-ss__arrow--prev { left: 12px }
.dsd-ss__arrow--next { right: 12px }
.dsd-ss__arrow[disabled] { opacity: .35; cursor: default }
.dsd-ss:not(.is-slider) .dsd-ss__arrow { display: none }

@media (prefers-reduced-motion: reduce) {
  .dsd-ss.is-slider .dsd-ss__track,
  .dsd-ss__media img,
  .dsd-ss__media video,
  .dsd-ss__overlay,
  .dsd-ss__mark svg,
  .dsd-ss__mark .shaft,
  .dsd-ss__mark .head { transition: none }
}