.works2-page {
  box-sizing: border-box;
  min-height: 100svh;
  padding: var(--available-top, 80px) var(--gutter) 100px;
}

.works2-list {
  width: min(var(--works2-width, 82vw), var(--works2-max-width, 1600px));
  max-width: 100%;
  margin: 0 auto;
}

.works2-project {
  margin: 0 0 var(--works2-project-gap, 160px);
  text-align: var(--works2-align, left);
}

.works2-project:last-child { margin-bottom: 50px; }

.works2-title {
  margin: 0 0 var(--works2-title-gap, 12px);
  font-family: var(--font-title);
  font-size: var(--works2-title-size, 48px);
  font-weight: normal;
  line-height: 1;
  overflow-wrap: anywhere;
}

.works2-title a,
.works2-media {
  color: inherit;
  text-decoration: none;
}

.works2-media {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--works2-radius, 0px);
}

.works2-media picture { display: block; width: 100%; }

.works2-image,
.works2-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.works2-video { background: transparent; }

.works2-text {
  width: min(100%, var(--content-width));
  margin-top: var(--works2-text-gap, 12px);
  margin-left: var(--works2-text-margin-left, 0);
  margin-right: var(--works2-text-margin-right, auto);
  font-family: var(--font-text);
  font-size: var(--works2-text-size, 16px);
  text-align: var(--works2-align, left);
}

.works2-project[style] { --works2-unused: 0; }
/* Keyed on data-align (set by works-overview.php), not on the inline style
   string: scripts that call style.setProperty() make the browser re-serialise
   the style attribute ("--works2-align: center"), which broke [style*=] matches. */
.works2-page[data-align="center"] .works2-text { margin-left: auto; margin-right: auto; }
.works2-page[data-align="right"] .works2-text { margin-left: auto; margin-right: 0; }

.works2-text > :first-child { margin-top: 0; }
.works2-text > :last-child { margin-bottom: 0; }

/* Keep title feedback, but do not fade/whiten preview media on hover. */
.works2-title a:hover,
.works2-title a:focus-visible { opacity: .65; }

.works2-media:hover,
.works2-media:focus-visible { opacity: 1; }

@media (max-width: 650px) {
  .works2-page { padding: var(--available-top, 78px) 12px 68px; }
  .works2-list { width: 100%; }
  .works2-project { margin-bottom: min(var(--works2-project-gap, 160px), 110px); }
  .works2-project:last-child { margin-bottom: 100px; }
  .works2-title { font-size: min(var(--works2-title-size, 48px), 11vw); }

  /* Mobile: project subtitle is always horizontally centered, regardless
     of the desktop alignment configured in the Panel. */
  .works2-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* No subtitle means no subtitle row/spacing is kept in the layout. */
  .works2-project--no-text .works2-text {
    display: none;
    margin: 0;
  }
}


/* ==================================================
   WORKS2 — HEADER CONTENT PROTECTION
   On the WORKS overview only, extend the existing global
   header blur/fade farther downward so scrolling project
   titles/media do not visually compete with the header.
   ================================================== */

body:has(.works2-page) .site-header::before {
  bottom: -30px;
  opacity: .62;
  background: rgba(255, 255, 255, .10);

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 8%,
    rgba(0,0,0,.55) 17%,
    #000 27%,
    #000 62%,
    rgba(0,0,0,.62) 72%,
    rgba(0,0,0,.32) 82%,
    rgba(0,0,0,.12) 91%,
    transparent 100%
  ) !important;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.18) 8%,
    rgba(0,0,0,.55) 17%,
    #000 27%,
    #000 62%,
    rgba(0,0,0,.62) 72%,
    rgba(0,0,0,.32) 82%,
    rgba(0,0,0,.12) 91%,
    transparent 100%
  ) !important;
}

@media (max-width: 650px) {
  body:has(.works2-page) .site-header::before {
    bottom: -26px;
  }
}

/* ==================================================
   MOBILE FILTER — horizontal touch scrolling
   ================================================== */

@media (max-width: 650px) {
  .works2-filter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
  }

  .works2-filter::-webkit-scrollbar {
    display: none;
  }

  .works2-filter__button {
    flex: 0 0 auto;
  }
}

/* Desktop: Das letzte Video endet am Seitenende zwischen Filterleiste und
   Logo (Filter-Unterkante ca. 93 px, Logo-Oberkante ca. 71 px über dem
   unteren Rand, Mitte = 82 px).
   Der Abstand unter dem letzten SICHTBAREN Projekt wird über einen negativen
   Listen-Abstand aufgehoben; so stimmt es auch, wenn der Filter das letzte
   Projekt ausblendet. */
@media (min-width: 651px) {
  .works2-page {
    padding-bottom: 82px;
  }

  .works2-list {
    margin-bottom: calc(var(--works2-project-gap, 160px) * -1);
  }

  .works2-project:last-child {
    margin-bottom: var(--works2-project-gap, 160px);
  }

  .works2-list.is-single-filter-result {
    margin-bottom: 0;
  }
}

/* Mobile filter: native horizontal swipe/drag */
@media (max-width: 650px) {
  .works2-filter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    pointer-events: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .works2-filter::-webkit-scrollbar {
    display: none;
  }

  .works2-filter__button {
    flex: 0 0 auto;
  }
}