/* ==========================================================================
   STRONY TREŚCIOWE
   O mnie, Kontakt, Regulamin, FAQ, Dostawa, Zwroty, Współpraca.
   Typografia redakcyjna: jedna kolumna o czytelnej szerokości,
   nagłówki szeryfowe, wyraźny rytm pionowy.
   ========================================================================== */

.mp-strona{ background:var(--mp-cream); padding-block:clamp(34px,4.6vw,64px) clamp(56px,8vw,110px); }

.mp-strona__grid{ display:block; }
.mp-strona--z-portretem .mp-strona__grid{
  display:grid; grid-template-columns:minmax(280px,400px) 1fr;
  gap:clamp(32px,5vw,80px); align-items:start;
}

.mp-strona__portret{ margin:0; }
.mp-strona__foto{
  display:block; width:100%; height:auto;
  border:1px solid var(--mp-line); background:var(--mp-warm);
}

/* --- kolumna tekstu --- */

/* Pełna szerokość treści. Żeby długi tekst pozostał czytelny mimo szerokiej
   kolumny, akapity łamią się na dwie kolumny od 1100 px — oko nie musi
   wtedy wracać przez cały ekran. Nagłówki, tabele i listy zostają pełne. */
.mp-strona__tresc{ max-width:none; }
.mp-strona__tresc > *:first-child{ margin-top:0; }
.mp-strona__tresc > *:last-child{ margin-bottom:0; }

/* Pola formularza są zbudowane z akapitów (<p class="mp-pole">), więc bez
   tego wyłączenia łapała je szerokość czytelna 74ch i pole wiadomości było
   węższe od pary pól nad nim. */
.mp-strona__tresc .mp-form p,
.mp-strona__tresc form p{ max-width:none; }

.mp-strona__tresc p{
  /* 74ch dawało 708 px, czyli około 100 znaków w wierszu — jednostka ch to
     szerokość zera, a w Joście zero jest wyraźnie węższe od średniego znaku.
     Zmierzone znak po znaku na pięciu podstronach: 86–105 znaków przy
     zakładanych 74. Wygodny zakres to 45–90; 62ch daje około 84. */
  margin:0 0 18px; max-width:62ch;
  font:300 16.5px/1.85 var(--mp-sans); color:var(--mp-body-2);
  letter-spacing:.004em; text-wrap:pretty;
}

/* Akapit wiodący — pierwszy po nagłówku sekcji albo z klasą mp-lead. */
.mp-strona__tresc > p:first-of-type,
.mp-strona__tresc p.mp-lead{
  font-size:clamp(17px,1.6vw,19px); line-height:1.7; color:var(--mp-ink-2);
}

.mp-strona__tresc h2{
  font:300 clamp(24px,3vw,32px)/1.2 var(--mp-serif); color:var(--mp-ink);
  margin:clamp(34px,4vw,52px) 0 14px; text-wrap:balance;
}
.mp-strona__tresc h3{
  font:400 clamp(17px,1.7vw,20px)/1.35 var(--mp-serif); color:var(--mp-ink-2);
  margin:clamp(26px,3vw,38px) 0 10px; text-wrap:balance;
}
.mp-strona__tresc h4{
  font:400 11px/1.5 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-muted); margin:26px 0 8px;
}

/* overflow-wrap: adres wypisany w tekście jako odnośnik (regulamin, § 16 —
   UOKiK i platforma ODR, decyzja 19 z 20 września) to jedno „słowo” szersze
   niż kolumna telefonu: przy 390 px kończył się 9 px za kolumną. Łamie się
   wyłącznie wtedy, gdy się nie mieści. */
.mp-strona__tresc a{ color:var(--mp-bronze); border-bottom:1px solid var(--mp-line-2); overflow-wrap:anywhere; }
.mp-strona__tresc a:hover{ color:var(--mp-ink); border-bottom-color:var(--mp-ink); }

/* Listy trzymają tę samą szerokość co akapity. W regulaminie dwie z nich
   miały pełne 1232 px, co dawało 124 i 172 znaki w wierszu, podczas gdy
   akapity nad nimi i pod nimi kończyły się na 708 px. */
.mp-strona__tresc ul,
.mp-strona__tresc ol{ margin:0 0 18px; padding-left:0; list-style:none; max-width:62ch; }

/* To samo dotyczy nagłówków i wszystkiego, co niesie tekst ciągły — inaczej
   wyśrodkowany podtytuł centruje się względem innej osi niż tekst pod nim. */
.mp-strona__tresc h2,
.mp-strona__tresc h3,
.mp-strona__tresc h4,
.mp-strona__tresc h5,
.mp-strona__tresc h6,
.mp-strona__tresc blockquote{ max-width:62ch; }
.mp-strona__tresc ul li{ position:relative; padding-left:20px; margin-bottom:9px; line-height:1.75; }
.mp-strona__tresc ul li::before{
  content:''; position:absolute; left:2px; top:.8em; width:6px; height:1px; background:var(--mp-rule);
}
.mp-strona__tresc ol{ counter-reset:mp; }
.mp-strona__tresc ol li{ position:relative; padding-left:28px; margin-bottom:9px; counter-increment:mp; line-height:1.75; }
.mp-strona__tresc ol li::before{
  content:counter(mp) '.'; position:absolute; left:0; top:0;
  font:300 14px/1.85 var(--mp-serif); color:var(--mp-bronze);
}

/* Tabela jest szersza od kolumny tekstu, bo dane w kolumnach potrzebują
   miejsca — ale nie na pełne 1232 px. Przy trzech krótkich kolumnach
   rozjazd między tabelą a akapitem nad nią wyglądał jak błąd układu. */
.mp-strona__tresc table{
  width:100%; max-width:820px; border-collapse:collapse; margin:0 0 22px; font-size:14.5px;
}
/* Odstęp od góry MUSI być w skrócie padding, nie osobną deklaracją przed nim
   — skrót niżej w tym samym bloku wyzerowałby ją. Bez tego pole tekstu
   etykiety wystawało 2 px ponad górną krawędź komórki i stykało się z kreską. */
.mp-strona__tresc th{
  text-align:left; font:400 10.5px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-muted);
  padding:14px 16px 10px 0; border-bottom:1px solid var(--mp-line-2);
}
.mp-strona__tresc td{
  padding:12px 16px 12px 0; border-bottom:1px solid var(--mp-line);
  color:var(--mp-body-2); line-height:1.6;
}
.mp-strona__tresc tr:last-child td{ border-bottom:0; }

.mp-strona__tresc img{ height:auto; margin-block:8px 22px; }
.mp-strona__tresc blockquote{
  margin:26px 0; padding-left:20px; border-left:2px solid var(--mp-rule);
  font:300 clamp(17px,1.7vw,20px)/1.65 var(--mp-serif); color:var(--mp-ink-2);
}

/* Dane kontaktowe jako lista definicji */
/* Dane kontaktowe jako pas przez całą szerokość treści. Cztery pozycje obok
   siebie na szerokim ekranie, jedna pod drugą na wąskim — przy 640 px
   w kontenerze 1232 px wyglądały jak przypis, a to pierwsza rzecz,
   której szuka się na stronie kontaktowej. */
.mp-dane{
  margin:0 0 clamp(30px,3.4vw,46px); display:grid; gap:1px;
  background:var(--mp-line); border:1px solid var(--mp-line);
}

.mp-dane > div{ background:var(--mp-warm); padding:16px 18px; display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline; }
.mp-dane dt{
  flex:0 0 130px; font:400 10.5px/1.6 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-dane dd{ flex:1 1 200px; margin:0; font:300 15px/1.7 var(--mp-sans); color:var(--mp-ink-2); }

@media (max-width:860px){
  .mp-strona--z-portretem .mp-strona__grid{ grid-template-columns:1fr; }
  /* Portret na całą szerokość kolumny. Przy 280 px w kolumnie 370 px jego
     prawa krawędź kończyła się 90 px przed krawędzią tekstu, mimo że lewe
     krawędzie się pokrywały — wyglądało to na obraz, który się nie wczytał. */
  .mp-strona__portret{ max-width:none; }
}

/* --- formularz kontaktowy --- */

.mp-form--kontakt{ max-width:34rem; margin-top:22px; }
/* Formularz zajmuje pełną szerokość kolumny treści, a pola układają się
   w dwie kolumny. Przy 544 px w kontenerze 1232 px wyglądał jak zgubiony
   w pustce — a to główny element tej strony, nie przypis. */
.mp-form--kontakt{
  max-width:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,2.4vw,36px);
  margin-top:22px;
}
/* Wiadomość, zgoda, komunikat i przycisk przez obie kolumny. */
.mp-form--kontakt > .mp-komunikat,
.mp-form--kontakt > .mp-pole--checkbox,
.mp-form--kontakt > .mp-pulapka,
.mp-form--kontakt > .mp-btn,
.mp-form--kontakt > .mp-pole:has( textarea ){
  grid-column:1 / -1;
}
.mp-form--kontakt > .mp-btn{ justify-self:start; }
.mp-form--kontakt textarea.mp-input{ min-height:150px; resize:vertical; line-height:1.7; }

@media (max-width:640px){
  .mp-form--kontakt{ grid-template-columns:1fr; }
}
.mp-pulapka{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mp-blad{
  display:block; margin-top:5px; font:300 13px/1.5 var(--mp-sans); color:#8C3226;
}
.mp-input[aria-invalid="true"]{ border-color:#8C3226; }
.mp-komunikat{
  margin:0 0 20px; padding:14px 16px; border-left:2px solid var(--mp-bronze);
  background:var(--mp-warm); font:300 14.5px/1.65 var(--mp-sans); color:var(--mp-ink-2);
}
.mp-komunikat--blad{ border-left-color:#8C3226; }


/* ==========================================================================
   WYKOŃCZENIE PODSTRON
   Kilka drobiazgów, które odróżniają stronę zrobioną od strony dopracowanej.
   ========================================================================== */

/* Nagłówek sekcji dostaje cienką kreskę nad sobą — rytm, nie ozdoba. */
.mp-strona__tresc h2{ position:relative; padding-top:clamp(18px,2vw,26px); }
.mp-strona__tresc h2::before{
  content:''; position:absolute; top:0; left:0;
  width:34px; height:1px; background:var(--mp-rule);
}
.mp-strona__tresc > h2:first-child{ padding-top:0; }
.mp-strona__tresc > h2:first-child::before{ display:none; }

/* Pierwsza litera akapitu wiodącego nieco większa — chwyt z prasy,
   stosowany raz na stronę, nie przy każdym akapicie. */
.mp-strona__tresc > p:first-of-type::first-line{ letter-spacing:.01em; }

/* Odnośniki wewnątrz treści: podkreślenie pojawia się dopiero pod kursorem,
   żeby akapit nie wyglądał jak pole minowe. */
.mp-strona__tresc p a{
  border-bottom-color:transparent;
  transition:border-color .15s ease, color .15s ease;
}
.mp-strona__tresc p a:hover{ border-bottom-color:var(--mp-bronze); }

/* Portret dostaje delikatny cień, taki sam jak kafle produktów. */
.mp-strona__foto{
  box-shadow:0 18px 40px -30px rgba(44,35,25,.45);
}

/* Dane kontaktowe: etykiety w jednej kolumnie, wartości w drugiej. */
.mp-dane{ max-width:640px; }
/* Numer telefonu nie może się łamać w środku. Przy oknach 870–1290 px
   i 430–500 px kolumna była za wąska i „+48 608 078 279" rozpadało się
   na „+48 608 078" / „279" — numer przecięty w połowie czyta się jak błąd. */
.mp-dane dd a[href^="tel:"]{ white-space:nowrap; }
.mp-dane dd a{ color:var(--mp-ink); border-bottom:1px solid var(--mp-line-2); }
.mp-dane dd a:hover{ color:var(--mp-bronze); border-bottom-color:var(--mp-bronze); }

/* Cztery pozycje obok siebie na szerokim ekranie. Reguła stoi PO bazowej,
   bo ma tę samą szczegółowość — wcześniej przegrywała kolejnością i komórki
   zostawały na baseline. Zerowanie flex-basis na dd jest konieczne: w układzie
   pionowym „flex:1 1 200px" znaczy 200 pikseli WYSOKOŚCI, przez co komórka
   rosła do 366 px i pas wyglądał na pusty w trzech czwartych. */
@media (min-width:900px){
  .mp-dane{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mp-dane > div{
    flex-direction:column; align-items:flex-start;
    justify-content:flex-start; gap:7px;
  }
  .mp-dane dt,
  .mp-dane dd{ flex:0 0 auto; }
}

/* ŁAMANIE NA KOLUMNY ZDJĘTE — świadomie.
   Kolumny gazetowe (`columns`) rozdzielały nagłówki od ich treści: „Napisz
   wiadomość" zostawało w prawej kolumnie, formularz lądował po lewej, a akapit
   „Każdy projekt wyceniany jest indywidualnie" odklejał się od swojego
   nagłówka. break-inside i break-after tego nie ratują, bo chronią pojedyncze
   elementy, a nie SEKCJĘ złożoną z nagłówka i kilku akapitów.
   Do tego kolumny na stronie WWW zmuszają czytelnika do wracania na górę
   po każdej kolumnie — na kartce to działa, na ekranie nie.
   Zamiast tego: jeden ciąg tekstu o czytelnej szerokości, a bloki
   strukturalne (dane kontaktowe, formularz, tabele) na pełnej szerokości. */

/* ==========================================================================
   PEŁNA SZEROKOŚĆ
   Hello Elementor narzuca .site-main{max-width:1140px}, co przykrywało
   nasze 1360 i zwężało kolumnę tekstu do 540 px przy oknie 1440.
   Selektor jest celowo bardziej szczegółowy, żeby obyć się bez !important.
   ========================================================================== */

/* Poniżej 576 px hello-elementor (theme.css) ustawia
   body:not([class*=elementor-page-]) .site-main{padding-inline:10px},
   co przebijało .mp-wrap{padding-inline:var(--mp-gut)}. Skutek: treść stała
   10 px od krawędzi, a nagłówek strony i stopka 20 px — sąsiadujące sekcje
   miały różne lewe krawędzie. Selektor poniżej jest bardziej szczegółowy. */
@media (max-width:575px){
  body .mp-strona .mp-strona__grid.site-main{ padding-inline:var(--mp-gut); }
}

.mp-strona .mp-strona__grid.site-main,
.mp-realizacja .mp-wrap,
.mp-portfolio .mp-wrap{
  max-width:var(--mp-max);
  width:100%;
}

/* Tekst czyta się w jednym ciągu, o szerokości, przy której oko nie gubi
   początku wiersza. Pełną szerokość kontenera wykorzystują bloki, które na
   tym zyskują: dane kontaktowe, formularz i tabele. */
/* Ta sama miara w ch co akapity. Lead ma większy stopień pisma, więc
   w pikselach wychodzi szerszy, ale liczba znaków w wierszu zostaje
   porównywalna — a to ona decyduje o czytelności, nie szerokość bloku. */
.mp-strona__tresc > p:first-of-type,
.mp-strona__tresc > .mp-lead{ max-width:62ch; }

.mp-strona__tresc > .mp-dane,
.mp-strona__tresc > form,
.mp-strona__tresc > .mp-form{ max-width:none; }

/* Tabela ma własny limit (820 px, ustawiony wyżej) — nie wpisujemy jej do
   listy „pełna szerokość", bo ta reguła jest bardziej szczegółowa i by go
   skasowała. Trzy krótkie kolumny rozciągnięte na 1232 px wyglądały jak
   błąd obok akapitu szerokiego na 683 px. */

/* --------------------------------------------------------------------------
   ZNACZNIK „DO WERYFIKACJI PRZEZ PRAWNIKA"
   Treści prawne na tej stronie są szkieletem, nie gotowym dokumentem.
   Znacznik ma być widoczny, a nie schowany — jego zadaniem jest nie pozwolić
   nikomu uznać szablonu WordPressa za politykę prywatności sklepu.
   -------------------------------------------------------------------------- */

.mp-strona__tresc .mp-uwaga-prawna{
  max-width:62ch; margin:0 0 30px;
  border-left:3px solid var(--mp-rule-mocny);
  background:var(--mp-warm);
  padding:18px 22px;
}
.mp-strona__tresc .mp-uwaga-prawna p{
  margin:0; font-size:15px; line-height:1.7; color:var(--mp-ink-2); max-width:none;
}