/* Zahntechnik showcase — statisch, kein Scroll-JS */

.showcase {
  overflow-x: clip;
}

.showcase-panel {
  padding: clamp(3rem, 8vw, 7rem) 0;
}

.showcase-panel__inner {
  position: relative;
}

.showcase-panel__media-wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .showcase-panel__media-wrap {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }
}

.showcase-panel__media-wrap picture {
  display: block;
  width: 100%;
}

.showcase-panel__media {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
}

.showcase-panel__body {
  position: relative;
  z-index: 2;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  max-width: var(--maxw);
  width: 100%;
  margin-top: -3rem;
  padding-top: 4rem;
  color: #fff;
  mix-blend-mode: difference;
}

.showcase-panel__body h2 {
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-tight);
}

[data-theme="peppel"] .showcase-panel__body h2 {
  font-weight: 800;
}

[data-theme="stubenvoll"] .showcase-panel__body h2 {
  font-weight: 300;
}

.showcase-panel__body p {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.55;
  color: inherit;
}

@supports not (mix-blend-mode: difference) {
  .showcase-panel__body {
    mix-blend-mode: normal;
    color: var(--text);
    margin-top: var(--space-tight);
    padding-top: 0;
  }

  .showcase-panel__body p {
    color: var(--mute);
  }
}

.showcase-panel:last-child {
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

/* ---- desktop ---- */
@media (min-width: 1024px) {
  .showcase-panel {
    padding: clamp(4rem, 10vw, 9rem) 0;
  }

  .showcase-panel__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    max-width: calc(var(--maxw) + 12rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .showcase-panel__media {
    aspect-ratio: 4 / 5;
    max-height: min(72svh, 640px);
  }

  .showcase-panel__body {
    margin-top: 0;
    padding: 0;
    margin-left: 0;
    margin-right: auto;
    mix-blend-mode: normal;
    color: var(--text);
  }

  .showcase-panel__body p {
    color: var(--mute);
  }

  .showcase-panel:nth-child(even) .showcase-panel__media-wrap {
    order: 2;
  }

  .showcase-panel:nth-child(even) .showcase-panel__body {
    order: 1;
    margin-right: 0;
    margin-left: auto;
  }
}