/* ==========================================================================
   KONTAKT
   Wczytywana wyłącznie na stronie „Kontakt”, po arkuszu stron treściowych
   (inc/enqueue.php). Układ: cztery kafle z danymi, dwie kolumny tekstu
   i panel z formularzem.

   Wartości idą przez tokeny --mp-* ze style.css. Odcienie, których
   w tokenach nie ma, siedzą niżej jako zmienne lokalne.
   ========================================================================== */

.mp-kontakt{
  --k-kafel:#FBF8F4;      /* tło kafla z danymi */
  --k-spoina:#E9E2D8;     /* spoiny siatki kafli */
  --k-ikona:#8A7B69;      /* ikona stoi na białym kwadracie: 4,10:1 —
                             element nietekstowy, próg WCAG 1.4.11 to 3:1 */
  --k-panel:#FAF6F2;      /* tło panelu formularza */

  /* Odstępy idą przez gap, nie przez marginesy. Powód: Elementor zeruje
     marginesy każdego widgetu w kontenerze regułą
     `.e-con .elementor-widget.elementor-widget{margin:0}` o szczegółowości
     (0,4,0), której klasa (0,1,0) nie pokona. Odstęp zadany kontenerowi
     przez gap tej reguły w ogóle nie dotyczy — i przy okazji jest
     jednoznaczny: jedna wartość zamiast pary marginesów, które się
     zlewają albo nie. */
  display:flex; flex-direction:column;
  gap:clamp(40px,5vw,72px);
}

/* --------------------------------------------------------------------------
   Kafle z danymi kontaktowymi
   --------------------------------------------------------------------------
   Siatka spoinowa jak w kolekcjach na stronie głównej: tło pod spodem,
   1 px przerwy, jedna obwódka dookoła. Cztery kafle na monitorze, dwa na
   tablecie, jeden na telefonie.
   -------------------------------------------------------------------------- */

.mp-kontakt-kafle{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--k-spoina); border:1px solid var(--k-spoina);
  list-style:none; margin:0; padding:0;
}
.mp-kontakt-kafel{
  background:var(--k-kafel);
  padding:clamp(22px,2.4vw,32px);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.mp-kontakt-kafel__ikona{
  color:var(--k-ikona); display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--k-spoina); background:var(--mp-white);
  flex:0 0 auto;
}
.mp-kontakt-kafel__etykieta{
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-kontakt-kafel__wartosc{
  margin:0; font:300 15px/1.65 var(--mp-sans); color:var(--mp-ink-2);
  text-wrap:pretty;
}
.mp-kontakt-kafel__wartosc a{
  color:var(--mp-ink); border-bottom:1px solid var(--mp-line-2);
}
.mp-kontakt-kafel__wartosc a:hover{ color:var(--mp-bronze); border-bottom-color:var(--mp-bronze); }
/* Numer telefonu nie może się łamać w połowie. */
.mp-kontakt-kafel__wartosc a[href^="tel:"]{ white-space:nowrap; }
/* Kod pocztowy z miastem w jednym wierszu — „31-423” łamało się na dywizie. */
.mp-kontakt-kafel__kod{ white-space:nowrap; }

/* --------------------------------------------------------------------------
   Dwie kolumny tekstu
   -------------------------------------------------------------------------- */

.mp-kontakt-teksty{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.4vw,72px);
}
.mp-kontakt-blok{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
}
/* Ikona zastępuje kreskę, którą nagłówki sekcji mają w innych miejscach
   motywu — dwa znaczniki jeden nad drugim biły się o tę samą rolę. */
.mp-kontakt-blok__ikona{
  color:var(--k-ikona); display:flex; align-items:center;
  width:46px; height:46px; justify-content:center;
  border:1px solid var(--k-spoina); background:var(--k-kafel);
  flex:0 0 auto;
}
.mp-kontakt-blok__tytul{
  margin:0;
  font:300 clamp(22px,2.4vw,30px)/1.22 var(--mp-serif); color:var(--mp-ink);
  text-wrap:balance;
}
.mp-kontakt-blok__tekst p{
  margin:0 0 16px; max-width:52ch;
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-2);
  letter-spacing:.004em; text-wrap:pretty;
}
.mp-kontakt-blok__tekst p:last-child{ margin-bottom:0; }
.mp-kontakt-blok__tekst a{
  color:var(--mp-ink); text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:1px;
  text-decoration-color:var(--mp-rule);
}
.mp-kontakt-blok__tekst a:hover{ text-decoration-color:currentColor; }

/* --------------------------------------------------------------------------
   Panel formularza
   --------------------------------------------------------------------------
   Formularz jest głównym działaniem na tej stronie, więc dostaje własne
   pudełko na cieplejszym tle, wyśrodkowane i zawężone do miary, przy której
   pola nie robią się absurdalnie szerokie.
   -------------------------------------------------------------------------- */

.mp-kontakt-panel{
  max-width:820px; width:100%; margin-inline:auto;
  background:var(--k-panel); border:1px solid var(--mp-line-2);
  padding:clamp(26px,3.4vw,52px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.mp-kontakt-panel__ikona{
  color:var(--k-ikona); display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--mp-line-2); background:var(--mp-white);
  flex:0 0 auto;
}
.mp-kontakt-panel__tytul{
  margin:0;
  font:300 clamp(24px,2.8vw,34px)/1.2 var(--mp-serif); color:var(--mp-ink);
  text-wrap:balance;
}
/* Pola w panelu: dwie kolumny dla krótkich, wiadomość przez całą szerokość.
   Reguły .mp-form--kontakt ze strona.css robią to samo; tutaj domykamy
   odstępy, bo panel ma własny margines wewnętrzny. */
/* Formularz jest osobnym widgetem w kolumnie panelu, więc odstęp nad nim
   daje gap kontenera; tutaj tylko szerokość i rytm wierszy. */
.mp-kontakt-panel .mp-form--kontakt{ width:100%; margin-top:22px; row-gap:18px; }
.mp-kontakt-panel .mp-input{ background:var(--mp-white); }
.mp-kontakt-panel .mp-btn{ margin-top:4px; }

/* --------------------------------------------------------------------------
   Tablet i telefon — te same progi co w reszcie motywu
   -------------------------------------------------------------------------- */

@media (max-width:1100px){
  .mp-kontakt-kafle{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:860px){
  .mp-kontakt-teksty{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .mp-kontakt-kafle{ grid-template-columns:1fr; }
}