/* v2 Carousel Images — ported from ems-wp src/sass/blocks/_v2-carousel-images.scss
   (already plain CSS; classes match this block's template.php).

   The strip is an in-flow band whose height comes from the block's Carousel
   Height field (printed as a per-instance rule by template.php).

   It used to be `position: absolute; bottom: 0`, which meant it reserved no
   space of its own and relied on the author hand-wrapping the block in a Group
   carrying `position:relative` + a matching height. Exactly one page ever did
   that (about-us); everywhere else the strip escaped its section and painted
   over whatever happened to be above it — and in the editor, where no such
   wrapper is applied, it overlapped the preceding blocks. */

.carousel-images-container {
  position: relative;
  width: 100%;
}

.carousel-images-scrolling-wrapper {
  display: flex;
  width: max-content;
  height: 100%;
  gap: 1.75rem;
}

/* Images fill the strip height. This rule used to be nested inside
   `.hover-carousel`, so it only applied on pages whose author had added that
   class to a wrapper Group — which is why the Carousel Height field looked
   inert everywhere else: the container had a height, but nothing inside it
   responded to that height. */
.carousel-images-scrolling-wrapper img {
  height: 100%;
  width: auto;
  border-radius: var(--radius-default);
}

/* Opt-in hover treatment: add `hover-carousel` to a wrapper Group. Purely
   cosmetic now — it no longer carries any layout the block depends on. */
.hover-carousel .carousel-images-scrolling-wrapper img {
  opacity: 0.55;
  transition: opacity 300ms ease, transform 300ms ease;
}

.hover-carousel .carousel-images-scrolling-wrapper img:hover {
  opacity: 1;
  transform: scale(1.5);
  z-index: 1;
}

/* Pause the marquee while the visitor is hovering the strip. Overrides the
   animation shorthand set inline in template.php (higher-specificity selector). */
.carousel-images-container:hover .carousel-images-scrolling-wrapper {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-images-scrolling-wrapper {
    animation: none !important;
  }
}

@media (min-width: 1090px) {
  .wp-block-cover-full .wp-block-cover__inner-container {
    width: 100% !important;
  }
}