/* Sekcja kontaktowa — K18, task03.25 (styl per komponent — docs/podejscie-css.md; punkt wyjścia:
   makieta/css/sekcja-kontaktowa.css i nachodzenie z makieta/css/strona.css, task01.40).
   Wg FeuerDS: „Kontakt stopka" 7:6786 (desktop, sama karta 794×246) i „Kontakt stopka mobile" 7:5533.
   Sekcja = sama karta bez tła i bez własnych odstępów — odstępy od sąsiednich sekcji z ich paddingów.
   Nachodzenie na szare tło (task03.25, „Decyzje"): dół karty na szarym jak w widokach (123 z dołu
   karty, mobile 206 — widoki 2:3069 / 2:1692) wyłącznie, gdy następna sekcja ma szare tło albo
   blok stoi ostatni przed stopką (szary pas pod kartą 128 jak w widokach kategorii i oferty
   5324:5469 / 5324:5930, mobile 64 jak ramka 7:5533; dalej szare tło pod przezroczystą częścią
   pasa certyfikatów stopki);
   po sekcji z szarym tłem tak samo góra karty (123, mobile 206).
   Desktop: nagłówek wyrównany do góry karty, w linii z danymi (task01.40). Awatar = zawsze znak
   z logo w kole (ikony/logo-duze.svg, kolor marki przez maskę). Dane kontaktu — tekst formatowany
   wg atomów treści redakcyjnej (A40, .tresc — reguła „Podzbiór palety"). Do kanonu (rejestr
   spojnosc-designu.md): nagłówek 28/39.2 (ramka 28/36), obrys --kolor-linii (#dbe1f1).
   Tablet (640–1023) bez projektu — układ mobile. Wartości px z Figmy w rem (baza 16). */

/* Szare tło sekcji pod kartą: pas od góry (--szare-gora) i od dołu (--szare-dol); gdy pasy się
   stykają albo zachodzą — tło szare w całości. */
.sekcja-kontaktowa {
  --nachodzenie: 7.6875rem;               /* 123 — góra / dół karty na szarym tle */
  --pas-pod-karta: 0rem;
  --szare-gora: 0rem;
  --szare-dol: 0rem;
  max-width: 90rem;                       /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  padding-bottom: var(--pas-pod-karta);
  background: linear-gradient(var(--kolor-tla-wyroznionego) var(--szare-gora), transparent 0 calc(100% - var(--szare-dol)), var(--kolor-tla-wyroznionego) 0);
}

/* Szare sekcje rozpoznawane po klasach bloków — nowy blok z szarym tłem sekcji dopisuje się tutaj
   (w edytorze belka zapowiedzi siedzi w opakowaniu bloku wstawianego w treść — :has() nie może być
   zagnieżdżony w :has(), więc w edytorze wyłączona belka też liczy się jako szara). Poprzednia sekcja:
   także belka informacyjna odm. 1 (kończy się szarym pasem). */
.sekcja-kontaktowa:has(+ :is(.aktualnosci, .belka-zapowiedzi, .wp-block-feuer-belka-zapowiedzi, .dla-kogo, .faq, .proces, .zobacz-takze, .kafle-produktowe)) { --szare-dol: var(--nachodzenie); }
:is(.aktualnosci, .belka-zapowiedzi, .wp-block-feuer-belka-zapowiedzi, .dla-kogo, .faq, .proces, .zobacz-takze, .kafle-produktowe, .belka-info-1) + .sekcja-kontaktowa { --szare-gora: var(--nachodzenie); }

.wp-block-post-content > .sekcja-kontaktowa:last-child {
  --pas-pod-karta: 8rem;                  /* 128 */
  --szare-dol: calc(var(--nachodzenie) + var(--pas-pod-karta));
}
body:has(.wp-block-post-content > .sekcja-kontaktowa:last-child) .stopka-certyfikaty { background: var(--kolor-tla-wyroznionego); }

/* Szara sekcja nad i pod kartą — karta w całości na szarym (bez białego pasa między nachodzeniami). */
:is(.aktualnosci, .belka-zapowiedzi, .wp-block-feuer-belka-zapowiedzi, .dla-kogo, .faq, .proces, .zobacz-takze, .kafle-produktowe, .belka-info-1) + .sekcja-kontaktowa:is(:has(+ :is(.aktualnosci, .belka-zapowiedzi, .wp-block-feuer-belka-zapowiedzi, .dla-kogo, .faq, .proces, .zobacz-takze, .kafle-produktowe)), :last-child) { --szare-gora: 100%; }

.karta-kontaktu {
  box-sizing: border-box;
  max-width: 49.625rem;                   /* 794 — wycentrowana w kontenerze */
  margin-inline: auto;
  padding: var(--odstep-4);               /* 32 */
  border: 1px solid var(--kolor-linii);
  background: var(--kolor-tla);
  color: var(--kolor-tekstu);
  display: flex;
  align-items: flex-start;                /* nagłówek do góry, w linii z danymi */
  gap: 1.4375rem;                         /* 23 */
}

.karta-kontaktu-tytul {
  flex: 1 1 0;
  margin: 0;
  font-size: var(--tekst-28);             /* 28/39.2 ExtraBold (A24 mobile) */
  line-height: var(--interlinia-28);
  font-weight: var(--waga-najgrubsza);
}

.karta-kontaktu-osoba {
  flex: 0 0 24.5625rem;                   /* 393 */
  display: flex;
  gap: 1.4375rem;                         /* 23 */
}

/* Awatar: koło 120 na tle wyróżnionym, znak z logo 84×48 wyśrodkowany (18 / 36 w ramce). */
.karta-kontaktu-awatar {
  flex: 0 0 7.5rem;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background-color: var(--kolor-tla-wyroznionego);
  position: relative;
}

.karta-kontaktu-awatar::before {
  content: "";
  position: absolute;
  inset: 2.25rem 1.125rem;                /* 36 / 18 */
  background-color: var(--kolor-marki);
  mask: url("../ikony/logo-duze.svg") center / contain no-repeat;
}

.karta-kontaktu-dane {
  flex: 1 1 0;
  min-width: 0;                           /* długi e-mail łamie się w kolumnie, nie rozpycha karty */
  display: flex;
  flex-direction: column;
  align-items: flex-start;                /* przycisk hug jak w ramce desktop */
  gap: 0.75rem;                           /* 12 */
  overflow-wrap: anywhere;
}

.karta-kontaktu-dane > * { margin: 0; }
.karta-kontaktu-tekst > :last-child { margin-block-end: 0; }

/* Edytor: RichText przycisku dostaje w stylu inline white-space: pre-wrap — przycisk A41 nie łamie wiersza. */
.karta-kontaktu-dane .przycisk.rich-text { white-space: pre !important; }

/* Poniżej 1024 px: układ mobile wg ramki 7:5533 — jedna kolumna, padding 24 / 16,
   przycisk na całą szerokość karty; nachodzenie na szare tło 206, pas pod ostatnią kartą 64. */
@media (max-width: 1023px) {
  .sekcja-kontaktowa { --nachodzenie: 12.875rem; }   /* 206 = 468 − 262 */
  .wp-block-post-content > .sekcja-kontaktowa:last-child { --pas-pod-karta: 4rem; }   /* 64 jak ramka 7:5533 */
  .karta-kontaktu {
    flex-direction: column;
    padding: var(--odstep-3) var(--odstep-2);
  }
  .karta-kontaktu-osoba {
    flex: 0 0 auto;
    flex-direction: column;
    width: 100%;
  }
  .karta-kontaktu-dane { align-self: stretch; }
  .karta-kontaktu-dane .przycisk { display: flex; width: 100%; }
}