/*! Boholweb MediaSpark — Copyright (c) 2026 BoholwebWP (https://boholwebwp.com) — MIT License. */

.ms-picture { display: contents; }

/* ── Galleries ─────────────────────────────────────────────────────────── */
.ms-gallery { --ms-cols: 3; --ms-gap: 8px; margin: 1.5em 0; }
.ms-gallery .ms-item { margin: 0; position: relative; overflow: hidden; }
.ms-gallery .ms-item a { display: block; color: inherit; }
.ms-gallery img { display: block; width: 100%; height: auto; max-width: none; }
.ms-gallery figcaption { font-size: .875em; line-height: 1.4; padding: .4em .1em 0; opacity: .85; }
.ms-gallery a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.ms-gallery a img { transition: transform .35s ease, filter .35s ease; }
.ms-gallery a:hover img { transform: scale(1.03); filter: brightness(1.04); }

.ms-layout-grid { display: grid; grid-template-columns: repeat(var(--ms-cols), minmax(0, 1fr)); gap: var(--ms-gap); }
.ms-layout-grid img { aspect-ratio: 1 / 1; object-fit: cover; }

.ms-layout-masonry { column-count: var(--ms-cols); column-gap: var(--ms-gap); }
.ms-layout-masonry .ms-item { break-inside: avoid; margin-bottom: var(--ms-gap); }

.ms-layout-justified { display: flex; flex-wrap: wrap; gap: var(--ms-gap); }
.ms-layout-justified .ms-item { flex: calc(var(--ms-ratio, 1) * 220px) 1 0; min-width: 0; }
.ms-layout-justified img { height: 220px; object-fit: cover; }
.ms-layout-justified::after { content: ""; flex-grow: 999; }

.ms-layout-slider { position: relative; }
.ms-layout-slider .ms-track { display: flex; gap: var(--ms-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.ms-layout-slider .ms-item { flex: 0 0 calc((100% - (var(--ms-cols) - 1) * var(--ms-gap)) / var(--ms-cols)); scroll-snap-align: start; }
.ms-layout-slider img { aspect-ratio: 4 / 3; object-fit: cover; }
.ms-slider-nav { display: flex; justify-content: flex-end; gap: .5em; margin-top: .5em; }
.ms-slider-nav button { font: inherit; font-size: 1.4em; line-height: 1; width: 2em; height: 2em; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.ms-slider-nav button:hover, .ms-slider-nav button:focus-visible { opacity: 1; }

@media (max-width: 782px) {
  .ms-layout-grid, .ms-layout-masonry { --ms-cols: 2 !important; }
  .ms-layout-slider .ms-item { flex-basis: 80%; }
  .ms-layout-justified img { height: 160px; }
  .ms-layout-justified .ms-item { flex-basis: calc(var(--ms-ratio, 1) * 160px); }
}

.ms-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ms-gallery-empty { padding: 1em; border: 1px dashed currentColor; opacity: .7; }

/* ── Lightbox ──────────────────────────────────────────────────────────── */
.ms-lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 10, 14, .94); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2147483000; }
.ms-lightbox:not([open]) { display: none; }
.ms-lightbox::backdrop { background: rgba(10, 10, 14, .94); }
.ms-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 92vw; max-height: 92vh; }
.ms-lightbox img { max-width: 92vw; max-height: calc(92vh - 3.5em); width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: opacity .2s ease; }
.ms-lightbox img.ms-loading { opacity: .25; }
.ms-lightbox figcaption { margin-top: .75em; text-align: center; font-size: .95rem; line-height: 1.4; max-width: 60em; }
.ms-lightbox .ms-count { position: absolute; top: 1rem; left: 1.25rem; font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.ms-lightbox button { position: absolute; background: rgba(255, 255, 255, .08); color: #fff; border: 0; border-radius: 50%; width: 3rem; height: 3rem;
  font-size: 1.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ms-lightbox button:hover, .ms-lightbox button:focus-visible { background: rgba(255, 255, 255, .22); outline: 2px solid #fff; outline-offset: 2px; }
.ms-lightbox .ms-close { top: .75rem; right: .75rem; }
.ms-lightbox .ms-prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.ms-lightbox .ms-next { right: .75rem; top: 50%; transform: translateY(-50%); }
.ms-lightbox .ms-lb-tools { position: absolute; top: .75rem; right: 4.5rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 9rem); }
.ms-lightbox .ms-lb-tools:empty { display: none; }
.ms-lightbox .ms-lb-tools button { position: static; transform: none; width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
.ms-lightbox.ms-single .ms-prev, .ms-lightbox.ms-single .ms-next, .ms-lightbox.ms-single .ms-count { display: none; }
html.ms-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ms-gallery a img, .ms-lightbox img { transition: none; }
  .ms-gallery a:hover img { transform: none; }
  .ms-layout-slider .ms-track { scroll-behavior: auto; }
}