/* NPC — gallery styles extracted from active Custom CSS RTF.
   Preserve loading, positioning, caption, and navigation behavior. */


/* NPC — Stage galleries 20% smaller
   on mobile landscape only */

@media screen and (orientation: landscape)
  and (max-height: 500px)
  and (max-width: 950px) {

  .post-gallery-wrap.stage {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}




/* NPC Desktop Stage Gallery H3 Titles Tighter Leading */

@media screen and (min-width: 1025px) {
  .post-gallery-wrap.stage
  .title.caption.skinset-main.nv-skin h3 {
    letter-spacing: 0px !important;
  }
}


/* =======PORTFOLIO GALLERIES ===== */

/* Caption Styling */

@media screen and (min-width: 1025px) {
  .post-gallery-wrap.stage
  .stage-slider > .panel.current
  .caption-wrap.caption-hover {
    position: fixed !important;
    top: auto !important;
    bottom: 100px !important;
    transform: none !important;
    z-index: 100 !important;
  }
}

/* Light gray caption backgrounds */
.post-gallery-wrap.stage
.title.caption.skinset-main.nv-skin,
.post-gallery-wrap.stage
.content.caption.skinset-main.nv-skin {
    background-color: #f8f8f8 !important;
}

/* Headline right spacing */
.post-gallery-wrap.stage
.title.caption.skinset-main.nv-skin h3 {
    padding-right: 30px !important;
    box-sizing: border-box;
}

/* Body copy right spacing */
.post-gallery-wrap.stage
.content.caption.skinset-main.nv-skin {
    padding-right: 30px !important;
    box-sizing: border-box;
}

/* Vertical Centering */

@media screen and (min-width: 1025px) {

  body:not(.home)
  .vc_row:has(.post-gallery-wrap.stage)
  > .wpb_column > .vc_column-inner {

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-height: calc(100vh - 50px) !important;
  }

  /* Preserve the wrapper's full width */
  body:not(.home)
  .vc_row:has(.post-gallery-wrap.stage)
  > .wpb_column > .vc_column-inner
  > .wpb_wrapper {

    width: 100% !important;
  }
}

/* Reserve gallery space immediately */
body:not(.home) .post-gallery-wrap.stage {
  width: 100%;
  aspect-ratio: 2600 / 1362;
}

/* Prevent the stage container from expanding or collapsing during loading */
body:not(.home)
.post-gallery-wrap.stage > .slider-inner-wrap {
  width: 100%;
  height: auto !important;
  aspect-ratio: 2600 / 1362;
  animation: none !important;
  transition: none !important;
}

/* Hide slides until ePix selects the active one */
body:not(.home)
.post-gallery-wrap.stage
.stage-slider:not(:has(> .panel.current)) {
  visibility: hidden !important;
}


/* Hide Stage gallery navigation arrows on mobile only */
@media screen and (max-width: 767px) {
    .post-gallery-wrap.stage .slidernav {
        display: none !important;
    }
}

/* Keep gallery rows above surrounding content */
.vc_row:has(.post-gallery-wrap.gallery-wrap) {
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}

/* Prevent gallery from clipping navigation dots */
.post-gallery-wrap.gallery-wrap {
  position: relative !important;
  z-index: 101 !important;
  overflow: visible !important;
}

/* Move carousel dots up 43px */
.post-gallery-wrap.gallery-wrap > .control-wrap {
  transform: translateY(-43px) !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Preserve original dot alignment */
.post-gallery-wrap.gallery-wrap .control-panel {
  transform: none !important;
}

/* Keep slides contained */
.post-gallery-wrap.gallery-wrap > .slider-inner-wrap {
  overflow: hidden !important;
}

/* Carousel Dot Colors */

/* Unselected dots — Gray */
.gallery-wrap .control-panel ul li:not(.activeSlide) a,
.gallery-wrap .control-panel ul li:not(.activeSlide) a::before,
.gallery-wrap .control-panel ul li:not(.activeSlide) a:hover::before,
.gallery-wrap .control-panel ul li:not(.activeSlide) a:focus::before {
  color: #cccccc !important;
}

/* Selected dot — Nick Porter Creative Blue */
.gallery-wrap .control-panel ul li.activeSlide a,
.gallery-wrap .control-panel ul li.activeSlide a::before,
.gallery-wrap .control-panel ul li.activeSlide a:hover::before,
.gallery-wrap .control-panel ul li.activeSlide a:focus::before {
  color: #437fc1 !important;
}

/* No shadows on external-link overlays */
a.action-icons.link-icon,
a.action-icons.link-icon .fa,
a.action-icons.link-icon .fa::before {
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}


/* Hide only the chain icon; keep the full-image external link clickable. */
a.action-icons.link-icon i.fa-link {
  display: none !important;
}

/* Make the otherwise invisible overlay discoverable when tabbing by keyboard. */
a.action-icons.link-icon:focus-visible {
  outline: 3px solid #437FC1 !important;
  outline-offset: -3px;
}


/* Only bottom-left 250px × 25px of gallery images clickable */
.title-wrap > a.action-icons.link-icon {
    -webkit-clip-path: inset(
        calc(100% - 25px)
        calc(100% - 250px)
        0
        0
    );
    clip-path: inset(
        calc(100% - 25px)
        calc(100% - 250px)
        0
        0
    );
}

/* NPC — Mobile Stage Gallery Top Spacing */

@media screen and (max-width: 767px) {
  body:not(.home) .post-gallery-wrap.stage {
    margin-top: 15px !important;
  }
}


/* ==========================================
   NPC MOBILE STAGE GALLERY CAPTIONS
   60% screen width
   Bottom-right positioning
   60px from bottom
   24px headline / 9px body copy
   Light gray background #F7F7F7
   ========================================== */

@media only screen and (max-width: 767px) {

  /* Caption positioning and width */
  .post-gallery-wrap.stage
  .stage-slider > .panel.current
  .caption-wrap.caption-hover {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    bottom: 60px !important;
    left: auto !important;
    right: 16px !important;
    width: 60vw !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 100 !important;
  }

  /* Shared caption styling */
  .post-gallery-wrap.stage
  .title.caption.skinset-main.nv-skin,
  .post-gallery-wrap.stage
  .content.caption.skinset-main.nv-skin {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    box-sizing: border-box !important;
    background-color: #f7f7f7 !important;
    margin: 0 !important;
  }

  /* Heading — tight bottom spacing */
  .post-gallery-wrap.stage
  .title.caption.skinset-main.nv-skin {
    padding: 8px 12px 2px !important;
  }

  /* Headline text — 20px */
  .post-gallery-wrap.stage
  .title.caption.skinset-main.nv-skin h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Body copy — 8px, tighter line spacing */
  .post-gallery-wrap.stage
  .content.caption.skinset-main.nv-skin {
    font-size: 8px !important;
    line-height: 1.3 !important;
    padding: 0 12px 10px !important;
  }
}



/* ==========================================
   NPC STAGE GALLERIES
   Hide custom captions in mobile landscape
   ========================================== */

@media screen and (orientation: landscape)
       and (max-width: 1024px)
       and (max-height: 500px) {

  .post-gallery-wrap.stage
  .stage-slider > .panel.current
  .caption-wrap.caption-hover {
    display: none !important;
  }

}


/* =========================================================
   NPC — ALWAYS-VISIBLE DESKTOP CAROUSEL / STAGE ARROWS
   Only the left/right navigation is affected. Do not change
   the dots or hover-triggered captions / gallery overlays.
   Phones and tablets keep their existing behavior.
   ========================================================= */
@media screen and (min-width: 1025px) {
  .post-gallery-wrap.gallery-wrap .slidernav-left,
  .post-gallery-wrap.gallery-wrap .slidernav-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .post-gallery-wrap.gallery-wrap .slidernav-left .slidernav,
  .post-gallery-wrap.gallery-wrap .slidernav-right .slidernav,
  .post-gallery-wrap.gallery-wrap .slidernav-left a,
  .post-gallery-wrap.gallery-wrap .slidernav-right a {
    visibility: visible !important;
    opacity: 1 !important;
  }
}