/*
 * Sekcje strony „O nas” (inc/about-page/) — wymiary z Figmy.
 * Desktop od 992 px (projekt 1728, treść 1308), mobile do 991 px (projekt 440).
 * Krój: Work Sans ('work-sans' z Typekit) w nagłówkach, Poppins w tekstach.
 */

.bgab {
  --bgab-pad: max(40px, calc((100% - 1308px) / 2));
  --bgab-work: 'work-sans', 'Work Sans', sans-serif;
  --bgab-poppins: 'poppins', 'Poppins', sans-serif;
  --bgab-ink: #080808;
  --bgab-text-color: #262626;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--bgab-ink);
}

.bgab *,
.bgab *::before,
.bgab *::after {
  box-sizing: border-box;
}

.bgab :where(h1, h2, h3, p) {
  margin: 0;
  overflow-wrap: break-word; /* długie złożenia DE/CZ na 320 px; nie zmienia zawijania, gdy słowo się mieści */
}

.bgab picture {
  display: block;
  height: 100%;
}

.bgab img {
  display: block;
  max-width: none;
}

/* Nagłówek sekcji: nadtytuł, tytuł, akapit */

.bgab-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.bgab-head__titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bgab .bgab-eyebrow {
  font-family: var(--bgab-poppins);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bgab-ink);
}

.bgab .bgab-title {
  font-family: var(--bgab-work);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bgab-ink);
}

.bgab .bgab-text p {
  font-family: var(--bgab-poppins);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--bgab-text-color);
}

.bgab .bgab-text p + p {
  margin-top: 24px;
}

.bgab .bgab-text strong {
  font-weight: 700;
}

/* Strzałka w dół (baner) */

.bgab-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(152.5deg, rgba(237, 237, 237, 0.2) 12.2%, rgba(255, 255, 255, 0.2) 44%);
  box-shadow: 1px 5px 7.2px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  flex: none;
}

.bgab-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(151deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.bgab-arrow svg {
  display: block;
  width: 64px;
  height: 64px;
}

.bgab-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Baner */

.bgab-baner {
  /* Proporcja z projektu (1728 × 400), nie stała wysokość: powyżej 1728 px stałe 400 px
     spłaszczało pas i `cover` obcinało głowy. Poniżej 1728 px zostaje 400 px (przycięcie po bokach).
     Ta sama zasada co w bloku podstronaheader. */
  height: max(400px, calc(100vw * 400 / 1728));
  overflow: hidden;
  background: #3a3a3a;
}

.bgab-baner__media,
.bgab-baner__media::after {
  position: absolute;
  inset: 0;
}

.bgab-baner__media::after {
  content: '';
  background: rgba(0, 0, 0, var(--bgab-overlay, 0.3));
}

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

.bgab-baner__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  padding: 0 var(--bgab-pad);
}

.bgab-baner__spacer {
  display: none;
}

.bgab-baner__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: #fcfcfc;
  text-align: right;
  text-transform: uppercase;
}

.bgab .bgab-baner__eyebrow {
  font-family: var(--bgab-work);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.177;
  color: #fcfcfc;
}

.bgab .bgab-baner__title {
  font-family: var(--bgab-work);
  font-size: 56px;
  font-weight: 500;
  line-height: 1.177;
  letter-spacing: 0;
  color: #fcfcfc;
}

/* Kim jesteśmy? */

.bgab-intro {
  padding: 82px var(--bgab-pad);
}

.bgab-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
}

.bgab-intro .bgab-text {
  max-width: 1008px;
}

.bgab-intro__media {
  width: 100%;
  aspect-ratio: 1308 / 385;
  border-radius: 32px;
  overflow: hidden;
}

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

/* Misja */

.bgab-misja {
  padding: 120px var(--bgab-pad);
  background: #080808;
  text-align: center;
}

.bgab-misja__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bgab-misja .bgab-eyebrow {
  color: #ebebeb;
}

.bgab-misja__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1240px;
}

.bgab .bgab-misja__text p {
  font-family: var(--bgab-work);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.17;
  color: #f5f5f5;
}

/* Zdjęcie na całą szerokość */

.bgab-zdjecie img {
  width: 100%;
  height: auto;
}

/* Liczby (Nasza wizja) */

.bgab-liczby {
  padding: 120px var(--bgab-pad);
}

.bgab-liczby__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.bgab-liczby .bgab-text {
  max-width: 748px;
}

.bgab-liczby__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
  width: 100%;
}

.bgab-liczby__tile {
  flex: 1 0 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 63px 16px; /* 64 px w Figmie razem z ramką 1 px */
  border: 1px solid #fff;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(237, 237, 237, 0.4) 22.84%, rgba(255, 255, 255, 0.4) 46.79%);
  box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.bgab .bgab-liczby__value {
  font-family: var(--bgab-work);
  font-size: clamp(40px, 3.24vw, 56px);
  font-weight: 500;
  line-height: 1.18;
  white-space: nowrap;
  color: var(--bgab-text-color);
}

.bgab .bgab-liczby__label {
  font-family: var(--bgab-work);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.17;
  text-wrap: balance;
  color: var(--bgab-text-color);
}

/* Oś czasu */

.bgab-os {
  --bgab-gap: clamp(32px, 3.7037vw, 64px);
}

.bgab-os__item {
  display: grid;
  grid-template-columns: calc(50% - 32px) 1fr;
  column-gap: calc(var(--bgab-gap) * 2 + 32px);
  overflow: clip;
}

.bgab-os__media {
  position: relative;
  aspect-ratio: 832 / 600;
  overflow: hidden;
}

.bgab-os__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bgab-os__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 48px clamp(0px, 4.63vw, 80px) 48px 0;
}

.bgab-os__titles {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bgab-os__dot {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: calc(-1 * var(--bgab-gap) - 32px);
  width: 32px;
  height: 32px;
  border: 1.2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(152.48deg, #ededed 22.84%, #fff 46.79%);
  box-shadow: 1.2px 6px 8.64px rgba(0, 0, 0, 0.08);
}

/* Linia: w pierwszym etapie zaczyna się od kropki, w kolejnych idzie przez cały wiersz
   (nadmiar przycina `overflow: clip` wiersza). */
.bgab-os__line {
  position: absolute;
  top: -4000px;
  bottom: -4000px;
  left: calc(-1 * var(--bgab-gap) - 16.5px);
  width: 1px;
  background: #080808;
}

.bgab-os__item:first-child .bgab-os__line {
  top: -8px;
}

.bgab .bgab-os__year {
  font-family: var(--bgab-poppins);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 3.36px;
  text-transform: uppercase;
  color: #636363;
}

.bgab .bgab-os__title {
  font-family: var(--bgab-work);
  font-size: clamp(34px, 2.43vw, 42px);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bgab-ink);
}

.bgab-os__text {
  max-width: 550px;
}

/* Zespół */

.bgab-zespol {
  padding: 120px var(--bgab-pad);
}

.bgab-zespol__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.bgab-zespol .bgab-text {
  max-width: 748px;
}

.bgab-zespol__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 8px;
  width: 100%;
}

.bgab-zespol__card {
  position: relative;
  /* Podpis skaluje się z szerokością kafelka (cqw), inaczej na wąskich ekranach wchodzi na głowę. */
  container-type: inline-size;
  aspect-ratio: 321 / 450;
  overflow: hidden;
  border: 1px solid #f5f5f5;
  border-radius: 24px;
  background: #fff;
}

.bgab-zespol__card img {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--bgab-off, 20%));
  width: 100%;
  height: 136.15%;
  object-fit: cover;
}

.bgab-zespol__info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: min(4px, 1.26cqw);
  padding: min(31px, 9.72cqw);
  text-transform: uppercase;
}

.bgab .bgab-zespol__name {
  font-family: var(--bgab-work);
  font-size: clamp(16px, 7.53cqw, 24px);
  font-weight: 500;
  line-height: 1.17;
  color: var(--bgab-ink);
}

.bgab .bgab-zespol__role {
  font-family: var(--bgab-poppins);
  font-size: clamp(9px, 3.77cqw, 12px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--bgab-ink);
}

/* Mobile (projekt 440 px) */

@media (max-width: 991px) {
  /* 34 px / 40 px jak w ramce mobile */
  .bgab .bgab-title,
  .bgab .bgab-os__title,
  .bgab .bgab-misja__text p {
    line-height: 1.1765;
  }

  .bgab .bgab-title {
    font-size: clamp(28px, 7.73vw, 34px);
  }

  .bgab-intro {
    padding: 64px 20px;
  }

  .bgab-intro__inner {
    gap: 32px;
    max-width: 640px;
    margin: 0 auto;
  }

  .bgab-intro .bgab-head {
    padding: 0 14px;
  }

  .bgab-intro__media {
    aspect-ratio: 400 / 214;
    border-radius: 12px;
  }

  .bgab-misja {
    padding: 64px 32px;
  }

  .bgab-misja__text {
    gap: 40px;
    max-width: 704px;
  }

  .bgab .bgab-misja__text p {
    font-size: clamp(28px, 7.73vw, 34px);
  }

  .bgab-liczby {
    padding: 64px 20px;
  }

  .bgab-liczby__inner {
    max-width: 640px;
    margin: 0 auto;
  }

  .bgab-liczby .bgab-head {
    padding: 0 14px;
  }

  .bgab-liczby__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bgab-liczby__tile {
    min-width: 0;
    padding: 31px 8px;
    border-radius: 12px;
  }

  .bgab .bgab-liczby__value {
    font-size: clamp(28px, 9.1vw, 40px);
  }

  .bgab .bgab-liczby__label {
    font-size: 14px;
  }

  .bgab-os {
    padding: 64px 20px 0 12px;
  }

  .bgab-os__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 45px;
    max-width: 640px;
    margin: 0 auto;
    padding-left: 36px;
  }

  .bgab-os__list::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 11.5px;
    width: 1px;
    background: #080808;
  }

  .bgab-os__item {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    overflow: visible;
  }

  .bgab-os__media {
    aspect-ratio: 372 / 272;
    border-radius: 12px;
  }

  .bgab-os__body {
    gap: 12px;
    padding: 0;
  }

  .bgab-os__titles {
    position: static;
  }

  .bgab-os__dot {
    top: 0;
    left: -36px;
    width: 24px;
    height: 24px;
  }

  .bgab-os__line {
    display: none;
  }

  .bgab .bgab-os__title {
    font-size: clamp(28px, 7.73vw, 34px);
  }

  /* Opis 16 px jak w etapach 3–8 ramki mobile (etapy 1–2 mają w Figmie 14 px). */
  .bgab-os__text {
    max-width: none;
  }

  .bgab-zespol {
    padding: 64px 20px;
  }

  .bgab-zespol__inner {
    gap: 32px;
    max-width: 640px;
    margin: 0 auto;
  }

  .bgab-zespol .bgab-head {
    padding: 0 14px;
  }

  .bgab-zespol__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 4px;
  }

  .bgab-zespol__card {
    aspect-ratio: 198 / 276.23;
    border-width: 0.6px;
    border-radius: 14.73px;
  }

  .bgab-zespol__card img {
    top: calc(-1 * var(--bgab-off-m, 17%));
  }

  /* 198 px kafelka w projekcie = 100cqw */
  .bgab-zespol__info {
    gap: min(2.5px, 1.28cqw);
    padding: min(15.4px, 7.83cqw);
  }

  .bgab .bgab-zespol__name {
    font-size: clamp(13px, 10.17cqw, 20px);
  }

  .bgab .bgab-zespol__role {
    font-size: clamp(7.5px, 5.09cqw, 10px);
  }
}

/* Poniżej 360 px wymuszone łamanie w haśle misji zostawiało jedno słowo w linii. */

@media (max-width: 359px) {
  .bgab-misja .bgab-br {
    display: none;
  }
}

/* Baner na telefonie (projekt 440 px). Na tabletach zostaje układ desktopowy. */

@media (max-width: 599px) {
  .bgab-baner {
    height: max(300px, calc(100vw * 300 / 440));
  }

  .bgab-baner__inner {
    justify-content: space-between;
    gap: 0;
    padding: 36px 20px;
  }

  .bgab-baner__spacer {
    display: block;
    width: 64px;
    height: 64px;
  }

  .bgab-baner__titles {
    align-items: flex-start;
    width: 100%;
    text-align: left;
  }

  .bgab .bgab-baner__eyebrow {
    font-size: 16px;
  }

  .bgab .bgab-baner__title {
    font-size: clamp(34px, 9.55vw, 42px);
    line-height: 1;
  }
}