/* WeShyft ESRS Reporting: layout behaviour Elementor cannot express through controls.
   Classes are assigned at container level only. */

@media (min-width: 941px) {
  .ws-sticky-media {
    position: sticky;
    top: 14vh;
    align-self: start;
  }
  .ws-sticky-head {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}

/* ---------------------------------------------------------------------------
   Scroll-driven screenshot swap in the platform section.

   Front end: all shots share one grid cell and cross-fade.
   Editor:    the stack is unfolded so every shot stays clickable. Elementor
              puts .elementor-editor-active on the preview body, so the two
              modes never fight each other.
   --------------------------------------------------------------------------- */

.ws-media-stack {
  width: 100%;
}

body:not(.elementor-editor-active) .ws-media-stack {
  display: grid;
}
body:not(.elementor-editor-active) .ws-media-stack > .e-con {
  grid-area: 1 / 1;
}
body:not(.elementor-editor-active) .ws-media-stack:not(.is-ready) > .e-con:not(:first-child) {
  display: none;
}
body:not(.elementor-editor-active) .ws-media-stack.is-ready > .e-con {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
body:not(.elementor-editor-active) .ws-media-stack.is-ready > .e-con.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body:not(.elementor-editor-active) .ws-blocks.is-ready > .e-con {
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
body:not(.elementor-editor-active) .ws-blocks.is-ready > .e-con.is-active {
  opacity: 1;
}

/* Editor: unfolded and fully editable */
body.elementor-editor-active .ws-media-stack {
  display: block;
}
body.elementor-editor-active .ws-media-stack > .e-con {
  opacity: 1;
  transform: none;
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.elementor-editor-active) .ws-media-stack.is-ready > .e-con {
    transition: none;
    transform: none;
  }
  body:not(.elementor-editor-active) .ws-blocks.is-ready > .e-con {
    opacity: 1;
  }
}

/* Timeline connector line behind the numbered nodes */
.ws-timeline {
  position: relative;
}
.ws-timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 31px;
  width: 2px;
  background: linear-gradient(#8EC4D7, #4A6A74);
  opacity: 0.5;
  z-index: 0;
}
.ws-timeline > .e-con { position: relative; z-index: 1; }

@media (max-width: 620px) {
  .ws-timeline::before { left: 21px; }
}

/* Client logo wall: let marks sit on the white ground without a box */
.ws-logo-wall img {
  mix-blend-mode: multiply;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .ws-sticky-media, .ws-sticky-head { position: static; }
}