/*
 * Custom Image Slider — Frontend v1.0
 * Follows WordPress theme CSS variables for accent colour.
 */

.cis-slider {
  --cis-accent   : var(--wp--preset--color--primary, #0073aa);
  --cis-radius   : 12px;
  --cis-tr       : 0.22s ease;
  --cis-arrow-sz : 44px;
  position       : relative;
  width          : 100%;
  user-select    : none;
  font-family    : var(--wp--preset--font-family--body, system-ui, sans-serif);
}

/* ── Track wrapper (aspect ratio) ────────────────────── */
.cis-track-wrap {
  position      : relative;
  width         : 100%;
  overflow      : hidden;
  border-radius : var(--cis-radius);
  background    : #000;
}

/* When padding-bottom is set (aspect ratio mode), children must be absolute */
.cis-track-wrap[style*="padding-bottom"] .cis-track {
  position: absolute;
  inset    : 0;
}

/* ── Track ───────────────────────────────────────────── */
.cis-track {
  width   : 100%;
  height  : 100%;
  position: relative;
}

/* ── Slides ──────────────────────────────────────────── */
.cis-slide {
  position   : absolute;
  inset      : 0;
  opacity    : 0;
  pointer-events: none;
  transition : opacity var(--cis-tr);
  overflow   : hidden;
}

.cis-slide--active {
  opacity       : 1;
  pointer-events: auto;
  position      : absolute;
  z-index       : 1;
}

/* ── TRANSITION: Slide ───────────────────────────────── */
.cis-slider[data-transition="slide"] .cis-slide {
  transform  : translateX(100%);
  transition : transform 0.6s cubic-bezier(.77,0,.18,1), opacity 0s;
  opacity    : 1;
}
.cis-slider[data-transition="slide"] .cis-slide--active {
  transform: translateX(0);
  z-index  : 2;
}
.cis-slider[data-transition="slide"] .cis-slide--leaving {
  transform: translateX(-100%);
  z-index  : 1;
}
.cis-slider[data-transition="slide"] .cis-slide--entering-right {
  transform: translateX(100%);
}
.cis-slider[data-transition="slide"] .cis-slide--entering-left {
  transform: translateX(-100%);
}

/* ── TRANSITION: Fade ────────────────────────────────── */
.cis-slider[data-transition="fade"] .cis-slide {
  transition: opacity 0.6s ease;
}
.cis-slider[data-transition="fade"] .cis-slide--active { opacity: 1; z-index:2; }

/* ── TRANSITION: Zoom ────────────────────────────────── */
.cis-slider[data-transition="zoom"] .cis-slide {
  transition: opacity 0.65s ease, transform 0.65s ease;
  transform : scale(1.06);
}
.cis-slider[data-transition="zoom"] .cis-slide--active {
  opacity   : 1;
  transform : scale(1);
  z-index   : 2;
}

/* ── Slide image ─────────────────────────────────────── */
.cis-slide__img-link {
  display : block;
  width   : 100%;
  height  : 100%;
}

.cis-slide__img {
  width      : 100%;
  height     : 100%;
  display    : block;
  object-fit : cover; /* overridden inline from PHP */
}

/* Subtle pan animation on active slide (Ken Burns lite) */
@media (prefers-reduced-motion: no-preference) {
  .cis-slider[data-transition="zoom"] .cis-slide--active .cis-slide__img {
    animation: cis-pan 8s ease-in-out infinite alternate;
  }
  @keyframes cis-pan {
    from { transform: scale(1.04) translate(0,0); }
    to   { transform: scale(1) translate(-1%,-0.5%); }
  }
}

/* ── Arrows ──────────────────────────────────────────── */
.cis-arrow {
  position        : absolute;
  top             : 50%;
  transform       : translateY(-50%);
  z-index         : 10;
  width           : var(--cis-arrow-sz);
  height          : var(--cis-arrow-sz);
  border-radius   : 50%;
  background      : rgba(0,0,0,.42);
  backdrop-filter : blur(4px);
  border          : 1.5px solid rgba(255,255,255,.2);
  color           : #fff;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : background var(--cis-tr), transform var(--cis-tr), opacity var(--cis-tr);
  opacity         : 0;
}

.cis-track-wrap:hover .cis-arrow { opacity: 1; }

.cis-arrow:hover {
  background : var(--cis-accent);
  border-color: transparent;
}

.cis-arrow--prev { left: 14px; }
.cis-arrow--next { right: 14px; }

.cis-arrow:hover.cis-arrow--prev { transform: translateY(-50%) translateX(-2px); }
.cis-arrow:hover.cis-arrow--next { transform: translateY(-50%) translateX(2px); }

.cis-arrow svg { width:22px; height:22px; pointer-events:none; }

/* ── Counter ─────────────────────────────────────────── */
.cis-counter {
  position      : absolute;
  top           : 14px;
  right         : 14px;
  z-index       : 10;
  background    : rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  color         : #fff;
  font-size     : .78rem;
  font-weight   : 600;
  padding       : 4px 10px;
  border-radius : 100px;
  letter-spacing: .03em;
}

/* ── Overlay caption ─────────────────────────────────── */
.cis-caption {
  position        : absolute;
  left            : 0;
  right           : 0;
  z-index         : 5;
  padding         : 1.5rem 2rem;
  background      : linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
}

.cis-caption--overlay-bottom {
  bottom: 0;
  text-align: left;
}

.cis-caption--overlay-center {
  top         : 0;
  bottom      : 0;
  display     : flex;
  flex-direction: column;
  align-items : center;
  justify-content: center;
  text-align  : center;
  background  : rgba(0,0,0,.38);
  padding     : 2rem;
}

.cis-caption__title {
  font-size   : 1.3rem;
  font-weight : 700;
  color       : #fff;
  margin      : 0 0 .4rem;
  line-height : 1.3;
  text-shadow : 0 1px 4px rgba(0,0,0,.5);
}

.cis-caption__sub {
  font-size   : .9rem;
  color       : rgba(255,255,255,.88);
  margin      : 0 0 .8rem;
  text-shadow : 0 1px 3px rgba(0,0,0,.4);
}

.cis-caption__btn {
  display         : inline-flex;
  align-items     : center;
  gap             : .4rem;
  padding         : .5rem 1.2rem;
  border-radius   : 8px;
  background      : var(--cis-accent);
  color           : #fff;
  font-size       : .85rem;
  font-weight     : 600;
  text-decoration : none;
  transition      : opacity var(--cis-tr), transform var(--cis-tr);
}

.cis-caption__btn:hover { opacity:.88; transform:translateY(-1px); }
.cis-caption__btn svg { width:14px; height:14px; flex-shrink:0; }

/* ── Outside caption panel ───────────────────────────── */
.cis-caption-panel {
  padding     : 1rem 0;
  text-align  : left;
}

.cis-caption-panel--center { text-align: center; }

.cis-caption-panel__item {
  display : none;
}

.cis-caption-panel__item.active {
  display   : block;
  animation : cis-cap-in .35s ease;
}

@keyframes cis-cap-in {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

.cis-caption-panel .cis-caption__title {
  color     : var(--wp--preset--color--foreground, #1a1a1a);
  font-size : 1.15rem;
  text-shadow: none;
  margin-bottom: .3rem;
}

.cis-caption-panel .cis-caption__sub {
  color      : var(--wp--preset--color--contrast-3, #6b6b6b);
  text-shadow: none;
  margin-bottom: .7rem;
}

/* ── Dots ────────────────────────────────────────────── */
.cis-dots {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 7px;
  margin-top      : .85rem;
}

.cis-dot {
  width        : 8px;
  height       : 8px;
  border-radius: 50%;
  background   : var(--wp--preset--color--contrast-3, #ccc);
  border       : none;
  cursor       : pointer;
  padding      : 0;
  transition   : background var(--cis-tr), width var(--cis-tr), border-radius var(--cis-tr);
}

.cis-dot--active {
  background   : var(--cis-accent);
  width        : 22px;
  border-radius: 100px;
}

/* ── Thumbnails ──────────────────────────────────────── */
.cis-thumbs {
  display    : flex;
  gap        : 8px;
  margin-top : .85rem;
  overflow-x : auto;
  scrollbar-width: none;
  padding    : 2px;
}

.cis-thumbs::-webkit-scrollbar { display: none; }

.cis-thumb {
  flex-shrink  : 0;
  width        : 72px;
  height       : 50px;
  border-radius: 6px;
  overflow     : hidden;
  border       : 2px solid transparent;
  padding      : 0;
  cursor       : pointer;
  transition   : border-color var(--cis-tr), opacity var(--cis-tr), transform var(--cis-tr);
  opacity      : .6;
}

.cis-thumb:hover { opacity:.85; transform:translateY(-2px); }

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

.cis-thumb img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
}

/* ── Empty ───────────────────────────────────────────── */
.cis-empty {
  padding    : 3rem 2rem;
  text-align : center;
  color      : var(--wp--preset--color--contrast-3, #888);
  font-style : italic;
  font-size  : .95rem;
  background : var(--wp--preset--color--secondary, #f8f8f8);
  border-radius: var(--cis-radius);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 560px) {
  .cis-caption__title { font-size:1rem; }
  .cis-caption__sub   { font-size:.82rem; }
  .cis-arrow { --cis-arrow-sz: 36px; }
  .cis-arrow svg { width:18px; height:18px; }
  .cis-arrow--prev { left:8px; }
  .cis-arrow--next { right:8px; }
  .cis-caption--overlay-bottom { padding:1rem; }
  .cis-thumb { width:56px; height:40px; }
}