/* ============================================================
   PODSTRONY — treść artykułów zmigrowana z Joomli oraz formularz kontaktowy.
   Klasy cms-* generuje konwerter SP Page Buildera (PageBuilderConverter),
   dlatego nazw nie zmieniamy.
   ============================================================ */

/* Kolumna treści podstrony.
   Wcześniej szerokość ograniczał sam .article-body (74ch), ale bez wyśrodkowania —
   przez co treść kleiła się do lewej krawędzi, a prawa połowa ekranu zostawała pusta.
   Teraz cała kolumna (nagłówek, metadane, treść) jest wyśrodkowana jako jeden blok. */
.page{max-width:900px; margin-inline:auto; padding:56px 0 80px}
.page h1{font-size:clamp(32px,4.4vw,52px); margin-bottom:10px}
.page .meta{margin-bottom:32px}

/* Lista artykułów */
.card-list{list-style:none; padding:0; margin:0; display:grid; gap:2px}
.card-list a{
  display:flex; gap:14px; align-items:baseline; padding:14px 16px; background:var(--white);
  border:1px solid var(--sand-200); text-decoration:none; color:var(--brown-900);
}
.card-list a:hover{border-color:var(--blue-600)}
.card-list .lang{
  font-family:var(--mono); font-size:11px; color:var(--brown-500);
  border:1px solid var(--sand-200); padding:1px 6px; border-radius:3px; text-transform:uppercase;
}
.card-list .count{margin-left:auto; color:var(--brown-500); font-size:13px}

/* Treść artykułu — szerokość dziedziczy po .page, żeby nic nie uciekało w lewo. */
.article-body img{max-width:100%; height:auto; border-radius:var(--r)}
.article-body figure{margin:20px 0}
.article-body figcaption{color:var(--brown-500); font-size:13px; margin-top:6px}

.cms-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin:24px 0}
.cms-gallery figure{margin:0}
.cms-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover}

.cms-accordion details{border-bottom:1px solid var(--sand-200); padding:12px 0}
.cms-accordion summary{cursor:pointer; font-weight:600}

.cms-cta,.cms-slide{border:1px solid var(--sand-200); background:var(--white); padding:20px; margin:20px 0}
.cms-button{
  display:inline-block; background:var(--blue-600); color:var(--white); padding:8px 16px;
  text-decoration:none; border-radius:var(--r); font-size:14px;
}
.cms-contact{list-style:none; padding:0}

/* Ostrzeżenie o brakujących plikach zdjęć (widoczne w trakcie migracji) */
.missing{
  background:var(--blue-100); border:1px dashed var(--blue-400); color:var(--blue-700);
  padding:10px 14px; font-size:13px; margin:20px 0; font-family:var(--mono);
}

/* ---------- Formularz kontaktowy ---------- */
.contact{border-top:1px solid var(--sand-200); margin-top:48px; padding-top:28px}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.contact label{display:block; font-size:13px; color:var(--brown-500); margin-bottom:4px}
.contact input[type=text],.contact input[type=email],.contact textarea{
  width:100%; padding:9px 11px; margin-bottom:16px; font:inherit; font-size:15px;
  background:var(--white); border:1px solid var(--sand-200); border-radius:var(--r); color:var(--brown-900);
}
.contact ul{list-style:none; margin:-10px 0 12px; padding:0; color:var(--red-600); font-size:13px}
.contact button{border:0; cursor:pointer}

/* Pułapka na boty — niewidoczna dla człowieka, ale obecna w drzewie dokumentu. */
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.flash{padding:12px 16px; border-radius:var(--r); font-size:15px; margin:0 0 20px}
.flash--success{background:var(--blue-100); border:1px solid var(--blue-400); color:var(--blue-700)}
.flash--error{background:#FDECEB; border:1px solid var(--red-600); color:var(--red-600)}

@media (max-width:719px){
  .contact__grid{grid-template-columns:1fr}
}