@charset "UTF-8";
/* ==========================================================================
   Blok Hero. Geometria odtworzona z makiety landing/css/sections/hero.css
   (1535 × 1024 px), przeskalowana jednostką --hp-u.

   Sekcja to kolumna flex na wysokość ekranu: treść jest wyśrodkowana
   w pionie, a pasek statystyk przyklejony do dołu (margin-top: auto).

   Od przejścia na Gutenberga rolę tej kolumny pełni core/cover
   (.tb-hero__cover), nie sam <section>. Dlatego geometria siedzi na
   coverze, a jego .wp-block-cover__inner-container musi się rozciągnąć
   na całą wysokość — inaczej statystyki nie miałyby od czego się odbić.

   Drugi skutek przejścia na bloki: obrazki przychodzą jako <figure>
   z core/image, więc pozycjonowanie absolutne łapie figure, a <img>
   w środku tylko wypełnia jej szerokość.

   Blok nie nadaje krojów, rozmiarów, interlinii ani kolorów tekstu.
   Robią to presety rozmiaru (fontSize w template.php), presety palety
   i klasy z assets/scss/_typography.scss (.text-loose, .text-soft).
   Czerwony przycisk to wariant „Marka" z assets/scss/_buttons.scss.

   Jak w makiecie (/landing/): przezroczysty nagłówek leży na hero.
   Sekcja podjeżdża pod niego ujemnym marginesem o --hp-header-h i ma
   pełną wysokość sceny, a kolumna tekstu dostaje ten sam odstęp od góry.
   Dzięki temu postać stoi tak wysoko i jest tak duża jak w makiecie.
   ========================================================================== */
.tb-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.tb-hero.tb-block {
  padding-block: 0;
  margin-top: calc(var(--hp-header-h) * -1);
}
.tb-hero__blob {
  position: absolute;
  z-index: var(--hp-z-decor);
  right: calc(var(--hp-u) * -26.4);
  bottom: calc(var(--hp-u) * -21.7);
  width: calc(var(--hp-u) * 78.2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--hp-c-red-tint-2) 0%, var(--hp-c-red-tint) 45%, #f6e4e6 100%);
}
.tb-hero__cover.wp-block-cover {
  min-height: var(--hp-scene-h);
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  color: inherit;
}
.tb-hero__cover.wp-block-cover .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}
.tb-hero__stage {
  position: static;
}
.tb-hero__element, .tb-hero__person {
  position: absolute;
  margin: 0;
}
.tb-hero__element img, .tb-hero__person img {
  display: block;
  width: 100%;
  height: auto;
}
.tb-hero .tb-hero__element, .tb-hero .tb-hero__person {
  margin: 0;
}
.tb-hero__element {
  z-index: var(--hp-z-decor);
  right: 0;
  bottom: calc(var(--hp-u) * -1.43);
  width: calc(var(--hp-u) * 41.4);
}
.tb-hero__person {
  z-index: var(--hp-z-person);
  right: calc(var(--hp-u) * 12);
  top: calc(var(--hp-u) * 9);
  width: calc(var(--hp-u) * 34);
}
.tb-hero__inner {
  position: relative;
  z-index: var(--hp-z-content);
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-top: calc(var(--hp-header-h) + clamp(1rem, var(--hp-u) * 2, 2.5rem));
}
.tb-hero__content {
  max-width: calc(var(--hp-u) * 57);
}
.tb-hero__title {
  max-width: 58rem;
  margin-top: clamp(1rem, var(--hp-u) * 2.35, 2.25rem);
}
.tb-hero__lead {
  margin-top: clamp(1.25rem, var(--hp-u) * 2.8, 2.75rem);
  max-width: calc(var(--hp-u) * 50);
}
.tb-hero__actions.wp-block-group.is-layout-flex {
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, var(--hp-u) * 2.4, 2.75rem);
  margin-top: clamp(1.5rem, var(--hp-u) * 2.3, 2.5rem);
}
.tb-hero__cta.wp-block-buttons {
  margin: 0;
}
.tb-hero__social.wp-block-group.is-layout-flex {
  align-items: center;
  gap: clamp(0.75rem, var(--hp-u) * 1.2, 1.125rem);
  margin: 0;
}
.tb-hero__avatars.wp-block-group.is-layout-flex {
  flex: none;
  gap: 0;
}
.tb-hero__avatars.wp-block-group.is-layout-flex > * + * {
  margin-left: -0.7rem;
}
.tb-hero__avatar {
  margin: 0;
  flex: none;
}
.tb-hero__avatar img {
  display: block;
  width: clamp(2rem, var(--hp-u) * 2.2, 2.375rem);
  height: clamp(2rem, var(--hp-u) * 2.2, 2.375rem);
  border-radius: 50%;
  border: 2px solid var(--hp-c-surface);
  object-fit: cover;
  background: var(--hp-c-line-2);
}
.tb-hero__social-text {
  max-width: 14rem;
  margin: 0;
}
.tb-hero__stats-wrap {
  position: relative;
  z-index: var(--hp-z-content);
  margin-top: auto;
  padding-top: clamp(2rem, var(--hp-u) * 5.3, 5rem);
  padding-bottom: clamp(1.75rem, var(--hp-u) * 4.7, 4.5rem);
}
@media (max-width: 1240px) {
  .tb-hero .tb-hero__content {
    max-width: calc(var(--hp-u) * 48);
  }
  .tb-hero .tb-hero__title {
    max-width: calc(var(--hp-u) * 46);
  }
  .tb-hero .tb-hero__lead {
    max-width: calc(var(--hp-u) * 44);
  }
  .tb-hero .tb-hero__person {
    right: calc(var(--hp-u) * 8);
    width: calc(var(--hp-u) * 38);
  }
  .tb-hero .tb-hero__element {
    width: calc(var(--hp-u) * 46);
  }
  .tb-hero .tb-hero__blob {
    width: calc(var(--hp-u) * 84);
  }
}
@media (max-width: 1023px) {
  .tb-hero .tb-hero__content {
    max-width: calc(var(--hp-u) * 44);
  }
  .tb-hero .tb-hero__title {
    max-width: calc(var(--hp-u) * 43);
  }
  .tb-hero .tb-hero__lead {
    max-width: calc(var(--hp-u) * 42);
  }
  .tb-hero .tb-hero__person {
    right: calc(var(--hp-u) * 4);
    width: calc(var(--hp-u) * 40);
  }
  .tb-hero .tb-hero__element {
    width: calc(var(--hp-u) * 50);
  }
}
@media (max-width: 900px) {
  .tb-hero .tb-hero__cover.wp-block-cover {
    min-height: 0;
  }
  .tb-hero {
    --tb-hero-s: min(100vw, 36rem);
  }
  .tb-hero .tb-hero__stage {
    position: relative;
    order: 2;
    overflow: hidden;
    height: calc(var(--tb-hero-s) * 1.18);
    margin-top: clamp(2rem, 6vw, 3.5rem);
  }
  .tb-hero .tb-hero__inner {
    order: 1;
    display: block;
    flex: none;
    padding-top: calc(var(--hp-header-h) + clamp(1.5rem, 6vw, 3rem));
  }
  .tb-hero .tb-hero__content,
  .tb-hero .tb-hero__title,
  .tb-hero .tb-hero__lead {
    max-width: 38rem;
  }
  .tb-hero .tb-hero__blob {
    right: calc(var(--tb-hero-s) * -0.06);
    bottom: calc(var(--tb-hero-s) * 0.04);
    width: calc(var(--tb-hero-s) * 1.04);
  }
  .tb-hero .tb-hero__element {
    right: 0;
    bottom: 0;
    width: calc(var(--tb-hero-s) * 0.74);
  }
  .tb-hero .tb-hero__person {
    inset: 2% 0 auto 0;
    width: auto;
    height: 116%;
    transform: none;
  }
  .tb-hero .tb-hero__person img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  .tb-hero .tb-hero__stats-wrap {
    order: 3;
    margin-top: 0;
    padding-top: clamp(2rem, 7vw, 3rem);
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }
}
@media (max-width: 560px) {
  .tb-hero .tb-hero__actions .wp-block-button,
  .tb-hero .tb-hero__actions .wp-block-button__link {
    width: 100%;
  }
  .tb-hero .tb-hero__stage {
    height: calc(var(--tb-hero-s) * 1.24);
  }
  .tb-hero .tb-hero__person {
    height: 112%;
  }
  .tb-hero .tb-hero__element {
    right: 0;
    width: calc(var(--tb-hero-s) * 0.8);
  }
}
.tb-hero {
  /* ========================================================
     ZDEJMOWANIE ODSTĘPÓW UKŁADU WORDPRESSA.

     WP dokłada każdemu dziecku układu „flow" margin-block: 24px 0
     regułą `:root :where(.is-layout-flow) > *`. Ma ona specyficzność
     (0,1,0), czyli remisuje z pojedynczą klasą — o wyniku decyduje
     wtedy kolejność wczytania arkuszy, a ta bywa różna.

     W dowodzie społecznym odstępy wyznacza nasza
     siatka, więc te marginesy muszą zniknąć pewnie, nie przypadkiem.
     Stąd podwójny selektor (0,2,0) zamiast !important.
     ======================================================== */
}
.tb-hero .tb-hero__avatar, .tb-hero .tb-hero__social-text {
  margin-block: 0;
}

/* ==========================================================================
   WIDOK W EDYTORZE.

   Gutenberg nadaje każdemu blokowi w kanwie position: relative
   (.block-editor-block-list__block), żeby móc rysować obramowania
   zaznaczenia. Zdejmuje to nasze absolutne pozycjonowanie grafik:
   zdjęcie i koło wpadały w normalny przepływ, lądowały jedno pod drugim
   i na nagłówku, a sekcja rosła do ponad 2000 px zamiast wysokości ekranu.

   Przywracamy układ z frontu, żeby redaktor widział to, co edytuje.
   Selektor z .editor-styles-wrapper daje (0,2,0) i bije regułę
   Gutenberga (0,1,0), a na froncie tej klasy nie ma, więc nic tam
   nie zmienia.
   ========================================================================== */
.editor-styles-wrapper {
  /* Warstwa grafik nie może być punktem odniesienia. Gutenberg robi ją
     relatywną razem z resztą bloków, a że w przepływie jest niemal
     zerowej wysokości, koło odjeżdżało wtedy setki pikseli nad sekcję. */
}
.editor-styles-wrapper .tb-hero__stage {
  position: static;
}
.editor-styles-wrapper .tb-hero__element,
.editor-styles-wrapper .tb-hero__person {
  position: absolute;
}
.editor-styles-wrapper {
  /* Kanwa edytora jest węższa i niższa niż okno, więc pełnoekranowa
     wysokość tylko rozpychałaby podgląd. Zostaje proporcja sceny. */
}
.editor-styles-wrapper .tb-hero__cover.wp-block-cover {
  min-height: calc(var(--hp-scene-h) * 0.72);
}