/* BomWidgets — Image Stack */

*:has(> .bomwidgets-stack) {
  container-type: inline-size;
}

.bomwidgets-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bomwidgets-stack__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center bottom;
  transition: transform 0.3s ease;
}

.bomwidgets-stack__item img,
.bomwidgets-stack__item svg {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

/* Size variants via data-size */
.bomwidgets-stack[data-size="small"] .bomwidgets-stack__item img,
.bomwidgets-stack[data-size="small"] .bomwidgets-stack__item svg {
  height: 80px;
  width: auto;
}

.bomwidgets-stack[data-size="medium"] .bomwidgets-stack__item img,
.bomwidgets-stack[data-size="medium"] .bomwidgets-stack__item svg {
  height: 120px;
  width: auto;
}

.bomwidgets-stack[data-size="large"] .bomwidgets-stack__item img,
.bomwidgets-stack[data-size="large"] .bomwidgets-stack__item svg {
  height: 160px;
  width: auto;
}

/* Hover: lift center image slightly */
.bomwidgets-stack:hover .bomwidgets-stack__item--center {
  transform: translate(-50%, calc(-50% - 4px)) rotate(0deg) !important;
}

/* Responsive: scale down on small screens */
@container (max-width: 480px) {
  .bomwidgets-stack[data-size="large"] .bomwidgets-stack__item img,
  .bomwidgets-stack[data-size="large"] .bomwidgets-stack__item svg {
    height: 120px;
  }

  .bomwidgets-stack[data-size="medium"] .bomwidgets-stack__item img,
  .bomwidgets-stack[data-size="medium"] .bomwidgets-stack__item svg {
    height: 90px;
  }

  .bomwidgets-stack[data-size="small"] .bomwidgets-stack__item img,
  .bomwidgets-stack[data-size="small"] .bomwidgets-stack__item svg {
    height: 60px;
  }
}