/**
 * Servene Gallery – Frontend
 * wp_enqueue_style handle: servene-gallery
 * Root: .servene-gallery (Modifier: --grid, --carousel, --animated7, --portfolio, --infinite_circular)
 */

.servene-gallery {
  --servene-surface: #ffffff;
  --servene-text: #111111;
  --servene-muted: #333333;
  --servene-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}

.servene-gallery *,
.servene-gallery *::before,
.servene-gallery *::after {
  box-sizing: border-box;
}

/* —— Leer / Grid —— */
.servene-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.servene-gallery-item {
  margin: 0;
}

.servene-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* —— Karussell —— */
.servene-gallery-carousel-scene,
.servene-gallery-carousel-a3d {
  display: grid;
}

.servene-gallery-carousel-scene {
  width: 100%;
  overflow: hidden;
  perspective: 35em;
  mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
  -webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
}

.servene-gallery-carousel-a3d {
  place-self: center;
  transform-style: preserve-3d;
  animation: servene-gallery-ry 32s linear infinite;
  min-height: 18rem;
}

@keyframes servene-gallery-ry {
  to {
    transform: rotateY(1turn);
  }
}

.servene-gallery-carousel-card {
  --w: 17.5em;
  --ba: calc(1turn / var(--n));
  grid-area: 1 / 1;
  width: var(--w);
  aspect-ratio: 7 / 10;
  object-fit: cover;
  border-radius: 1.5em;
  backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--ba)))
    translateZ(calc(-1 * ((0.5 * var(--w) + 0.5em) / tan(0.5 * var(--ba)))));
}

@media (prefers-reduced-motion: reduce) {
  .servene-gallery-carousel-a3d {
    animation-duration: 128s;
  }
}

/* —— Animated 7 —— */
.servene-gallery--animated7 .servene-gallery-animated7 {
  --size: min(60vmin, 400px);
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 10px #0002, 0 20px 40px -20px #0004;
  width: var(--size);
  height: var(--size);
  background: var(--servene-surface);
  border: 6px solid var(--servene-surface);
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  gap: 6px;
}

.servene-gallery--animated7 .servene-gallery-animated7 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes servene-gallery-animated7-move-horizontal {
  to {
    object-position: 100% 0;
  }
}

@keyframes servene-gallery-animated7-move-vertical {
  to {
    object-position: 0 100%;
  }
}

@keyframes servene-gallery-animated7-shrink-vertical {
  to {
    height: 0;
  }
}

@keyframes servene-gallery-animated7-shrink-horizontal {
  to {
    width: 0;
  }
}

@keyframes servene-gallery-animated7-grow-horizontal {
  to {
    width: 100%;
  }
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  animation: servene-gallery-animated7-move-horizontal 8.5s 0.5s 1,
    servene-gallery-animated7-shrink-horizontal 2s 9s ease-in 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  animation: servene-gallery-animated7-shrink-horizontal 2s 11s 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / 3;
  align-self: end;
  object-position: 0 0;
  animation: servene-gallery-animated7-move-vertical 5s 1s 1,
    servene-gallery-animated7-shrink-vertical 3s 5s 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(4) {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 0;
  justify-self: center;
  align-self: start;
  animation: servene-gallery-animated7-grow-horizontal 2.25s 11s 1,
    servene-gallery-animated7-move-horizontal 4s 14s 1,
    servene-gallery-animated7-shrink-vertical 2s 18s 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(5) {
  grid-column: 1;
  grid-row: 2;
  width: 0;
  justify-self: start;
  align-self: end;
  animation: servene-gallery-animated7-grow-horizontal 2.5s 7.5s 1,
    servene-gallery-animated7-move-vertical 4s 12.5s 1,
    servene-gallery-animated7-shrink-horizontal 2s 17s 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(6) {
  grid-column: 2;
  grid-row: 2;
  width: 0;
  justify-self: end;
  align-self: end;
  animation: servene-gallery-animated7-grow-horizontal 2s 8s 1,
    servene-gallery-animated7-shrink-horizontal 2s 17s 1;
  animation-fill-mode: forwards;
}

.servene-gallery--animated7 .servene-gallery-animated7 img:nth-child(7) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  width: 0;
  justify-self: end;
  align-self: end;
  object-position: 0 0;
  animation: servene-gallery-animated7-grow-horizontal 2s 20s 1,
    servene-gallery-animated7-move-horizontal 16s 21.5s 1;
  animation-fill-mode: forwards;
}

/* —— Portfolio —— */
.servene-gallery-portfolio .servene-gallery-portfolio-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.servene-gallery-portfolio .servene-gallery-portfolio-trigger {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.servene-gallery-portfolio .servene-gallery-portfolio-trigger img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

.servene-gallery-portfolio .servene-gallery-portfolio-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.servene-gallery-portfolio .servene-gallery-portfolio-trigger:hover::after {
  opacity: 1;
}

.servene-gallery-portfolio .servene-gallery-portfolio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.servene-gallery-portfolio .servene-gallery-portfolio-overlay.is-open {
  display: flex;
}

.servene-gallery-portfolio .servene-gallery-portfolio-port {
  width: min(1100px, 100%);
  background: #fafafa;
  border-radius: 0.75rem;
  position: relative;
  max-height: 90vh;
  overflow: auto;
  padding: 1rem;
}

.servene-gallery-portfolio .servene-gallery-portfolio-close {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}

.servene-gallery-portfolio .servene-gallery-portfolio-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.servene-gallery-portfolio .servene-gallery-portfolio-description {
  padding: 1.25rem 0.5rem 0.5rem;
}

.servene-gallery-portfolio .servene-gallery-portfolio-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.8rem;
  line-height: 1.2;
}

.servene-gallery-portfolio .servene-gallery-portfolio-text {
  margin: 0;
  color: var(--servene-muted);
  white-space: pre-wrap;
}

.servene-gallery-portfolio .servene-gallery-portfolio-detail-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

@media (max-width: 900px) {
  .servene-gallery-portfolio .servene-gallery-portfolio-content {
    grid-template-columns: 1fr;
  }
}

/* —— Infinite circular —— */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.servene-gallery-infscroll {
  --k: 0;
  --dir: 0;
  --r: calc((2 + var(--dir)) / 3);
  --w: clamp(12em, min(50vh, 40vw), 16em);
  --z: calc(1.25 * -0.5 * var(--w) / tan(0.5turn / var(--n)));
  position: relative;
  color: #dedede;
  font: clamp(0.625em, 2.5vmin, 1.1em) / 1.25 saira, sans-serif;
  overflow: hidden;
  border-radius: 0.75rem;
  background: transparent;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.servene-gallery-infscroll.is-dragging {
  cursor: grabbing;
}

.servene-gallery-infscroll * {
  margin: 0;
  box-sizing: border-box;
}

.servene-gallery-infscroll .servene-gallery-infscroll-shell {
  position: relative;
  min-height: min(80vh, 680px);
  display: grid;
  place-items: center;
  perspective: 50em;
  background: transparent;
}

/* filter: url() pro Instanz — wird per Inline-<style> am Endpunkt gesetzt */

.servene-gallery-infscroll .servene-gallery-infscroll-assembly {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  width: 100%;
  display: grid;
  place-items: center;
  transform: translateZ(var(--z))
    rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc((var(--k) + 0.5) * -1turn));
}

.servene-gallery-infscroll .servene-gallery-infscroll-card,
.servene-gallery-infscroll .servene-gallery-infscroll-card-head,
.servene-gallery-infscroll .servene-gallery-infscroll-card figure {
  grid-area: 1 / 1;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card {
  --j: calc(var(--i) / var(--n));
  --hov: 0;
  width: var(--w);
  aspect-ratio: var(--r);
  transform-style: preserve-3d;
  transform: rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc(var(--j) * 1turn))
    translateZ(var(--z)) rotate(calc(var(--dir) * 0.5turn));
  display: grid;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card:hover,
.servene-gallery-infscroll .servene-gallery-infscroll-card:focus-within {
  --hov: 1;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card-head,
.servene-gallery-infscroll .servene-gallery-infscroll-card figure {
  --ang: calc(-45deg + var(--hov) * 180deg);
  overflow: hidden;
  position: relative;
  border: solid 4px transparent;
  border-radius: 0.5em;
  backface-visibility: hidden;
  box-shadow: 5px 5px 13px rgba(0, 0, 0, 0.9);
  background: var(--url) 50% / cover padding-box,
    linear-gradient(#666 0 0) padding-box,
    repeating-conic-gradient(
        from var(--ang),
        transparent 0% 15%,
        #f48c06 20% 30%,
        transparent 35% 50%
      )
      border-box #121212;
  background-blend-mode: multiply, normal, normal;
  transition: transform 0.35s ease, --ang 0.35s ease;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card-head {
  display: grid;
  place-content: end start;
  padding: 0.6rem;
  transform: rotateY(calc((1 + var(--hov)) * 0.5turn));
}

.servene-gallery-infscroll .servene-gallery-infscroll-card h2 {
  font-size: 1rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.servene-gallery-infscroll .servene-gallery-infscroll-card figure {
  display: grid;
  transform: rotateY(calc(var(--hov) * 0.5turn));
}

.servene-gallery-infscroll .servene-gallery-infscroll-card img,
.servene-gallery-infscroll .servene-gallery-infscroll-card figcaption {
  grid-area: 1 / 1;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--r);
  object-fit: cover;
  object-position: 50% 50%;
}

.servene-gallery-infscroll .servene-gallery-infscroll-card figcaption {
  align-self: end;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.22);
  color: var(--servene-text);
  font: max(0.75rem, 0.72em) caveat, cursive;
  backdrop-filter: blur(4px) brightness(1.5);
}

@media (max-width: 680px) {
  .servene-gallery-infscroll {
    --w: clamp(12em, 78vw, 16em);
  }

  .servene-gallery-infscroll .servene-gallery-infscroll-shell {
    min-height: min(78vh, 680px);
  }
}