/* SERPsKit Gallery – Frontend styles */
.serpskit-gallery,
.serpskit-gallery *{
  box-sizing: border-box;
}

.serpskit-gallery{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

.serpskit-gallery__stage{
  position:relative;
  width:min(400px, 90vw);
  aspect-ratio: 2 / 3;
  overflow: visible;
}

.serpskit-gallery__item{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) translateX(var(--skg-x, 0px)) scale(var(--skg-scale, 1));
  z-index: var(--skg-z, 1);
  opacity: var(--skg-opacity, 1);
  pointer-events: var(--skg-pe, auto);
  transition: transform 350ms ease, opacity 250ms ease;
}

.serpskit-gallery__frame{
  position:relative;
  width:100%;
  height:100%;
  border: var(--skg-border, 4px) solid var(--skg-border-color, #FFFFFF);
  background: #ffffff;
  overflow:hidden;
}

.serpskit-gallery__link{
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color: inherit;
}

.serpskit-gallery__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.serpskit-gallery__title{
  position:absolute;
  left:25px;
  bottom:25px;
  max-width: calc(100% - 50px);
  padding: 10px 14px;
  background: var(--skg-title-bg, #2F6D54);
  color: var(--skg-title-color, #FFFFFF);
  font-size: var(--skg-title-size, 21px);
  line-height: var(--skg-title-lh, 1.2);
  font-weight: 700;
  display:inline-block;
}

.serpskit-gallery__controls{
  display:flex;
  gap: 22px;
  margin-top: 22px;
}

.serpskit-gallery__arrow{
  width: var(--skg-arrow-size, 50px);
  height: var(--skg-arrow-size, 50px);
  border-radius: 9999px;
  border: none;
  background: var(--skg-arrow-bg, #2F6D54);
  color: var(--skg-arrow-color, #FFFFFF);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding: 0;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}

.serpskit-gallery__arrow svg{
  width: var(--skg-arrow-icon-size, 20px);
  height: var(--skg-arrow-icon-size, 20px);
  display:block;
}
.serpskit-gallery__arrow svg path{ fill: currentColor; }

.serpskit-gallery__arrow:focus{
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .serpskit-gallery__item{ transition:none; }
}