/* =========================================================
   File: css/components/images.css
   Title: Invent City — Image Modifiers (currentColor-aware)
   Version: 2026-01-17 (2A: hairline token for outlines)
   Purpose:
   • Outlines/insets that inherit section color (currentColor)
   • Image switcher (2-up sliding track)
   • Image hover/focus crossfade (“-more” overlay injected by JS)
   • Hover scale applied to wrapper so BOTH layers scale together
========================================================= */


/* =========================================================
   1) OUTLINES & INSETS (currentColor)
   Update (2A):
   • Use hairline token for outline width.
========================================================= */
.img-line {
  outline: var(--hairline, 1px) solid currentColor;
  outline-offset: -1px;
}
/* Put this in your images/ui css once (replaces inline style="border:1px solid") */
.img-line{ border: 1px solid currentColor; }

.img-inset {
  padding: 0.5rem;
  background: transparent;
  outline: var(--hairline, 1px) solid currentColor;
}


/* =========================================================
   2) IMAGE SWITCHER — WRAP (centering + width sync)
   Notes:
   • .image-switcher-wrap is the OUTER module wrapper
   • .image-switcher is the viewport
========================================================= */
.image-switcher-wrap {
  width: 100%;
  display: grid;
  justify-items: center;
}

.image-switcher-wrap .image-switcher,
.image-switcher-wrap .image-switcher-controls {
  width: min(100%, var(--switcher-max-w, 1100px));
  margin-inline: auto;
}


/* =========================================================
   3) IMAGE SWITCHER — SLIDE (2-UP)
========================================================= */
.image-switcher {
  position: relative;
  width: 100%;
  overflow: hidden;
  --switcher-max-h: 520px;
}

.image-switcher-track {
  display: flex !important;
  flex-wrap: nowrap;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
}

.image-switcher-img {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100% !important;
  max-height: var(--switcher-max-h);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   4) IMAGE SWAP — HOVER / FOCUS CROSSFADE + SCALE
   Notes:
   • JS wraps each img.img-swap inside .img-swap-wrap
   • JS clones the image as .img-swap-more using “-more” filename
   • JS adds .is-hover on focus for keyboard accessibility
   • SCALE on wrapper so base + overlay scale together
========================================================= */
.img-swap-wrap {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  overflow: visible;
  transform: translateZ(0);
  transition: transform 220ms ease;
}

.img-swap-wrap:hover,
.img-swap-wrap:focus {
  transform: scale(var(--img-hover-scale, 1.03));
}

.img-swap-wrap > img {
  display: block;
  width: 100%;
  height: auto;
  transform: none !important;
}

.img-swap-wrap > img.img-swap-more {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.img-swap-wrap:hover > img.img-swap-more,
.img-swap-wrap.is-hover > img.img-swap-more {
  opacity: 1;
}


/* =========================================================
   5) ACCESSIBILITY — REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .img-swap-wrap { transition: none; }
  .img-swap-wrap > img.img-swap-more { transition: none; }
}


/* ---------------------------------------------------------
   12) CLUSTER MAP
--------------------------------------------------------- */
.cluster-map-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-inline: auto;
  padding: 0;
  text-align: center;
  border: 0;
  transition: transform 0.25s ease;
}

@media (min-width: 768px) {
  .cluster-map-wrapper { width: var(--map-max-width, 100%); }
}

@media (min-width: 1200px) {
  .cluster-map-wrapper { width: 100%; }
}

.cluster-map-wrapper img,
.cluster-map-base,
.cluster-map-overlay {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.cluster-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


/* =========================================================
   END OF FILE — css/components/images.css
========================================================= */