/*
 * LogiCh Slider: slides lie on top of each other and cross-fade, the active image slowly zooms out. Height grows
 * with the screen width (or follows the chosen ratio); the image is cropped (cover).
 * A template can tune it with:
 *   --lc-slider-bg          background before the image loads   --lc-slider-height   height in "auto" ratio mode
 *   --lc-slider-container   max width of caption and controls   --lc-slider-radius   corners (not in full width)
 */
.lc-slider {
  position: relative;
  height: var(--lc-slider-height, clamp(240px, 34vw, 520px));
  overflow: hidden;
  border-radius: var(--lc-slider-radius, 0);
  background: var(--lc-slider-bg, #3a4148);
  color: #fff;
  touch-action: pan-y;
}
.lc-slider--ratio { height: auto; aspect-ratio: var(--lc-slider-ratio); }
.lc-slider--full {
  width: var(--lc-slider-vw, 100vw);
  max-width: none;
  margin-inline: calc(50% - var(--lc-slider-vw, 100vw) / 2);
  border-radius: 0;
}
.lc-slider__stage { position: absolute; inset: 0; }

.lc-slider__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.lc-slider__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1s ease; }

.lc-slider__img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0s linear 1s; /* back only once the slide has faded out */
}
.lc-slider__slide.is-active .lc-slider__img { transform: scale(1); transition: transform calc(var(--lc-slider-duration, 5s) + 2s) ease-out; }

/* darker bottom edge, so the caption and buttons are readable on any image */
.lc-slider::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.lc-slider__inner {
  display: block; box-sizing: border-box;
  max-width: var(--lc-slider-container, 1320px); margin-inline: auto; padding-inline: 20px;
}

.lc-slider__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding-bottom: 26px;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.lc-slider.is-ready .lc-slider__caption .lc-slider__inner { padding-right: 220px; }

.lc-slider__controls {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  pointer-events: none;
}
.lc-slider__controls > * { pointer-events: auto; }
.lc-slider__counter {
  margin-right: 6px;
  font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.lc-slider__button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: rgba(0, 0, 0, .42); color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.lc-slider__button:hover { background: rgba(0, 0, 0, .68); border-color: #fff; }
.lc-slider__button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lc-slider__icon-play, .lc-slider__pause.is-play .lc-slider__icon-pause { display: none; }
.lc-slider__pause.is-play .lc-slider__icon-play { display: block; }

/* bar until the next image; stops while changing is paused */
.lc-slider__progress {
  position: absolute; left: 0; bottom: 0; z-index: 4;
  width: 100%; height: 3px;
  background: rgba(255, 255, 255, .85);
  transform: scaleX(0); transform-origin: left center;
  animation: lc-slider-progress var(--lc-slider-duration, 5s) linear forwards;
}
.lc-slider.is-paused .lc-slider__progress { animation-play-state: paused; }
@keyframes lc-slider-progress { to { transform: scaleX(1); } }

/* without the script: first image only, no controls */
.lc-slider:not(.is-ready) .lc-slider__controls, .lc-slider:not(.is-ready) .lc-slider__progress { display: none; }

@media (max-width: 767px) {
  .lc-slider__caption { padding-bottom: 70px; }
  .lc-slider.is-ready .lc-slider__caption .lc-slider__inner { padding-right: 20px; }
  .lc-slider__button { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-slider__slide, .lc-slider__slide.is-active, .lc-slider__img, .lc-slider__slide.is-active .lc-slider__img { transition: none; transform: none; }
}

@media print { .lc-slider { display: none; } }