/* Slide image spacing overrides scoped to the index slider */

/* Small screens: add ~5% right padding for image area */
@media (max-width: 767.98px) {
    .slider-container .slide-image-content {
        padding-right: 5% !important;
    }
}

/* Keep mobile unchanged */
@media (min-width: 768px) {
    .slider-container .slide-image-content {
        /* add breathing room on the right and pull images slightly toward the text */
        padding-right: clamp(20px, 3vw, 48px) !important;
        transform: translateX(-24px) !important;
    }
}

@media (min-width: 1200px) {
    .slider-container .slide-image-content {
        padding-right: clamp(28px, 3.5vw, 64px) !important;
        transform: translateX(-40px) !important;
    }
}

/* Nudge a bit more on wider screens than existing rules */
@media (min-width: 1400px) {
    .slider-container .slide-image-content {
        transform: translateX(-64px) !important;
    }
}

@media (min-width: 1700px) {
    .slider-container .slide-image-content {
        transform: translateX(-88px) !important;
    }
}

/* Encourage images to anchor from the left edge visually */
.slider-container .slide-robot-image {
    object-position: left center !important;
}

/* Ensure the image container is a positioning context */
.slider-container .slide-image-content {
    position: relative !important;
}

/* Place the Germany flag at the bottom-right of the image area */
.slider-container .slide-image-content .de_flag_slider_container {
    position: absolute !important;
    bottom: clamp(10px, 2vh, 24px) !important;
    right: clamp(16px, 3.2vw, 40px) !important; /* a bit more space from the right */
    padding-right: clamp(4px, 0.8vw, 10px) !important; /* slight internal right padding */
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(6px, 0.8vw, 10px) !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
    pointer-events: none !important; /* decorative */
}


/* Bars + text in a row and centered */
.slider-container .de_flag_slider_bars {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(2px, 0.4vw, 6px) !important;
}

.slider-container .de_flag_slider_bar {
    width: clamp(16px, 2vw, 24px) !important;
    height: clamp(4px, 0.6vw, 7px) !important;
    border-radius: 2px !important;
}

.slider-container .de_flag_slider_text {
    color: #ffffff !important;
    font-size: clamp(10px, 1.2vw, 12px) !important;
    letter-spacing: clamp(1px, 0.15vw, 2px) !important;
    line-height: 1 !important;
}

/* Top/bottom fade for Award Winners slide images */
.slider-container .image-fade-tb .fade-edges {
    /* Fade from transparent at very top/bottom to opaque in the middle */
    -webkit-mask-image: -webkit-linear-gradient(top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0.85) 94%,
    rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0.85) 94%,
    rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Slightly stronger fade on very tall screens */
@media (min-height: 1000px) {
    .slider-container .image-fade-tb .fade-edges {
        -webkit-mask-image: -webkit-linear-gradient(top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.9) 7%,
        rgba(0, 0, 0, 1) 14%,
        rgba(0, 0, 0, 1) 86%,
        rgba(0, 0, 0, 0.9) 93%,
        rgba(0, 0, 0, 0) 100%
        );
        mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.9) 7%,
        rgba(0, 0, 0, 1) 14%,
        rgba(0, 0, 0, 1) 86%,
        rgba(0, 0, 0, 0.9) 93%,
        rgba(0, 0, 0, 0) 100%
        );
    }
}

/* Hover: make button text dark blue for clarity */
.slide .button-frame:hover span:not(.icon),
.slide a.button-frame:hover span:not(.icon),
.button-frame:hover span:not(.icon),
.button-frame:hover {
    color: #a5c1dc !important;
}

/* Dynamic contrast for button text: blend when possible */
.button-frame > span:not(.icon),
a.button-frame > span:not(.icon) {
    color: #ffffff !important; /* base to blend from */
    mix-blend-mode: difference; /* auto-contrast with background */
}

/* Keep hover background transparent; let blend handle text color */
.slide .button-frame:hover,
.slide a.button-frame:hover,
a.button-frame:hover {
    background: transparent !important;
}

/* Optional: improve icon visibility slightly on extreme cases */
.button-frame span.icon img {
    mix-blend-mode: luminosity;
}

/* Fallback when mix-blend-mode unsupported: choose a dark, readable color */
@supports not (mix-blend-mode: difference) {
    .button-frame,
    a.button-frame {
        color: #a5c0da !important;
    }
}

/* Subtle transparent pulsing glow behind slider robot images (replaces legacy bg-circle-light image) */
.slider-container .slide-image-content > div, /* inner wrapper */
.slider-container .slide-image-content.image-fade-tb { position: relative; }

.slider-container .slide-image-content > div::before,
.slider-container .slide-image-content.image-fade-tb::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(340px, 52vw, 920px);
  height: clamp(340px, 52vw, 920px);
  transform: translate(-50%, -50%) scale(.9);
  transform-origin: center center;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 255, 153, 0.18) 0%,
    rgba(0, 255, 153, 0.12) 38%,
    rgba(0, 255, 153, 0.05) 65%,
    rgba(0, 255, 153, 0.00) 78%
  );
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
  opacity: .65;
  animation: indexHeroGlow 7.5s ease-in-out infinite;
}

@keyframes indexHeroGlow {
  0%   { transform: translate(-50%, -50%) scale(.88); opacity: .50; }
  50%  { transform: translate(-50%, -50%) scale(1.06); opacity: .65; }
  100% { transform: translate(-50%, -50%) scale(.88); opacity: .50; }
}

/* Ensure image sits above glow */
.slider-container .slide-image-content img.slide-robot-image { position: relative; z-index: 1; }

/* Mobile: shrink glow so it doesn’t spill too far */
@media (max-width: 900px){
  .slider-container .slide-image-content > div::before,
  .slider-container .slide-image-content.image-fade-tb::before {
    width: clamp(240px, 88vw, 640px);
    height: clamp(240px, 88vw, 640px);
    filter: blur(38px);
    opacity: .50;
  }
}