/* Horizontal grow accordion — grid column transitions (md+); stacked on small screens */
.horizontal-grow-accordion__track {
  display: grid;
  grid-template-columns: repeat(var(--grow-accordion-count, 4), minmax(0, 1fr));
  gap: 1rem;
}

.horizontal-grow-accordion__item {
  min-height: 16rem;
}

@media (max-width: 767.98px) {
  .horizontal-grow-accordion__track {
    grid-template-columns: minmax(0, 1fr);
    transition: none;
  }
}

@media (min-width: 768px) {
  .horizontal-grow-accordion__track {
    transition:
      grid-template-columns 0.55s cubic-bezier(0.32, 0.72, 0, 1),
      gap 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .horizontal-grow-accordion__track[data-expanded-index]:not([data-expanded-index=""]) {
    gap: 0 !important;
  }

  .horizontal-grow-accordion__item {
    min-height: 20rem;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizontal-grow-accordion__track {
    transition: none;
  }
}

/*
 * Expanded panel: slides in from the side set via data-slide-from (see controller).
 * Left half of viewport → enters from the left; right half → from the right.
 */
.horizontal-grow-accordion__panel-root:not(.hidden)[data-slide-from="left"] {
  animation: horizontal-grow-accordion-slide-in-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.horizontal-grow-accordion__panel-root:not(.hidden)[data-slide-from="right"] {
  animation: horizontal-grow-accordion-slide-in-right 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .horizontal-grow-accordion__panel-root:not(.hidden) {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes horizontal-grow-accordion-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  18% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes horizontal-grow-accordion-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  18% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Collapsed strip: subtle image hover scale */
.horizontal-grow-accordion__scale-wrap {
  overflow: hidden;
}

.horizontal-grow-accordion__scale-img {
  transition: transform 0.35s ease;
  width: 150px;
  height: 150px;
  object-fit: contain;

}

@media (min-width: 768px) {
  .horizontal-grow-accordion__track[data-expanded-index=""] .horizontal-grow-accordion__item:hover .horizontal-grow-accordion__scale-img {
    transform: scale(1.06);
  }
}

.horizontal-grow-accordion__track:not([data-expanded-index]) .horizontal-grow-accordion__item:hover .horizontal-grow-accordion__scale-img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .horizontal-grow-accordion__scale-img {
    transition: none;
  }

  .horizontal-grow-accordion__item:hover .horizontal-grow-accordion__scale-img {
    transform: none;
  }
}

.horizontal-grow-accordion__thumb--flush-left {
  align-self: flex-start;
  margin-right: auto;
}

/* Decoration: large watermark + breathing room from the right edge (padding on wrapper) */
.horizontal-grow-accordion__decoration {
  pointer-events: none;
  line-height: 0;
}

.horizontal-grow-accordion__decoration--inset-x {
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

.horizontal-grow-accordion__decoration-img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  object-position: bottom right;
  margin-bottom: -25px;
}

@media (min-width: 768px) {
  .horizontal-grow-accordion__decoration-img {
    max-width: min(78%, 48rem);
    max-height: min(68vh, 42rem);
  }
}

@media (min-width: 1280px) {
  .horizontal-grow-accordion__decoration-img {
    max-height: min(68vh, 46rem);
  }
}