/* WebOn Mixed Media Masonry v1.2 — frontend styles scoped to this gallery. */
.webon-mmg-gallery {
  width: 100%; max-width: var(--webon-mmg-max, 100%);
  margin-inline: auto; box-sizing: border-box;
}
.webon-mmg-gallery *, .webon-mmg-gallery *::before, .webon-mmg-gallery *::after { box-sizing: border-box; }
.webon-mmg-gallery.webon-mmg-layout-masonry > .webon-mmg-columns {
  column-count: var(--webon-mmg-desktop, 3);
  column-gap: var(--webon-mmg-xgap, 14px);
}
/* The gap is padding on the figure, rather than margin-bottom. This cannot collapse
   against the following multi-column item or be swallowed by column fragmentation. */
.webon-mmg-gallery .webon-mmg-columns > figure.webon-mmg-cell {
  display: block; position: relative; padding: 0 0 var(--webon-mmg-ygap, 14px) !important;
  margin: 0 !important; width: 100%; min-width: 0;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  overflow: visible !important; break-inside: avoid; -webkit-column-break-inside: avoid;
}
.webon-mmg-gallery .webon-mmg-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--webon-mmg-radius, 12px);
  background: var(--webon-mmg-tile-color, #193b2c);
  isolation: isolate;
}
.webon-mmg-gallery .webon-mmg-media { position: relative; display: block; width: 100%; line-height: 0; overflow: hidden; }
.webon-mmg-gallery .webon-mmg-image-link {
  display: block; position: relative; width: 100%; line-height: 0;
  cursor: zoom-in; overflow: hidden;
}
.webon-mmg-gallery .webon-mmg-img,
.webon-mmg-gallery .webon-mmg-video {
  display: block; width: 100%; max-width: 100%; height: auto; padding:0; margin: 0;
  border: none; border-radius: 0; background: var(--webon-mmg-tile-color, #193b2c);
  object-fit: var(--webon-mmg-fit, cover);
}
.webon-mmg-gallery .webon-mmg-video { cursor: default; }
.webon-mmg-gallery[data-click-action="pause"] .webon-mmg-video:not([controls]) { cursor: pointer; }
.webon-mmg-gallery .webon-mmg-video-open {
  position: absolute; z-index: 2; inset: 0; display: block;
  width: 100%; height: 100%; border: 0; background: transparent !important;
  padding: 0; margin: 0; opacity: 1; cursor: zoom-in; border-radius:0;
  box-shadow: none; color: transparent; -webkit-appearance: none; appearance:none;
}
.webon-mmg-gallery .webon-mmg-image-link:focus-visible,
.webon-mmg-gallery .webon-mmg-video-open:focus-visible,
.webon-mmg-gallery .webon-mmg-video:focus-visible { outline: 3px solid #8fc344; outline-offset: -3px; }
.webon-mmg-gallery.webon-mmg-zoom .webon-mmg-img { transition: transform .45s ease; }
@media (hover:hover) {
  .webon-mmg-gallery.webon-mmg-zoom .webon-mmg-image-cell:hover .webon-mmg-img { transform: scale(1.035); }
}
/* Uniform tile proportions, used for masonry only. */
.webon-mmg-gallery.webon-mmg-layout-masonry.webon-mmg-ratio-square .webon-mmg-media { aspect-ratio: 1/1; }
.webon-mmg-gallery.webon-mmg-layout-masonry.webon-mmg-ratio-landscape .webon-mmg-media { aspect-ratio: 4/3; }
.webon-mmg-gallery.webon-mmg-layout-masonry.webon-mmg-ratio-portrait .webon-mmg-media { aspect-ratio: 3/4; }
.webon-mmg-gallery.webon-mmg-layout-masonry.webon-mmg-ratio-wide .webon-mmg-media { aspect-ratio: 16/9; }
.webon-mmg-gallery.webon-mmg-layout-masonry:not(.webon-mmg-ratio-natural) .webon-mmg-media > img,
.webon-mmg-gallery.webon-mmg-layout-masonry:not(.webon-mmg-ratio-natural) .webon-mmg-media > .webon-mmg-image-link,
.webon-mmg-gallery.webon-mmg-layout-masonry:not(.webon-mmg-ratio-natural) .webon-mmg-media > video {
  width: 100%; height: 100%; position: absolute; inset: 0;
}
.webon-mmg-gallery.webon-mmg-layout-masonry:not(.webon-mmg-ratio-natural) .webon-mmg-image-link img { width:100%; height:100%; object-fit:var(--webon-mmg-fit,cover); }
.webon-mmg-gallery .webon-mmg-caption {
  color: var(--webon-mmg-caption-color, #fff); font-size: 14px; line-height: 1.45;
}
.webon-mmg-gallery.webon-mmg-caption-overlay .webon-mmg-caption {
  position: absolute; inset: auto 0 0; z-index: 3;
  padding: 30px 12px 12px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.76));
  pointer-events: none; opacity: 0; transform: translateY(7px); transition: opacity .2s ease, transform .2s ease;
}
.webon-mmg-gallery.webon-mmg-caption-overlay .webon-mmg-cell:hover .webon-mmg-caption,
.webon-mmg-gallery.webon-mmg-caption-overlay .webon-mmg-cell:focus-within .webon-mmg-caption { opacity: 1; transform: none; }
.webon-mmg-gallery.webon-mmg-caption-below .webon-mmg-caption { padding: 10px 12px; }
/* Justified: JS calculates row heights/widths based on natural media proportions. */
.webon-mmg-gallery.webon-mmg-layout-justified > .webon-mmg-columns {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start;
  gap: var(--webon-mmg-ygap, 14px) var(--webon-mmg-xgap, 14px);
}
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-columns > figure.webon-mmg-cell {
  flex: 0 0 auto; width: auto; padding: 0 !important; margin: 0 !important;
  /* Fallback until the first JS layout */
  aspect-ratio: var(--webon-mmg-cell-ratio, 4/3);
}
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-tile,
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-media,
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-image-link {
  width: 100%; height: 100%;
}
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-img,
.webon-mmg-gallery.webon-mmg-layout-justified .webon-mmg-video {
  width:100%; height:100%; object-fit:var(--webon-mmg-fit,cover);
}
.webon-mmg-gallery.webon-mmg-layout-justified.webon-mmg-caption-below .webon-mmg-tile {display:flex;flex-direction:column;}
.webon-mmg-gallery.webon-mmg-layout-justified.webon-mmg-caption-below .webon-mmg-media {flex:1 1 auto;min-height:0;}
.webon-mmg-gallery.webon-mmg-layout-justified.webon-mmg-caption-below .webon-mmg-caption { flex:0 0 auto; }
@media (max-width: 1024px) {
  .webon-mmg-gallery.webon-mmg-layout-masonry > .webon-mmg-columns { column-count: var(--webon-mmg-tablet, 2); }
}
@media (max-width: 767px) {
  .webon-mmg-gallery.webon-mmg-layout-masonry > .webon-mmg-columns { column-count: var(--webon-mmg-mobile, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .webon-mmg-gallery .webon-mmg-img, .webon-mmg-gallery .webon-mmg-caption { transition: none !important; transform: none !important; }
}
/* v1.4: transparent top-layer dialog. The native video controls are part of the player;
   no popup card, backdrop-colored frame, title, caption, or counter. */
.webon-mmg-gallery .webon-mmg-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: white;
  overflow: hidden !important;
  outline: 0 !important;
}
.webon-mmg-gallery .webon-mmg-dialog::backdrop {
  background: rgba(0,0,0,.84) !important;
  backdrop-filter: none !important;
}
.webon-mmg-gallery .webon-mmg-dialog:not([open]) { display: none !important; }
.webon-mmg-gallery .webon-mmg-dialog-inner,
.webon-mmg-gallery .webon-mmg-dialog-stage {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
}
.webon-mmg-gallery .webon-mmg-dialog-stage img,
.webon-mmg-gallery .webon-mmg-dialog-stage video {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: min(94vw,var(--webon-mmg-dialog-max,1120px));
  max-height: 88vh;
  max-height: 88dvh;
  padding: 0 !important;
  margin: auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
  pointer-events: auto;
}
.webon-mmg-gallery .webon-mmg-dialog-stage video { background: transparent !important; }
.webon-mmg-gallery .webon-mmg-dialog-stage [hidden] { display:none !important; }
.webon-mmg-gallery .webon-mmg-dialog button {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
  pointer-events: auto;
}
.webon-mmg-gallery .webon-mmg-dialog button:hover,
.webon-mmg-gallery .webon-mmg-dialog button:focus-visible { background:rgba(0,0,0,.65); color:#fff; }
.webon-mmg-gallery .webon-mmg-dialog button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.webon-mmg-gallery .webon-mmg-dialog button[hidden] { display:none !important; }
.webon-mmg-gallery .webon-mmg-close {
  top: max(10px,env(safe-area-inset-top));
  right: max(12px,env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  font-family: Arial,sans-serif;
  font-size: 32px;
  font-weight: normal;
}
.webon-mmg-gallery .webon-mmg-prev,
.webon-mmg-gallery .webon-mmg-next {
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; font-size: 32px;
}
.webon-mmg-gallery .webon-mmg-prev { left: max(8px,env(safe-area-inset-left)); }
.webon-mmg-gallery .webon-mmg-next { right: max(8px,env(safe-area-inset-right)); }
.webon-mmg-gallery .webon-mmg-dialog.webon-mmg-showing-video .webon-mmg-prev,
.webon-mmg-gallery .webon-mmg-dialog.webon-mmg-showing-video .webon-mmg-next { display:none !important; }
@media(max-width:767px) {
  .webon-mmg-gallery .webon-mmg-dialog-stage img,
  .webon-mmg-gallery .webon-mmg-dialog-stage video {
    max-width: 96vw;
    max-height: 86vh;
    max-height: 86dvh;
  }
  .webon-mmg-gallery .webon-mmg-close {width:36px;height:36px;font-size:29px;}
  .webon-mmg-gallery .webon-mmg-prev,.webon-mmg-gallery .webon-mmg-next {width:30px;height:36px;font-size:27px;}
}