/* UVs Reels Embed Gallery - layout fix */

/* Desktop: force true 4-in-one-frame based on --cols (columns="4") */
.uvs-reg[data-layout='slider'] .uvs-reg-item{
  flex: 0 0 calc((100% - ((var(--cols,4) - 1) * var(--gap,14px))) / var(--cols,4)) !important;
  max-width: calc((100% - ((var(--cols,4) - 1) * var(--gap,14px))) / var(--cols,4)) !important;
  min-width: 0 !important;
}

/* Tablet: 2 items */
@media (max-width: 820px){
  .uvs-reg[data-layout='slider'] .uvs-reg-item{
    flex: 0 0 calc((100% - var(--gap,14px)) / 2) !important;
    max-width: calc((100% - var(--gap,14px)) / 2) !important;
    min-width: 0 !important;
  }
}

/* Mobile: 1 item per slide + prevent stretching by centering embed with max width */
@media (max-width: 640px){
  .uvs-reg[data-layout='slider'] .uvs-reg-item{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* remove “peek” feeling and avoid extra padding */
  .uvs-reg[data-layout='slider'] .uvs-reg-track{
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding: 0 !important;
  }

  /* Native Instagram embed: center + cap width to avoid 100% stretch look */
  .uvs-reg[data-mode='native'] blockquote.instagram-media,
  .uvs-reg[data-mode='native'] .instagram-media-rendered{
    max-width: min(360px, 92vw) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0 !important;
  }
}

/* Native embeds: allow shrink inside grid/slider cells (desktop too) */
.uvs-reg[data-mode='native'] blockquote.instagram-media,
.uvs-reg[data-mode='native'] .instagram-media-rendered{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Hide arrows when JS decides they’re not needed */
.uvs-reg.uvs-reg-nav-hidden .uvs-reg-arrow{ display:none !important; }

/* Center row when fewer items (desktop 1–3 reels looks clean) */
.uvs-reg.uvs-reg-centered .uvs-reg-track{ justify-content:center !important; }

/* Full-width guard: some themes/Elementor containers use flex centering which can shrink shortcodes.
   Force this widget to stretch to the available width so slider math stays correct. */
.uvs-reg{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  flex:1 1 100% !important;
  min-width:0 !important;
  align-self:stretch !important;
  transform:none !important;
  zoom:1 !important;
}

.uvs-reg .uvs-reg-slider,
.uvs-reg .uvs-reg-grid{
  width:100% !important;
}

.uvs-reg .uvs-reg-track{
  width:100% !important;
  max-width:100% !important;
}

/* Contained width (recommended): cap the visible slider/grid to a max width and center it */
.uvs-reg.uvs-reg-contained .uvs-reg-slider,
.uvs-reg.uvs-reg-contained .uvs-reg-grid{
  width:100% !important;
  max-width: var(--uvs-reg-maxw, 1200px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* Auto full-bleed when the shortcode is inside a narrow/boxed container on wide screens */
.uvs-reg.uvs-reg-fullbleed{
  width:100vw !important;
  max-width:100vw !important;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}

/* Keep inner pieces full width in full-bleed */
.uvs-reg.uvs-reg-fullbleed .uvs-reg-slider,
.uvs-reg.uvs-reg-fullbleed .uvs-reg-grid{
  width:100% !important;
}

.uvs-reg.uvs-reg-fullbleed .uvs-reg-track{
  width:100% !important;
  max-width:100% !important;
}


/* Ensure close (X) is visible on white button */
.uvs-reg-modal .uvs-reg-close{
  background:#fff !important;
  color:#000 !important;
  border:2px solid rgba(0,0,0,.65) !important;
}
.uvs-reg-modal .uvs-reg-close:hover{ filter:brightness(.96) !important; }
.uvs-reg-modal .uvs-reg-close:active{ transform:scale(.98) !important; }