/*
 * Gallery item — SD-70
 * Figma: content modules / gallery item (node 6944-54038)
 * Clickable image; hover/active zoom to 105%; active darken overlay;
 * focus-visible triple ring.
 */

.dk-gallery-item {
  display: block;
  position: relative;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
}

.dk-gallery-item-media {
  display: block;
  overflow: hidden;
}

.dk-gallery-item .dk-img {
  transition: transform 0.3s ease;
}

.dk-gallery-item:hover .dk-img,
.dk-gallery-item:active .dk-img {
  transform: scale(1.05);
}

/* Active: slight darken overlay */
.dk-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--dk-color-black);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.dk-gallery-item:active::after {
  opacity: 0.1;
}

.dk-gallery-item:focus-visible {
  outline: none;
  /* Figma focus state: black 2px, white 4px, blue 8px rings */
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

@media (prefers-reduced-motion: reduce) {
  .dk-gallery-item .dk-img,
  .dk-gallery-item::after {
    transition: none;
  }
}