/* Additional portfolio navigation. Keep gallery/Lightbox selectors separate.
 * Sixteen positions repeat in independent compositions for larger collections.
 * Empty grid tracks collapse when the actual packet count is smaller.
 */
html body .portfolio-intro.has-work-overview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  min-height: calc(100svh - 2rem);
  padding: clamp(72px, 10svh, 120px) 8% clamp(72px, 12svh, 160px);
  gap: clamp(24px, 4svh, 56px);
}
html body .portfolio-intro.has-work-overview h1 {
  text-align: right;
  font-weight: 700;
  margin: 0 0 0 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.portfolio-intro.has-work-overview .portfolio-intro-text {
  margin: 0;
  align-self: flex-start;
}
.portfolio-intro.has-work-overview .portfolio-intro-text:empty { display: none; }
.work-overview {
  width: min(100%, 1480px);
  margin: auto auto auto 0;
}
.work-overview-composition {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(8px, 1.2vw, 22px);
  align-items: center;
}
.work-overview-composition + .work-overview-composition { margin-top: clamp(32px, 6svh, 80px); }
.work-overview-composition::before {
  content: '';
  position: absolute;
  left: -9.524%;
  right: -9.524%;
  top: calc(50% - .5px);
  height: 1px;
  background: var(--muted);
  opacity: .4;
  pointer-events: none;
  z-index: -1;
}
.work-overview-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  position: relative;
  text-decoration: none;
}
.work-overview-link img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% * var(--overview-scale, 1));
  max-height: calc(clamp(160px, 24svh, 300px) * var(--overview-scale, 1));
  object-fit: contain;
  /* Native width/height attributes reserve each image's natural ratio. */
}
.work-overview-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
/* Inner pair first, then the composition grows towards its outer edges. */
.work-overview-link:nth-child(1) { grid-area: 2 / 3 / 4 / 4; }
.work-overview-link:nth-child(2) { grid-area: 1 / 4 / 4 / 6; }
.work-overview-link:nth-child(3) { grid-area: 4 / 3 / 7 / 5; }
.work-overview-link:nth-child(4) { grid-area: 4 / 5 / 6 / 6; }
.work-overview-link:nth-child(5) { grid-area: 3 / 6 / 6 / 7; }
.work-overview-link:nth-child(6) { grid-area: 2 / 2 / 4 / 3; }
.work-overview-link:nth-child(7) { grid-area: 6 / 5 / 8 / 6; }
.work-overview-link:nth-child(8) { grid-area: 4 / 2 / 6 / 3; }
.work-overview-link:nth-child(9) { grid-area: 3 / 1 / 5 / 2; }
.work-overview-link:nth-child(10) { grid-area: 6 / 6 / 8 / 7; }
.work-overview-link:nth-child(11) { grid-area: 2 / 7 / 4 / 8; }
.work-overview-link:nth-child(12) { grid-area: 4 / 7 / 6 / 8; }
.work-overview-link:nth-child(13) { grid-area: 1 / 6 / 3 / 7; }
.work-overview-link:nth-child(14) { grid-area: 7 / 3 / 9 / 4; }
.work-overview-link:nth-child(15) { grid-area: 8 / 5 / 10 / 6; }
.work-overview-link:nth-child(16) { grid-area: 6 / 1 / 8 / 2; }
html body .portfolio-page:has(.has-work-overview) .portfolio-packet {
  scroll-margin-top: calc(96px + var(--wp-admin--admin-bar--height, 0px));
}
@media (max-width: 1024px) {
  html body .portfolio-intro.has-work-overview {
    padding-inline: max(24px, 6vw);
    padding-top: clamp(104px, 14svh, 144px);
    padding-bottom: clamp(64px, 10svh, 120px);
    gap: clamp(24px, 4svh, 40px);
  }
  .work-overview { width: min(92%, 620px); }
  .work-overview-composition {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.8vw, 18px);
  }
  .work-overview-composition::before {
    top: 0;
    bottom: 0;
    left: calc(50% - .5px);
    right: auto;
    width: 1px;
    height: auto;
  }
  .work-overview-link img {
    max-height: calc(clamp(80px, 15svh, 150px) * var(--overview-scale, 1));
  }
  .work-overview-link:nth-child(1) { grid-area: 1 / 2 / 3 / 3; }
  .work-overview-link:nth-child(2) { grid-area: 3 / 2 / 5 / 4; }
  .work-overview-link:nth-child(3) { grid-area: 2 / 1 / 4 / 2; }
  .work-overview-link:nth-child(4) { grid-area: 1 / 3 / 3 / 4; }
  .work-overview-link:nth-child(5) { grid-area: 3 / 4 / 5 / 5; }
  .work-overview-link:nth-child(6) { grid-area: 5 / 2 / 7 / 3; }
  .work-overview-link:nth-child(7) { grid-area: 5 / 3 / 7 / 4; }
  .work-overview-link:nth-child(8) { grid-area: 4 / 1 / 6 / 2; }
  .work-overview-link:nth-child(9) { grid-area: 7 / 2 / 9 / 4; }
  .work-overview-link:nth-child(10) { grid-area: 6 / 1 / 8 / 2; }
  .work-overview-link:nth-child(11) { grid-area: 5 / 4 / 9 / 5; }
  .work-overview-link:nth-child(12) { grid-area: 8 / 1 / 10 / 2; }
  .work-overview-link:nth-child(13) { grid-area: 9 / 2 / 11 / 4; }
  .work-overview-link:nth-child(14) { grid-area: 9 / 4 / 11 / 5; }
  .work-overview-link:nth-child(15) { grid-area: 11 / 2 / 13 / 3; }
  .work-overview-link:nth-child(16) { grid-area: 11 / 3 / 13 / 4; }
}
@media (max-width: 360px) {
  .work-overview { width: 100%; }
  .work-overview-composition { column-gap: 8px; }
}

/* Desktop overview: each row shares an explicit horizontal axis.
 * Odd previews finish just above it; even previews straddle it centrally.
 * Rows have room for the full image above and below the axis. */
@media (min-width: 1025px) {
  .work-overview-composition {
    --overview-height: calc(clamp(160px, 24svh, 300px) * var(--overview-scale, 1));
    --overview-gap: clamp(16px, 2.4vw, 40px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: calc(var(--overview-height) * 1.5);
    gap: clamp(24px, 4svh, 48px) var(--overview-gap);
  }
  .work-overview-composition[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .work-overview-composition::before { display: none; }
  .work-overview-composition .work-overview-link:nth-child(n) {
    grid-area: auto;
    align-self: stretch;
    align-items: flex-start;
  }
  .work-overview-link::before {
    content: '';
    position: absolute;
    left: calc(var(--overview-gap) / -2);
    right: calc(var(--overview-gap) / -2);
    bottom: calc(var(--overview-height) / 2 - .5px);
    height: 1px;
    background: var(--muted);
    opacity: .4;
    pointer-events: none;
    z-index: -1;
  }
  .work-overview-link:nth-child(4n+1)::before { left: -42%; }
  .work-overview-link:nth-child(4n)::before { right: -42%; }
  .work-overview-composition[data-count="3"] .work-overview-link:first-child::before { left: -31%; }
  .work-overview-composition[data-count="3"] .work-overview-link:last-child::before { right: -31%; }
  .work-overview-composition .work-overview-link img {
    position: absolute;
    bottom: calc(var(--overview-height) / 2 + 8px);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--overview-height);
  }
  .work-overview-composition .work-overview-link:nth-child(even) img {
    bottom: calc(var(--overview-height) / 2);
    transform: translateY(50%);
  }
}

/* SKN 2.9.50: Nur die zusätzliche Übersicht auf beiden Desktop-Größen ausblenden.
 * Werkpakete und ihre Galerien bleiben unberührt; MV/TV behalten das Raster.
 */
@media (min-width: 1025px) {
  html body .portfolio-intro.has-work-overview > .work-overview {
    display: none;
  }
  html body .portfolio-intro.has-work-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    min-height: 0;
    padding: 65px 3% 48px;
    gap: 0 6%;
  }
  html body .portfolio-intro.has-work-overview h1 {
    grid-column: 2;
  }
  html body .portfolio-intro.has-work-overview .portfolio-intro-text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }
}
@media (min-width: 1600px) {
  html body .portfolio-intro.has-work-overview {
    padding-inline: 1.5%;
  }
}


/* Gleiche linke Textkante von Bereichsüberschrift und Beschreibung. */
html body .portfolio-page .portfolio-intro .portfolio-intro-text {
  grid-column: 1 / -1 !important;
  margin-left: var(--skn-intro-inset, 0px) !important;
  margin-right: 0 !important;
  width: calc(100% - var(--skn-intro-inset, 0px));
  max-width: none;
  min-width: 0;
  padding-inline: 0;
  text-align: left;
}
html body .portfolio-page .portfolio-intro .portfolio-intro-text > :is(p, ul, ol) {
  margin-left: 0;
}