/* =============================================================
   MGW Slideshow — engine styles (framework-free)
   Pairs with mgw-slideshow.js. All visual values pull from the
   Mountain Goat Websites design tokens (colors_and_type.css).
   Layout is driven by data-* attributes set on the root by the JS,
   so the same DOM supports every option combination.
   ============================================================= */

.mgw-slideshow {
  --mgw-radius: var(--r-lg, 16px);
  --mgw-gap: var(--space-4, 16px);
  --mgw-ratio: 16 / 9;
  --mgw-cells: 1;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--fg-1, #062F4A);
  position: relative;
  width: 100%;
  /* Responsive decisions are based on the slideshow's OWN width, not the
     viewport — so two-column / side-thumbnails behave correctly whether the
     block is full-bleed or dropped into a narrow column or sidebar. */
  container-type: inline-size;
  container-name: mgwss;
}

/* ---- frame: stage (+ optional outside arrows / aside column) ---- */
.mgw-frame {
  display: flex;
  align-items: stretch;
  gap: var(--mgw-gap);
}
.mgw-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mgw-gap);
  flex: 1 1 auto;
  min-width: 0;
}

/* two-column: media on the left, caption aside on the right */
.mgw-slideshow[data-captions="twocolumn"] .mgw-frame { align-items: center; }
.mgw-aside {
  flex: 0 0 34%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  justify-content: center;
}

/* ---- viewport + track ---- */
.mgw-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: var(--mgw-ratio);
  overflow: hidden;
  border-radius: var(--mgw-radius);
  background: var(--mgw-stone-100, #DDE3E8);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(6,47,74,.10));
}
.mgw-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform var(--dur-slow, 420ms) var(--ease-emphasized, cubic-bezier(.2,.6,.2,1));
}
.mgw-slide {
  position: relative;
  flex: 0 0 calc(100% / var(--mgw-cells));
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mgw-slideshow[data-cells="multi"] .mgw-slide { padding-right: var(--mgw-gap); box-sizing: border-box; }
.mgw-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--mgw-stone-200, #C2CBD2);
}
.mgw-slideshow[data-cells="multi"] .mgw-media { border-radius: var(--r-md, 10px); }

/* fade transition: stack slides, cross-fade opacity (single cell only) */
.mgw-slideshow[data-transition="fade"] .mgw-track {
  display: block;
  position: relative;
  transition: none;
}
.mgw-slideshow[data-transition="fade"] .mgw-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow, 420ms) var(--ease-standard, cubic-bezier(.2,0,.2,1));
}
.mgw-slideshow[data-transition="fade"] .mgw-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- video ---- */
.mgw-slide[data-type="video"] .mgw-playbtn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border: none;
  border-radius: var(--r-circle, 50%);
  background: rgba(255,255,255,.9);
  color: var(--mgw-teal, #0089AD);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(6,47,74,.14));
  transition: transform var(--dur-fast,140ms) var(--ease-standard), background var(--dur-fast,140ms);
}
.mgw-slide[data-type="video"] .mgw-playbtn:hover { background: #fff; transform: scale(1.06); }
.mgw-slide[data-type="video"] .mgw-playbtn svg { width: 30px; height: 30px; margin-left: 4px; }
.mgw-slide.is-playing .mgw-playbtn { display: none; }

/* ---- nav arrows ---- */
.mgw-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-circle, 50%);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--mgw-navy, #062F4A);
  background: #fff;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(6,47,74,.08));
  transition: background var(--dur-fast,140ms) var(--ease-standard),
              color var(--dur-fast,140ms), box-shadow var(--dur-fast,140ms), opacity var(--dur-fast,140ms);
}
.mgw-nav:hover { background: var(--accent-soft, #E6F4F8); color: var(--accent, #0089AD); }
.mgw-nav:focus-visible { outline: none; box-shadow: var(--shadow-ring, 0 0 0 3px rgba(0,137,173,.25)); }
.mgw-nav svg { width: 20px; height: 20px; }
.mgw-nav[disabled] { opacity: .35; cursor: default; }

/* overlay arrows float over the viewport edges */
.mgw-nav.is-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(6,32,54,.55);
  color: #fff;
  backdrop-filter: blur(6px);
}
.mgw-nav.is-overlay:hover { background: rgba(6,32,54,.8); color: #fff; }

/* outside arrows sit in the gutters — vertically centered on the stage */
.mgw-nav.is-outside { align-self: center; }
.mgw-nav.is-overlay.mgw-prev { left: 14px; }
.mgw-nav.is-overlay.mgw-next { right: 14px; }

/* ---- meta row (below the stage): dots + counter + thumbnails ---- */
.mgw-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-top: var(--space-4, 16px);
}

/* ---- dots ---- */
.mgw-dots { display: flex; gap: 9px; align-items: center; justify-content: center; }
.mgw-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: var(--r-circle, 50%);
  border: 1.5px solid var(--mgw-stone-300, #9AA5AE);
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast,140ms), border-color var(--dur-fast,140ms), transform var(--dur-fast,140ms);
}
.mgw-dot:hover { border-color: var(--accent, #0089AD); }
.mgw-dot.is-active {
  background: var(--accent, #0089AD);
  border-color: var(--accent, #0089AD);
  transform: scale(1.25);
}
.mgw-dot:focus-visible { outline: none; box-shadow: var(--shadow-ring, 0 0 0 3px rgba(0,137,173,.25)); }
.mgw-dots.is-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  z-index: 4;
}
.mgw-dots.is-overlay .mgw-dot { border-color: rgba(255,255,255,.85); }
.mgw-dots.is-overlay .mgw-dot.is-active { background: #fff; border-color: #fff; }

/* ---- counter ---- */
.mgw-counter {
  font-size: var(--fs-small, 14px);
  font-weight: var(--fw-medium, 500);
  color: var(--fg-2, #4A555E);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.mgw-counter b { color: var(--accent, #0089AD); }

/* ---- progress bar (autoplay) ---- */
.mgw-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 4;
  background: rgba(255,255,255,.35);
}
.mgw-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent, #0089AD);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---- navigation hint (centered overlay, auto-fades) ---- */
.mgw-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 90%;
  padding: 11px 20px;
  background: rgba(6, 32, 54, .62);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-small, 14px);
  font-weight: var(--fw-medium, 500);
  line-height: 1.3;
  text-align: center;
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--shadow-md, 0 6px 18px rgba(6,47,74,.10));
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-slow, 420ms) var(--ease-standard, cubic-bezier(.2,0,.2,1));
}
.mgw-hint kbd {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  background: rgba(255,255,255,.18);
  border-radius: 5px;
  padding: 1px 6px;
}
.mgw-hint.is-hidden { opacity: 0; }

/* ---- captions ---- */
.mgw-caption { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.mgw-title {
  font-family: var(--font-display);
  font-weight: var(--fw-black, 900);
  font-size: var(--fs-h3, 24px);
  line-height: var(--lh-snug, 1.2);
  letter-spacing: var(--tracking-tight, -.01em);
  color: var(--fg-1, #062F4A);
  margin: 0;
  text-wrap: balance;
}
.mgw-desc {
  font-size: var(--fs-body, 16px);
  line-height: var(--lh-normal, 1.5);
  color: var(--fg-2, #4A555E);
  margin: 0;
  text-wrap: pretty;
}
.mgw-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-caption, 12px);
  letter-spacing: var(--tracking-eyebrow, .14em);
  text-transform: uppercase;
  color: var(--accent, #0089AD);
}
.mgw-cta {
  align-self: flex-start;
  margin-top: var(--space-2, 8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-pill, 999px);
  background: var(--accent, #0089AD);
  color: #fff;
  font-weight: var(--fw-medium, 500);
  text-decoration: none;
  transition: background var(--dur-fast,140ms) var(--ease-standard), box-shadow var(--dur-fast,140ms);
}
.mgw-cta:hover { background: var(--accent-hover, #006E8E); color: #fff; box-shadow: var(--shadow-md, 0 6px 18px rgba(6,47,74,.10)); }

/* caption below the stage */
.mgw-caption.is-below { margin-top: var(--space-4, 16px); text-align: left; }

/* caption overlaid on the media with a navy scrim */
.mgw-caption.is-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(20px, 5%, 40px);
  padding-top: 56px;
  background: linear-gradient(to top, rgba(6,32,54,.86) 0%, rgba(6,32,54,.45) 45%, rgba(6,32,54,0) 100%);
  color: #fff;
}
.mgw-caption.is-overlay .mgw-title { color: #fff; }
.mgw-caption.is-overlay .mgw-desc { color: rgba(255,255,255,.85); }

/* When the active slide is a video showing native controls, lift the overlay
   caption above the controls bar so the two don't overlap. */
.mgw-viewport.has-video-controls .mgw-caption.is-overlay {
  bottom: var(--mgw-video-controls-h, 80px);
  background: linear-gradient(to top, rgba(6,32,54,.86) 0%, rgba(6,32,54,.45) 60%, rgba(6,32,54,0) 100%);
}

/* ---- thumbnails ---- */
.mgw-thumbs { display: flex; gap: 8px; }
.mgw-thumbs.is-below { flex-wrap: wrap; justify-content: center; }
.mgw-thumbs.is-side { flex-direction: column; flex: 0 0 86px; align-self: stretch; overflow: auto; }
.mgw-thumb {
  flex: 0 0 auto;
  width: 64px; height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  cursor: pointer;
  background: var(--mgw-stone-100, #DDE3E8);
  opacity: .65;
  transition: opacity var(--dur-fast,140ms), border-color var(--dur-fast,140ms);
  position: relative;
}
.mgw-thumbs.is-side .mgw-thumb { width: 100%; height: 56px; }
.mgw-thumb:hover { opacity: 1; }
.mgw-thumb.is-active { opacity: 1; border-color: var(--accent, #0089AD); }
.mgw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgw-thumb:focus-visible { outline: none; box-shadow: var(--shadow-ring, 0 0 0 3px rgba(0,137,173,.25)); }
/* video badge on thumbnails */
.mgw-thumb[data-type="video"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* ---- lightbox ---- */
.mgw-viewport.is-zoomable .mgw-media { cursor: zoom-in; }
/* Videos with native controls handle their own clicks (play/pause/seek) rather
   than opening the lightbox, so show the normal pointer, not the zoom cursor. */
.mgw-viewport.is-zoomable video.mgw-media[controls] { cursor: default; }
.mgw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(8,18,28,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base,220ms) var(--ease-standard);
}
.mgw-lightbox.is-open { opacity: 1; visibility: visible; }
.mgw-lightbox-inner {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  text-align: center;
}
.mgw-lightbox-media { max-width: 100%; max-height: 78vh; border-radius: var(--r-md, 10px); display: block; margin: 0 auto; }
.mgw-lightbox-cap { color: #fff; margin-top: 16px; font-weight: var(--fw-medium,500); }
.mgw-lightbox-cap .mgw-counter { color: rgba(255,255,255,.6); margin-left: 10px; }
.mgw-lightbox-cap .mgw-counter b { color: #fff; }
.mgw-lightbox .mgw-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; }
.mgw-lightbox .mgw-nav:hover { background: rgba(255,255,255,.24); color: #fff; }
.mgw-lightbox .mgw-prev { left: -68px; }
.mgw-lightbox .mgw-next { right: -68px; }
.mgw-lightbox-close {
  position: absolute;
  top: -52px; right: 0;
  width: 40px; height: 40px;
  border: none; border-radius: var(--r-circle,50%);
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 22px; cursor: pointer;
  display: grid; place-items: center;
}
.mgw-lightbox-close:hover { background: rgba(255,255,255,.24); }

/* ---- responsive ----
   Container queries (mgwss = the slideshow itself) handle the block's internal
   layout regardless of where it's placed. The lightbox is fixed to the viewport
   (appended to <body>), so it keeps a plain viewport media query. */

/* Two-column → stack (media on top, text below) once the block gets narrow.
   ~560px is roughly where a 16:9 stage + a readable text column stop coexisting. */
@container mgwss (max-width: 600px) {
  .mgw-slideshow[data-captions="twocolumn"] .mgw-frame { flex-direction: column; align-items: stretch; }
  .mgw-slideshow[data-captions="twocolumn"] .mgw-aside {
    flex: 1 1 auto;
    max-width: none;
    justify-content: flex-start;
    text-align: left;
  }
  /* keep the media first in the stack, caption beneath it */
  .mgw-slideshow[data-captions="twocolumn"] .mgw-stage { order: 0; }
  .mgw-slideshow[data-captions="twocolumn"] .mgw-aside { order: 1; }
}

/* Side thumbnail rail → horizontal strip below when the block is narrow. */
@container mgwss (max-width: 540px) {
  .mgw-frame { flex-wrap: wrap; }
  .mgw-thumbs.is-side { flex-direction: row; flex: 1 1 100%; order: 2; overflow-x: auto; }
}

/* Outside arrows shrink a touch on very narrow blocks so the stage keeps width. */
@container mgwss (max-width: 420px) {
  .mgw-nav.is-outside { width: 40px; height: 40px; }
  .mgw-title { font-size: var(--fs-h4, 18px); }
}

/* Lightbox is viewport-level — bring its arrows inward on small screens. */
@media (max-width: 640px) {
  .mgw-lightbox .mgw-prev { left: 8px; }
  .mgw-lightbox .mgw-next { right: 8px; }
  .mgw-lightbox-close { top: -46px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mgw-track,
  .mgw-slideshow[data-transition="fade"] .mgw-slide,
  .mgw-progress span { transition: none !important; }
}