/* ==========================================================
   blog.css - lista /blog/, kategorie i wpis (68-blog-SPEC.md sekcja 3a, wireframe'y BR 16:7011 i 16:7012).
   Ładowany tylko na widokach bloga (inc/blog.php, po styles-v4.css i swiat.css). Szablony: home.php, single.php.
   Karty „Najnowsze artykuły" na stronie głównej (.post--foto) żyją w styles-v4.css - tam blog.css nie wchodzi.
   ========================================================== */

/* ---------- układ: węższy kontener niż strony treściowe (tekst do czytania), mniej miejsca nad okruszkami ---------- */
.section__inner.blog-wrap { max-width: 1200px; }
.section__inner.wpis-wrap { max-width: 1180px; }
.section.blog-lista, .section.wpis { padding-top: clamp(18px, 2.6vh, 30px); }

/* ---------- okruszki (wygląd .pdp-crumbs z karty produktu) ---------- */
.blog-okruszki { margin-bottom: clamp(20px, 3vh, 34px); }
.blog-okruszki ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.blog-okruszki li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.blog-okruszki a, .blog-okruszki span { font-family: var(--mono); font-weight: 300; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); }
.blog-okruszki a { transition: color var(--t); }
.blog-okruszki a:hover { color: var(--green-deep); }
.blog-okruszki [aria-current] { color: var(--head); font-weight: 400; }
.blog-okruszki .sep { color: var(--hair-green); font-size: 12px; letter-spacing: 0; }
/* długi tytuł wpisu w ostatnim kroku: jedna linia z wielokropkiem */
.blog-okruszki li:last-child { flex: 1 1 180px; }
.blog-okruszki li:last-child span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- nagłówek bloku + przycisk po prawej („Wyróżnione wpisy", „Powiązane wpisy") ---------- */
.blog-lista__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 24px; margin-bottom: clamp(24px, 3.5vh, 40px); }
.blog-lista__head .sec-title { margin: 0; }

/* ---------- etykieta kategorii i linia meta ---------- */
.blog-kat { align-self: flex-start; font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fuchsia-deep); background: var(--fuchsia-pale); padding: 5px 11px;
  border-radius: 999px; transition: background var(--t), color var(--t); }
.blog-kat:hover { background: var(--fuchsia); color: #fff; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-family: var(--mono); font-weight: 300;
  font-size: 11px; letter-spacing: .08em; color: var(--text-mute); }
.blog-meta > * + *::before { content: "•"; margin: 0 8px; color: var(--green); }

/* ---------- karta wpisu ---------- */
.blog-karta { position: relative; display: flex; flex-direction: column; min-width: 0; }
.blog-karta__foto { display: block; position: relative; overflow: hidden; border-radius: 16px; background: var(--bg-2);
  aspect-ratio: 16 / 10; }
.blog-karta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-karta:hover .blog-karta__foto img { transform: scale(1.04); }
.blog-karta__znak { position: absolute; left: 14px; top: 14px; font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; background: var(--fuchsia); padding: 6px 12px; border-radius: 999px; }
.blog-karta__tresc { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.blog-karta__t { font-family: var(--mono); font-weight: 600; font-size: 1.12rem; line-height: 1.24; color: var(--head);
  margin: 10px 0 8px; }
.blog-karta__t a { transition: color var(--t); }
.blog-karta__t a:hover { color: var(--green-deep); }
.blog-karta__d { font-size: .9rem; line-height: 1.55; color: var(--text-soft); margin: 8px 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-karta__dalej { align-self: flex-start; margin-top: auto; font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); border-bottom: 2px solid currentColor;
  padding-bottom: 2px; transition: color var(--t); }
.blog-karta__dalej:hover { color: var(--head); }
.blog-karta--siatka .blog-meta { margin-top: 16px; }

/* wyróżnione: 1 duży po lewej, 3 poziome po prawej (wireframe 16:7011) */
.blog-wyr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.blog-wyr__obok { display: flex; flex-direction: column; gap: 22px; }
.blog-karta--duza .blog-karta__tresc { padding-top: 18px; }
.blog-karta--duza .blog-karta__t { font-size: clamp(1.3rem, 1rem + 1vw, 1.72rem); line-height: 1.16; }
.blog-karta--duza .blog-karta__d { -webkit-line-clamp: 3; }
.blog-karta__btn { margin-top: 4px; }
.blog-karta--pozioma { flex-direction: row; align-items: flex-start; gap: 18px; }
.blog-karta--pozioma .blog-karta__foto { flex: 0 0 clamp(120px, 13vw, 180px); aspect-ratio: 1 / 1; }
.blog-karta--pozioma .blog-karta__t { font-size: 1rem; margin: 8px 0 6px; }
.blog-karta--pozioma .blog-karta__d { font-size: .86rem; margin: 6px 0 10px; }

/* ---------- „Najnowsze wpisy": 3 x 3 + strony ---------- */
.blog-najnowsze { margin-top: clamp(56px, 8vh, 96px); scroll-margin-top: 20px; }
.blog-okruszki + .blog-najnowsze { margin-top: 0; }
.blog-najnowsze > .sec-eyebrow { justify-content: center; }
.blog-najnowsze__t { text-align: center; margin-bottom: clamp(28px, 4vh, 44px); }
.blog-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 44px) clamp(18px, 2.4vw, 32px); }
.blog-pusto { text-align: center; color: var(--text-soft); }
.blog-strony { margin-top: clamp(36px, 5vh, 56px); }
.blog-strony ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.blog-strony .page-numbers { min-width: 42px; height: 42px; padding: 0 10px; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 10px; font-family: var(--mono); font-size: 14px; color: var(--head);
  transition: border-color var(--t), color var(--t); }
.blog-strony a.page-numbers:hover { border-color: var(--green); color: var(--green-deep); }
.blog-strony .current { background: var(--head); border-color: var(--head); color: #fff; }
.blog-strony .dots { border-color: transparent; min-width: 24px; padding: 0; }

/* ---------- wpis: głowa (tytuł, zajawka, podpis, data, czas, udostępnianie) ---------- */
.wpis-glowa { max-width: calc(100% - 300px - clamp(32px, 4vw, 56px)); margin-bottom: clamp(26px, 4vh, 40px); }
.wpis-glowa__t { font-family: var(--mono); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.1; color: var(--head); letter-spacing: -.005em; }
.wpis-glowa__lead { margin-top: 16px; font-size: 1.02rem; line-height: 1.65; color: var(--text-soft); }
.wpis-glowa__meta { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.wpis-autor { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--head); }
.wpis-autor__znak { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--green-pale);
  color: var(--green-deep); display: grid; place-items: center; }
.wpis-autor__znak svg { width: 22px; height: 22px; }
.wpis-glowa__info { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--text-mute); }
.wpis-glowa__info svg { width: 16px; height: 16px; flex: none; color: var(--green-deep); }
.wpis-udostepnij { margin-left: auto; display: flex; gap: 8px; }
.wpis-udostepnij a, .wpis-udostepnij button { position: relative; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: var(--head); cursor: pointer;
  transition: border-color var(--t), color var(--t); }
.wpis-udostepnij a:hover, .wpis-udostepnij button:hover { border-color: var(--green); color: var(--green-deep); }
.wpis-udostepnij svg { width: 18px; height: 18px; }
.wpis-udostepnij__kopiuj.is-ok::after { content: "Skopiowano"; position: absolute; right: 0; bottom: calc(100% + 8px);
  background: var(--head); color: #fff; font-size: 11px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; }

/* ---------- wpis: zdjęcie + treść | spis treści i okienko doradcy (przyklejone przy przewijaniu) ---------- */
/* .section ma overflow:hidden (styles-v4.css), a to wyłącza position:sticky u potomków - kolumna odjeżdżała po pierwszym
   ekranie (recenzja 29.09, zmierzone). clip przycina tak samo, ale nie tworzy kontenera przewijania - wzór .faq-sticky-fix. */
.section.wpis { overflow: clip; }
.wpis-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(32px, 4vw, 56px); align-items: start; }
.wpis-foto { grid-column: 1; grid-row: 1; margin: 0 0 clamp(28px, 4vh, 40px); border-radius: 18px; overflow: hidden; background: var(--bg-2); }
.wpis-foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.wpis-tresc { grid-column: 1; grid-row: 2; min-width: 0; }
.wpis-boczna { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h, 95px) + 24px);
  max-height: calc(100vh - var(--header-h, 95px) - 48px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 20px; }
.wpis-spis, .wpis-doradca { background: var(--bg-1); border: 1px solid var(--hair); border-radius: 18px; padding: 22px 22px 20px; }
.wpis-spis__t, .wpis-doradca__t { font-family: var(--mono); font-weight: 600; font-size: 1.02rem; color: var(--head); margin-bottom: 10px; }
.wpis-spis ol { list-style: none; }
.wpis-spis a { display: block; position: relative; padding: 7px 0 7px 18px; font-size: .86rem; line-height: 1.4;
  color: var(--text-soft); transition: color var(--t); }
.wpis-spis a::before { content: ""; position: absolute; left: 0; top: calc(7px + .45em); width: 7px; height: 7px;
  border-radius: 2px; background: var(--hair-green); }
.wpis-spis a:hover { color: var(--green-deep); }
.wpis-doradca__d { font-size: .88rem; line-height: 1.55; color: var(--text-soft); margin-bottom: 16px; }
.wpis-doradca .btn { width: 100%; justify-content: center; padding: 13px 18px; font-size: .9rem; }

/* ---------- treść wpisu (import ze starej strony + nowe wpisy z panelu) ---------- */
.wpis-tresc { font-size: 1.02rem; line-height: 1.75; color: var(--text); padding-bottom: 32px; border-bottom: 1px solid var(--hair); }
.wpis-tresc > * + * { margin-top: 1.1em; }
.wpis-tresc > :first-child { margin-top: 0; }
.wpis-tresc h2, .wpis-tresc h3, .wpis-tresc h4 { font-family: var(--mono); font-weight: 600; color: var(--head); line-height: 1.22; }
.wpis-tresc h2 { font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem); margin-top: 1.9em; }
.wpis-tresc h3 { font-size: 1.28rem; margin-top: 1.6em; }
.wpis-tresc h4 { font-size: 1.08rem; margin-top: 1.4em; }
.wpis-tresc h2 + *, .wpis-tresc h3 + *, .wpis-tresc h4 + * { margin-top: .6em; }
.wpis-tresc a { color: var(--green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wpis-tresc a:hover { color: var(--head); }
.wpis-tresc strong, .wpis-tresc b { color: var(--head); font-weight: 700; }
/* punktory = zielone ptaszki (wzór .qrblock__list, spec 3a) */
.wpis-tresc ul { list-style: none; }
.wpis-tresc ul > li { position: relative; padding-left: 30px; }
.wpis-tresc ul > li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px;
  border: 1.5px solid var(--green); border-radius: 4px; }
.wpis-tresc ul > li::after { content: ""; position: absolute; left: 4.5px; top: .62em; width: 5px; height: 9px;
  border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wpis-tresc ol { padding-left: 1.4em; }
.wpis-tresc ol > li::marker { color: var(--green-deep); font-weight: 700; }
.wpis-tresc li + li { margin-top: .5em; }
.wpis-tresc li > ul, .wpis-tresc li > ol { margin-top: .5em; }
.wpis-tresc blockquote { background: var(--bg-1); border-left: 3px solid var(--green); border-radius: 0 14px 14px 0;
  padding: 18px 22px; font-style: italic; color: var(--text-soft); }
.wpis-tresc img { border-radius: 14px; height: auto; }
.wpis-tresc figcaption { margin-top: 8px; font-size: .84rem; line-height: 1.5; color: var(--text-mute); text-align: center; }
.wpis-tresc iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.wpis-tresc hr { border: 0; border-top: 1px solid var(--hair); margin: 2em 0; }
.wpis-tresc table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.wpis-tresc th, .wpis-tresc td { border: 1px solid var(--hair); padding: 10px 12px; text-align: left; vertical-align: top; }
.wpis-tresc th { background: var(--bg-1); color: var(--head); }

/* ---------- powiązane wpisy ---------- */
.section.blog-powiazane { padding-top: clamp(40px, 6vh, 72px); }

/* ---------- telefon i tablet ---------- */
@media (max-width: 1100px) {
  .blog-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .blog-wyr { grid-template-columns: minmax(0, 1fr); }
  .wpis-glowa { max-width: none; }
  .wpis-udostepnij { margin-left: 0; }
  /* jedna kolumna: zdjęcie, spis treści, treść, okienko doradcy */
  .wpis-uklad { grid-template-columns: minmax(0, 1fr); }
  .wpis-boczna { display: contents; }
  .wpis-foto { grid-row: auto; order: 1; }
  .wpis-spis { order: 2; margin-bottom: 28px; }
  .wpis-tresc { grid-row: auto; order: 3; }
  .wpis-doradca { order: 4; margin-top: 32px; }
}
@media (max-width: 640px) {
  .blog-siatka { grid-template-columns: minmax(0, 1fr); }
  .blog-karta--pozioma { gap: 14px; }
  .blog-karta--pozioma .blog-karta__foto { flex-basis: 104px; }
  .blog-karta--pozioma .blog-karta__d { display: none; }
  .wpis-tresc { font-size: 1rem; }
}