/*
 * Royal Gallery v3.0.0 — Production Stylesheet
 *
 * Architecture principles (non-negotiable):
 *   • Only `transform` and `opacity` in transitions. Nothing else.
 *   • Slides use `position: absolute` — continuous translate3d positioning.
 *   • `will-change: transform` on slides (declared here, not in JS —
 *     applied once at layout, not promoted/demoted on every frame).
 *   • Mobile-first: base styles are for ≤639px. Desktop is additive.
 *   • `contain: layout style` on root limits reflow scope to this subtree.
 *   • Aspect-ratio box prevents CLS before any JS runs.
 *
 * Slide positioning model (v3 change from v2):
 *   v2: `display: grid` with all slides stacked; opacity 0/1 for visibility.
 *   v3: `position: absolute; inset: 0` with `translate3d(offset%, 0, 0)`.
 *       Track has `overflow: hidden`. Only on-screen slides are visible.
 *       This enables continuous spring-based positioning during drag.
 *
 * @version 3.0.0
 */

/* ── Scoped reset ───────────────────────────────────────────────────────────── */
.royal-gallery *,
.royal-gallery *::before,
.royal-gallery *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Configurable (overridden by PHP wp_head inline CSS) */
  --rg-accent:              #1a1a1a;
  --rg-thumb-size:          80px;
  --rg-transition-duration: 320ms;
  --rg-radius:              4px;

  /* Internal — not overridden externally */
  --rg-thumb-gap:       8px;
  --rg-arrow-size:      40px;
  --rg-bg:              #f4f4f4;
  --rg-skeleton-base:   #e8e8e8;
  --rg-skeleton-shine:  #f2f2f2;
  --rg-shadow:          0 2px 12px rgba(0,0,0,0.10);
  --rg-focus-ring:      0 0 0 3px rgba(26,26,26,0.22);
}

/* ── Root container ─────────────────────────────────────────────────────────── */
.royal-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--rg-thumb-gap);
  width: 100%;
  position: relative;
  /* Limit browser reflow scope to this element */
  contain: layout style;
}

/* Side-thumbnail layout — desktop only */
@media (min-width: 640px) {
  .royal-gallery--thumbs-left  { flex-direction: row; }
  .royal-gallery--thumbs-right { flex-direction: row-reverse; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--rg-radius);
  background: var(--rg-bg);
  /* overflow: hidden clips slides that are off-screen via translate3d */
  overflow: hidden;
  /* Stacking context — isolates z-index from page */
  isolation: isolate;
}

/* Aspect-ratio box — prevents CLS before JS runs.
   padding-top: 100% = 1:1 square. Theme can override via CSS on .rg-slider. */
.rg-slider::before {
  content: '';
  display: block;
  padding-top: 100%;
  /* Override aspect ratio for wide/landscape products: */
  /* padding-top: 75%; */
}

/* ── Track (the scrolling viewport) ────────────────────────────────────────── */
.rg-track {
  position: absolute;
  inset: 0;
  /* Overflow is handled by .rg-slider; track itself is the positioning context */
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * v3 change: slides are `position: absolute; inset: 0` instead of grid-stacked.
 * JavaScript writes `transform: translate3d(offset%, 0, 0)` to position them.
 * Default: all slides start at translate3d(100%, 0, 0) (off-screen right),
 * except the first which is at translate3d(0, 0, 0).
 * JS overrides all transforms on init.
 *
 * will-change declared here (not added/removed in JS) = one GPU layer promotion
 * per slide at paint time, not thrashing on every animation frame.
 */
.rg-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Off-screen by default — JS sets the real transform on init */
  transform: translate3d(100%, 0, 0);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

/* First slide visible before JS fires */
.rg-slide:first-child {
  transform: translate3d(0, 0, 0);
}

.rg-slide:active {
  cursor: grabbing;
}

/* ── Image ──────────────────────────────────────────────────────────────────── */
.rg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  /* Fade in on load — compositor-safe */
  opacity: 0;
  transition: opacity 240ms ease;
}

.rg-slide--loaded .rg-image {
  opacity: 1;
}

/* ── Zoom frame ─────────────────────────────────────────────────────────────── */
.rg-zoom-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .rg-zoom-frame--hover { cursor: zoom-in; }
}
.rg-zoom-frame--active  { cursor: zoom-out; }

/* ── Skeleton shimmer ───────────────────────────────────────────────────────── */
.rg-skeleton {
  position: absolute;
  inset: 0;
  background: var(--rg-skeleton-base);
  z-index: 0;
  overflow: hidden;
  transition: opacity 280ms ease;
}

.rg-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rg-skeleton-shine) 50%,
    transparent 100%
  );
  transform: translate3d(-100%, 0, 0);
  animation: rg-shimmer 1.6s ease-in-out infinite;
}

@keyframes rg-shimmer {
  to { transform: translate3d(100%, 0, 0); }
}

.rg-slide--loaded .rg-skeleton,
.rg-slide--error  .rg-skeleton {
  opacity: 0;
  pointer-events: none;
}

.rg-slide--error .rg-skeleton { background: #f5e6e6; }
.rg-slide--error .rg-skeleton::after { animation: none; }

/* ── Blur-up placeholder ─────────────────────────────────────────────────────── */
.rg-placeholder {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.06);
  z-index: 1;
  transition: opacity 280ms ease;
}

.rg-slide--loaded .rg-placeholder { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION ARROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: var(--rg-arrow-size);
  height: var(--rg-arrow-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--rg-accent);
  /* Only transform + opacity */
  transition:
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   160ms ease;
  /* Hidden by default; shown on hover/focus or on coarse pointer */
  opacity: 0;
  pointer-events: none;
  outline: none;
  /* Static vertical centering — no translateY that conflicts with hover scale */
  margin-top: calc(var(--rg-arrow-size) / -2);
}

.rg-arrow--prev { left: 10px; }
.rg-arrow--next { right: 10px; }

/* Show on slider hover/focus (desktop) */
.rg-slider:hover .rg-arrow,
.rg-slider:focus-within .rg-arrow {
  opacity: 1;
  pointer-events: auto;
}

/* Always visible on touch screens */
@media (pointer: coarse) {
  .rg-arrow {
    opacity: 0.85;
    pointer-events: auto;
  }
}

.rg-arrow:hover {
  transform: scale(1.10);
  background: #fff;
}

.rg-arrow:active {
  transform: scale(0.93);
}

.rg-arrow:focus-visible {
  outline: none;
  box-shadow: var(--rg-focus-ring);
}


/* ═══════════════════════════════════════════════════════════════════════════
   ZOOM BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.90);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--rg-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  outline: none;
}

.rg-slide:hover .rg-zoom-btn,
.rg-slide:focus-within .rg-zoom-btn {
  opacity: 1;
  pointer-events: auto;
}

@media (pointer: coarse) {
  .rg-zoom-btn {
    opacity: 0.85;
    pointer-events: auto;
  }
}

.rg-zoom-btn:focus-visible { box-shadow: var(--rg-focus-ring); }

/* ═══════════════════════════════════════════════════════════════════════════
   THUMBNAIL STRIP
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-thumbs {
  flex: 0 0 auto;
  overflow: hidden;
}

/* Horizontal (bottom — default) */
.royal-gallery--thumbs-bottom .rg-thumbs,
.royal-gallery--thumbs-top    .rg-thumbs {
  width: 100%;
}

.rg-thumbs__track {
  display: flex;
  gap: var(--rg-thumb-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.rg-thumbs__track::-webkit-scrollbar { display: none; }

/* Vertical (left/right — desktop only) */
@media (min-width: 640px) {
  .royal-gallery--thumbs-left  .rg-thumbs,
  .royal-gallery--thumbs-right .rg-thumbs {
    width: calc(var(--rg-thumb-size) + var(--rg-thumb-gap));
    align-self: stretch;
  }
  .royal-gallery--thumbs-left  .rg-thumbs__track,
  .royal-gallery--thumbs-right .rg-thumbs__track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    height: 100%;
  }
}

/* Thumbnail button */
.rg-thumb {
  flex: 0 0 var(--rg-thumb-size);
  width:  var(--rg-thumb-size);
  height: var(--rg-thumb-size);
  border: 3px solid transparent;
  border-radius: var(--rg-radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--rg-bg);
  scroll-snap-align: start;
  outline: none;
  /* Inactive thumbnails recede; active pops forward */
  opacity: 0.45;
  transform: scale(0.94);
  transition:
    opacity      180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform    180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

.rg-thumb--active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--rg-accent);
}

.rg-thumb:hover:not(.rg-thumb--active) {
  opacity: 0.75;
  transform: scale(0.97);
}

.rg-thumb:focus-visible { box-shadow: var(--rg-focus-ring); }

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN-READER UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-sr-counter.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion: reduce) {
  .rg-slide,
  .rg-image,
  .rg-thumb,
  .rg-arrow,
  .rg-zoom-btn,
  .rg-skeleton::after,
  .rg-placeholder {
    transition: none !important;
    animation:  none !important;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .rg-arrow, .rg-zoom-btn { border: 1px solid ButtonText; }
  .rg-thumb--active        { border-color: Highlight; }
}