/* ==========================================================================
   Next Level (udoskonalaj.pl) – co-robimy.css
   Strona „Co robimy” (wersja 1:1). Wartości przeniesione z docs/original/
   webflow.css i z osadzonego <style> oryginału (.tag-wrapper, .tag);
   komentarz „← .klasa” wskazuje źródłową klasę Webflow.
   Prefiks klas: .about-*. Kolejność media queries jak w webflow.css:
   baza → min 1280 → min 1440 → max 991 → max 767 → max 479.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero – tytuł „Poukładamy to, co się rozsypało” + pole z tagami
      Trzy stany:
      • fizyka (.is-physics, co-robimy.js + Matter.js) – geometria oryginału:
        tytuł 25% wysokości okna od góry, pole 700 px, tagi spadają;
      • start fizyki (JS włączony, do 300 ms po DOMContentLoaded) – ta sama
        geometria, tagi jeszcze ukryte (w oryginale też niewidoczne: pole ma
        wtedy opacity 0 animacji wejścia);
      • statyczny (bez JS, prefers-reduced-motion, brak Matter.js = .is-static) –
        tytuł w przepływie, pod nim rzędy tagów na dnie pola (min. 700 px),
        nic nie zasłania tagów.
   -------------------------------------------------------------------------- */
.about-hero { position: relative; }

/* ← .test (w oryginale absolute względem okna: inset 25% 0 0; sekcja zaczyna się
   na samej górze strony, więc punkt odniesienia w sekcji daje ten sam wynik) */
.about-hero__heading {
  position: absolute;
  top: 25vh;
  top: 25svh;                       /* = 25% wysokości okna (jak 25% bloku początkowego) */
  left: 0;
  right: 0;
}

/* ← .heading-4.text-weight-medium (h1) */
.about-hero__title {
  width: 100%;
  margin: 0;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}
/* ← strong.bold-text-9 */
.about-hero__title-text {
  font-size: 4rem;
  font-weight: 700;
}

/* ← .code-embed-3 (≥1280 px: position relative + overflow hidden). Tu na wszystkich
   szerokościach: w oryginale < 1280 px obrócone tagi przy prawej ścianie dawały
   2–11 px poziomego przewijania strony. isolation = ten sam porządek warstw co
   w oryginale (IX2 zostawia transform na elemencie po animacji wejścia). */
.about-hero__physics {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ← .tag-wrapper (webflow.css) + osadzony <style>: wys. 700 px, max 1600 px,
   tło #11111100 (kasuje kolor i content-bg-shape.svg z webflow.css – niewidoczne
   w oryginale), padding 96 px z webflow.css zostaje */
.about-tags {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 700px;
  margin: 0 auto;
  padding: 96px;
  overflow: visible;
  border-radius: 20px;
  list-style: none;
}

/* ← .tag (osadzony <style>) */
.about-tag {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  background: #49aee8;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: background .2s;
}

/* Fizyka: położenie i obrót z ciał Matter.js (transform ustawia co-robimy.js) */
.about-hero.is-physics .about-tag {
  position: absolute;
  top: 0;
  left: 0;
}
/* Przeciąganie myszą (tylko komputery – jak w oryginale) */
.about-hero.is-draggable .about-tag { cursor: grab; }
.about-hero.is-draggable .about-tag:active {
  cursor: grabbing;
  filter: brightness(1.2);
}

/* Poza fizyką: rzędy tagów na dnie pola, kolory z palety skryptu po kolei
   (w trybie fizyki losowane – jak w oryginale) */
.about-hero:not(.is-physics) .about-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-end;
  gap: 8px;
  padding-bottom: 0;
}
.about-hero:not(.is-physics) .about-tag:nth-child(12n+1)  { background-color: #ff6b6b; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+2)  { background-color: #ffd93d; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+3)  { background-color: #6bcb77; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+4)  { background-color: #4d96ff; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+5)  { background-color: #ff9f1c; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+6)  { background-color: #c77dff; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+7)  { background-color: #00c2a8; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+8)  { background-color: #f15bb5; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+9)  { background-color: #ffb5e8; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+10) { background-color: #85e3ff; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+11) { background-color: #b9fbc0; }
.about-hero:not(.is-physics) .about-tag:nth-child(12n+12) { background-color: #fbe7c6; }

/* Start fizyki: tagi ukryte do pierwszego położenia z Matter.js
   (awaryjnie widoczne po 4 s, gdyby co-robimy.js się nie wczytał) */
.js .about-hero:not(.is-physics):not(.is-static) .about-tag {
  visibility: hidden;
  animation: about-tags-failsafe 0s linear 4s forwards;
}
@keyframes about-tags-failsafe { to { visibility: visible; } }

/* Układ statyczny: bez JS albo bez Matter.js (.is-static); reduced motion – sekcja 4 */
html:not(.js) .about-hero,
.about-hero.is-static {
  display: flex;
  flex-direction: column;
  min-height: 700px;
}
html:not(.js) .about-hero__heading,
.about-hero.is-static .about-hero__heading {
  position: relative;
  top: auto;
  margin-top: 25vh;
  margin-top: 25svh;
}
html:not(.js) .about-hero__physics,
.about-hero.is-static .about-hero__physics {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
html:not(.js) .about-tags,
.about-hero.is-static .about-tags {
  flex: 1 0 auto;
  height: auto;
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   2. Obszary – trzy wiersze tekst | zdjęcie (naprzemiennie)
   -------------------------------------------------------------------------- */
/* ← <section> + .padding-global-4 */
.about-features {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
/* ← .container-4.w-container (max-width z .container-4 wygrywa z .w-container –
   reguła późniejsza w webflow.css); flow-root = clearfix .w-container (margines
   listy zostaje w kontenerze) */
.about-features__container {
  display: flow-root;
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
}
/* ← .features-wrapper-2 (marginesy) + .features-component-2 (jedyne dziecko: kolumna z odstępem) */
.about-features__list {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  width: 100%;
  margin-top: 10rem;
  margin-bottom: 8rem;
  perspective: 100vw;
  perspective-origin: 50%;
}
/* ← .features-vantages-2 */
.about-feature {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 5vw;
  padding-left: 2rem;
  padding-right: 2rem;
}
/* ← .features-vantages-content-2 */
.about-feature__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 2rem;
  width: 50%;
  padding-left: 3vw;
}
/* ← .features-heading-wrapper (max 576 px) + .features-heading.align-left (kolumna,
   odstęp .625rem, max 100ch) – połączone, jedno dziecko wrappera */
.about-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: .625rem;
  width: 100%;
  max-width: 576px;
  max-width: min(576px, 100ch);
  text-align: left;
}
/* ← .heading-9.text-weight-medium > strong (700) */
.about-feature__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}
/* ← <div> z opisem (bez marginesu akapitu) */
.about-feature__desc { margin: 0; }

/* ← .features-image-container-2 */
.about-feature__media {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}
/* ← .features-image-wrapper-2 (tło z wykresem < 1280 px pominięte – zawsze zasłania
   je <img>). isolation: kontekst warstw jak w oryginale (transform IX2) i pewne
   przycięcie skalowanego zdjęcia do zaokrągleń w Safari. */
.about-feature__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 35vw;
  min-width: 35rem;
  max-width: 40rem;
  height: 25vw;
  min-height: 25rem;
  max-height: 35rem;
  overflow: hidden;
  border-radius: 1rem;
  isolation: isolate;
}
/* ← .image-7: wypełnia ramkę (globalne img {width/height: 100%; object-fit: cover}) */

/* ← .gradient-overlay.bigger */
.about-feature__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 50vw;
  background-image: linear-gradient(0deg, #101011, #1010111a);
  pointer-events: none;
}

/* IX2 e-447 → a-47 „Features – Scroll Into View 2”: zdjęcie startuje w skali 1.4,
   po wejściu wiersza w widok (offset 0) wraca do 1 w 1400 ms inOutQuart.
   Klasy ustawia co-robimy.js; bez JS i przy reduced motion skala 1. */
.js .about-feature__img {
  transform: scale3d(1.4, 1.4, 1);
  animation: about-zoom-failsafe 0s linear 4s forwards;   /* awaryjnie, gdy co-robimy.js się nie wczyta */
}
.about-zoom-ready .about-feature__img { animation: none; }
.about-feature.is-zoomed .about-feature__img {
  transform: none;
  transition: transform 1.4s var(--ease-in-out-quart);
}
@keyframes about-zoom-failsafe { to { transform: none; } }

/* --------------------------------------------------------------------------
   3. Breakpointy
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  /* ← .heading-4.text-weight-medium */
  .about-hero__title {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

@media (min-width: 1440px) {
  .about-hero__title {
    gap: 0;
    width: auto;
  }
}

@media (max-width: 991px) {
  .about-tags { padding: 65px; }                                  /* ← .tag-wrapper */
  .about-features__list { gap: 6rem; margin-top: 8rem; }          /* ← .features-wrapper-2 / -component-2 */
  .about-feature {                                                /* ← .features-vantages-2 */
    flex-direction: column;
    column-gap: 0;
    row-gap: 3rem;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .about-feature__content { order: 1; width: 100%; }               /* ← .features-vantages-content-2 */
  .about-feature__text { max-width: 100ch; }                      /* ← wrapper bez limitu; zostaje 100ch z .features-heading */
  .about-feature__title { font-size: 1.75rem; }                   /* ← .heading-9 */
  .about-feature__media { width: 100%; }                          /* ← .features-image-container-2 */
  .about-feature__frame { width: 100%; min-width: auto; max-width: none; }   /* ← .features-image-wrapper-2 */
  .about-feature__overlay {                                       /* ← .gradient-overlay.bigger */
    height: 100vw;
    background-image: linear-gradient(0deg, #101011, #1010110d);
  }
}

@media (max-width: 767px) {
  .about-features { padding-left: 1.25rem; padding-right: 1.25rem; }   /* ← .padding-global-4 */
  .about-features__list { gap: 4rem; margin-top: 6rem; margin-bottom: 6rem; }
  .about-feature__title { font-size: 1.5rem; }
}

@media (max-width: 479px) {
  /* ← .test: flex, wyśrodkowany, 6% od krawędzi, nad tagami */
  .about-hero__heading {
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    left: 6%;
    right: 6%;
  }
  html:not(.js) .about-hero__heading,
  .about-hero.is-static .about-hero__heading {   /* statycznie (w przepływie): 6% jako padding */
    left: auto;
    right: auto;
    padding-left: 6%;
    padding-right: 6%;
  }
  /* ← .bold-text-9 */
  .about-hero__title-text {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.7rem;
    text-shadow: -2px 1px 10px #000000c7;
  }
  .about-tags { padding-left: 25px; padding-right: 25px; }          /* ← .tag-wrapper */

  .about-features { padding-left: 1rem; padding-right: 1rem; }      /* ← .padding-global-4 */
  .about-feature__content { padding-left: 0; }
  .about-feature__title { font-size: 1.25rem; }
  .about-feature__media { height: 100%; }
  .about-feature__frame { height: auto; min-height: auto; max-height: none; }
  .about-feature__img { height: 200px; }                           /* ← .image-7 */
  .about-feature__overlay { height: 150vw; }
}

/* --------------------------------------------------------------------------
   4. Ograniczenie ruchu
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* tagi: układ statyczny (jak bez JS) */
  .about-hero:not(.is-physics) {
    display: flex;
    flex-direction: column;
    min-height: 700px;
  }
  .about-hero:not(.is-physics) .about-hero__heading {
    position: relative;
    top: auto;
    margin-top: 25vh;
    margin-top: 25svh;
  }
  .about-hero:not(.is-physics) .about-hero__physics {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .about-hero:not(.is-physics) .about-tags {
    flex: 1 0 auto;
    height: auto;
    padding-top: 1rem;
  }
  .js .about-hero:not(.is-physics):not(.is-static) .about-tag { visibility: visible; animation: none; }
  .about-tag { transition: none; }

  .js .about-feature__img { transform: none; animation: none; }
  .about-feature.is-zoomed .about-feature__img { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 479px) {
  .about-hero:not(.is-physics) .about-hero__heading {
    left: auto;
    right: auto;
    padding-left: 6%;
    padding-right: 6%;
  }
}