/* ═══════════════════════════════
   SHOWCASE SECTEURS — parallax CSS
   ═══════════════════════════════ */
.showcase-section {
  overflow: hidden;
}

/* ── Mobile: fixed-image trick (background-attachment:fixed broken on iOS) ── */

.showcase-viewport {
  position: relative;
  width: 100%;
  height: 25vh;
  overflow: hidden;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
}

.showcase-viewport__img {
  position: fixed;
  top: 15vh;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
}

/* ── Tablet+: use background-attachment: fixed (works on desktop browsers) ── */

@media (min-width: 768px) {
  .showcase-viewport {
    height: 35vh;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    clip-path: none;
    -webkit-clip-path: none;
  }

  .showcase-viewport__img {
    display: none;
  }
}

@media (min-width: 1024px) {
  .showcase-viewport {
    height: 40vh;
  }
}