/* Foto-Uebersicht: quadratische Kacheln, aber jedes Foto bleibt komplett sichtbar. */
#photo-area .pgrid {
  align-items: stretch !important;
}

#photo-area .pgrid .pitem,
#photo-area .pgrid.pgrid-zoom-saved .pitem,
#photo-area .pgrid .pitem.is-portrait,
#photo-area .pgrid .pitem.is-landscape,
#photo-area .pgrid .pitem.is-square,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-landscape,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-square,
#photo-area .pgrid .pitem.is-local-pending,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-local-pending {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
}

[data-theme="light"] #photo-area .pgrid .pitem::after,
[data-theme="light"] #photo-area .pgrid.pgrid-zoom-saved .pitem::after {
  background: linear-gradient(
    180deg,
    rgba(237, 242, 250, 0) 0%,
    rgba(237, 242, 250, .10) 58%,
    rgba(237, 242, 250, .22) 100%
  ) !important;
}

#photo-area .pgrid .pitem .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pthumb,
#photo-area .pgrid .pitem.is-portrait .pthumb,
#photo-area .pgrid .pitem.is-landscape .pthumb,
#photo-area .pgrid .pitem.is-square .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-portrait .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-landscape .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-square .pthumb,
#photo-area .pgrid .pitem.is-local-pending .pthumb,
#photo-area .pgrid.pgrid-zoom-saved .pitem.is-local-pending .pthumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
}

#photo-area .pgrid .pitem .pthumb.is-loading:not(.is-ready) {
  opacity: 0 !important;
  visibility: hidden !important;
}

#photo-area .pgrid .pitem .pthumb-loading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .75rem !important;
  background: var(--surf2) !important;
  color: var(--txt2) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  pointer-events: none !important;
  transition: opacity .12s ease, visibility .12s ease !important;
}

#photo-area .pgrid .pitem .pthumb.is-ready + .pthumb-loading,
#photo-area .pgrid .pitem .pthumb.is-error + .pthumb-loading {
  opacity: 0 !important;
  visibility: hidden !important;
}

#photo-area .pgrid .pitem .pfoot,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot {
  position: absolute !important;
  left: .56rem !important;
  right: .56rem !important;
  bottom: .56rem !important;
  inset-block-start: auto !important;
  z-index: 4 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#photo-area .pgrid .pitem .pnum,
#photo-area .pgrid .pitem .pactions,
#photo-area .pgrid .pitem .pact-ic,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pnum,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pactions,
#photo-area .pgrid.pgrid-zoom-saved .pitem .pact-ic {
  pointer-events: auto !important;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  #photo-area .pgrid .pitem .pfoot,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pfoot {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset-block-start: 0 !important;
    inset-block-end: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 4 !important;
  }

  #photo-area .pgrid .pitem .pnum,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pnum {
    position: absolute !important;
    left: .48rem !important;
    bottom: .48rem !important;
  }

  #photo-area .pgrid .pitem .pactions,
  #photo-area .pgrid.pgrid-zoom-saved .pitem .pactions {
    position: absolute !important;
    top: .44rem !important;
    right: .44rem !important;
    bottom: auto !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  #photo-area,
  #photo-area .pgrid,
  #photo-area .pitem,
  #photo-area .pthumb {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto;
  }

  #photo-area .pact-ic,
  #photo-area [data-action] {
    touch-action: manipulation !important;
  }
}