/* ------------------------------------------------------------------
   Frame wall (poziom 2)
   Ściana kadrów za sekcją usług. Kolumny przesuwają się z różną
   prędkością wraz z naturalnym scrollem — to parallaks, NIE scroll-jacking:
   tempo przewijania strony pozostaje nietknięte.
   ------------------------------------------------------------------ */

.wall-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.frame-wall {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  padding: 0 1.2rem;
  pointer-events: none;
  opacity: .22;
}

.wall-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  will-change: transform;
}

.wall-col img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .6rem;
  display: block;
  filter: grayscale(.35) contrast(1.05);
}

/* Przyciemnienie, żeby tekst na wierzchu był czytelny. Bez tego ściana
   zjada kontrast nagłówków. */
.wall-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgb(10 9 8 / .55) 0%, rgb(10 9 8 / .88) 70%),
    linear-gradient(to bottom, rgb(10 9 8 / .95), rgb(10 9 8 / .6) 25%, rgb(10 9 8 / .6) 75%, rgb(10 9 8 / .95));
}

/* Treść sekcji nad ścianą i przyciemnieniem. */
.wall-host > *:not(.frame-wall):not(.wall-scrim) {
  position: relative;
  z-index: 2;
}

/* Wąskie ekrany: mniej kolumn, ściana nieruchoma (JS jej nie przelicza). */
@media (max-width: 900px) {
  .frame-wall { grid-template-columns: repeat(2, 1fr); opacity: .16 }
}

@media (prefers-reduced-motion: reduce) {
  .wall-col { transform: none !important }
}