/* =============================================================================
 * Kontakt — poprawki po recenzji właściciela (hp-ct-*)
 *
 * Bazowe style tej podstrony siedzą w home-v2.css (sekcja „contact”), którego ten
 * obszar nie edytuje. Ten plik tylko nadpisuje to, co zmieniła recenzja:
 *   · nagłówek łamie się po przecinku, ale miękko — od 641px, nie na telefonie,
 *   · adres e-mail w hero jest sam i większy (zniknął dopisek „jedna skrzynka…”),
 *   · dół strony: adres rejestrowy w kształcie adresu zamiast zdania o spółce,
 *   · a po przeglądzie „na zimno” — te dane siedzą w zwartym kaflu w osi strony,
 *     nie w pasie przez całą szerokość okna (pas zostawiał setki pikseli pustej
 *     szarości i czytał się jak druga stopka, 280px nad prawdziwą).
 * Sekcja „Napisz od razu na temat” zniknęła z markupu — jej reguły (.hp-ct-strip,
 * .hp-ct-row*) zostają w home-v2.css jako martwe, bo tamten plik należy do kogoś innego.
 *
 * Pułapki z marketing.css (≤640px), obchodzone strukturą, nie !importantem:
 *   · `p { font-size: 14px !important }` — blok adresowy nie ma ani jednego <p>,
 *     wiersze to <span>-y w <address>.
 *   · `section h2 { font-size: 22px !important; text-align: center }` — widoczny
 *     podpis „Dane firmy” to <div>, a nagłówek sekcji jest .mkt-visually-hidden.
 *   · `section > div { padding-left/right: 20px !important }` — bezpośrednim dzieckiem
 *     sekcji jest .hp-wrap, więc ten padding jest pożądany (ta sama krawędź co reszta).
 * ========================================================================== */

/* --- nagłówek: łamanie po „tym,” -------------------------------------------
 * Bez <br>. Od 641px część akcentowana jest blokiem, więc wiersz kończy się dokładnie
 * na przecinku. Poniżej 641px reguła nie obowiązuje i oba fragmenty zawijają się
 * normalnie — telefon sam decyduje, gdzie złamać (marketing.css i tak wymusza tam
 * `h1 span { display: inline }`). Zmierzone: 768/1024/1440/1920 łamią się po „tym,”,
 * a 390 układa trzy wiersze bez sztywnego łamania.
 */
@media (min-width: 641px) {
  .hp-ct-title-accent {
    display: block;
  }
}

/* --- adres e-mail w hero ----------------------------------------------------
 * Był parą „pigułka + zdanie o jednej skrzynce”. Zostaje sam adres, za to większy:
 * to jedyna twarda dana kontaktowa na stronie, więc ma być widoczna od razu.
 */
.hp-ct-direct {
  margin-top: 30px;
}

.hp-ct-mail {
  gap: 11px;
  padding: 14px 24px;
  font-size: 17px;
}

.hp-ct-mail svg {
  width: 18px;
  height: 18px;
}

/* --- dane firmy -------------------------------------------------------------
 * Zamiast pełnowymiarowego szarego pasa przez całą szerokość okna: jeden zwarty,
 * wyśrodkowany kafel w osi strony (kicker, nagłówek, lead i adres e-mail też są
 * wyśrodkowane).
 *
 * Pas nie zdał egzaminu na dużych ekranach — zmierzone przed zmianą: przy 1440 trzy
 * numery rejestrowe siedziały w kolumnach po 250px, z czego treść zajmowała ~85px,
 * a od ostatniej cyfry do krawędzi kontenera zostawało 164px pustej szarości; przy
 * 1920 szara płyta miała 1920×256px na 137px treści. Czytało się to jak druga stopka
 * — tym bardziej że dolna belka stopki ~280px niżej niesie ten sam adres i te same
 * numery (Katowicka 86, 43-190 Mikołów, KRS/NIP/REGON).
 *
 * Kafel trzyma miarę hero: 640px, dokładnie tyle, co .hp-ct-lead — te same krawędzie,
 * co akapit otwierający stronę (1440 → 432…1008 jeden i drugi). Wypełnia się treścią:
 * adres po lewej, numery po prawej, włosowa linia w osi kafla.
 */
.hp-ct-legal {
  background: #FFFFFF;
  /* Odstęp od kafli daje .hp-ct-options (96px), więc ta sekcja nie dokłada swojego. */
  padding: 0 0 92px;
}

/* Baza = telefon (do 449px): jedna kolumna, adres nad numerami. Dwie kolumny wchodzą
 * od 450px, niżej w pliku — czyli wszędzie tam, gdzie się fizycznie mieszczą.
 * 640px to dokładnie miara .hp-ct-lead z hero — kafel trzyma tę samą kolumnę tekstu,
 * w której czyta się resztę strony, zamiast rozpychać cztery wiersze adresu na 1130px.
 */
.hp-ct-company {
  /* Jedna miara pionowa dla obu kolumn kafla: 15px × 1.55, czyli wysokość jednego wiersza
     adresu. Nazwa spółki i wiersze numerów rejestrowych dostają dokładnie ten sam wiersz,
     więc oba rytmy są identyczne, a nie tylko podobne. */
  --ct-line: 23.25px;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 22px 26px;
  border-radius: 18px;
  background: #F4F5F8;
  display: grid;
  gap: 20px;
}

.hp-ct-company-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #656B7E;
}

/* <address> jest domyślnie kursywą — adres pocztowy ma być zwykłym tekstem. */
.hp-ct-company-address {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  font-style: normal;
  font-size: 15px;
  line-height: 1.55;
  color: #4C5163;
}

.hp-ct-company-name {
  font-size: 16.5px;
  font-weight: 600;
  color: #14162B;
  /* Wiersz nazwy ma wysokość wiersza adresu, a nie 16.5 × 1.55: bez tego pierwszy odstęp
     w adresie był o 2.3px większy od pozostałych, więc kolumna numerów nie miała jednego
     rytmu do trafienia i REGON siadał 2.8px pod trzecim wierszem adresu. */
  line-height: var(--ct-line);
}

/* Numery rejestrowe: etykieta i wartość w jednym wierszu, wartości w jednej kolumnie —
 * blok czyta się jak druga połowa wizytówki i ma szerokość swojej treści, zamiast
 * rozpychać trzy kolumny na całą szerokość kontenera.
 */
.hp-ct-company-registry {
  display: grid;
  /* Dokładnie ten sam rytm, co wiersze adresu obok: ścieżka wysokości jednego wiersza
     plus 3px odstępu, czyli te same dwie liczby, którymi chodzi <address>. Poprzednia
     wersja liczyła odstęp (11px) od naturalnej wysokości wiersza mono (~17.78px) i wtedy
     dwa pierwsze numery trafiały na adres, a trzeci siadał 2.8px niżej. Teraz wysokość
     wiersza jest zadeklarowana, a nie zależna od metryki kroju.
     Zmierzone przy 1440 po zmianie: 813.6 / 837.2 / 860.8 w obu kolumnach. */
  grid-auto-rows: var(--ct-line);
  gap: 3px;
  margin: 0;
}

.hp-ct-company-registry > div {
  display: grid;
  grid-template-columns: 54px minmax(0, auto);
  align-items: baseline;
  gap: 12px;
}

.hp-ct-company-registry dt {
  /* Ten sam mikro-label co kicker „Dane firmy” i etykiety kafli (11px / 0.14em) —
     na jednej stronie nie ma dwóch rozmiarów tej samej rzeczy. */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #656B7E;
  /* Kolumna etykiet ma stałe 54px, żeby wartości stały w jednej linii pionowej;
     angielskie „VAT ID” ma spację, więc bez nowrap złamałoby się na dwa wiersze. */
  white-space: nowrap;
}

.hp-ct-company-registry dd {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  /* Wartość niesie wiersz adresu i to ona wyznacza wysokość wiersza (etykieta jest mniejsza,
     więc mieści się w tym samym wierszu bez wypychania go). Dzięki temu rytm kolumny nie
     zależy od metryki kroju mono. */
  line-height: var(--ct-line);
  letter-spacing: -0.01em;
  color: #14162B;
}

/* Od 450px: dwie kolumny w kaflu — adres i numery rozdzielone włosową linią w osi kafla,
 * kicker nad obiema, w osi lewej krawędzi adresu.
 *
 * Nie 641 i nie 481, tylko próg wyliczony z treści: jedna kolumna zostawia po prawej samą
 * szarość wszędzie tam, gdzie kafel nie jest już wąski jak telefon. Zmierzone przed zmianą
 * (obie wersje językowe): przy oknie 640px kafel miał 600px, najdłuższy wiersz kończył się
 * 181px od lewej krawędzi — 419px (70% kafla) puste; przy 480px puste było 237px (54%),
 * przy 449px — 206px (50%). To ta sama wada, którą ten plik usuwa u góry, o próg niżej.
 *
 * 450px to najniższe okno, w którym dwie kolumny naprawdę się mieszczą, więc niżej nie ma
 * czego poprawiać: połówki są równe (włosowa linia musi stać w osi kafla), a szersza z nich
 * to adres — „BrandinAI Sp. z o.o.” ma 159px plus 24px rynny, czyli 183px. Kolumna ma
 * (okno − 40px marginesów sekcji − 44px dopełnienia kafla) / 2, więc 183px wypada dokładnie
 * przy oknie 450px (kolumna numerów potrzebuje 169px, mieści się z zapasem). Poniżej nazwa
 * spółki łamałaby się na dwa wiersze. Zmierzone w PL i EN — oba progi wychodzą tak samo,
 * bo nazwa spółki i etykiety KRS/NIP/REGON są w obu językach te same.
 */
@media (min-width: 450px) {
  .hp-ct-company {
    /* Równe połowy, więc włosowa linia stoi w osi kafla — i stoi tam przy każdej szerokości,
       zamiast lądować tam, gdzie akurat kończy się najdłuższy napis. */
    grid-template-columns: 1fr 1fr;
    /* Odstęp między kolumnami niosą ich własne dopełnienia, a nie column-gap: włosowa linia
       stoi wtedy dokładnie na granicy połówek, czyli w osi kafla. Przy column-gap linia
       siadała o pół odstępu (20px przy 1440) w prawo od osi. */
    column-gap: 0;
    row-gap: 18px;
    /* stretch, nie start: włosowa linia biegnie wtedy na całą wysokość wiersza,
       a nie tylko na wysokość trzech numerów (adres ma cztery wiersze). */
    align-items: stretch;
  }

  .hp-ct-company-kicker {
    grid-column: 1 / -1;
  }

  .hp-ct-company-address {
    padding-right: 24px;
  }

  .hp-ct-company-registry {
    padding-left: 24px;
    border-left: 1px solid #E2E4EC;
    /* Kolumna rozciąga się na wysokość wiersza (przez nią biegnie linia), ale same
       wiersze zostają przy swoim rytmie u góry — inaczej trzy numery rozjeżdżały się
       na wysokość czterowierszowego adresu i nie trzymały żadnej linii. */
    align-content: start;
  }
}

/* Od 641px (ten sam próg, co reszta strony): więcej powietrza wokół treści. Szerokość
 * zostaje przy 640px z reguły bazowej, bo to miara .hp-ct-lead z hero — kafel stoi więc
 * dokładnie na tych samych krawędziach, co akapit otwierający stronę. Zmierzone: 1440 →
 * 432…1008 jeden i drugi, 1920 → 672…1248, 1024 → 224…800, 768 → 64…704.
 *
 * Wcześniej było tu `width: fit-content`, czyli szerokość wyliczona z długości napisów
 * (424px przy 1440) — nie pasowała do niczego innego na stronie i zmieniłaby się, gdyby
 * któryś numer urósł o cyfrę. Pas przez całą szerokość kontenera (tak zamyka się
 * /pl/dla-kogo) odpada z tego samego powodu, co jedna kolumna w paśmie 481–640: 1130px
 * kafla na 366px treści to 68% pustej szarości.
 */
@media (min-width: 641px) {
  .hp-ct-company {
    padding: 32px 34px 34px;
  }

  .hp-ct-company-address {
    padding-right: 44px;
  }

  .hp-ct-company-registry {
    padding-left: 44px;
  }
}

/* Telefon: marketing.css daje każdej sekcji 60px z góry i z dołu (!important), a kafle
 * powyżej niosą już swoje 60px — bez tej poprawki szew między kaflami a danymi firmy
 * miał 120px, dwa razy więcej niż każdy inny szew na telefonie (hero → kafle: 60px).
 */
@media (max-width: 640px) {
  .hp-ct-legal {
    padding-top: 4px !important;
  }
}