/* ============================================================
   GaBe v18 — Ultra Luxury Gallery Glow
   Full glass-frame illumination inspired by the premium CTA button.
   Keeps lightbox / click-to-enlarge behavior intact.
   ============================================================ */

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

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.045) 18%,
      rgba(35,26,18,.30) 58%,
      rgba(19,13,10,.50) 100%) !important;

  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);

  box-shadow:
    0 20px 42px rgba(0,0,0,.18),
    0 8px 22px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 -16px 28px rgba(0,0,0,.16) inset,
    0 0 0 1px rgba(133,98,48,.08),
    0 0 18px rgba(151,113,48,.06) !important;

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

/* Full illuminated glass frame background */
section[aria-label] .grid > .group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 1;

  background:
    radial-gradient(140% 90% at 50% -12%, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 58%),
    radial-gradient(48% 100% at 0% 50%, rgba(255,199,110,.10) 0%, rgba(255,199,110,0) 70%),
    radial-gradient(48% 100% at 100% 50%, rgba(255,199,110,.10) 0%, rgba(255,199,110,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 34%, rgba(203,154,76,.05) 100%);
}

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

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.16) inset,
    0 -1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(182,135,60,.08),
    0 0 20px rgba(190,145,72,.06);
}

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

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

/* Hover/focus: the WHOLE frame glows, not just the edge */
section[aria-label] .grid > .group:hover,
section[aria-label] .grid > .group:focus-within {
  border-color: rgba(233,195,117,.82) !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,244,221,.11) 16%,
      rgba(218,173,90,.10) 50%,
      rgba(86,56,20,.18) 100%) !important;

  box-shadow:
    0 26px 50px rgba(0,0,0,.20),
    0 10px 28px rgba(0,0,0,.12),
    0 1px 0 rgba(255,255,255,.26) inset,
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 -18px 34px rgba(0,0,0,.18) inset,
    0 0 0 1px rgba(235,192,107,.18),
    0 0 24px rgba(238,198,119,.22),
    0 0 52px rgba(196,143,58,.18),
    0 0 88px rgba(151,104,33,.14) !important;

  transform: translateY(-2px);
  filter: saturate(1.05);
}

section[aria-label] .grid > .group:hover::before,
section[aria-label] .grid > .group:focus-within::before {
  background:
    radial-gradient(145% 92% at 50% -14%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 22%, rgba(255,255,255,0) 58%),
    radial-gradient(60% 120% at 0% 50%, rgba(255,209,128,.18) 0%, rgba(255,209,128,0) 72%),
    radial-gradient(60% 120% at 100% 50%, rgba(255,209,128,.18) 0%, rgba(255,209,128,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,242,212,.07) 28%, rgba(222,175,92,.14) 100%);
}

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,.085) inset,
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 0 0 1px rgba(236,191,107,.22),
    0 0 24px rgba(236,191,107,.16),
    0 0 48px rgba(192,142,56,.10);
}

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(236,191,107,.14),
    0 0 28px rgba(236,191,107,.10) !important;
}

section[aria-label] img[data-lightbox] {
  cursor: zoom-in !important;
}

section[aria-label] img[data-lightbox]:focus-visible {
  outline: 2px solid rgba(236,191,107,.95) !important;
  outline-offset: 4px !important;
}

@media (max-width: 767px) {
  section[aria-label] .grid > .group {
    padding: 11px !important;
    border-radius: 18px !important;
  }

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