@charset "UTF-8";
/* ============================================================
   HERO - sekcja startowa Art of Office.
   Rozmiary liter idą presetami (has-*-font-size), kolory z palety,
   odstępy/promienie/cienie z tokenów. Tutaj tylko struktura sceny.
   Tło (aurora, ziarno) i reveal: assets/scss/_effects.scss.
   Siatka 3x3: acf/hero-siatka + acf/hero-kafelek (osobne bloki).
   ============================================================ */
/* Sekcja startowa siedzi pod nagłówkiem, więc górny padding musi go objąć.
   Selektor .tb-hero.section (dwie klasy) świadomie - samo .tb-hero przegrywa
   z `body .section { padding-block: var(--sect-y) }` z _layout.scss. */
.tb-hero.section {
  padding-top: calc(var(--hdr-h) + var(--space-3xl));
  padding-bottom: var(--sect-y-tight);
}
@media only screen and (max-width: 1000px) {
  .tb-hero.section {
    padding-top: calc(var(--hdr-h) + var(--space-lg));
    padding-bottom: var(--space-2xl);
  }
}

.tb-hero {
  min-height: min(94svh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* ── układ: treść + scena + pasek zaufania ────────────── */
  /* Blok ACF ma tylko jeden <InnerBlocks/>, a pasek zaufania jest poza nim.
     display:contents na wrapperze InnerBlocks przepuszcza obie kolumny
     (core/group) prosto do tej siatki, więc pasek może usiąść pod treścią
     w lewej kolumnie zamiast wypadać pod całość. */
}
.tb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-lg) var(--space-4xl);
  width: 100%;
}
.tb-hero {
  /* Dwa poziomy: własny wrapper + div, który ACF robi z <InnerBlocks/>.
     Oba przezroczyste dla siatki, żeby kolumny (core/group) były jej dziećmi. */
}
.tb-hero__cols, .tb-hero__cols-inner {
  display: contents;
}
.tb-hero .tb-hero__copy {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  /* minmax(0, 1fr), nie ścieżka domyślna: `auto` nie zejdzie poniżej
     min-content najszerszego dziecka. Para CTA jest na telefonie
     `nowrap`, więc jej min-content to suma obu przycisków - a ta
     rozpychała ścieżkę i ciągnęła za sobą nagłówek i lead, choć te
     łamią się bez problemu. Wszystko wyjeżdżało wtedy poza kadr. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  justify-items: start;
  /* core/group jedzie w trybie flow i dokłada dzieciom margin-block-start
     z blockGap. Odstęp daje już `gap` siatki - inaczej podwaja się. */
}
.tb-hero .tb-hero__copy > * {
  margin-block: 0;
}
.tb-hero .tb-hero__visual {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
}
@media only screen and (max-width: 1000px) {
  .tb-hero {
    /* Bez wymuszonej wysokości: na telefonie sekcja ma być wysoka na tyle,
       ile zajmuje treść. min(94svh, 900px) rozciągało hero na dwa ekrany. */
    min-height: 0;
    display: block;
    /* minmax(0, 1fr), nie 1fr - ścieżka 1fr ma min-width:auto i nie zejdzie
       poniżej min-content dzieci (długi nagłówek rozpycha ją poza ekran). */
  }
  .tb-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }
  .tb-hero .tb-hero__copy {
    grid-column: 1;
    grid-row: 1;
    gap: var(--space-md);
  }
  .tb-hero {
    /* Na wąskim ekranie scena ląduje pod paskiem zaufania, nie obok. */
  }
  .tb-hero .tb-hero__visual {
    grid-column: 1;
    grid-row: 3;
  }
}
.tb-hero {
  /* Nagłówek hero łamiemy krótko, żeby nie rozjechał się na trzy linie.
     Duży napis to <h2> - <h1> nosi nadnagłówek (SEO: fraza kluczowa w h1,
     hasło marketingowe niżej). Rozmiar i tak idzie z presetu, nie ze znacznika. */
}
.tb-hero h2 {
  max-width: 22ch;
  text-wrap: normal;
}
.tb-hero .lead {
  max-width: 48ch;
}
.tb-hero {
  /* ── pasek zaufania pod przyciskami ───────────────────── */
  /* & &__X → .tb-hero .tb-hero__X (0,2,0): przebija globalne `body ul`
     z theme-style.scss, które inaczej wygrywa z pojedynczą klasą. */
}
.tb-hero .tb-hero__trust {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  --wp--preset--font-size--text-smaller: 11px;
}
.tb-hero .tb-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-sm) 6px 6px;
  margin: 0;
  border: 1px solid var(--line-d);
  border-radius: var(--radius-sm);
  background: var(--surface-d);
  font-family: var(--ffont);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--wp--preset--color--text-on-dark);
}
.tb-hero .tb-hero__trust .icon {
  width: 13px;
  height: 13px;
  color: var(--wp--preset--color--accent-on-dark);
}
@media only screen and (max-width: 1000px) {
  .tb-hero .tb-hero__trust {
    grid-column: 1;
    grid-row: 2;
  }
}
@media only screen and (max-width: 575px) {
  .tb-hero .tb-hero__trust {
    --wp--preset--font-size--text-smaller: 9px;
    flex-wrap: nowrap;
    gap: 5px;
  }
  .tb-hero .tb-hero__trust li {
    gap: 4px;
    padding: 5px 6px;
    letter-spacing: 0.04em;
  }
  .tb-hero .tb-hero__trust .icon {
    width: 11px;
    height: 11px;
  }
}
@media only screen and (max-width: 419px) {
  .tb-hero .tb-hero__trust {
    flex-wrap: wrap;
  }
}
.tb-hero {
  /* ── wskaźnik przewijania ─────────────────────────────── */
}
.tb-hero__scroll {
  position: absolute;
  left: var(--gut);
  bottom: var(--space-lg);
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-on-dark-soft);
  z-index: 2;
}
.tb-hero__scroll i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
  animation: tb-hero-hint 2.2s var(--ease-io) infinite;
  transform-origin: top;
}
@media only screen and (max-width: 1000px) {
  .tb-hero__scroll {
    display: none;
  }
}

@keyframes tb-hero-hint {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  35% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1) translateY(34px);
    opacity: 0;
  }
}