/* LKS_GALLERY_ITEM_SPLIT_SMOOTH_RETURN
   Clean PhotoSwipe gallery CSS.
   Official gallery class: .ink-gallery
   Compatibility aliases kept: .photo-grid, .gallery-grid
   Does not modify locked header layout.

   Hover timing is controlled by JS class .is-hovering.
   The whole thumbnail link/wrapper scales; the image does not zoom inside the crop.
   Overlay return is smooth: overlay opacity transitions, not gradient background.
*/

.pswp {
  z-index: 2147483647 !important;
}

.ink-gallery,
.photo-grid,
.gallery-grid {
  --ink-gallery-columns: var(--lks-gallery-columns, 3);
  --ink-gallery-gap: var(--lks-gallery-gap, 18px);
  --ink-gallery-max-width: var(--lks-gallery-max-width, var(--content-max-width));

  --ink-gallery-muted-filter: var(--lks-gallery-muted-filter, sepia(60%) saturate(72%) contrast(92%) brightness(88%));
  --ink-gallery-hover-filter: var(--lks-gallery-hover-filter, sepia(0%) saturate(110%) contrast(101%) brightness(88%));

  --ink-gallery-overlay-opacity: var(--lks-gallery-overlay-opacity, 1);
  --ink-gallery-hover-overlay-opacity: var(--lks-gallery-hover-overlay-opacity, 0.56);

  --ink-gallery-vignette-strength: var(--lks-gallery-vignette-strength, 0.42);
  --ink-gallery-wash-opacity: var(--lks-gallery-wash-opacity, 0.10);

  --ink-gallery-shadow: var(--lks-gallery-shadow, 0 10px 24px rgba(0, 0, 0, 0.14));
  --ink-gallery-hover-shadow: var(--lks-gallery-hover-shadow, 0 14px 28px rgba(0, 0, 0, 0.17));

  display: grid;
  grid-template-columns: repeat(var(--ink-gallery-columns), minmax(0, 1fr));
  gap: var(--ink-gallery-gap);
  width: min(100%, var(--ink-gallery-max-width));
  margin: 34px auto;
  padding: 0;
  list-style: none;
}

.ink-gallery-2 { --ink-gallery-columns: 2; }
.ink-gallery-3 { --ink-gallery-columns: 3; }
.ink-gallery-4 { --ink-gallery-columns: 4; }
.ink-gallery-compact { --ink-gallery-gap: 10px; }
.ink-gallery-wide { --ink-gallery-max-width: 100%; }

.ink-gallery figure,
.photo-grid figure,
.gallery-grid figure {
  margin: 0;
}

/* TinyMCE / editor safety. */
.ink-gallery > p,
.photo-grid > p,
.gallery-grid > p {
  margin: 0 !important;
}

.ink-gallery > p:empty,
.photo-grid > p:empty,
.gallery-grid > p:empty {
  display: none !important;
}

/* Gallery links must not inherit global link hover/focus effects from style.css. */
.ink-gallery a,
.photo-grid a,
.gallery-grid a,
.ink-gallery a:hover,
.photo-grid a:hover,
.gallery-grid a:hover,
.ink-gallery a:focus,
.photo-grid a:focus,
.gallery-grid a:focus,
.ink-gallery a:active,
.photo-grid a:active,
.gallery-grid a:active,
.ink-gallery a:focus-visible,
.photo-grid a:focus-visible,
.gallery-grid a:focus-visible {
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.ink-gallery a,
.photo-grid a,
.gallery-grid a {
  display: block;
  position: relative;
  z-index: 0;
  overflow: hidden;
  line-height: 0;
  background: #000;
  box-shadow: var(--ink-gallery-shadow);
  transform: translateZ(0) scale(1);
  transform-origin: center center;
  transition:
    transform var(--lks-hover-transition-out, 0.60s) ease,
    box-shadow var(--lks-hover-transition-out, 0.60s) ease;
  isolation: isolate;
}

/* Default state = mouseout speed. */
.ink-gallery img,
.photo-grid img,
.gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 1 !important;
  filter: var(--ink-gallery-muted-filter) !important;
  transform: none !important;
  transition:
    filter var(--lks-hover-transition-out, 0.60s) ease,
    opacity var(--lks-hover-transition-out, 0.60s) ease;
  will-change: filter;
  outline: var(--ink-image-border-size, 2px) solid var(--ink-image-border-color, rgba(0, 0, 0, 0.46));
  outline-offset: calc(-1 * var(--ink-image-border-size, 2px));
  box-shadow: none !important;
}

/* Dark-only overlay.
   The gradient itself is static; only opacity changes. This makes mouseout smooth. */
.ink-gallery a::before,
.photo-grid a::before,
.gallery-grid a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--ink-gallery-overlay-opacity);
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, var(--ink-gallery-vignette-strength)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, var(--ink-gallery-wash-opacity))
    );
  transition: opacity var(--lks-hover-transition-out, 0.60s) ease;
}

/* Inner border stays stable and does not fade with the overlay. */
.ink-gallery a::after,
.photo-grid a::after,
.gallery-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 var(--ink-image-border-size, 2px) var(--ink-image-border-color, rgba(0, 0, 0, 0.46));
}

/* Fast hover-in. The whole thumbnail wrapper scales, including border/shadow. */
.ink-gallery a.is-hovering,
.photo-grid a.is-hovering,
.gallery-grid a.is-hovering,
.ink-gallery a:hover,
.photo-grid a:hover,
.gallery-grid a:hover {
  z-index: 5;
  box-shadow: var(--ink-gallery-hover-shadow);
  transform: translateZ(0) scale(var(--ink-gallery-hover-scale, 1.018));
  transition:
    transform var(--lks-hover-transition-in, 0s) ease,
    box-shadow var(--lks-hover-transition-in, 0s) ease;
}

.ink-gallery a.is-hovering::before,
.photo-grid a.is-hovering::before,
.gallery-grid a.is-hovering::before,
.ink-gallery a:hover::before,
.photo-grid a:hover::before,
.gallery-grid a:hover::before {
  opacity: var(--ink-gallery-hover-overlay-opacity);
  transition: opacity var(--lks-hover-transition-in, 0s) ease;
}

.ink-gallery a.is-hovering img,
.photo-grid a.is-hovering img,
.gallery-grid a.is-hovering img,
.ink-gallery a:hover img,
.photo-grid a:hover img,
.gallery-grid a:hover img {
  filter: var(--ink-gallery-hover-filter) !important;
  transform: none !important;
  transition:
    filter var(--lks-hover-transition-in, 0s) ease,
    opacity var(--lks-hover-transition-in, 0s) ease;
}

/* Keyboard focus is visible but does not apply a brighter thumbnail effect. */
.ink-gallery a:focus-visible,
.photo-grid a:focus-visible,
.gallery-grid a:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.42);
  outline-offset: 3px;
}

.ink-gallery a:focus:not(:hover):not(.is-hovering),
.photo-grid a:focus:not(:hover):not(.is-hovering),
.gallery-grid a:focus:not(:hover):not(.is-hovering),
.ink-gallery a:active:not(:hover):not(.is-hovering),
.photo-grid a:active:not(:hover):not(.is-hovering),
.gallery-grid a:active:not(:hover):not(.is-hovering) {
  box-shadow: var(--ink-gallery-shadow) !important;
  transform: translateZ(0) scale(1) !important;
}

.ink-gallery a:focus:not(:hover):not(.is-hovering)::before,
.photo-grid a:focus:not(:hover):not(.is-hovering)::before,
.gallery-grid a:focus:not(:hover):not(.is-hovering)::before,
.ink-gallery a:active:not(:hover):not(.is-hovering)::before,
.photo-grid a:active:not(:hover):not(.is-hovering)::before,
.gallery-grid a:active:not(:hover):not(.is-hovering)::before {
  opacity: var(--ink-gallery-overlay-opacity) !important;
}

.ink-gallery a:focus:not(:hover):not(.is-hovering) img,
.photo-grid a:focus:not(:hover):not(.is-hovering) img,
.gallery-grid a:focus:not(:hover):not(.is-hovering) img,
.ink-gallery a:active:not(:hover):not(.is-hovering) img,
.photo-grid a:active:not(:hover):not(.is-hovering) img,
.gallery-grid a:active:not(:hover):not(.is-hovering) img {
  filter: var(--ink-gallery-muted-filter) !important;
  transform: none !important;
}

.ink-gallery figcaption,
.photo-grid figcaption,
.gallery-grid figcaption {
  margin-top: 0.55em;
  font-size: 0.86em;
  line-height: 1.25;
  text-align: center;
  opacity: 0.75;
}

/* PhotoSwipe caption ------------------------------------------------------- */
.pswp__caption--lks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 1rem 1rem;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-family: var(--common-font), "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 1px;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0));
}

/* Content utility classes -------------------------------------------------- */
.ink-narrow {
  width: min(100%, var(--reading-max-width));
  margin-left: auto !important;
  margin-right: auto !important;
}

.ink-wide {
  width: min(100%, var(--content-max-width));
  margin-left: auto !important;
  margin-right: auto !important;
}

.ink-note {
  width: min(100%, var(--reading-max-width));
  margin: 1.4em auto;
  padding: 0.95em 1.1em;
  background: rgba(255, 255, 255, 0.26);
  border-left: 1px solid rgba(0, 0, 0, 0.34);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.055);
}

.ink-columns-2,
.ink-columns-3,
.ink-columns-4 {
  display: grid;
  gap: 1.2em 2.2em;
  width: min(100%, var(--content-max-width));
  margin-left: auto !important;
  margin-right: auto !important;
}

.ink-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ink-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ink-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 960px) {
  .ink-gallery,
  .photo-grid,
  .gallery-grid {
    --ink-gallery-columns: 2;
  }

  .ink-columns-3,
  .ink-columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ink-gallery,
  .photo-grid,
  .gallery-grid {
    --ink-gallery-columns: 1;
    --ink-gallery-gap: 14px;
  }

  .ink-columns-2,
  .ink-columns-3,
  .ink-columns-4 {
    grid-template-columns: 1fr;
  }
}