/* Solarhead photo gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  isolation: isolate;
}
.gallery-thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  z-index: 0;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity 220ms ease; }
.gallery-thumb:hover,
.gallery-thumb:focus-visible { z-index: 5; transform: scale(1.2); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.gallery-thumb:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
.gallery-thumb.is-placeholder { visibility: hidden; pointer-events: none; }

.gallery-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.gallery-pagination[hidden] { display: none; }
.gallery-pagination > button { position: relative; border: 0; background: transparent; color: inherit; width: 2.5rem; height: 2.5rem; padding: 0; font-size: 0; cursor: pointer; opacity: .65; transition: opacity 150ms ease, transform 150ms ease; }
.gallery-pagination > button::before { content: ""; position: absolute; top: 50%; left: 50%; width: .7rem; height: .7rem; border: solid currentColor; border-width: 0 3px 3px 0; }
.gallery-pagination [data-gallery-page-prev]::before { transform: translate(-35%,-50%) rotate(135deg); }
.gallery-pagination [data-gallery-page-next]::before { transform: translate(-65%,-50%) rotate(-45deg); }
.gallery-pagination [data-gallery-page-first]::before,
.gallery-pagination [data-gallery-page-first]::after,
.gallery-pagination [data-gallery-page-last]::before,
.gallery-pagination [data-gallery-page-last]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .62rem;
  height: .62rem;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
}
.gallery-pagination [data-gallery-page-first]::before { left: 42%; transform: translate(-50%,-50%) rotate(135deg); }
.gallery-pagination [data-gallery-page-first]::after { left: 62%; transform: translate(-50%,-50%) rotate(135deg); }
.gallery-pagination [data-gallery-page-last]::before { left: 38%; transform: translate(-50%,-50%) rotate(-45deg); }
.gallery-pagination [data-gallery-page-last]::after { left: 58%; transform: translate(-50%,-50%) rotate(-45deg); }
.gallery-pagination > button:hover:not(:disabled) { opacity: 1; transform: scale(1.15); }
.gallery-pagination > button:disabled { opacity: .3; cursor: default; }
.gallery-page-list { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.gallery-page-list button { min-width: 2rem; padding: .25rem .45rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: .5; transition: opacity 150ms ease, border-color 150ms ease; }
.gallery-page-list button:hover,
.gallery-page-list button[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; }
.gallery-page-ellipsis { min-width: 1.5rem; text-align: center; opacity: .55; }

.gallery-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; padding: 1.25rem; background: rgba(0,0,0,.9); opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 180ms ease; }
.gallery-lightbox.is-open { opacity: 1; visibility: visible; }
.gallery-lightbox__figure { justify-self: center; max-width: calc(100vw - 9rem); margin: 0; padding: 0; border: 0; background: transparent; text-align: center; }
.gallery-lightbox__figure img { display: block; max-width: 100%; max-height: calc(100vh - 5rem); max-height: calc(100dvh - 5rem); width: auto; height: auto; margin: auto; padding: 0; border: 0; background: transparent; opacity: 1; transform: translateX(0) scale(1); transition: opacity 180ms ease, transform 180ms ease; }
.gallery-lightbox__figure img.is-leaving-left { opacity: 0; transform: translateX(-2rem) scale(.985); }
.gallery-lightbox__figure img.is-leaving-right { opacity: 0; transform: translateX(2rem) scale(.985); }
.gallery-lightbox__figure img.is-entering-left { opacity: 0; transform: translateX(-2rem) scale(.985); }
.gallery-lightbox__figure img.is-entering-right { opacity: 0; transform: translateX(2rem) scale(.985); }
.gallery-lightbox__figure img.is-entering-scale { opacity: 0; transform: scale(.94); }
.gallery-lightbox__figure figcaption { margin-top: .65rem; color: #fff; }
.gallery-lightbox__arrow,
.gallery-lightbox__close { border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.gallery-lightbox__arrow { position: absolute; top: 50%; z-index: 2; width: 4.5rem; height: 5.5rem; padding: 0; font-size: 0; opacity: .75; transition: opacity 150ms ease, transform 150ms ease; }
.gallery-lightbox__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 1.45rem; height: 1.45rem; border: solid currentColor; border-width: 0 5px 5px 0; }
.gallery-lightbox__arrow--prev::before { transform: translate(-35%,-50%) rotate(135deg); }
.gallery-lightbox__arrow--next::before { transform: translate(-65%,-50%) rotate(-45deg); }
.gallery-lightbox__arrow--prev { left: .75rem; transform: translateY(-50%); }
.gallery-lightbox__arrow--next { right: .75rem; transform: translateY(-50%); }
.gallery-lightbox__arrow--prev:hover,
.gallery-lightbox__arrow--next:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.gallery-lightbox__close { position: absolute; top: .75rem; right: .75rem; width: 4.5rem; height: 4.5rem; display: grid; place-items: center; padding: 0; font-size: 3.5rem; line-height: 1; opacity: .75; transition: opacity 150ms ease, transform 150ms ease; }
.gallery-lightbox__close:hover { opacity: 1; transform: scale(1.08); }
body.gallery-open { overflow: hidden; }

@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-lightbox { grid-template-columns: minmax(0,1fr); min-height: 100dvh; padding: .5rem; }
  .gallery-lightbox__figure { max-width: calc(100vw - 1rem); }
  .gallery-lightbox__figure img { max-height: calc(100dvh - 3.5rem); }
  .gallery-lightbox__arrow { width: 3.5rem; height: 4.5rem; padding: .35rem; }
  .gallery-lightbox__arrow::before { width: 1rem; height: 1rem; border-width: 0 4px 4px 0; }
  .gallery-lightbox__arrow--prev { left: 0; }
  .gallery-lightbox__arrow--next { right: 0; }
  .gallery-lightbox__close { top: 0; right: 0; width: 3.5rem; height: 3.5rem; font-size: 2.75rem; }
  .gallery-pagination { margin-top: .75rem; }
  .gallery-pagination { gap: .15rem; }
  .gallery-pagination > button { width: 2rem; }
  .gallery-page-list { gap: 0; min-width: 0; }
  .gallery-page-list button { min-width: 1.55rem; padding-inline: .15rem; }
  .gallery-page-ellipsis { min-width: 1rem; }
}
@media (max-width: 640px) and (hover: none) {
  .gallery-thumb:hover { z-index: 0; transform: none; box-shadow: none; }
}
