.block-collection-card {
  width: 100%;
  height: 100%;
  /* background-color: rgb(var(--color-background)); */
}

.block-collection-card__title-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-collection-card__hover-icon {
  position: absolute;
  top: 100%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-top: 0.5rem;
  margin-left: 0;
  color: rgb(var(--color-text));
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
  pointer-events: none;
}

/* Title over the image: keep icon out of normal flow so the title stays vertically centered */
.block-collection-card__image-title-wrapper .block-collection-card__hover-icon {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0.5rem;
  transform: translate(-50%, 8px);
}


.block-collection-card:hover .block-collection-card__image-wrapper img,
.block-collection-card:focus-visible .block-collection-card__image-wrapper img {
  transform: scale(1.08);
}

.block-collection-card:hover .block-collection-card__hover-icon,
.block-collection-card:focus-visible .block-collection-card__hover-icon {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.block-collection-card:hover .block-collection-card__image-title-wrapper .block-collection-card__hover-icon,
.block-collection-card:focus-visible
  .block-collection-card__image-title-wrapper
  .block-collection-card__hover-icon {
  transform: translate(-50%, 0);
}

.block-collection-card:hover > .block-collection-card__title-group > .block-collection-card__hover-icon,
.block-collection-card:focus-visible > .block-collection-card__title-group > .block-collection-card__hover-icon {
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .block-collection-card__image-wrapper img,
  .block-collection-card__hover-icon {
    transition: none;
  }

  .block-collection-card:hover .block-collection-card__image-wrapper img,
  .block-collection-card:focus-visible .block-collection-card__image-wrapper img {
    transform: none;
  }

  .block-collection-card:hover .block-collection-card__hover-icon,
  .block-collection-card:focus-visible .block-collection-card__hover-icon {
    opacity: 1;
    visibility: visible;
  }

  .block-collection-card:hover .block-collection-card__image-title-wrapper .block-collection-card__hover-icon,
  .block-collection-card:focus-visible
    .block-collection-card__image-title-wrapper
    .block-collection-card__hover-icon {
    transform: translate(-50%, 0);
  }

  .block-collection-card:hover > .block-collection-card__title-group > .block-collection-card__hover-icon,
  .block-collection-card:focus-visible > .block-collection-card__title-group > .block-collection-card__hover-icon {
    transform: translate(-50%, 0);
  }
}

.block-collection-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: var(--aspect-ratio);
  padding: var(--padding);
  overflow: hidden;
  background-color: rgb(243 243 243 / 100%);
}

.block-collection-card .block-collection-card__image-wrapper {
  border-radius: 0.375rem;
}

.block-collection-card__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit-type);
  transform: scale(1);
  transform-origin: center;
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Placeholder / full-bleed SVGs — exclude small UI icons (e.g. hover arrow) */
.block-collection-card__image-wrapper svg:not(.icon-circle-button-right-clipped) {
  width: 100%;
  height: 100%;
}

.block-collection-card__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.block-collection-card__image-title-wrapper {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 10px 20px;
  flex-direction: column;
}

.block-collection-card__title {
  color: rgb(var(--color-text));
  text-align: center;
}