/*
 * Atelier Gallery — Plugin styles
 * Hey Zombie Studio — heyzombie.com
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Variables
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ag-skeleton-base:    #1a1a1a;
  --ag-skeleton-shine:   #2e2e2e;
  --ag-arrow-bg:         rgba(0, 0, 0, 0.4);
  --ag-arrow-bg-hover:   rgba(0, 0, 0, 0.7);
  --ag-arrow-color:      #ffffff;
  --ag-dot-color:        rgba(255, 255, 255, 0.45);
  --ag-dot-active:       #ffffff;
  --ag-transition-speed: 300ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Main wrapper
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper {
  position:   relative;
  width:      100%;
  height:     var(--ag-height, 100%);
  overflow:   hidden;
  background: var(--ag-skeleton-base);
  /*
   * Use position: absolute on child elements to layer
   * content on top of the gallery (e.g. overlays, CTAs).
   */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Skeleton loader
   ═══════════════════════════════════════════════════════════════════════════ */
.ag-skeleton {
  position:   absolute;
  inset:      0;
  z-index:    2;
  background: var(--ag-skeleton-base);
  overflow:   hidden;
  opacity:    1;
  transition: opacity 0.4s ease;
}

/* Hide skeleton once the slider is ready */
.atelier-gallery-wrapper.ag-ready .ag-skeleton {
  opacity:        0;
  pointer-events: none;
}

/* Animated shimmer effect */
.ag-skeleton__shimmer {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    transparent              0%,
    var(--ag-skeleton-shine) 40%,
    var(--ag-skeleton-shine) 60%,
    transparent              100%
  );
  background-size: 200% 100%;
  animation:       ag-shimmer 1.6s ease-in-out infinite;
}

@keyframes ag-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Splide — reset & full-size
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .ag-splide {
  position:   absolute;
  inset:      0;
  z-index:    1;
  opacity:    0;
  transition: opacity 0.5s ease;
}

/* Reveal slider once mounted */
.atelier-gallery-wrapper.ag-ready .ag-splide {
  opacity: 1;
}

.atelier-gallery-wrapper .splide__track,
.atelier-gallery-wrapper .splide__list,
.atelier-gallery-wrapper .splide__slide {
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Images
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__slide img {
  display:          block;
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  var(--ag-obj-pos, center center);
}

/* When cover = false */
.atelier-gallery-wrapper[data-cover="false"] .splide__slide img {
  object-fit: contain;
}



/* ═══════════════════════════════════════════════════════════════════════════
   Navigation arrows
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__arrow {
  width:            48px;
  height:           48px;
  background:       var(--ag-arrow-bg);
  border-radius:    50%;
  border:           none;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  transition:       background var(--ag-transition-speed) ease,
                    transform  var(--ag-transition-speed) ease;
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.atelier-gallery-wrapper .splide__arrow:hover {
  background: var(--ag-arrow-bg-hover);
  transform:  scale(1.08);
}

.atelier-gallery-wrapper .splide__arrow svg {
  fill:   var(--ag-arrow-color);
  width:  18px;
  height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pagination dots
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper .splide__pagination {
  bottom: 20px;
  gap:    6px;
}

.atelier-gallery-wrapper .splide__pagination__page {
  width:         10px;
  height:        10px;
  background:    var(--ag-dot-color);
  border-radius: 50%;
  border:        none;
  padding:       0;
  cursor:        pointer;
  transition:    background var(--ag-transition-speed) ease,
                 transform  var(--ag-transition-speed) ease;
}

.atelier-gallery-wrapper .splide__pagination__page:hover {
  background: rgba(255,255,255,0.75);
  transform:  scale(1.2);
}

.atelier-gallery-wrapper .splide__pagination__page.is-active {
  background: var(--ag-dot-active);
  transform:  scale(1.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Error state (admins only)
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-error {
  padding:       12px 16px;
  background:    #fff3cd;
  border:        1px solid #ffc107;
  border-radius: 6px;
  color:         #856404;
  font-size:     14px;
  font-family:   monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
.atelier-gallery-wrapper:focus-within .splide__arrow {
  outline:        2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ag-skeleton__shimmer {
    animation: none;
  }
  .atelier-gallery-wrapper .ag-splide,
  .atelier-gallery-wrapper .ag-skeleton {
    transition: none;
  }
}