/* ============================================================
   GaBe v17 — Gallery Glass Frames
   Premium glass-effect frames for gallery thumbnails.
   Keeps existing lightbox / click-to-enlarge behavior intact.
   ============================================================ */

section[aria-label] .grid > .group {
  position: relative !important;
  padding: 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.05) 24%,
      rgba(255,255,255,.02) 54%,
      rgba(122,87,38,.035) 100%
    ) !important;

  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);

  box-shadow:
    0 18px 36px rgba(0,0,0,.14),
    0 5px 14px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.20) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 -12px 22px rgba(0,0,0,.16) inset !important;

  transition:
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease,
    background .35s ease !important;
}

/* top highlight for the glass frame */
section[aria-label] .grid > .group::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 1px;
  height: 30px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  opacity: .95;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.07) 45%,
      rgba(255,255,255,0) 100%
    );
}

/* crisp edge definition */
section[aria-label] .grid > .group::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.055) inset,
    1px 0 1px rgba(255,255,255,.035) inset,
    -1px 0 1px rgba(255,255,255,.03) inset,
    0 -1px 0 rgba(255,255,255,.05) inset;
}

/* inner image well */
section[aria-label] .grid > .group > div {
  position: relative;
  z-index: 1;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(10,10,12,.36) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 12px 24px rgba(0,0,0,.10) inset !important;
}

/* hover / focus luxury glow */
section[aria-label] .grid > .group:hover,
section[aria-label] .grid > .group:focus-within {
  border-color: rgba(224,182,94,.76) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.15) 0%,
      rgba(255,246,224,.07) 22%,
      rgba(214,171,92,.045) 58%,
      rgba(120,80,30,.055) 100%
    ) !important;

  box-shadow:
    0 22px 42px rgba(0,0,0,.16),
    0 7px 20px rgba(0,0,0,.10),
    0 1px 0 rgba(255,255,255,.24) inset,
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 -14px 25px rgba(0,0,0,.18) inset,
    0 0 20px rgba(223,181,96,.12),
    0 0 42px rgba(184,136,61,.08) !important;

  transform: translateY(-2px) !important;
}

section[aria-label] .grid > .group:hover::after,
section[aria-label] .grid > .group:focus-within::after {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    1px 0 1px rgba(255,255,255,.04) inset,
    -1px 0 1px rgba(255,255,255,.04) inset,
    0 -1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(226,183,96,.18);
}

section[aria-label] .grid > .group:hover > div,
section[aria-label] .grid > .group:focus-within > div {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(226,183,96,.11),
    0 0 24px rgba(226,183,96,.08) !important;
}

/* keep lightbox interaction obvious */
section[aria-label] img[data-lightbox] {
  cursor: zoom-in !important;
}

/* slightly stronger focus accessibility */
section[aria-label] img[data-lightbox]:focus-visible {
  outline: 2px solid rgba(228,186,98,.9) !important;
  outline-offset: 4px !important;
}

/* mobile refinement */
@media (max-width: 767px) {
  section[aria-label] .grid > .group {
    padding: 9px !important;
    border-radius: 16px !important;
  }

  section[aria-label] .grid > .group::before {
    left: 9px;
    right: 9px;
    height: 24px;
  }

  section[aria-label] .grid > .group > div {
    border-radius: 11px !important;
  }
}