/* =============================================
   REALIZACJE — Scroll Parallax Column Gallery
   Used on: hero.html, oferta-okna.html
   ============================================= */
.realizacje {
  background-color: var(--dark-bg);
  padding: 95px 0 48px;
  position: relative;
  overflow: hidden;
}

.realizacje__container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---- Header area ---- */
.realizacje__header {
  max-width: var(--max-width-wide);
  margin: 0 auto 115px;
  padding: 0 24px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  align-items: start;
}

.realizacje__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--white);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  grid-column: 1;
  justify-self: start;
}

.realizacje__label::before { content: "// "; }
.realizacje__label { text-transform: capitalize; }

.realizacje__heading {
  font-family: var(--font-family);
  font-size: 66px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0;
  grid-column: 1;
}

.realizacje__heading span {
  color: inherit;
}

.realizacje__subheading {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(249, 246, 244, 0.5);
  max-width: 380px;
  margin: 0;
  grid-column: 2;
  justify-self: end;
  align-self: start;
}

/* ---- 7-Column Parallax Grid ---- */
.realizacje__columns {
  display: grid;
  /* 7 columns: fixed px widths — overflow hidden on .realizacje hides edges */
  /* Waskie kolumny (2 i 5) 0.51fr -> 0.66fr: karta 162x289 -> 211x375 (+30%).
     Kolumny SZEROKIE zostaja nietkniete (357px) — cala roznica idzie w SZEROKOSC
     siatki (2150 -> 2250px), wiec skrajne zdjecia sa wypchniete dalej poza kadr.
     NIE odbieraj tych pikseli kolumnom szerokim: przy stalej szerokosci siatki
     karta kolumny 6 (5 kart + parallax 650px) nie moze zejsc ponizej 336px, bo
     pod ostatnia karta odslania sie ciemna dziura — a i tak nie o to chodzilo. */
  grid-template-columns: 1.12fr 0.66fr 1.12fr 1.12fr 0.66fr 1.12fr 1.12fr;
  gap: 7px;
  padding: 0;
  width: 2250px;
  margin-left: calc(50% - 1125px);  /* centers 2250px grid in any viewport */
  height: 1050px;
  overflow: hidden;
  position: relative;
  /* Mask: fade out bottom edge only */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 88%,
    transparent 100%
  );
}

/* Rounded-corner overlay — covers top edge of the grid columns */
.realizacje__header::after {
  content: '';
  position: absolute;
  bottom: -135px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw + 480px);
  height: 20px;
  background: var(--dark-bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 3;
  pointer-events: none;
}

.realizacje__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  will-change: transform;
}

/* Even columns (2, 4, 6) start offset down — JS shifts them up on scroll */
.realizacje__col:nth-child(even) {
  transform: translateY(0px);
}

/* ---- Card (image wrapper) ---- */
.realizacje__card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  /* Default: square */
  aspect-ratio: 1 / 1;
  background: #2a2c2e;
  border: none;
  flex-shrink: 0;
}

/* Columns 2 and 5 — portrait 9:16 */
.realizacje__col:nth-child(2) .realizacje__card,
.realizacje__col:nth-child(5) .realizacje__card {
  aspect-ratio: 9 / 16;
}

.realizacje__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- CTA button ---- */
.realizacje__cta-wrapper {
  text-align: center;
  padding: 78px 24px 95px;
}

.ihb--realizacje {
  font-size: 19px;
  padding: 18px 44px;
}

/* =============================================
   REVEAL — kaskada wejscia sekcji
   Kolejnosc (zyczenie klienta): label → heading + subheading RAZEM →
   [zdjecia CELOWO bez animacji — maja wlasny parallax] → przycisk CTA na koncu.

   Ruch jest przepisany 1:1 z wejscia hero na stronie glownej (0.7s ease-out,
   30px) — te same tokeny co why-us.css v63, services.css v37, showroom.css v63.
   NIE wracaj tu do `--reveal-ease`: to expo-out, ktory upycha ~90% drogi w ~20%
   czasu i czyta sie jako szarpniecie, a nie jako spokojne wejscie.
   KIERUNKI (v30): label i naglowek wjezdzaja Z LEWEJ, podtytul Z PRAWEJ —
   czyli kazdy z blizszej krawedzi (na desktopie stoja w gridzie `1fr 1fr` po
   przeciwnych stronach), a caly lewy blok wchodzi spojnie z jednej strony.
   Przycisk CTA zostaje na wjezdzie Z DOLU. Zaden element
   nie startuje z ujemnym translateY (zasada klienta: nic nie wjezdza z gory),
   a poziomy ruch nie robi przewijania w bok, bo `.realizacje` ma
   `overflow: hidden` (regula bazowa, linia 9).
   Strojenie tempa: zmieniaj TYLKO te cztery wartosci.
   ============================================= */
.realizacje {
  --rz-reveal-dur: 0.7s;
  --rz-ease: ease-out;
  --rz-step: 0.25s;
  --rz-shift: 30px;
}

/* `.section-fade` zostaje na sekcji WYLACZNIE jako trigger dla `.visible`
   z common.js — wlasny fade calej sekcji jest tu wygaszony, bo animuja sie
   pojedyncze elementy. (0,2,0) bije `.section-fade` (0,1,0) z base.css
   niezaleznie od kolejnosci w zrodle. Nie usuwaj tej klasy z HTML „bo sekcja
   i tak sie nie fade'uje" — to jedyny trigger kaskady. Wygaszenie jest tez
   wymogiem technicznym: `transform` na sekcji przesunalby uklad odniesienia
   parallaxu kolumn i progu chowania navbara (oba czytaja rect z main.js). */
.realizacje.section-fade {
  opacity: 1;
  transform: none;
  transition: none;
}

.realizacje.section-fade .realizacje__label,
.realizacje.section-fade .realizacje__heading,
.realizacje.section-fade .realizacje__subheading {
  opacity: 0;
  transform: translateY(var(--rz-shift));
  transition: opacity var(--rz-reveal-dur) var(--rz-ease),
              transform var(--rz-reveal-dur) var(--rz-ease);
}

/* Kierunek: label i naglowek z lewej (caly lewy blok wchodzi z tej samej
   strony), podtytul z prawej. Reguly maja te sama specyficznosc (0,3,0) co
   zbiorczy stan ukryty wyzej, wiec wygrywaja WYLACZNIE kolejnoscia w zrodle
   — nie przenos ich ponad tamta regule.
   Regula odslaniajaca ma (0,4,0), wiec dalej przebija wszystkie. */
.realizacje.section-fade .realizacje__label,
.realizacje.section-fade .realizacje__heading {
  transform: translateX(calc(-1 * var(--rz-shift)));
}

.realizacje.section-fade .realizacje__subheading {
  transform: translateX(var(--rz-shift));
}

.realizacje.section-fade.visible .realizacje__label,
.realizacje.section-fade.visible .realizacje__heading,
.realizacje.section-fade.visible .realizacje__subheading {
  opacity: 1;
  transform: none;
}

/* Heading i subheading stoja na desktopie obok siebie w jednym rzedzie naglowka
   (grid 1fr 1fr), wiec wchodza RAZEM — osobne wejscie czytaloby sie jak blad.
   Label i naglowek leza przy gorze sekcji, wiec sa w kadrze w chwili startu
   kaskady i ich opoznienia wypalaja sie na widocznych elementach. */
.realizacje.section-fade.visible .realizacje__label { transition-delay: 0s; }
.realizacje.section-fade.visible .realizacje__heading,
.realizacje.section-fade.visible .realizacje__subheading { transition-delay: var(--rz-step); }

/* ---- Przycisk CTA — osobny trigger pozycyjny, na koncu ----
   `.is-revealed` dodaje modul „Realizacje CTA Reveal" w common.js, dopiero gdy
   przycisk sam wjedzie w widok. Czasowe opoznienie bylo tu wykluczone: kaskada
   startuje, gdy w kadr wchodzi GORA sekcji, a przycisk lezy wtedy ~1200px pod
   krawedzia okna (siatka zdjec ma 1050px wysokosci) — opoznienie wypalilo by sie
   poza kadrem i uzytkownik zastalby przycisk juz odsloniety.
   Stan ukryty jest zagniezdzony pod `.realizacje--js-reveal`, czyli klasa
   dodawana przez ten sam modul: gdyby przegladarka podala nowy CSS ze starym
   (zbuforowanym) common.js, przycisk zostalby na `opacity: 0` NA ZAWSZE.
   Brak modulu = brak klasy = przycisk widoczny, tylko bez animacji. */
.realizacje--js-reveal .realizacje__cta-wrapper {
  opacity: 0;
  transform: translateY(var(--rz-shift));
  transition: opacity var(--rz-reveal-dur) var(--rz-ease),
              transform var(--rz-reveal-dur) var(--rz-ease);
}

.realizacje--js-reveal .realizacje__cta-wrapper.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .realizacje.section-fade .realizacje__label,
  .realizacje.section-fade .realizacje__heading,
  .realizacje.section-fade .realizacje__subheading,
  .realizacje--js-reveal .realizacje__cta-wrapper {
    transform: none;
    transition-delay: 0s;
  }
}

/* =============================================
   RESPONSIVE — REALIZACJE
   ============================================= */

/* Tablet — hide columns 1 and 7, show 5 columns */
@media (max-width: 1200px) {
  .realizacje__col:nth-child(1),
  .realizacje__col:nth-child(7) {
    display: none;
  }

  .realizacje__columns {
    /* Te same waskie kolumny co na desktopie: 159x282 -> 205x364 (+29%).
       Kolumny szerokie zostaja na 348px — siatka rosnie 1390 -> 1480px. */
    grid-template-columns: 0.66fr 1.12fr 1.12fr 0.66fr 1.12fr;
    width: 1480px;
    margin-left: calc(50% - 740px);
  }

  .realizacje__heading {
    font-size: 44px;
  }
}

@media (max-width: 1024px) {
  .realizacje__header {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .realizacje__heading {
    grid-column: 1;
    margin: 0 auto 20px;
  }

  .realizacje__subheading {
    grid-column: 1;
    max-width: 620px;
    margin: 0 auto;
    justify-self: center;
  }

  .realizacje__columns {
    height: 802px;
  }
}

/* Phone — hide columns 2 and 6 (1 & 7 already hidden), show 3 columns */
@media (max-width: 768px) {
  .realizacje {
    padding: 80px 0 0;
  }

  .realizacje__col:nth-child(2),
  .realizacje__col:nth-child(6) {
    display: none;
  }

  /* Symetryczny kadr: SRODKOWA kolumna (col 4) w calosci, boczne (3 i 5)
     ucinane ROWNO z obu stron. Wymaga DWOCH rzeczy naraz — samo wysrodkowanie
     nie wystarczy: (1) obie kolumny boczne musza miec IDENTYCZNA szerokosc,
     (2) siatka musi byc wysrodkowana (margin-left = polowa jej szerokosci).
     Widoczny skrawek = (100vw - center - 14) / 2, czyli 33px @320, 64px @390.
     `--rz-side` NIE moze zejsc ponizej ~180px — kolumna 3 ma tylko 4 kwadratowe
     karty i przy wezszej kolumnie przestaje wypelniac kadr 735px (ciemna dziura
     pod ostatnia karta). Podloga 240px na `--rz-center` z tego samego powodu:
     kolumna 4 jedzie parallaxem o 650px, wiec 6 kart musi dac >= 1392px. */
  .realizacje__columns {
    --rz-center: max(240px, 62vw);
    --rz-side: 260px;
    grid-template-columns: var(--rz-side) var(--rz-center) var(--rz-side);
    width: calc(var(--rz-center) + var(--rz-side) * 2 + 14px);
    margin-left: calc(50% - var(--rz-center) / 2 - var(--rz-side) - 7px);
    height: 735px;
    gap: 7px;
  }

  /* Col 5 keeps portrait (9:16), cols 3 & 4 stay square */

  .realizacje__heading {
    font-size: 32px;
  }

  .realizacje__subheading {
    font-size: 15px;
  }

  .realizacje__header {
    margin-bottom: 32px;
  }

  .realizacje__header::after {
    bottom: -36px;
    width: calc(100vw + 240px);
    height: 16px;
  }

  .realizacje__cta-wrapper {
    padding: 40px 16px 80px;
  }

  .ihb--realizacje {
    font-size: 17px;
    padding: 14px 35px;
  }

  .realizacje__cta {
    padding: 13px 26px;
    font-size: 15px;
    border-radius: 11px;
  }

  .realizacje__card {
    border-radius: var(--radius-md);
  }
}