/* ==========================================================================
   Next Level (udoskonalaj.pl) – zespol.css
   Strona „Zespół” wersji 1:1. Wartości przeniesione z docs/original/webflow.css
   (komentarz „← .klasa” wskazuje źródłową klasę Webflow) w tych samych
   jednostkach – rem zostaje rem (płynna skala z base.css).

   Oryginał miał w HTML dwa komplety 11 kart: jeden dla > 991 px
   (.features-component) i drugi dla ≤ 991 px (.features-component.mobile).
   Tu jest jeden komplet treści, a oba układy daje CSS:
     ≥ 992 px  .team-card__main  = .features-vantages (zdjęcie | tekst, naprzemiennie)
               .team-card__text  = .div-block-2, .team-card__skills = .div-block-4 (pod spodem)
     ≤ 991 px  .team-card        = .features-vantages (kolumna: rząd zdjęcie+tekst, potem listy)
               .team-card__main  = .div-block-2 (zdjęcie | tekst; ≤ 767 jedno pod drugim)
   Kolejność media queries: baza → 1280 → 1440 → 991 → 767 → 479 (jak w webflow.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero – section > .padding-global-2 > .container-small > .zespol-hero > .hero-wrapper
      (marginesy zapadają się przez bloki jak w oryginale – nie dodawać paddingów)
   -------------------------------------------------------------------------- */
.team-hero__wrapper {                       /* ← .hero-wrapper */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 20vh;
  margin-bottom: 5vh;
  padding-bottom: 0;
}
.team-hero__lead {                          /* ← .text-block-15 */
  margin: 0;
  padding-left: 100px;
  padding-right: 100px;
  font-weight: 400;
  text-align: center;
}

/* --------------------------------------------------------------------------
   2. Sekcja z listą – section.section-8 > .padding-global (.l-pad)
      > .container (.w-layout-blockcontainer.w-container) > .features-wrapper
      > .features-component
   -------------------------------------------------------------------------- */
/* ← .container (wygrywa z .w-container/.w-layout-blockcontainer: max-width 100rem) */
.team-section__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7px;
  padding-bottom: 0;
}
.team-section__wrapper {                    /* ← .features-wrapper */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 7.5rem;
  margin-top: 10rem;
  margin-bottom: 8rem;
  padding-left: 2.5px;
  padding-right: 24px;
}
.team-list {                                /* ← .features-component */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10rem;
  width: 100%;
  margin: 100px 0 0;
  padding: 0;
  list-style: none;
}
/* <li> jest pozycją flex jak .children-perspective – bez narzuconej szerokości („fit-content”).
   Przy 992–1003 px minimalna szerokość treści (2 × lista 450 px + odstępy) przekracza kontener
   i karta – jak w oryginale – wystaje po ~5 px z obu stron. */

/* --------------------------------------------------------------------------
   3. Osoba – ← .children-perspective (perspektywa dla obrotu karty za myszą)
   -------------------------------------------------------------------------- */
.team-member {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 50px;
  border-bottom: 2px solid var(--color-border);
  perspective: 1000px;
}
.team-member--last { border-bottom-color: rgb(35 42 54 / 0); }   /* ← .children-perspective.last (#232a3600) */

/* Karta – ← .team-card (wejście: data-reveal; obrót: właściwość „rotate” z zespol.js) */
.team-card {
  display: block;
  width: 100%;
  margin-bottom: 32px;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Rząd zdjęcie + tekst – ← .features-vantages (> 991 px) */
.team-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  column-gap: 4rem;
  width: 100%;
  margin-bottom: 50px;
}
/* ← .features-vantages.left: w oryginale tekst przed zdjęciem w DOM; tu ta sama treść, odwrócony rząd */
.team-member--reverse .team-card__main { flex-direction: row-reverse; }

.team-card__media {                         /* ← .features-image-container */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
}
.team-card__photo {                         /* ← .features-image-wrapper */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 500px;
  height: 400px;
  border-radius: 1rem;
  overflow: hidden;
}
.team-card__img { width: 500px; }           /* ← .image (reszta z globalnego img: max-width 100%, height 100%, cover) */
/* ← .gradient-overlay.bigger: 50vw wysokości od góry zdjęcia, ucięte przez overflow */
.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0%;
  z-index: 2;
  height: 50vw;
  background-image: linear-gradient(0deg, #101011, #1010111a);
  pointer-events: none;
}
/* a-6: zdjęcie startuje w skali 1.4 i wraca do 1 po wejściu rzędu w okno (zespol.js) */
.team-zoom-ready .team-card__img {
  transform: scale3d(1.4, 1.4, 1);
  transition: transform 1400ms var(--ease-in-out-quart);
}
.team-zoom-ready .team-card__main.is-zoomed .team-card__img { transform: none; }

.team-card__text {                          /* ← .div-block-2 (> 991 px) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 40px;
  width: 60%;
  height: 100%;
}
.team-card__intro {                         /* ← .div-block-5 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
.team-card__heads {                         /* ← .div-block-6 */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ← .heading-6.text-weight-medium > strong.bold-text-6 (tekst zawsze większy od rodzica,
   więc rozmiar może siedzieć na samym h2) */
.team-card__name {
  margin: 0;
  font-size: var(--heading-h5);
  font-weight: 700;
  line-height: 1.15;
}
/* ← .heading-6.text-weight-medium (1.5rem/1.15 na każdej szerokości – reguły media z jedną
   klasą przegrywały) > strong.bold-text-5. Przy ≤ 479 px rodzic (1.5rem) jest większy od
   tekstu (20 px) i to on wyznacza wysokość linii – dlatego zostaje span wewnątrz. */
.team-card__role {
  margin: 0;
  font-size: var(--text-large);
  font-weight: 500;
  line-height: 1.15;
}
.team-card__role-text {
  color: var(--color-primary);
  font-size: 24px;
  font-weight: 700;
}
.team-card__bio {                           /* ← .text-size-medium */
  width: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 18px;
  text-align: left;
}

/* Specjalizacje – ← .div-block-4 > .check-list > .check-item */
.team-card__skills {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.team-skills {                              /* ← .check-list */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 450px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-skills__item {                        /* ← .check-item */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 1rem;
}
.team-skills__icon {                        /* ← .check-icon-wrap */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
  padding-bottom: .15rem;
  border-radius: 50%;
  background-color: var(--color-surface);
}
.team-skills__icon img {                    /* ← .check-icon */
  width: .875rem;
  height: auto;
  padding-top: .2rem;
}
.team-skills__text { font-size: 16px; }     /* ← .skills-text */

/* --------------------------------------------------------------------------
   4. Opinie klientów – ← .container-2 > .testimonial-item (komponent .disclosure z base.css)
   -------------------------------------------------------------------------- */
/* ← .container-2 (flex, środek, max-width 100%): jedno dziecko – zawsze pełna szerokość,
   także po zwinięciu (zwinięty panel ma „hidden”, więc nie może wyznaczać szerokości) */
.team-reviews {
  width: 100%;
  max-width: 100%;
}
.team-review {                              /* ← .testimonial-item */
  margin: 0 2rem;
  padding: 24px 32px 32px;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background-color: var(--color-bg);
  color: var(--color-white);
  cursor: pointer;
}
.team-review:hover { background-color: var(--color-surface); }
.team-review__heading {                     /* ← .testimonial-item-title (24 px, 500) */
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}
.team-review__title { font-weight: 500; }   /* przycisk (.disclosure__trigger) dziedziczy font z h3 */
.team-review__label {                       /* ← .testimonial-item-title-icon */
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}
.team-review__chat { width: 2rem; }         /* ← .image-6 */
.team-review__text { font-weight: 500; }    /* ← .text-block-5 */
.team-review__arrow {                       /* ← .testimonial-item-icon (obrót: .disclosure__icon) */
  width: 2rem;
  cursor: pointer;
}
.team-review__inner {                       /* ← .testimonial-item-body-inner */
  display: flex;
  gap: 24px;
  padding-top: 2rem;
}
.team-quote {                               /* ← .testimonial-item-content */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  max-width: 50%;
  margin: 0;
  padding: 16px;
  border-radius: .5rem;
  background-color: rgb(29 35 46 / 0);      /* #1d232e00 */
}
/* ← .block-quote (+ blockquote z base.css: 18px/22px, padding 10px 20px, margines 10 px).
   Tekst 16 px siedzi w linii rodzica 18 px – linie mają wtedy 23 px jak w oryginale. */
.team-quote__text {
  height: auto;
  max-height: 100%;
  border-left-width: 3px;
  border-left-color: var(--color-border);
  color: var(--color-text-muted);
}
.team-quote__em {                           /* ← em.rewiev-text */
  font-size: 16px;
  font-style: italic;
}
/* Dominika, 1. opinia: w komplecie desktop cytat kończył się dwoma <br> – pusta linia pod tekstem
   (w komplecie mobilnym jeden <br>, więc ≤ 991 px bez niej) */
.team-quote--extra-line .team-quote__em::after { content: "\A\A"; white-space: pre; }
.team-quote__author {                       /* ← .testimonial-item-content-client-name */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding-left: 26px;
}
/* ← .text-block-NN (flex) > strong.bold-text-8.client-name + <br>: <br> w linii rodzica
   (1rem × 1.5) wyznaczał minimalną wysokość wiersza z nazwiskiem */
.team-quote__name {
  display: block;
  min-height: 1.5rem;
  padding-right: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
/* ← .text-block-4 > strong.bold-text-7 */
.team-quote__firm {
  display: block;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Responsywność
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .team-hero__wrapper { margin-top: 30vh; margin-bottom: 5vh; }
  .team-section__container { margin-left: 0; margin-right: 0; }
  .team-section__wrapper { padding-left: 0; padding-right: 0; }
  .team-list { gap: 4rem; }
  .team-list__item { min-width: 100%; }     /* ← .children-perspective { min-width: 100% } */
  .team-card__main { justify-content: center; align-items: center; padding-left: 0; padding-right: 0; }
  /* ← .features-vantages.left.team-mobile (tylko Natalia): góra zamiast środka przy 1280–1439 */
  .team-member--alt-align .team-card__main { justify-content: center; align-items: flex-start; }
  .team-card__photo { height: auto; min-height: 30rem; }
  .team-card__img { object-fit: cover; min-height: 30rem; }
  .team-card__skills { padding-left: 2.5%; }
  .team-skills { width: 37%; }
  .team-skills__icon { width: 1.5em; }
  .team-quote__author { justify-content: space-between; align-items: flex-start; }
  /* ← .text-block-38 (tylko Patryk Radomski): nazwisko dociągnięte do dołu wiersza */
  .team-quote--name-end .team-quote__name { display: flex; align-items: flex-end; }
}


@media (min-width: 1440px) {
  .team-hero__wrapper { margin-top: 30vh; margin-bottom: 30vh; }
  .team-hero__lead { color: var(--color-text-muted); font-size: 24px; }
  .team-section__container { padding-top: 0; }
  .team-section__wrapper { margin-top: 0; }
  .team-card__main { justify-content: center; align-items: center; }
  .team-member--reverse .team-card__main { column-gap: 0; }               /* ← .features-vantages.left */
  .team-member--alt-align .team-card__main { justify-content: center; align-items: center; }
  .team-card__photo { width: 100%; height: 500px; min-height: 0; }
  .team-card__img { width: 100%; }
  .team-card__intro { width: 80%; }
  .team-card__skills { width: 80%; padding-left: 2.5%; }
  .team-skills { flex-direction: column; width: 570px; }
  .team-skills__icon { width: 1.5em; min-width: auto; height: 1.5rem; min-height: auto; }
  .team-skills__icon img { width: .8rem; }
  .team-quote { width: 50%; }
}

@media (max-width: 991px) {
  .team-hero__wrapper { margin-top: 15vh; }
  .team-section__wrapper { margin-top: 8rem; margin-bottom: 0; padding-left: 2.5rem; padding-right: 2.5rem; }
  /* ← .features-component.mobile (display: block – bez odstępów flex) */
  .team-list { display: block; margin-bottom: 0; }
  .team-member { gap: 1rem; margin-bottom: 50px; }
  /* ← .team-card (padding 0) + .features-vantages (kolumna; odstęp 3rem między rzędem a listami) */
  .team-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 2rem;
    row-gap: 3rem;
    padding-left: 0;
    padding-right: 0;
  }
  /* ← .div-block-2 (rząd zdjęcie | tekst; w komplecie mobilnym zawsze zdjęcie pierwsze) */
  .team-card__main,
  .team-member--reverse .team-card__main {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    margin-bottom: 0;
  }
  .team-card__media { flex-direction: row; width: 45%; }
  .team-card__photo { width: 100%; min-width: auto; max-width: none; height: 24rem; min-height: auto; max-height: none; }
  .team-card__img { object-fit: cover; width: 100%; max-width: none; }
  .team-card__photo::after { height: 100vw; background-image: linear-gradient(0deg, #101011, #1010110d); }
  /* w komplecie mobilnym pozycją flex był sam .div-block-5 (szerokość 100% – ściskana obok zdjęcia) */
  .team-card__text { display: block; width: 100%; height: auto; }
  .team-card__intro { width: 100%; }
  .team-card__name { font-size: 32px; }
  .team-card__bio { width: auto; font-size: 16px; }
  .team-card__skills { gap: 2rem; justify-content: space-between; align-items: stretch; width: 100%; }
  .team-skills { width: 100%; padding-left: 0; }
  .team-skills__icon { width: auto; min-width: 1.3rem; height: auto; min-height: 1.3rem; }
  .team-skills__icon img { width: .8rem; min-width: .8px; min-height: auto; }
  .team-skills__text { font-size: 14px; }
  .team-review { margin-left: auto; margin-right: auto; }
  .team-review__chat { width: 1.5rem; }
  .team-review__text { font-size: 20px; }
  .team-review__arrow { width: 1.5rem; }
  .team-review__inner { gap: 0; flex-wrap: wrap; }
  .team-quote { max-width: none; }
  .team-quote__text { font-size: 14px; }
  .team-quote__author { justify-content: flex-start; align-items: flex-start; width: 100%; padding-left: 24px; }
  .team-quote__name { width: 100%; margin-right: 16px; padding-right: 0; }
  /* ← strong.bold-text-7 { display: block } + <br>: pusta linia (14 px × 1.5) pod nazwą firmy */
  .team-quote__firm { padding-bottom: 1.5em; }
  /* ← w komplecie mobilnym po tym nazwisku nie było <br> (Joanna, Malwina – 2. opinia) */
  .team-quote--tight-name .team-quote__name { min-height: 0; }
  .team-quote--extra-line .team-quote__em::after { content: none; }
  /* łamania wierszy, które oryginał miał tylko w komplecie mobilnym (<br>): tu znak nowej linii */
  .team-pre-m { white-space: pre-line; }
}

@media (max-width: 767px) {
  .team-hero__inner { margin-top: 140px; margin-bottom: 140px; }     /* ← .zespol-hero */
  .team-section__container { padding-top: 0; }
  .team-section__wrapper { margin-top: 0; margin-bottom: 6rem; padding-left: 0; padding-right: 0; }
  /* ← .team-card { margin-bottom: 0 } + .features-vantages { margin-bottom: 16px } */
  .team-card { margin-bottom: 16px; }
  .team-card__main,
  .team-member--reverse .team-card__main { flex-direction: column; }
  .team-card__media { width: 100%; }
  .team-card__img { object-fit: cover; object-position: 50% 25%; }
  .team-card__bio { width: auto; font-size: 16px; text-align: left; }
  .team-skills__text { font-size: 14px; }
  .team-review { padding-left: 16px; padding-right: 16px; }
  .team-quote { padding-bottom: 0; }
  .team-quote__text { text-align: justify; }
  .team-quote__author { justify-content: flex-start; align-items: flex-start; }
}

@media (max-width: 479px) {
  .team-hero__wrapper { margin-bottom: 3vh; }
  .team-section { padding-left: 1.25rem; padding-right: 1.25rem; }  /* ← .section-8 */
  .team-section__wrapper { margin-top: 0; margin-bottom: 0; }
  .team-list { margin-top: 0; }
  .team-member--last { margin-bottom: 0; }
  .team-card__photo { height: 20rem; min-height: auto; max-height: none; }
  .team-card__photo::after { height: 150vw; }
  .team-card__name { font-size: 28px; }
  .team-card__role-text { font-size: 20px; }
  .team-card__bio { font-size: 1.125rem; }
  .team-card__skills { flex-direction: column; }
  .team-skills__text { font-size: 14px; }
  .team-review { padding-left: 24px; padding-right: 24px; }
  .team-review__text { font-size: 16px; }
  .team-review__chat { width: 1.5rem; }
  .team-review__arrow { width: 1.5rem; }
  .team-review__inner { padding-top: 0; }
  .team-quote { padding: 16px 0; border-bottom: 2px solid var(--color-border); border-radius: 0; }
  .team-quote--last { border-bottom-width: 0; }
  .team-quote__text { display: flex; flex-direction: column; padding: 0; border-left-width: 0; }
  .team-quote__em { font-size: 14px; text-align: left; }
  .team-quote__author { gap: 2px; padding-left: 8px; padding-right: 8px; }
  .team-quote__name { margin-right: 0; text-align: left; }
  .team-quote__firm { padding-bottom: 0; text-align: left; }
}

/* --------------------------------------------------------------------------
   6. Treść zależna od układu – oryginał miał w dwóch kompletach dwie wersje
      tekstu (Wojtek: rola, Iga: jedna specjalizacja). Na końcu pliku, żeby
      wygrywały z „display” komponentów.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .team-only-mobile { display: none; }
}
@media (max-width: 991px) {
  .team-only-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   7. Ograniczenie ruchu
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .team-zoom-ready .team-card__img { transform: none; transition: none; }
}

@media print {
  .team-zoom-ready .team-card__img { transform: none; }
}