.gallery { min-width: 0; }

.gallery__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.gallery__slide {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--c-bg-deep);
  transition: border-color 0.2s ease;
}

.gallery__slide:hover { border-color: var(--c-accent); }

.gallery__zoom {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: zoom-in;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery__zoom:hover .gallery__img { transform: scale(1.03); }

.gallery__hint {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sp-2);
  background-color: color-mix(in srgb, var(--c-bg-deep) 72%, transparent);
  color: var(--c-accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery__zoom:hover .gallery__hint,
.gallery__zoom:focus-visible .gallery__hint { opacity: 1; }

.gallery__hint svg {
  width: 18px;
  height: 18px;
}

.gallery__thumbs {
  display: none;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery__thumb {
  display: block;
  width: 60px;
  padding: 0;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--c-line-strong);
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.gallery__thumb:hover,
.gallery__thumb[aria-current="true"] {
  border-color: var(--c-accent);
  opacity: 1;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--sp-12) var(--sp-16);
  border: 0;
  background-color: color-mix(in srgb, var(--c-bg-deep) 96%, transparent);
  color: var(--c-text);
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.gallery__dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__dialog::backdrop { background: transparent; }

html:has(.gallery__dialog[open]) { overflow: hidden; }

.gallery__full {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gallery__close,
.gallery__step {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-image: var(--grad-card), var(--grad-card-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--c-text);
}

.gallery__close:hover,
.gallery__step:hover {
  background-image: var(--grad-card), var(--grad-card-edge-hover);
  color: var(--c-accent);
}

.gallery__close {
  top: var(--sp-4);
  right: var(--sp-4);
}

.gallery__step {
  top: 50%;
  transform: translateY(-50%);
}

.gallery__step--prev { left: var(--sp-4); }
.gallery__step--next { right: var(--sp-4); }
.gallery__step--prev svg { transform: scaleX(-1); }

@media (max-width: 700px) {
  .gallery__track {
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gallery__track::-webkit-scrollbar { display: none; }

  .gallery__slide {
    flex: 0 0 100%;
    max-height: var(--gallery-h);
    scroll-snap-align: start;
  }

  .gallery__thumbs { display: flex; }

  .gallery__dialog { padding: var(--sp-16) var(--sp-2); }

  .gallery__step {
    top: auto;
    bottom: var(--sp-4);
    transform: none;
  }
}