/* ==========================================================================
   ARCHETYPE MODERN CHAT
   Minimalistyczny system renderowania tresci wzorowany na jakosci
   prezentacji odpowiedzi ChatGPT: waska kolumna, spokojna typografia,
   duzo bialej przestrzeni, zero dekoracji bez funkcji.
   Zrodlo wartosci: spec "ChatGPT-like content design system" (2026-08)
   + prototyp _preview/chatgpt-content-renderer.html (Etap 1).
   TYLKO motyw jasny (dark przygotowany architektonicznie w tokenach,
   swiadomie niewdrozony w v1). Font systemowy — zero webfontow.
   Ladowany PO base.css — nadpisuje layout na pojedyncza kolumne.
   ========================================================================== */

:root {
  /* Colors — wyprowadzone z tokenow presetu, wartosc po przecinku to TYLKO awaryjny
     fallback dla podgladow bez tokens.css. Poprawka 2026-09-01: wczesniej te zmienne
     mialy zaszyte kolory presetu modern-chat, wiec KAZDY portal na tym archetypie
     dziedziczyl jego szarosci niezaleznie od wlasnego presetu — ta sama klasa defektu,
     co zielona stopka i pierscien fokusa naprawione 2026-08-31. */
  --content-bg: var(--color-bg, #ffffff);
  --content-text: var(--color-text-main, #212121);
  --content-text-secondary: var(--color-text-muted, #676767);
  --content-border: var(--color-border, #e5e5e5);
  --content-surface: var(--color-surface, #f7f7f7);
  --content-quote-border: color-mix(in srgb, var(--color-text-main, #212121) 20%, var(--color-bg, #ffffff));
  --content-quote-text: var(--color-text-muted, #424242);
  --content-code-bg: color-mix(in srgb, var(--color-text-main, #212121) 6%, var(--color-bg, #ffffff));

  /* Fonts */
  --mc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;
  --mc-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", monospace;

  /* Body — 18/1.61 (wytyczne typografii wpisu 2026-08-12; wczesniej 16/1.5) */
  --mc-text-size: 18px;
  --mc-text-line: 29px;

  /* Headings — H1 36/700 (wytyczne 2026-08-12) */
  --mc-h1-size: 36px;  --mc-h1-line: 42px;
  --mc-h2-size: 24px;  --mc-h2-line: 30px;
  --mc-h3-size: 20px;  --mc-h3-line: 27px;
  --mc-h4-size: 18px;  --mc-h4-line: 26px;
  --mc-h2-top: 52px;   /* odstep gorny H2 — sekcje maja sie wyraznie oddzielac */

  /* Weights */
  --mc-weight-normal: 400;
  --mc-weight-medium: 500;
  --mc-weight-semibold: 600;
  --mc-weight-bold: 700;

  /* Akcent brandowy (wytyczne 2026-08-12: badge kategorii, cytat, focus, przyciski).
     Poprawka 2026-09-01: bierze akcent PRESETU. Wczesniej byla tu zaszyta zielen
     #0e8f6f z komentarzem "preset moze nadpisac" — tyle ze generator NIC nie nadpisywal,
     wiec kazdy portal na tym archetypie dostawal zielone detale niezaleznie od wlasnej
     palety. Zielen zostaje wylacznie jako fallback dla podgladow bez tokens.css. */
  --mc-accent: var(--color-accent, #0e8f6f);
  --mc-accent-soft: color-mix(in srgb, var(--color-accent, #0e8f6f) 6%, transparent);

  /* Layout — DWA kontenery (zasada systemu): strona szeroka, tekst waski */
  --mc-site-width: 1180px;
  --mc-content-width: 760px;

  /* Spacing */
  --mc-space-1: 4px;   --mc-space-2: 8px;   --mc-space-3: 12px;
  --mc-space-4: 16px;  --mc-space-5: 20px;  --mc-space-6: 24px;
  --mc-space-7: 28px;  --mc-space-8: 32px;  --mc-space-10: 40px;
  --mc-space-12: 48px;

  /* Radius */
  --mc-radius-s: 5px;
  --mc-radius-m: 8px;
  --mc-radius-l: 10px;
}

/* ---------- Fundament strony ---------- */

body {
  background: var(--content-bg);
  color: var(--content-text);
  font-family: var(--mc-font-sans);
  font-size: var(--mc-text-size);
  line-height: var(--mc-text-line);
  font-weight: var(--mc-weight-normal);
  letter-spacing: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

/* Kontener strony: szeroki (HP, kategorie, header, footer) */
.zx-wrap {
  width: min(100% - 48px, var(--mc-site-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* Kontener tresci: waski.
   DECYZJA (kanon 2026-08-12): --mc-content-width = szerokosc ZEWNETRZNA
   kolumny artykulu (760px z gutterami 2x24), wiec realna szerokosc tekstu
   = 712px — identycznie jak w kanonicznym rendererze
   (_preview/chatgpt-content-renderer.html: max-width 760 + padding 24). */
/* Wpis: siatka tresc (712) + sidebar (280), gap 48 => kontener 1040
   (wytyczne typografii wpisu 2026-08-12 — sidebar wraca do v1.1). */
.single .zx-breadcrumb,
.single .zx-article-layout {
  max-width: calc(var(--mc-content-width) - 2 * var(--mc-space-6) + 280px + var(--mc-space-12));
  margin-inline: auto;
}
.mc-page .zx-post-hero,
.mc-page .zx-article-layout {
  max-width: calc(var(--mc-content-width) - 2 * var(--mc-space-6));
  margin-inline: auto;
}

/* Pasek postepu: poza kanonem. Back-to-top: OPCJA per portal (features: backToTop) */
.zx-progress { display: none; }
body:not(.zx-f-backtotop) .zx-top { display: none; }

/* Layout artykulu: grid tresc + sidebar (strony statyczne .mc-page: jedna kolumna) */
.single .zx-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--mc-space-12);
  /* STRETCH, nie start (poprawka 2026-09-02).
     W tym archetypie `position: sticky` siedzi na DZIECKU kolumny (.mc-aside__sticky),
     a nie na samym elemencie siatki. Przy `align-items: start` kolumna boczna przyjmuje
     wysokosc swojej zawartosci — okolo 230 px — wiec dziecko nie ma zakresu, w ktorym
     mogloby sie przykleic: panel znikal po pierwszym ekranie przewijania, mimo poprawnej
     reguly `sticky`. Kolumna musi urosnac na wysokosc wiersza.
     UWAGA przy edycji: `interactive.css` ma globalne `.zx-article-layout { align-items: start }`
     i jest ladowany WCZESNIEJ, wiec samo USUNIECIE tej linii przywroci defekt. Wartosc
     musi byc podana jawnie. Tam `start` jest poprawne, bo w pozostalych archetypach sticky
     siedzi na samym elemencie siatki (.zx-aside), nie na jego dziecku.
     Rozciagniecie jest bezpieczne wizualnie: .mc-aside nie ma ani tla, ani obramowania. */
  align-items: stretch;
}
.mc-page .zx-article-layout { display: block; }
.zx-aside { display: none; } /* legacy aside (TOC z bazowego single.php) — nieuzywany */
.zx-prose { max-width: 100%; }

/* Kolumna glowna wpisu — tresc, tagi, nawigacja, powiazane, komentarze */
.mc-col-main { min-width: 0; }

/* ---------- Sidebar wpisu ---------- */

.mc-aside { font-size: 15px; line-height: 22px; }
.mc-aside__box { margin-bottom: var(--mc-space-8); }
.mc-aside__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--mc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--content-text-secondary);
  margin: 0 0 var(--mc-space-3);
}
.mc-aside__sticky { position: sticky; top: 90px; }

.mc-toc { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--content-border); }
.mc-toc li { margin: 0; }
.mc-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  color: var(--content-text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.mc-toc a:hover { color: var(--content-text); border-left-color: var(--mc-accent); }

.mc-aside-cta {
  display: block;
  border: 1px solid var(--content-border);
  border-radius: var(--mc-radius-l);
  padding: var(--mc-space-4);
  text-decoration: none;
  color: var(--content-text);
  background: var(--content-surface);
}
.mc-aside-cta:hover { border-color: var(--mc-accent); }
.mc-aside-cta strong { display: block; margin-bottom: 4px; }
.mc-aside-cta span { color: var(--content-text-secondary); font-size: 14px; line-height: 20px; }

.mc-aside-posts { margin: 0; padding: 0; list-style: none; }
.mc-aside-posts li { margin: 0 0 var(--mc-space-3); }
.mc-aside-posts a { color: var(--content-text); text-decoration: none; font-weight: var(--mc-weight-medium); }
.mc-aside-posts a:hover { text-decoration: underline; }

/* Spis tresci na mobile — zwijany blok nad trescia (na desktop ukryty) */
.mc-toc-mobile { display: none; }

/* ---------- Meta wpisu / tagi / nawigacja prev-next ---------- */

.mc-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-space-2) var(--mc-space-3);
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
  margin: 0 0 var(--mc-space-6);
}
.mc-meta-row .zx-badge-cat {
  display: inline-block;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--mc-weight-medium);
  color: #fff;
  background: var(--mc-accent);
  border-radius: 999px;
  padding: 3px 12px;
  text-decoration: none;
  margin: 0;
}
.mc-meta-row .mc-meta-sep::before { content: "·"; }

.mc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-space-2);
  margin: var(--mc-space-8) 0 0;
  font-size: 14px;
  line-height: 20px;
}
.mc-tags a {
  color: var(--content-text-secondary);
  background: var(--content-surface);
  border: 1px solid var(--content-border);
  border-radius: 999px;
  padding: 2px 12px;
  text-decoration: none;
}
.mc-tags a:hover { color: var(--content-text); border-color: var(--content-text-secondary); }

.mc-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mc-space-4);
  margin: var(--mc-space-8) 0 0;
  padding-top: var(--mc-space-6);
  border-top: 1px solid var(--content-border);
  font-size: 15px;
  line-height: 22px;
}
.mc-prevnext__next { text-align: right; }
.mc-prevnext small {
  display: block;
  color: var(--content-text-secondary);
  font-size: 13px;
  margin-bottom: 4px;
}
.mc-prevnext a { color: var(--content-text); text-decoration: none; font-weight: var(--mc-weight-medium); }
.mc-prevnext a:hover { text-decoration: underline; }

/* ---------- Naglowek wpisu ---------- */

.zx-breadcrumb {
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
  margin: var(--mc-space-6) 0 var(--mc-space-8);
}
.zx-breadcrumb a { color: inherit; }

.zx-post-hero {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 var(--mc-space-8);
}

.zx-badge {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--mc-weight-medium);
  color: var(--content-text-secondary);
  background: var(--content-surface);
  border: 1px solid var(--content-border);
  border-radius: 999px;
  padding: 2px 12px;
  text-decoration: none;
  margin-bottom: var(--mc-space-4);
}

.zx-post-title,
.zx-prose h1,
h1 {
  font-size: var(--mc-h1-size);
  line-height: var(--mc-h1-line);
  font-weight: var(--mc-weight-bold);
  letter-spacing: 0;
  color: var(--content-text);
  margin: 0 0 var(--mc-space-4);
}

.zx-post-meta {
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
  margin: 0 0 var(--mc-space-6);
}

.zx-post-cover { margin: var(--mc-space-6) 0; }
.zx-post-cover img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--mc-radius-m);
}

/* ---------- Typografia tresci ---------- */

.zx-prose p { margin: 0 0 var(--mc-space-4); }

.zx-prose h2, .zx-prose h3, .zx-prose h4 {
  color: var(--content-text);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: 0;
}
.zx-prose h2 { font-size: var(--mc-h2-size); line-height: var(--mc-h2-line); margin: var(--mc-h2-top) 0 var(--mc-space-4); }
.zx-prose > h2:first-child { margin-top: 0; }
.zx-prose h3 { font-size: var(--mc-h3-size); line-height: var(--mc-h3-line); margin: var(--mc-space-7) 0 var(--mc-space-3); }
.zx-prose h4 { font-size: var(--mc-h4-size); line-height: var(--mc-h4-line); margin: var(--mc-space-6) 0 10px; }

.zx-prose strong, .zx-prose b { font-weight: var(--mc-weight-semibold); }

.zx-prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.zx-prose a:hover { text-decoration-thickness: 2px; }

/* ---------- Listy ---------- */

.zx-prose ul, .zx-prose ol {
  margin: var(--mc-space-3) 0 var(--mc-space-4);
  padding-left: 26px;
}
.zx-prose li { margin: 8px 0; padding-left: 2px; }
.zx-prose ul li::marker, .zx-prose ol li::marker { color: var(--mc-accent); font-weight: var(--mc-weight-semibold); }
.zx-prose li > ul, .zx-prose li > ol { margin-top: 6px; margin-bottom: 6px; }

/* ---------- Tabele ---------- */

.zx-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--mc-space-5) 0;
  font-size: 15px;
  line-height: 22px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.zx-prose th, .zx-prose td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--content-border);
  background: none;
}
.zx-prose th { font-weight: var(--mc-weight-semibold); }
.zx-prose thead th { background: var(--content-surface); }
.zx-prose tbody tr:nth-child(even) td { background: var(--mc-accent-soft); }

.zx-prose .table-wrapper,
.zx-prose .wp-block-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--mc-space-5) 0;
}
.zx-prose .table-wrapper table,
.zx-prose .wp-block-table table { margin: 0; }

/* ---------- Cytaty ---------- */

.zx-prose blockquote {
  margin: var(--mc-space-5) 0;
  padding: var(--mc-space-3) var(--mc-space-4);
  border: 0;
  border-left: 3px solid var(--mc-accent);
  background: var(--mc-accent-soft);
  border-radius: 0 var(--mc-radius-m) var(--mc-radius-m) 0;
  color: var(--content-quote-text);
  font-style: normal;
  font-size: calc(var(--mc-text-size) + 1px);
}
.zx-prose blockquote p:last-child { margin-bottom: 0; }

/* ---------- Kod ---------- */

.zx-prose code {
  font-family: var(--mc-font-mono);
  font-size: 0.9em;
  background: var(--content-code-bg);
  padding: 2px 5px;
  border-radius: var(--mc-radius-s);
}
.zx-prose pre {
  margin: var(--mc-space-5) 0;
  padding: var(--mc-space-4);
  background: var(--content-surface);
  border: 1px solid var(--content-border);
  border-radius: var(--mc-radius-l);
  overflow-x: auto;
}
.zx-prose pre code {
  padding: 0;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Separator, obrazy ---------- */

.zx-prose hr {
  margin: var(--mc-space-8) 0;
  border: 0;
  border-top: 1px solid var(--content-border);
}

.zx-prose figure { margin: var(--mc-space-6) 0; }
.zx-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--mc-radius-m);
}
.zx-prose figcaption {
  margin-top: var(--mc-space-2);
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
  text-align: left;
}

/* ---------- FAQ (details) ---------- */

.zx-prose details {
  border: 0;
  border-bottom: 1px solid var(--content-border);
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.zx-prose details:first-of-type { border-top: 1px solid var(--content-border); }
.zx-prose summary {
  cursor: pointer;
  padding: var(--mc-space-4) var(--mc-space-2);
  padding-right: var(--mc-space-8);
  font-weight: var(--mc-weight-semibold);
  list-style: none;
  position: relative;
  background: none;
  border-radius: var(--mc-radius-m);
  transition: background-color 0.15s ease;
}
.zx-prose summary:hover { background: var(--content-surface); }
.zx-prose summary::-webkit-details-marker { display: none; }
.zx-prose summary::after {
  content: "+";
  position: absolute;
  right: var(--mc-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--mc-accent);
  font-weight: var(--mc-weight-normal);
}
.zx-prose details[open] summary::after { content: "\2212"; }
.zx-prose details > p { margin: 0 0 var(--mc-space-4); }

/* ---------- Chrome wpisu: udostepnianie, disclaimer ---------- */

.zx-share-bar {
  margin: var(--mc-space-8) 0 0;
  padding-top: var(--mc-space-4);
  border-top: 1px solid var(--content-border);
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-space-3);
  align-items: center;
}
.zx-share-btn {
  color: var(--content-text);
  background: none;
  border: 1px solid var(--content-border);
  border-radius: 999px;
  padding: 4px 14px;
  text-decoration: none;
  font-weight: var(--mc-weight-medium);
}
.zx-share-btn:hover { background: var(--content-surface); }

.zx-medical-disclaimer-box {
  margin: var(--mc-space-6) 0 0;
  padding: var(--mc-space-4);
  background: var(--content-surface);
  border: 1px solid var(--content-border);
  border-radius: var(--mc-radius-l);
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
}
.zx-medical-disclaimer-box p { margin: 0; }
/* Zakaz emoji dekoracyjnych — ikona ostrzezenia z szablonu nie renderuje sie */
.zx-disclaimer-icon { display: none; }

/* ---------- Powiazane wpisy ---------- */

.zx-powiazane { margin: var(--mc-space-12) 0 0; }
.zx-powiazane h2 {
  font-size: var(--mc-h2-size);
  line-height: var(--mc-h2-line);
  font-weight: var(--mc-weight-semibold);
  margin: 0 0 var(--mc-space-4);
}
.zx-powiazane__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mc-space-4);
}
/* Karty bez ramek — elementy oddziela przestrzen, nie border */
.zx-powiazane-card {
  display: block;
  text-decoration: none;
  color: var(--content-text);
  background: none;
  border: 0;
  box-shadow: none;
}
.zx-powiazane-card__fig {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--mc-radius-l);
  background: var(--content-surface);
}
.zx-powiazane-card__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zx-powiazane-card__ph { display: block; width: 100%; height: 100%; background: var(--content-surface); }
.zx-powiazane-card__title {
  display: block;
  padding: var(--mc-space-3) 0 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--mc-weight-medium);
}
.zx-powiazane-card:hover .zx-powiazane-card__title { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsywnosc ---------- */

@media (max-width: 767px) {
  .zx-wrap { padding-inline: var(--mc-space-4); }

  .zx-post-title, .zx-prose h1, h1 { font-size: 28px; line-height: 34px; }
  .zx-prose h2 { font-size: 22px; line-height: 28px; }
  .zx-prose h3 { font-size: 19px; line-height: 25px; }
  .zx-prose h4 { font-size: 18px; line-height: 25px; }

  /* Tabele bez wrappera tez przewijaja sie poziomo */
  .zx-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .zx-powiazane__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CHROME CALEGO BLOGA — header, footer, HP, kategoria, wyszukiwarka.
   Zasada: portal moze byc szeroki (1180px), czytany tekst zostaje waski
   (760px). Jeden zestaw klockow: Featured / Card+Grid / Row+List /
   Thumbnail / Category Label / Meta / Pagination / Search.
   ========================================================================== */

/* ---------- Header: max 68px, dolna linia, zero dekoracji ---------- */

.zx-topbar { display: none; }

.zx-header {
  background: var(--content-bg);
  border-bottom: 1px solid var(--content-border);
  box-shadow: none;
}
.zx-header__bar {
  display: flex;
  align-items: center;
  gap: var(--mc-space-6);
  min-height: 68px;
}
.zx-logo, .zx-logo-custom { display: flex; align-items: center; }
.zx-logo svg, .zx-logo-custom img { height: 26px; width: auto; }
.zx-logo-text {
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--mc-weight-semibold);
  color: var(--content-text);
}
.zx-nav { margin-left: auto; }
.zx-nav ul { display: flex; gap: var(--mc-space-5); list-style: none; margin: 0; padding: 0; }
.zx-nav a {
  font-size: 15px;
  line-height: 20px;
  color: var(--content-text-secondary);
  text-decoration: none;
  border: 0;
  padding: 0;
}
.zx-nav a:hover, .zx-nav a[aria-current="page"] { color: var(--content-text); background: none; }

/* ---------- Wyszukiwarka ---------- */

.zx-search-form { display: flex; align-items: center; gap: var(--mc-space-2); }
.zx-search-input {
  height: 40px;
  /* base.css pozycjonuje lupe absolutnie w polu (left:10px) — bez lewego paddingu
     ikona nachodzi na placeholder („S[lupa]ukaj") — wytyczne 2026-08-12 pkt 3 */
  padding: 0 14px 0 38px;
  border: 1px solid var(--content-quote-border);
  border-radius: var(--mc-radius-l);
  background: var(--content-bg);
  font: inherit;
  font-size: 15px;
  color: var(--content-text);
  width: 180px;
}
.zx-search-input::placeholder { color: var(--content-text-secondary); }
.zx-search-input:focus { outline: none; border-color: var(--content-text-secondary); }
.zx-search-submit {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--content-text-secondary);
  padding: var(--mc-space-2);
}
.zx-search-submit:hover { color: var(--content-text); }

/* ---------- Wspolne klocki list i kart ---------- */

.mc-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--mc-radius-l);
  background: var(--content-surface);
}
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-thumb__ph { display: block; width: 100%; height: 100%; }

.mc-cat {
  display: inline-block;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--mc-weight-medium);
  color: var(--content-text-secondary);
  text-decoration: none;
}
.mc-cat:hover { color: var(--content-text); }

.mc-meta {
  display: block;
  margin-top: var(--mc-space-2);
  font-size: 13px;
  line-height: 18px;
  color: var(--content-text-secondary);
}

.mc-excerpt {
  margin: var(--mc-space-2) 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--content-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-excerpt--featured { font-size: 16px; line-height: 24px; }

/* Tytuly kart: spokojne — miniatura jest elementem wizualnym */
.mc-card__title, .mc-row__title {
  margin: var(--mc-space-3) 0 0;
  font-size: 19px;
  line-height: 25px;
  font-weight: var(--mc-weight-semibold);
}
.mc-card__title a, .mc-row__title a, .mc-featured__title a {
  color: inherit;
  text-decoration: none;
}
.mc-card__title a:hover, .mc-row__title a:hover, .mc-featured__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Intro bloga (HP) ---------- */

.mc-intro { margin: var(--mc-space-10) 0 var(--mc-space-8); }
.mc-intro__title {
  font-size: 32px;
  line-height: 38px;
  font-weight: var(--mc-weight-semibold);
  margin: 0;
}
.mc-intro__desc {
  max-width: 720px;
  margin: var(--mc-space-3) 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-text-secondary);
}

/* ---------- Featured Post (obraz ~58%, tekst ~42%) ---------- */

.mc-featured {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: var(--mc-space-8);
  align-items: center;
  margin: 0 0 var(--mc-space-12);
}
.mc-featured__media { display: block; }
.mc-featured__body > .mc-cat { margin-bottom: var(--mc-space-2); }
.mc-featured__title {
  margin: var(--mc-space-2) 0 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: var(--mc-weight-semibold);
}

/* ---------- Naglowki sekcji HP ---------- */

.mc-section { margin: var(--mc-space-12) 0; }
.mc-section__title {
  margin: 0 0 var(--mc-space-5);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--mc-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-text-secondary);
}

/* ---------- Post Grid (3 / 2 / 1) ---------- */

.mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mc-space-8) var(--mc-space-6);
}
.mc-card { background: none; border: 0; box-shadow: none; }
.mc-card__body > .mc-cat { margin-top: var(--mc-space-3); }

/* ---------- Post List (wiersze) ---------- */

.mc-list { display: grid; gap: var(--mc-space-8); }
.mc-list--ruled { gap: 0; }
.mc-list--ruled .mc-row { padding-block: var(--mc-space-6); border-bottom: 1px solid var(--content-border); }
.mc-list--ruled .mc-row:first-child { border-top: 1px solid var(--content-border); }

.mc-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--mc-space-5);
  align-items: start;
}
.mc-row__body > .mc-cat { margin-bottom: 2px; }
.mc-row__title { margin-top: var(--mc-space-1); }

/* ---------- Naglowek kategorii / huba ---------- */

.mc-hub { margin: var(--mc-space-10) 0 var(--mc-space-8); }
.mc-hub__title {
  font-size: 32px;
  line-height: 38px;
  font-weight: var(--mc-weight-semibold);
  margin: 0;
}
.mc-hub__desc {
  max-width: 720px;
  margin: var(--mc-space-3) 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--content-text-secondary);
}
.mc-hub__desc p { margin: 0 0 var(--mc-space-3); }
.mc-hub__desc p:last-child { margin-bottom: 0; }
.mc-hub__count {
  margin: var(--mc-space-3) 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--content-text-secondary);
}

/* ---------- Paginacja: minimalna, aktywna strona = bold ---------- */

.navigation.pagination { margin: var(--mc-space-12) 0; border: 0; }
.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mc-space-4);
  font-size: 15px;
  line-height: 22px;
}
.navigation.pagination .page-numbers {
  color: var(--content-text-secondary);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}
.navigation.pagination a.page-numbers:hover { color: var(--content-text); text-decoration: underline; text-underline-offset: 3px; }
.navigation.pagination .page-numbers.current { color: var(--content-text); font-weight: var(--mc-weight-semibold); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Footer: minimalny ---------- */

.zx-footer {
  margin-top: var(--mc-space-12);
  border-top: 1px solid var(--content-border);
  background: var(--content-bg);
  color: var(--content-text);
}
.zx-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--mc-space-8);
  padding-block: var(--mc-space-10);
}
.zx-footer__newsletter { display: none; }
.zx-footer__brand svg { height: 24px; width: auto; }
.zx-footer__brand h4, .zx-footer__brand .zx-footer__h { margin: 0; font-size: 16px; font-weight: var(--mc-weight-semibold); }
.zx-footer__col h4, .zx-footer__col .zx-footer__h {
  margin: 0 0 var(--mc-space-3);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--mc-weight-semibold);
  color: var(--content-text);
}
.zx-footer__desc, .zx-footer__col li, .zx-footer__col a {
  font-size: 14px;
  line-height: 20px;
  color: var(--content-text-secondary);
}
.zx-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mc-space-2); }
.zx-footer__col a { text-decoration: none; }
.zx-footer__col a:hover { color: var(--content-text); text-decoration: underline; text-underline-offset: 3px; }
.zx-footer__disclaimer {
  border-top: 1px solid var(--content-border);
  padding-block: var(--mc-space-4);
}
.zx-footer__disclaimer p { margin: 0; font-size: 13px; line-height: 18px; color: var(--content-text-secondary); }
.zx-footer__copy-bar { background: none; border-top: 1px solid var(--content-border); }
.zx-footer__copy-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mc-space-2);
  padding-block: var(--mc-space-4);
  font-size: 13px;
  line-height: 18px;
  color: var(--content-text-secondary);
}

/* ---------- Responsywnosc chrome ---------- */

/* ---------- Komentarze (wytyczne 2026-08-12 pkt 1.6) ---------- */

.comments-area { margin-top: var(--mc-space-12); padding-top: var(--mc-space-6); border-top: 1px solid var(--content-border); }
.comments-title, .comment-reply-title {
  font-size: var(--mc-h2-size);
  line-height: var(--mc-h2-line);
  font-weight: var(--mc-weight-semibold);
  margin: 0 0 var(--mc-space-4);
}
.comment-form label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--mc-weight-medium);
  color: var(--content-text-secondary);
  margin: 0 0 6px;
}
.comment-form p { margin: 0 0 var(--mc-space-4); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--content-text);
  background: var(--content-bg);
  border: 1px solid var(--content-quote-border);
  border-radius: var(--mc-radius-l);
  padding: 10px 14px;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px var(--mc-accent-soft);
}
.comment-form .form-submit { margin-bottom: 0; }
.comment-form input[type="submit"] {
  font: inherit;
  font-size: 15px;
  font-weight: var(--mc-weight-medium);
  color: #fff;
  background: var(--mc-accent);
  border: 0;
  border-radius: var(--mc-radius-l);
  padding: 11px 22px;
  cursor: pointer;
}
.comment-form input[type="submit"]:hover { filter: brightness(0.93); }
.comment-form .comment-notes, .comment-form .cookies-consent-note {
  font-size: 13px;
  line-height: 19px;
  color: var(--content-text-secondary);
}
.comment-list { list-style: none; margin: 0 0 var(--mc-space-6); padding: 0; }
.comment-list .comment { padding: var(--mc-space-4) 0; border-bottom: 1px solid var(--content-border); }

@media (max-width: 1023px) {
  .mc-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar wpisu spada pod tresc; spis tresci pokazuje sie nad trescia jako zwijany blok */
  .single .zx-article-layout { grid-template-columns: minmax(0, 1fr); }
  .mc-aside__sticky { position: static; }
  .mc-aside .mc-aside__box--toc { display: none; }
  .mc-toc-mobile {
    display: block;
    margin: 0 0 var(--mc-space-6);
    border: 1px solid var(--content-border);
    border-radius: var(--mc-radius-l);
    padding: 0 var(--mc-space-4);
  }
  .mc-toc-mobile summary {
    cursor: pointer;
    padding: var(--mc-space-3) 0;
    font-weight: var(--mc-weight-semibold);
    list-style: none;
  }
  .mc-toc-mobile summary::-webkit-details-marker { display: none; }
  .mc-toc-mobile .mc-toc { margin-bottom: var(--mc-space-3); }
}

@media (max-width: 767px) {
  .zx-wrap { width: calc(100% - 32px); }

  .mc-featured { grid-template-columns: 1fr; gap: var(--mc-space-4); }
  .mc-featured__title { font-size: 24px; line-height: 30px; }

  .mc-intro__title, .mc-hub__title { font-size: 28px; line-height: 34px; }

  /* Lista: mala miniatura zostaje — widac wiecej artykulow na ekranie */
  .mc-row { grid-template-columns: 104px 1fr; gap: var(--mc-space-3); }
  .mc-row .mc-excerpt { display: none; }

  .zx-footer__grid { grid-template-columns: 1fr; gap: var(--mc-space-6); }
  .zx-search-input { width: 100%; }
}

@media (max-width: 639px) {
  .mc-grid { grid-template-columns: 1fr; }
}

/* ---------- v1.1: link starszych wpisow (HP), pusty wynik szukania, CTA featured ---------- */

.mc-morelink { margin: var(--mc-space-8) 0; text-align: center; }
.mc-morelink a {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--mc-weight-medium);
  color: var(--content-text);
  text-decoration: none;
  border: 1px solid var(--content-border);
  border-radius: 999px;
  padding: 9px 22px;
}
.mc-morelink a:hover { border-color: var(--content-text-secondary); }

.mc-search-empty .zx-search-form--inline { margin: var(--mc-space-4) 0 var(--mc-space-8); position: relative; }
.mc-search-empty .zx-search-input { width: min(100%, 380px); }

.mc-featured__cta {
  display: inline-block;
  margin-top: var(--mc-space-3);
  font-size: 15px;
  font-weight: var(--mc-weight-medium);
  color: var(--mc-accent);
  text-decoration: none;
}
.mc-featured__cta:hover { text-decoration: underline; }

/* ==========================================================================
   SPIS TRESCI: aktywna sekcja + kotwice przy naglowkach   (2026-09-01)
   Obsluguje mc-toc.js. Kolory z tokenow presetu, zaden odcien nie jest zaszyty.
   ========================================================================== */
.mc-toc a.is-active {
  color: var(--color-link, var(--mc-accent));
  border-left-color: var(--mc-accent);
  font-weight: var(--mc-weight-medium);
}

.zx-prose h2 { position: relative; }

.mc-anchor {
  margin-left: .4em;
  font-weight: 400;
  color: var(--content-text-secondary);
  text-decoration: none;
  opacity: 0;
  transition: opacity .14s ease, color .14s ease;
}

.zx-prose h2:hover .mc-anchor,
.mc-anchor:focus-visible { opacity: .55; }
.mc-anchor:hover { color: var(--mc-accent); opacity: 1; }
.mc-anchor.is-done { opacity: 1; color: var(--mc-accent); }
.mc-anchor.is-done::after { content: " skopiowano"; font-size: .62em; letter-spacing: .04em; }

/* Na ekranie dotykowym nie ma najechania — kotwica zostaje stale, ale przygaszona. */
@media (hover: none) { .mc-anchor { opacity: .35; } }
@media print { .mc-anchor { display: none; } }


/* ==========================================================================
   PAS ZAMYKAJACY, WYDAJNOSC I PROPORCJE OBRAZOW        (2026-09-02, wytyczne 02/06/07)
   ========================================================================== */

/* 02 — powiazane wpisy poza kolumna tresci: pelna szerokosc ukladu strony. */
.single .mc-section--wide {
  max-width: calc(var(--mc-content-width) - 2 * var(--mc-space-6) + 280px + var(--mc-space-12));
  margin-inline: auto;
  margin-top: var(--mc-space-12);
}

/* 06 — stale proporcje miniatur. Bez tego karty w rzedzie maja rozne wysokosci,
   bo kazde zdjecie ma inny format; `cover` przycina, zamiast zniekształcac. */
.mc-list img,
.zx-powiazane-card__fig img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 07 — sekcje dalekie od pierwszego ekranu nie musza byc liczone przy pierwszym
   renderze. `contain-intrinsic-size` podaje wysokosc zastepcza, zeby pasek
   przewijania nie skakal, gdy blok wejdzie w widok. */
.single .mc-section--wide,
.single #comments {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* 07 — natywne przejscie miedzy wpisami; bez wsparcia przegladarki nic sie nie psuje.
   Wylaczone dla osob, ktore prosza o ograniczenie ruchu. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}