@charset "UTF-8";
/* ============================================================
   KONTAKT - zapytanie ofertowe. Po lewej treść i sposoby kontaktu,
   po prawej biała karta z formularzem Contact Form 7.

   Cała druga połowa pliku to ubranie wyjścia CF7 w wygląd z projektu.
   Wtyczka opakowuje każde pole w `<span class="wpcf7-form-control-wrap">`
   i dokłada własne klasy - nie da się tego wyłączyć, więc stylujemy jej
   markup zamiast walczyć z nim strukturą.
   ============================================================ */
.tb-kontakt {
  /* Światło zepchnięte w dół i przyciszone - ma podnosić białą kartę,
     nie walczyć z nią o uwagę. */
}
.tb-kontakt .aurora--kontakt {
  opacity: 0.45;
}
.tb-kontakt .aurora--kontakt .aurora__blob--a {
  top: auto;
  bottom: -22vw;
}
.tb-kontakt .tb-kontakt__uklad {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.tb-kontakt {
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. */
}
.tb-kontakt .tb-kontakt__blocks-wrap, .tb-kontakt .tb-kontakt__blocks {
  display: contents;
}
.tb-kontakt .tb-kontakt__aside {
  display: grid;
  /* minmax(0, 1fr), nie ścieżka domyślna: `auto` nie zejdzie poniżej
     min-content najszerszego dziecka, a wiersze kontaktu (acf/kanal)
     mają nierozrywalną nazwę obok kafla z ikoną. Na wąskim telefonie
     ta jedna nazwa rozpychała ścieżkę i wypychała poza kadr całą
     kolumnę - razem z nagłówkiem i leadem, które łamią się bez oporu. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  justify-items: start;
  margin-block: 0;
}
.tb-kontakt .tb-kontakt__aside > * {
  margin-block: 0;
}
.tb-kontakt .tb-kontakt__aside {
  /* Tytuł węższy od akapitu pod nim, ale nie tak wąsko, żeby łamał się
     na trzy wiersze. Przy 15ch „Masz kody z katalogu? Wrzuć je tutaj"
     schodziło na trzy linie, mimo że kolumna miała jeszcze 200 px zapasu.
     20ch mieści dwa wiersze przy obu tytułach, jakie tu stoją. */
}
.tb-kontakt .tb-kontakt__aside h2 {
  max-width: 20ch;
}
.tb-kontakt .tb-kontakt__kanaly {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
  margin-block: var(--space-xs) 0;
}
.tb-kontakt .tb-kontakt__kanaly > * {
  margin-block: 0;
  min-width: 0;
}
.tb-kontakt {
  /* ── karta formularza ─────────────────────────────────── */
  /* Biała wyspa w ciemnej sekcji. Cień jest głęboki i miękki, bo karta ma
     wyglądać na uniesioną nad tłem - to jedyny element sekcji, w którym
     coś się robi. */
}
.tb-kontakt__karta {
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-radius: var(--radius-xl);
  background: var(--wp--preset--color--paper);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6);
  color: var(--wp--preset--color--text);
}
.tb-kontakt__brak {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
}

@media only screen and (max-width: 940px) {
  /* minmax(0, 1fr), nie samo 1fr: `1fr` to `minmax(auto, 1fr)`, a `auto`
     nie zejdzie poniżej min-content zawartości - wiersze kontaktu rozpychały
     przez to całą kolumnę poza kadr na wąskim telefonie. */
  .tb-kontakt .tb-kontakt__uklad {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ============================================================
   WARIANT JASNY - strona kontaktu.

   Na stronie głównej ta sekcja jest ciemną płytą między jasnymi. Na stronie
   kontaktu cała strona ma być jedną jasną powierzchnią, więc sekcja przejmuje
   tło `--tint`, a karta formularza zamiast głębokiego cienia dostaje obrys -
   ten sam co karty wpisów i kafle danych.

   Klasa `is-style-jasny` idzie z kontrolki „Styl" (block-styles.php).
   Gutenberg kopiuje ją na wrapper bloku, więc wariant widać też w kanwie.

   Selektory z dwiema klasami (`.tb-kontakt.is-style-jasny`) świadomie -
   muszą przebić `body .section--dark` (0,1,1) z _layout.scss.
   ============================================================ */
.tb-kontakt.is-style-jasny {
  background: var(--wp--preset--color--paper-1);
  color: var(--wp--preset--color--text);
  /* Siatka w tle bierze wariant jasny - `.section--dark` zostaje w markupie,
     bo blok wypisuje ją na sztywno, ale motyw sekcji jest już inny. */
}
.tb-kontakt.is-style-jasny::before {
  --gl: var(--line-l);
}
.tb-kontakt.is-style-jasny {
  /* Aurora jest efektem ciemnej sekcji. Na jasnym tle robi z niej brudną
     plamę, więc znika w całości. */
}
.tb-kontakt.is-style-jasny .aurora {
  display: none;
}
.tb-kontakt.is-style-jasny .tb-kontakt__karta {
  border: 1px solid var(--line-l);
  box-shadow: var(--shadow-md);
}
.tb-kontakt.is-style-jasny {
  /* Na stronie kontaktu ta sekcja nie kończy strony, tylko oddaje pole
     danym i mapie na tym samym tle. Pełne `--sect-y` z obu stron dawało
     między nimi trzysta pikseli pustki i wyglądało to na dwie osobne
     strony sklejone przypadkiem. */
  padding-bottom: var(--space-2xl);
}

/* Warianty typografii przełącza `.section--dark`, a ta klasa zostaje
   w markupie. Cofamy je punktowo, zamiast zdejmować klasę z bloku -
   od niej zależy też wygląd przycisków i pól formularza.
   Specyficzność (0,3,0) bije `body .section--dark .lead` (0,2,1). */
body .tb-kontakt.is-style-jasny .lead,
body .tb-kontakt.is-style-jasny .text-muted {
  color: var(--wp--preset--color--text-muted);
}
body .tb-kontakt.is-style-jasny .eyebrow,
body .tb-kontakt.is-style-jasny .label-tech {
  color: var(--wp--preset--color--text-soft);
}