/* =========================================================================
   KALOCKSCO — projects gallery slideshow (CSV-driven cross-fade)
   Mechanism adapted from the Daralbeida keycard carousel; restyled to the
   Ka Locks Co tokens (see ../styles.css). Image on top, description below.
   ========================================================================= */

.gal-stage { max-width: 760px; margin: 1.5rem auto 0; }

.gal-frame {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 5px solid var(--color-navy);     /* teal accent edge */
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Cross-fade deck: slides stack and fade in place */
.gal-deck { position: relative; }
.gal-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease;
}
.gal-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 2; }

/* Image (top) — fixed ratio, cover, gentle ken-burns on the active slide */
.gal-imgwrap { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-alt); }
.gal-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); }
.gal-slide.is-active .gal-img { animation: gal-kenburns 7s ease-out forwards; }
@keyframes gal-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Caption (description below the image) */
.gal-cap { padding: 1.2rem 1.4rem 1.4rem; }
/* One-line header: Location / Title / Completed — never wraps (keeps height fixed) */
.gal-head {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--color-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.5rem;
}
.gal-head strong { color: var(--color-navy); font-weight: 700; }
.gal-head .gal-loc  { color: var(--color-amber-dark); font-weight: 600; }
.gal-head .gal-done { color: var(--color-muted); font-weight: 500; }
.gal-head .gal-sep  { color: var(--color-line); font-weight: 400; margin: 0 0.15rem; }
/* Description: ALWAYS reserve exactly 3 lines so cards never resize between slides */
.gal-desc {
  color: var(--color-ink); font-size: 1rem; line-height: 1.6; margin: 0;
  height: 4.8em;                                   /* 3 lines × 1.6 line-height */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}
.gal-num {
  position: absolute; top: 0.8rem; right: 0.9rem; z-index: 3;
  font-family: var(--font-head); font-weight: 800; font-size: 0.8rem; color: var(--color-white);
  background: color-mix(in srgb, var(--sm-teal-1) 85%, transparent); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill);
}

/* Controls bar */
.gal-bar { display: flex; align-items: center; gap: 0.8rem; max-width: 760px; margin: 0.9rem auto 0; }
.gal-btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--sm-orange);
  background: var(--color-gold); color: var(--color-navy); font-size: 1.4rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background var(--transition), transform var(--transition);
}
.gal-btn:hover { background: var(--color-gold-dark); transform: translateY(-1px); }

/* Progress dots (per-slide dwell fill) */
.gal-dots { flex: 1 1 auto; display: flex; gap: 4px; align-items: center; }
.gal-dot {
  position: relative; flex: 1 1 0; height: 6px; border-radius: 3px;
  background: var(--color-bg-alt); overflow: hidden; cursor: pointer;
}
.gal-dot .gal-fill {
  position: absolute; inset: 0; width: 0; background: var(--color-navy);
}
.gal-dot.is-played .gal-fill { width: 100%; }
.gal-dot.is-active .gal-fill { background: var(--color-amber); }

/* Pause hint */
.gal-stage.is-paused .gal-frame::after {
  content: "❚❚"; position: absolute; top: 0.8rem; left: 0.9rem; z-index: 4;
  color: var(--color-white); font-size: 0.8rem; background: rgba(0,0,0,0.4); padding: 0.2rem 0.5rem; border-radius: 6px;
}
.gal-hint { text-align: center; color: var(--color-muted); font-size: var(--fs-small); margin-top: 0.8rem; }

@media (max-width: 560px) {
  .gal-head { font-size: 0.95rem; }
  .gal-btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-slide { transition: none; }
  .gal-slide.is-active .gal-img { animation: none; }
}

/* -------------------------------------------------------------------------
   Before/after compare slider — drop-in replacement for .gal-imgwrap when a
   slide has both keycard_image_url (after) and keycard_image_before_url set.
   Both images sit at full size, inset:0; the "before" image is revealed only
   up to the handle position via clip-path, so they stay perfectly aligned
   (no resizing/zoom mismatch between the two layers).
   ------------------------------------------------------------------------- */
.gal-compare { cursor: ew-resize; touch-action: pan-y; }
.gal-compare .gal-img { position: absolute; inset: 0; }
.gal-compare .gal-compare-before { z-index: 2; }
.gal-slide.is-active .gal-compare .gal-img { animation: none; } /* ken-burns zoom would break clip-path alignment */

.gal-compare-handle {
  position: absolute; top: 0; bottom: 0; width: 3px; z-index: 3;
  background: var(--color-white); transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0,0,0,0.45); pointer-events: none;
}
.gal-compare-handle::after {
  content: "⇔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%; background: var(--color-white); color: var(--color-navy);
  display: grid; place-items: center; font-size: 1.05rem; box-shadow: var(--shadow-md);
}
.gal-compare-tag {
  position: absolute; top: 0.7rem; z-index: 4; font-family: var(--font-head); font-weight: 700;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-white);
  background: rgba(0,0,0,0.55); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
}
.gal-compare-tag--before { left: 0.7rem; }
.gal-compare-tag--after  { right: 0.7rem; }