/* artykuly.css — strony kontakt i poradnik w szacie D1-7 (ładowane po baza.css i d1-7.css).
   Te strony mają własny, stary arkusz w <style>; tu tylko go nadpisujemy. Treść bez zmian. */

/* na tych stronach kartka stoi zaraz za <header>, a D1 traktuje `header + div` jak 20-pikselowy odstęp
   ze stron usług i daje mu stałą wysokość — tu to musi być zwykła, rosnąca z treścią kartka */
body > header + .container { height: auto !important; min-height: 0 !important; }

/* kontener-karta: ta sama kartka ze szkicowanym obrysem co karty na stronach usług */
body > .container {
  position: relative; width: 100% !important; max-width: 880px; box-sizing: border-box;
  margin: 30px auto 28px !important; padding: 30px 34px !important;
  background: var(--karta) !important; border-radius: 6px; box-shadow: 0 20px 34px -24px rgba(31, 58, 46, .5);
}
body > .container::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  border: 20px solid transparent; border-image: var(--szkic-ramka) 20 stretch;
}

/* nagłówki wewnątrz kartki */
.container h1, .container h2, .container h3 { font-family: var(--serif) !important; color: var(--ink) !important; line-height: 1.2; }
.container h1 { font-size: clamp(30px, 4.2vw, 44px) !important; margin: 0 0 18px !important; padding-bottom: 10px; background: var(--szkic-podkresl) left bottom / min(260px, 60%) 9px no-repeat; }
.container h2 { font-size: clamp(22px, 2.6vw, 28px) !important; margin: 0 0 8px !important; }
.container h3 { font-size: 21px !important; margin: 26px 0 8px !important; }
.container p, .container .article-content, .container li { color: var(--ink2) !important; font-size: 17px; line-height: 1.75; }
.container p:empty { display: none; }
.container a { color: var(--zielen); }

/* przyciski (poradnik: „Przeczytaj więcej”, „Powrót”) — zielony kamyk jak na stronach usług */
.container .button, .container a.button {
  display: inline-block; width: auto !important; padding: 10px 20px !important; margin-top: 6px;
  background: var(--zielen) !important; color: #fff !important; text-decoration: none !important; font-weight: 600;
  border-radius: 26px 20px 28px 18px / 20px 28px 18px 26px; box-shadow: 4px 5px 0 -1px var(--masl), 4px 5px 0 0 var(--ink);
  transition: transform .2s ease;
}
.container .button:hover { background: var(--zielen2) !important; transform: translateY(-2px) rotate(-.6deg); }
.container .read-more { text-align: left !important; margin-top: 8px !important; }
.container .return { text-align: center; margin: 22px 0 6px; }

/* spis poradnika: miniatura + tytuł + zajawka */
.container .article { display: grid; grid-template-columns: 200px 1fr; gap: 10px 22px; align-items: start; padding: 22px 0; }
.container .article > img { width: 100% !important; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 !important; border-radius: 3px; box-shadow: 0 0 0 6px #fffdf7, 0 0 0 7px var(--ink), 0 14px 22px -14px rgba(31, 58, 46, .55); grid-row: 1 / 4; }
.container .article h2, .container .article p, .container .article .read-more { grid-column: 2; }
.container .article p { margin: 0 !important; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.container hr { border: 0; height: 0; border-top: 1.5px dashed var(--szalwia); margin: 0; }

/* tytuł artykułu: w HTML to pogrubiony akapit na początku treści (nie nagłówek) — tylko wygląd nagłówka */
.container .article-content > p:nth-child(-n+3) > strong:only-child,
.container .article-content > strong:first-child {
  display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.8vw, 40px); line-height: 1.15;
  color: var(--ink); margin: 0 0 16px; padding-bottom: 10px; background: var(--szkic-podkresl) left bottom / min(260px, 60%) 9px no-repeat;
}

/* treść artykułu: zdjęcia jak odbitki */
.container .article-image img, .container .article img { border-radius: 3px; box-shadow: 0 0 0 7px #fffdf7, 0 0 0 8px var(--ink), 0 16px 26px -16px rgba(31, 58, 46, .55); margin: 28px auto !important; max-width: min(100%, 680px) !important; }

/* tabela miast w artykułach. Artykuły mają wklejony drugi dokument HTML z własnym <style>
   (szara tabela z ramką, czarne linki, 5 kolumn <td>). Tu: komórki układają się w siatkę,
   która sama dobiera liczbę kolumn do szerokości kartki (na telefonie jedna). */
.container table {
  display: block; width: 100% !important; box-sizing: border-box; margin: 26px 0 10px !important;
  padding: 16px 0 0 !important; background: transparent !important;
  border: 0 !important; border-top: 1.5px dashed var(--szalwia) !important; border-radius: 0 !important;
}
.container table tbody { display: block; }
.container table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 24px; }
.container table td { display: block; width: auto !important; padding: 0 !important; }
.container table ul { margin: 0 !important; padding: 0 !important; list-style: none; columns: auto; }
.container table li { margin: 0 0 6px !important; font-size: 15px; line-height: 1.4; }
.container table a { color: var(--zielen) !important; text-decoration: none !important; }
.container table a:hover { text-decoration: underline !important; }

/* stopka wewnątrz kartki (artykuły): cicho, bez papieru pakowego i fali */
.container footer { margin: 22px 0 0 !important; padding: 14px 0 0 !important; background: transparent !important; color: var(--ink2) !important; border-top: 1.5px dashed var(--szalwia); font-size: 13px !important; text-align: left !important; }
.container footer::before { display: none; }
.container > br { display: none; }

/* kontakt */
.container .contact-info p { font-size: 18px; }
.container .contact-box {
  margin: 22px 0 !important; padding: 18px 22px !important; background: var(--masl) !important;
  border: 1.5px solid transparent !important; border-image: var(--szkic-obla) 30 / 24px / 7px stretch; border-radius: 16px;
}
.container .contact-box p { margin: 6px 0 !important; font-size: 19px; color: var(--ink) !important; }
.container .contact-box strong { color: var(--ink); }
.container .image-container { padding: 0 !important; margin-top: 10px; }
.container .image-container::after { display: none; }
.container .image-container img { width: 100% !important; max-width: 720px !important; }

/* strona główna poradnika nie ma stopki w treści: sekcja „O nas” ma dostać oddech od kartki */
.container + .zc-onas { margin-top: 10px !important; }

/* poradnik: stopka jest w kartce (albo jej nie ma), więc pas papieru pakowego na dole strony byłby pusty —
   zostaje sam papier; miejsce pod pływającym telefonem daje dolny margines strony */
body:not(:has(> footer)) { background: var(--grain), var(--papier) !important; padding-bottom: 130px !important; }

/* kontakt: stopka na dole strony, ale bez komunikatu o terminach pod nią — miejsce pod pływający telefon
   daje sama stopka (papier pakowy do samego dołu, bez paska papieru między nią a pasem na dole) */
body:has(> footer):not(:has(> footer + div)) { padding-bottom: 0 !important; }
body:has(> footer):not(:has(> footer + div)) > footer { padding-bottom: 150px !important; }
@media (max-width: 768px) {
  body:has(> footer):not(:has(> footer + div)) > footer { padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 768px) {
  body > .container { width: calc(100% - 24px) !important; margin: 16px 12px 20px !important; padding: 20px 16px !important; }
  body > .container::after { inset: -10px; }
  .container .article { grid-template-columns: 1fr; gap: 12px; }
  .container .article > img { grid-row: auto; max-width: 100% !important; }
  .container .article h2, .container .article p, .container .article .read-more { grid-column: 1; }
  .container table ul { columns: 1; }
  .container h1 { font-size: 28px !important; }
}