/*
 * wh_blog — style frontu bloga (front.css)
 * Hi-Fi redesign (handoff "WH Blog Hi-Fi") — 2026-06-29.
 *
 * ZASADA TOKENOW: kolory/typografia/promienie/cienie trzymane sa w zmiennych
 * --wh-* (zdefiniowanych nizej na korzeniach bloga). Kazde uzycie ma fallback
 * rowny wartosci z designu, wiec render jest poprawny nawet bez definicji tokenu.
 * Prefiks klas: .wh-blog-* . Jednostki w px (zgodnie z makieta, niezaleznie od
 * root font-size motywu).
 *
 * ⚠️ NIE DODAWAJ @import z fonts.googleapis.com. Byl tu do 1.8.0 (Inter) i ladowal
 * sie na KAZDYM wejsciu na bloga, mimo ze font jest wylacznie FALLBACKIEM w
 * --wh-blog-font — sklep z ustawionym --wh-font-body (czyli kazdy nasz) uzywa
 * swojego fontu, a Inter byl pobierany i wyrzucany. Koszt: zadanie do Google
 * z IP kazdego odwiedzajacego (RODO — transfer do podmiotu trzeciego, ktorego
 * sklep nie deklaruje) plus zbedne polaczenie. Font self-hostuje motyw.
 */

/* ============================================================
   TOKENY (na korzeniach bloga; dziedziczone przez karty itd.)
   ============================================================ */
.wh-blog,
.wh-blog-post,
.wh-blog-related,
.wh-blog-comments,
.wh-blog-authorbox,
.wh-blog-block,
.wh-blog-product-posts,
.wh-blog-preview-bar {
  /* ------------------------------------------------------------------
     Tokeny LOKALNE bloga (namespace --wh-blog-*), WYPROWADZONE z tokenow
     brandu z fallbackiem na oryginalne wartosci z makiety.

     WCZESNIEJ blok nadpisywal tu wprost --wh-color-primary/--wh-color-text/
     --wh-font itd. literalami (#0049ff, "Inter"). Skutek: blog byl "szara
     wyspa" — zmiana brandu sklepu (theme-tokens.json) NIE dzialala na blog,
     bo wszystkie var(--wh-color-primary, ...) rozwiazywaly sie do lokalnego
     literalu. To dokladnie "lekcja Rubik" z konwencji design tokens.

     Teraz: brand zostaje brandem (nie nadpisujemy go), a rzeczy specyficzne
     dla bloga zyja we wlasnej przestrzeni nazw.
     ------------------------------------------------------------------ */

  /* ── Placeholdery obrazkow (gradienty „zimnego nieba") ───────────────── */
  --wh-blog-ph-from: var(--wh-color-border-subtle, #e8ecf0);
  --wh-blog-ph-to: color-mix(in srgb, var(--wh-color-border-strong, #9ca3af) 50%, var(--wh-color-bg-base, #fff));
  --wh-blog-ph-alt-from: color-mix(in srgb, var(--wh-color-border-subtle, #e5e7eb) 70%, var(--wh-color-bg-base, #fff));
  --wh-blog-ph-alt-to: color-mix(in srgb, var(--wh-color-border-strong, #9ca3af) 75%, var(--wh-color-bg-base, #fff));
  --wh-blog-ph-soft-from: color-mix(in srgb, var(--wh-color-border-subtle, #e5e7eb) 55%, var(--wh-color-bg-base, #fff));
  --wh-blog-ph-soft-to: color-mix(in srgb, var(--wh-color-border-strong, #9ca3af) 40%, var(--wh-color-bg-base, #fff));

  /* ── Tla neutralne (sekcje, karty, pola) ─────────────────────────────── */
  --wh-blog-bg-tint: color-mix(in srgb, var(--wh-color-primary, #0049FF) 5%, var(--wh-color-bg-base, #fff));
  --wh-blog-bg-muted: color-mix(in srgb, var(--wh-color-text-primary, #1a1a1a) 5%, var(--wh-color-bg-base, #fff));
  --wh-blog-bg-plain: color-mix(in srgb, var(--wh-color-text-primary, #1a1a1a) 2%, var(--wh-color-bg-base, #fff));
  --wh-blog-border-faint: color-mix(in srgb, var(--wh-color-border-subtle, #e5e7eb) 60%, var(--wh-color-bg-base, #fff));

  /* ── Stany komunikatow — z tokenow semantycznych branzy ───────────────── */
  --wh-blog-ok-bg: color-mix(in srgb, var(--wh-color-semantic-success, #16a34a) 10%, var(--wh-color-bg-base, #fff));
  --wh-blog-ok-border: color-mix(in srgb, var(--wh-color-semantic-success, #16a34a) 35%, var(--wh-color-bg-base, #fff));
  --wh-blog-err-bg: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 10%, var(--wh-color-bg-base, #fff));
  --wh-blog-err-border: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 35%, var(--wh-color-bg-base, #fff));
  /* ⚠️ TEKST bledu NIE bierze z --wh-color-semantic-danger. Ten token to kolor
     AKCENTU (granica, ikona), nie tekstu na jasnym tle wlasnej rodziny: #dc2626
     na #fef2f2 daje kontrast 4.41, ponizej progu AA (4.5). Oryginalne, ciemniejsze
     odcienie daja 7.60 i 6.01 — zmierzone. Ta sama pomylka co przy wh_sociallogin
     (podpiecie pod --wh-color-text zbilo kontrast do 3.45). */
  --wh-blog-err-text: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 70%, #000);
  --wh-blog-err-strong: color-mix(in srgb, var(--wh-color-semantic-danger, #dc2626) 78%, #000);
  --wh-blog-warn-bg: color-mix(in srgb, var(--wh-color-semantic-warning, #f59e0b) 12%, var(--wh-color-bg-base, #fff));

  /* ── Cienie lokalne (paleta ma inne wartosci, to detale komponentow) ──── */
  --wh-blog-shadow-hairline: var(--wh-shadow-xs, 0 1px 4px rgba(0, 0, 0, 0.06));
  --wh-blog-shadow-faint: var(--wh-shadow-xs, 0 1px 3px rgba(0, 0, 0, 0.04));
  --wh-blog-shadow-pop: var(--wh-shadow-md, 0 2px 10px rgba(0, 0, 0, 0.15));

  /* Odcienie primary — liczone z koloru brandu, wiec ida za brandem. */
  --wh-blog-primary-dark: color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000);
  --wh-blog-primary-soft: color-mix(in srgb, var(--wh-color-primary, #0049ff) 10%, var(--wh-color-white, #fff));

  /* Tekst pomocniczy / obramowania / tla — z tokenow brandu, fallback = makieta. */
  --wh-blog-muted: var(--wh-color-text-muted, #6b7280);
  --wh-blog-faint: var(--wh-color-border-strong, #9ca3af); /* neutralna szarosc UI, nie kolor brandu */
  --wh-blog-border: var(--wh-color-border-subtle, #e5e7eb);
  --wh-blog-bg-subtle: var(--wh-color-bg-subtle, #f9fafb);
  --wh-blog-star: var(--wh-color-semantic-warning, #f59e0b);

  /* Geometria i cienie — z tokenow brandu, fallback = makieta. */
  --wh-blog-radius: var(--wh-radius-sm, 8px);
  --wh-blog-radius-card: var(--wh-radius-md, 12px);
  --wh-blog-shadow-card: var(--wh-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.06));
  --wh-blog-shadow-hover: var(--wh-shadow-md, 0 4px 20px rgba(0, 0, 0, 0.12));

  /* FONT: wylacznie przez token brandu (nigdy hardcoded font-family). */
  --wh-blog-font: var(--wh-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

}

/* Wspolny korzen: rodzina pisma + kolor tekstu + wygladzanie. */
.wh-blog,
.wh-blog-post,
.wh-blog-related,
.wh-blog-comments,
.wh-blog-block,
.wh-blog-product-posts {
  font-family: var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  -webkit-font-smoothing: antialiased;
}

/* Bez wlasnego max-width — blog dziedziczy szerokosc kontenera motywu
   (sekcje ida na pelna szerokosc obszaru tresci sklepu). Czytelnosc tekstu
   pilnuje limit na .wh-blog-post__content ponizej. */

.wh-blog *,
.wh-blog-post *,
.wh-blog-related *,
.wh-blog-comments * {
  box-sizing: border-box;
}

/* ============================================================
   PRZYCISKI
   ============================================================ */
.wh-blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid var(--wh-blog-border, #e5e7eb);
  border-radius: var(--wh-blog-radius, 8px);
  background: var(--wh-color-white, #fff);
  color: var(--wh-color-text-primary, #1a1a1a);
  font: 600 14px/1 var(--wh-blog-font);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

@media (hover: hover) {
.wh-blog-btn:hover {
  border-color: var(--wh-color-border-strong, #d1d5db);
}
}

.wh-blog-btn--primary {
  background: var(--wh-color-primary, #0049ff);
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
}

@media (hover: hover) {
.wh-blog-btn--primary:hover {
  background: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
  border-color: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
  color: var(--wh-color-white, #fff);
}
}

/* Wariant "outline" (akcent) — np. "Zobacz wszystkie" */
.wh-blog-btn--outline {
  background: var(--wh-color-white, #fff);
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-primary, #0049ff);
}

@media (hover: hover) {
.wh-blog-btn--outline:hover {
  background: var(--wh-blog-primary-soft, #e6edff);
  color: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
}
}

/* ============================================================
   SIATKA KART + KARTA WPISU (uzywana na wszystkich listach)
   ============================================================ */
.wh-blog-grid {
  display: grid;
  /* Liczba kolumn (desktop) sterowana z panelu przez --wh-grid-cols (2/3/4).
     Breakpointy nizej i tak nadpisuja to na tablecie/telefonie. */
  grid-template-columns: repeat(var(--wh-grid-cols, 3), 1fr);
  gap: 18px;
}

.wh-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wh-color-white, #fff);
  border-radius: var(--wh-blog-radius-card, 12px);
  overflow: hidden;
  box-shadow: var(--wh-blog-shadow-card);
  transition:
    box-shadow 0.18s,
    transform 0.18s;
}

@media (hover: hover) {
.wh-blog-card:hover {
  box-shadow: var(--wh-blog-shadow-hover);
  transform: translateY(-2px);
}
}

.wh-blog-card__media {
  display: block;
  position: relative;
  /* Proporcje miniatury sterowane z panelu (--wh-card-ratio: 16/9 domyslnie). */
  aspect-ratio: var(--wh-card-ratio, 16 / 9);
  background: linear-gradient(135deg, var(--wh-blog-ph-from, #e8ecf0), var(--wh-blog-ph-to, #c8d4e2));
  overflow: hidden;
}

.wh-blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wh-blog-card__image--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--wh-blog-ph-from, #e8ecf0), var(--wh-blog-ph-to, #c8d4e2));
}

/* Odznaka "Polecane" (gdy karta dostanie $post.is_featured) */
.wh-blog-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--wh-blog-star, #f59e0b);
  color: var(--wh-color-white, #fff);
  border-radius: 999px;
  font: 700 11px/1 var(--wh-blog-font);
}

.wh-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  flex: 1;
}

.wh-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font: 400 13px/1 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

.wh-blog-card__avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wh-blog-border, #e5e7eb);
  flex-shrink: 0;
  object-fit: cover;
}

.wh-blog-card__author {
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-card__dot {
  color: var(--wh-color-border-strong, #d1d5db);
}

.wh-blog-card__title {
  margin: 0;
  font: 700 18px/1.3 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
.wh-blog-card__title a:hover {
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-card__excerpt {
  margin: 0;
  font: 400 14px/1.6 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
  display: -webkit-box;
  /* Liczba linii zajawki sterowana z panelu (--wh-card-excerpt-lines: 2 domyslnie);
     0 = bez przycinania (regula wstrzykiwana w hookDisplayHeader). */
  -webkit-line-clamp: var(--wh-card-excerpt-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wh-blog-card__more {
  margin-top: auto;
  padding-top: 4px;
  font: 600 13px/1 var(--wh-blog-font);
  color: var(--wh-color-primary, #0049ff);
  text-decoration: none;
}

/* ============================================================
   LISTA / HUB BLOGA (/blog)
   ============================================================ */
.wh-blog-list {
  padding: 0 0 48px;
}

/* Hero hubu */
.wh-blog-list__header,
.wh-blog-hub__hero {
  text-align: center;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
  margin-bottom: 28px;
}

.wh-blog-list__title,
.wh-blog-hub__title {
  margin: 0 0 14px;
  font: 800 52px/1.05 var(--wh-blog-font);
  letter-spacing: -1px;
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-hub__subtitle {
  max-width: 480px;
  margin: 0 auto;
  font: 400 18px/1.6 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* Wyszukiwarka w hero */
.wh-blog-hub__search {
  display: flex;
  max-width: 696px;
  margin: 28px auto 0;
  border: 1.5px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  background: var(--wh-color-white, #fff);
  box-shadow: var(--wh-blog-shadow-hairline, 0 1px 4px rgba(0, 0, 0, 0.06));
}

.wh-blog-hub__search input[type="search"] {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 13px 16px;
  font: 400 15px/1.4 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  background: transparent;
  text-align: left;
}

.wh-blog-hub__search button {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  padding: 13px 22px;
  background: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
  font: 600 14px/1 var(--wh-blog-font);
  transition: background-color 0.15s;
}

@media (hover: hover) {
.wh-blog-hub__search button:hover {
  background: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
}
}

/* Wyszukiwarka „na zywo" — panel podpowiedzi pod polem hero */
.wh-blog-search {
  position: relative;
  max-width: 696px;
  margin: 28px auto 0;
}

/* Wewnatrz wrappera formularz nie centruje sie sam (robi to wrapper). */
.wh-blog-search .wh-blog-hub__search {
  margin: 0;
  max-width: none;
}

.wh-blog-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--wh-color-white, #fff);
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: var(--wh-blog-radius-card, 12px);
  box-shadow: var(--wh-blog-shadow-hover, 0 4px 20px rgba(0, 0, 0, 0.12));
  overflow: hidden;
  text-align: left;
}

.wh-blog-search__panel[hidden] {
  display: none;
}

.wh-blog-search__list {
  max-height: 360px;
  overflow-y: auto;
}

.wh-blog-search__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--wh-color-text-primary, #1a1a1a);
  text-decoration: none;
  border-bottom: 1px solid var(--wh-blog-bg-subtle, #f9fafb);
  transition: background-color 0.12s;
}

.wh-blog-search__item:last-child {
  border-bottom: 0;
}

.wh-blog-search__item--active {
  background: var(--wh-blog-primary-soft, #e6edff);
}
@media (hover: hover) {
.wh-blog-search__item:hover {
  background: var(--wh-blog-primary-soft, #e6edff);
}
}

.wh-blog-search__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wh-blog-search__title {
  font: 600 14px/1.35 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-blog-search__mark {
  background: transparent;
  color: var(--wh-color-primary, #0049ff);
  font-weight: var(--wh-font-weight-bold, 700);
}

.wh-blog-search__cat {
  font: 400 12px/1 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-blog-search__ext {
  flex-shrink: 0;
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-search__item--active .wh-blog-search__ext {
  color: var(--wh-color-primary, #0049ff);
}
@media (hover: hover) {
.wh-blog-search__item:hover .wh-blog-search__ext {
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-search__msg {
  padding: 16px;
  font: 400 14px/1.4 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

.wh-blog-search__msg--loading {
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-search__msg--error {
  color: var(--wh-blog-err-strong, #b42318);
}

.wh-blog-search__all {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  background: var(--wh-blog-bg-subtle, #f9fafb);
  font: 600 13px/1 var(--wh-blog-font);
  color: var(--wh-color-primary, #0049ff);
  text-decoration: none;
  text-align: center;
}

@media (hover: hover) {
.wh-blog-search__all:hover {
  color: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
}
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wh-blog-sectionhead__count {
  color: var(--wh-blog-faint, #9ca3af);
  font-weight: var(--wh-font-weight-regular, 400);
}

/* Filtr kategorii — pigulki */
.wh-blog-filter {
  margin: 0 0 36px;
}

.wh-blog-filter__label {
  margin: 0 0 12px;
  font: 600 11px/1 var(--wh-blog-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
}

.wh-blog-filter__item {
  margin: 0;
}

.wh-blog-filter__link {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 999px;
  font: 500 13px/1 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
.wh-blog-filter__link:hover {
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-filter__item--active .wh-blog-filter__link {
  background: var(--wh-color-primary, #0049ff);
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
  font-weight: var(--wh-font-weight-semibold, 600);
}

/* Naglowek sekcji listy (np. "Najnowsze wpisy" + link "Wszystkie") */
.wh-blog-sectionhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.wh-blog-sectionhead__title {
  margin: 0;
  font: 700 22px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-sectionhead__sub {
  margin: 5px 0 0;
  font: 400 14px/1.3 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-empty {
  padding: 48px 0;
  text-align: center;
  font: 400 16px/1.5 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* Sekcje hubu (Polecane / per-kategoria) */
.wh-blog-hubsection {
  margin-bottom: 48px;
}

.wh-blog-list .wh-blog-hubsection + .wh-blog-hubsection {
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  padding-top: 40px;
}

/* Polecane: duza karta (2fr) + kolumna 2 malych (1fr) */
.wh-blog-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.wh-blog-featured__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Wieksza karta wyrozniona — tylko bezposrednie dziecko (duza). */
.wh-blog-featured > .wh-blog-card .wh-blog-card__title {
  font-size: var(--wh-font-size-h3, 22px);
}

/* Male karty w kolumnie bocznej — bez zajawki (kompaktowe). */
.wh-blog-featured__side .wh-blog-card__excerpt {
  display: none;
}

/* Maly przycisk (np. "Zobacz wszystkie") */
.wh-blog-btn--sm {
  padding: 8px 16px;
  font-size: var(--wh-font-size-small, 12px);
}

@media (max-width: 768px) {
  .wh-blog-featured {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   KATEGORIA / TAG (naglowki list)
   ============================================================ */
.wh-blog-category,
.wh-blog-tag {
  padding: 28px 0 48px;
}

.wh-blog-category__header,
.wh-blog-tag__header {
  padding: 0 0 32px;
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
  margin-bottom: 32px;
}

.wh-blog-tag__eyebrow {
  margin: 0 0 8px;
  font: 600 12px/1 var(--wh-blog-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wh-color-primary, #0049ff);
}

.wh-blog-category__title,
.wh-blog-tag__title {
  margin: 0 0 10px;
  font: 800 40px/1.1 var(--wh-blog-font);
  letter-spacing: -0.5px;
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-category__description {
  max-width: 720px;
  font: 400 16px/1.6 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* ============================================================
   AUTOR (strona autora — profil + lista)
   ============================================================ */
.wh-blog-author {
  padding: 28px 0 48px;
}

.wh-blog-author__header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
  margin-bottom: 32px;
}

.wh-blog-author__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wh-blog-border, #e5e7eb);
  flex-shrink: 0;
}

.wh-blog-author__info {
  flex: 1;
  min-width: 0;
}

.wh-blog-author__name {
  margin: 0 0 8px;
  font: 800 32px/1.1 var(--wh-blog-font);
  letter-spacing: -0.5px;
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-author__bio {
  max-width: 680px;
  font: 400 15px/1.65 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* ============================================================
   POJEDYNCZY WPIS (/blog/slug)
   ============================================================ */
/* Pasek postepu czytania — przyklejony na gorze okna */
.wh-blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 1000;
  pointer-events: none;
}

.wh-blog-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wh-color-primary, #0049ff);
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
}

.wh-blog-post {
  padding: 28px 0 60px;
}

/* Breadcrumb renderuje natywny pasek motywu (_partials/breadcrumb.tpl) —
   modul nie ma juz wlasnego <nav>, wiec i wlasnych stylow okruszkow.
   Klasa .wh-blog-crumb--sep zyje dalej, ale w metadanych wpisu (nizej). */

/* Naglowek artykulu — wysrodkowany, max 720 */
.wh-blog-post__header {
  margin: 0 auto;
  padding-bottom: 36px;
}

.wh-blog-post__eyebrow {
  margin: 0 0 14px;
}

.wh-blog-post__category {
  display: inline-block;
  padding: 4px 14px;
  background: var(--wh-blog-primary-soft, #e6edff);
  color: var(--wh-color-primary, #0049ff);
  border-radius: 999px;
  font: 600 12px/1.5 var(--wh-blog-font);
  text-decoration: none;
}

.wh-blog-post__title {
  margin: 0 0 22px;
  font: 800 44px/1.1 var(--wh-blog-font);
  letter-spacing: -0.5px;
  color: var(--wh-color-text-primary, #1a1a1a);
  text-wrap: pretty;
}

.wh-blog-post__meta {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font: 400 14px/1 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

.wh-blog-post__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.wh-blog-post__author a {
  color: var(--wh-color-text-primary, #1a1a1a);
  font-weight: var(--wh-font-weight-semibold, 600);
  text-decoration: none;
}

.wh-blog-post__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wh-blog-border, #e5e7eb);
}

.wh-blog-post__meta .wh-blog-crumb--sep {
  color: var(--wh-color-border-strong, #d1d5db);
}

/* Zdjecie wyrozniajace — pelna szerokosc kolumny */
.wh-blog-post__media {
  margin: 0 0 40px;
}

.wh-blog-post__image {
  width: 100%;
  /* Wyglad obrazu WYROZNIAJACEGO (hero) sterowany z panelu (Wyglad -> Pojedynczy
     wpis): proporcje + max. wysokosc + szerokosc. Zmienne ustawia post.tpl na
     <article>. Brak proporcji (opcja „Brak") = naturalne proporcje obrazu. */
  aspect-ratio: var(--wh-post-img-ratio, auto);
  max-height: var(--wh-post-img-maxh, none);
  object-fit: cover;
  border-radius: var(--wh-blog-radius-card, 12px);
  display: block;
  background: linear-gradient(150deg, var(--wh-blog-ph-alt-from, #dce8f2), var(--wh-blog-ph-alt-to, #9ab4cc));
}

/* Szerokosc hero: domyslnie 100% (pelna); opcja „Oryginalna" => naturalna
   szerokosc obrazu (wysrodkowana, ograniczona do szerokosci kolumny). */
.wh-blog-post--imgauto .wh-blog-post__image {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Pozycja obrazu o naturalnej szerokosci: 'left' = przy lewej krawedzi kolumny. */
.wh-blog-post--imgauto.wh-blog-post--imgleft .wh-blog-post__image {
  margin-left: 0;
}

/* Uklad dwukolumnowy wpisu: tresc + przyklejony spis tresci (sidebar po prawej).
   Klasa --toc dodawana przez wh-post.js dopiero gdy jest co najmniej 2 sekcje. */
.wh-blog-post__layout {
  margin: 0 auto;
}

.wh-blog-post__layout--toc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

/* Sticky kolumna boczna — przykleja sie 80px od gory (poza kolumna tresci). */
.wh-blog-post__aside {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* Spis tresci (budowany przez wh-post.js) — sidebar */
.wh-blog-toc {
  background: var(--wh-color-white, #fff);
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 10px;
  padding: 18px 20px;
}

.wh-blog-toc__head {
  margin-bottom: 12px;
}

.wh-blog-toc__title {
  font: 600 11px/1 var(--wh-blog-font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-toc__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wh-blog-toc.is-collapsed .wh-blog-toc__list {
  display: none;
}

.wh-blog-toc__link {
  display: block;
  border-left: 2px solid var(--wh-blog-border, #e5e7eb);
  padding: 7px 0 7px 14px;
  margin-bottom: 2px;
  font: 400 14px/1.3 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
  text-decoration: none;
}

@media (hover: hover) {
.wh-blog-toc__link:hover {
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-toc__link--active {
  border-left-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-primary, #0049ff);
  font-weight: var(--wh-font-weight-semibold, 600);
}

/* Podsekcja (H3) w spisie tresci — wciecie + mniejsza czcionka */
.wh-blog-toc__link--sub {
  padding-left: 28px;
  font-size: var(--wh-font-size-small, 12px);
}

/* Tresc HTML wpisu (wyjscie {$content nofilter}) — kolumna czytelnicza */
.wh-blog-post__content {
  max-width: 800px;
  margin: 0 auto;
}

/* W ukladzie z sidebarem tresc wyrownana do lewej (TOC siedzi po prawej). */
.wh-blog-post__layout--toc .wh-blog-post__content {
  margin: 0;
}

.wh-blog-post__content p {
  margin: 0 0 28px;
  font: 400 16px/1.65 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-post__content h2 {
  margin: 40px 0 16px;
  font: 700 26px/1.3 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  scroll-margin-top: 24px;
}

.wh-blog-post__content h3 {
  margin: 32px 0 12px;
  font: 700 20px/1.35 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  scroll-margin-top: 24px;
}

.wh-blog-post__content ul,
.wh-blog-post__content ol {
  margin: 0 0 28px;
  padding-left: 1.4em;
}

.wh-blog-post__content li {
  margin: 0 0 8px;
  font: 400 16px/1.65 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-post__content a {
  color: var(--wh-color-primary, #0049ff);
  text-decoration: underline;
}

.wh-blog-post__content strong {
  font-weight: var(--wh-font-weight-bold, 700);
}

.wh-blog-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 8px 0 28px;
}

/* Wyrownanie tresci GDY BRAK spisu tresci: 'left' = przy lewej krawedzi kolumny
   (domyslnie tresc jest wysrodkowana; przy TOC layout i tak wyrownuje do lewej). */
.wh-blog-post--contentleft .wh-blog-post__content {
  margin-left: 0;
  margin-right: auto;
}

.wh-blog-post__content blockquote {
  margin: 0 0 28px;
  border-left: 3px solid var(--wh-color-primary, #0049ff);
  background: var(--wh-blog-bg-tint, #f0f4ff);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: var(--wh-font-size-base, 16px);
  line-height: 1.65;
}

.wh-blog-post__content blockquote p {
  margin: 0;
  font: 400 16px/1.65 var(--wh-blog-font);
}

.wh-blog-post__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font: 400 15px/1.5 var(--wh-blog-font);
}

.wh-blog-post__content th,
.wh-blog-post__content td {
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  padding: 10px 12px;
  text-align: left;
}

.wh-blog-post__content th {
  background: var(--wh-blog-bg-subtle, #f9fafb);
  font-weight: var(--wh-font-weight-semibold, 600);
}

/* Pasek tagow + udostepnianie */
.wh-blog-post__tags {
  margin: 40px 0 48px;
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
  padding: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wh-blog-post__tags-label {
  font: 500 13px/1 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-tag-chip {
  display: inline-block;
  padding: 5px 12px;
  background: var(--wh-color-white, #fff);
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 999px;
  font: 400 12px/1.5 var(--wh-blog-font);
  color: var(--wh-color-primary, #0049ff);
  text-decoration: none;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}

@media (hover: hover) {
.wh-blog-tag-chip:hover {
  border-color: var(--wh-color-primary, #0049ff);
  background: var(--wh-blog-primary-soft, #e6edff);
}
}

/* Udostepnianie */
.wh-blog-share {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wh-blog-share__label {
  font: 400 13px/1 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-share__btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--wh-blog-bg-muted, #f3f4f6);
  color: var(--wh-blog-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
.wh-blog-share__btn:hover {
  background: var(--wh-blog-primary-soft, #e6edff);
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-share__btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Powiazane produkty */
.wh-blog-post__products {
  margin: 0 0 48px;
}

.wh-blog-post__products-title {
  margin: 0 0 20px;
  font: 700 22px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.wh-blog-product-card {
  display: flex;
  flex-direction: column;
  background: var(--wh-color-white, #fff);
  border: 1px solid var(--wh-blog-border-faint, #f0f2f5);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--wh-blog-shadow-faint, 0 1px 3px rgba(0, 0, 0, 0.04));
  transition: box-shadow 0.15s;
}

@media (hover: hover) {
.wh-blog-product-card:hover {
  box-shadow: var(--wh-blog-shadow-hover);
}
}

.wh-blog-product-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--wh-blog-ph-soft-from, #e8f0f4), var(--wh-blog-ph-soft-to, #d0e4f0));
  overflow: hidden;
}

.wh-blog-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wh-blog-product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.wh-blog-product-card__name {
  margin: 0;
  padding: 12px 14px 4px;
  font: 500 13px/1.4 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-product-card__name a {
  color: inherit;
  text-decoration: none;
}

.wh-blog-product-card__price {
  margin: 0;
  padding: 0 14px 14px;
  font: 700 14px/1 var(--wh-blog-font);
  color: var(--wh-color-primary, #0049ff);
}

/* Powiazane wpisy */
/* Nawigacja poprzedni/nastepny wpis (pod trescia, nad powiazanymi).
   Przycisk = sama etykieta (estetyka .wh-blog-btn, rowny rozmiar); tytul pod nim. */
.wh-blog-postnav {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 8px 0 48px;
  font-family: var(--wh-blog-font);
}

.wh-blog-postnav__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: calc(50% - 8px);
}

.wh-blog-postnav__col--next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

/* Przycisk: ten sam jezyk wizualny co .wh-blog-btn; oba przyciski rownej szerokosci */
.wh-blog-postnav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 184px;
  padding: 12px 24px;
  border: 1.5px solid var(--wh-color-primary, #0049ff);
  border-radius: var(--wh-blog-radius, 8px);
  background: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
  font: 600 14px/1 var(--wh-blog-font);
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

@media (hover: hover) {
.wh-blog-postnav__btn:hover {
  background: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
  border-color: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
  color: var(--wh-color-white, #fff);
}
}

.wh-blog-postnav__arrow {
  flex-shrink: 0;
  font-size: var(--wh-font-size-lg, 18px);
  line-height: 1;
}

.wh-blog-postnav__title {
  max-width: 100%;
  font: 400 13px/1.4 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

@media (hover: hover) {
.wh-blog-postnav__title:hover {
  color: var(--wh-color-primary, #0049ff);
}
}

@media (max-width: 560px) {
  .wh-blog-postnav__btn {
    min-width: 0;
    width: 100%;
    padding: 11px 14px;
  }
}

.wh-blog-related {
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  padding: 48px 0 0;
  margin: 0 0 48px;
}

.wh-blog-related__title {
  margin: 0 0 20px;
  font: 700 22px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

/* Biogram autora pod wpisem */
.wh-blog-authorbox {
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  padding-top: 40px;
  margin: 0 0 48px;
  font-family: var(--wh-blog-font);
}

.wh-blog-authorbox__inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--wh-blog-bg-subtle, #f9fafb);
  border-radius: var(--wh-blog-radius-card, 12px);
  padding: 24px;
}

.wh-blog-authorbox__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wh-blog-border, #e5e7eb);
  flex-shrink: 0;
}

.wh-blog-authorbox__name {
  margin: 0 0 4px;
  font: 700 16px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-authorbox__bio {
  margin: 0 0 14px;
  font: 400 15px/1.6 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

.wh-blog-authorbox__link {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 6px;
  font: 500 12px/1.4 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
  text-decoration: none;
}

@media (hover: hover) {
.wh-blog-authorbox__link:hover {
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-primary, #0049ff);
}
}

/* Linki social autora (box pod wpisem + strona autora) */
.wh-blog-authorbox__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wh-blog-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wh-blog-author__info .wh-blog-socials {
  margin-top: 14px;
}

.wh-blog-socials__btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  background: var(--wh-color-white, #fff);
  color: var(--wh-blog-muted, #6b7280);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
}

@media (hover: hover) {
.wh-blog-socials__btn:hover {
  background: var(--wh-color-primary, #0049ff);
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
}
}

.wh-blog-socials__btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================================
   KOMENTARZE
   ============================================================ */
.wh-blog-comments {
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  padding-top: 40px;
  margin-bottom: 40px;
}

.wh-blog-comments__title {
  margin: 0 0 24px;
  font: 700 22px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-comments__subtitle {
  margin: 28px 0 20px;
  font: 700 20px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-comments__list,
.wh-blog-comments__replies {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wh-blog-comment-item {
  margin-bottom: 12px;
}

.wh-blog-comments__replies {
  margin-top: 12px;
}

.wh-blog-comment-item--reply {
  margin-left: 32px;
}

.wh-blog-comment-card {
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 10px;
  padding: 20px;
}

.wh-blog-comment-item--reply .wh-blog-comment-card {
  background: var(--wh-blog-bg-plain, #fafafa);
}

.wh-blog-comment-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.wh-blog-comment-card__author {
  font: 700 14px/1 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-comment-card__date {
  font: 400 13px/1 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-comment-card__body {
  margin: 0 0 12px;
  font: 400 15px/1.6 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-comment-card__reply {
  font: 500 13px/1 var(--wh-blog-font);
  color: var(--wh-color-primary, #0049ff);
  text-decoration: none;
}

/* Formularz komentarza */
.wh-blog-comment-form {
  max-width: 760px;
}

.wh-blog-comment-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wh-blog-comment-form__row {
  margin-bottom: 16px;
}

.wh-blog-comment-form__row label {
  display: block;
  margin-bottom: 7px;
  font: 500 13px/1 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

/* :not(checkbox/radio) — bez tego zgoda RODO dostawala width:100% i padding
   pola tekstowego, czyli checkbox rozciagniety na cala szerokosc nad trescia. */
.wh-blog-comment-form__row input:not([type="checkbox"]):not([type="radio"]),
.wh-blog-comment-form__row textarea {
  width: 100%;
  border: 1.5px solid var(--wh-blog-border, #e5e7eb);
  border-radius: var(--wh-blog-radius, 8px);
  padding: 11px 14px;
  font: 400 15px/1.5 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  background: var(--wh-color-white, #fff);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.wh-blog-comment-form__row input:not([type="checkbox"]):not([type="radio"]):focus,
.wh-blog-comment-form__row textarea:focus {
  outline: none;
  border-color: var(--wh-color-primary, #0049ff);
  box-shadow: 0 0 0 3px var(--wh-blog-primary-soft, #e6edff);
}

/* Zgoda RODO — checkbox w jednej linii z trescia, tekst drobniejszy od pol. */
.wh-blog-comment-form__consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.wh-blog-comment-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  /* Wyrownanie do pierwszej linii tekstu, ktora jest wyzsza niz sam kwadrat. */
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--wh-color-primary, #0049ff);
}

.wh-blog-comment-form__consent label > span {
  font: 400 14px/1.5 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* Tresc zgody wychodzi z edytora Quill, wiec bywa owinieta w <p>. `inline` +
   zerowy margines sprawiaja, ze akapit plynie jak zwykly tekst obok checkboxa.
   `overflow-wrap: anywhere` to bezpiecznik na tresc sklejona twardymi spacjami
   (&nbsp;) albo dlugi adres — lamie DOPIERO gdy inaczej wyszlaby poza kontener.
   Swiadomie NIE `word-break: break-all`, ktory tnie w polowie kazdego slowa. */
.wh-blog-comment-form__consent label > span p {
  display: inline;
  margin: 0;
  overflow-wrap: anywhere;
}

.wh-blog-comment-form__consent a {
  color: var(--wh-color-primary, #0049ff);
  text-decoration: underline;
}

.wh-blog-comment-form__row textarea {
  min-height: 96px;
  resize: vertical;
}

.wh-blog-comment-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wh-blog-comment-form__note {
  margin: 0;
  font: 400 13px/1.4 var(--wh-blog-font);
  color: var(--wh-blog-faint, #9ca3af);
}

.wh-blog-comment-form__replyinfo {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--wh-blog-primary-soft, #e6edff);
  border-radius: var(--wh-blog-radius, 8px);
  font: 400 13px/1.4 var(--wh-blog-font);
  color: var(--wh-blog-primary-dark, color-mix(in srgb, var(--wh-color-primary, #0049ff) 85%, #000));
}

.wh-blog-comment-form__replyinfo a {
  color: var(--wh-color-primary, #0049ff);
}

/* Honeypot — ukryty wizualnie, dostepny dla botow */
.wh-blog-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Komunikaty */
.wh-blog-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--wh-blog-radius, 8px);
  font: 500 14px/1.4 var(--wh-blog-font);
}

.wh-blog-notice--ok {
  background: var(--wh-blog-ok-bg, #f0fdf4);
  border: 1px solid var(--wh-blog-ok-border, #86efac);
  color: var(--wh-color-semantic-success, #16a34a);
}

.wh-blog-notice--err {
  background: var(--wh-blog-err-bg, #fef2f2);
  border: 1px solid var(--wh-blog-err-border, #fca5a5);
  color: var(--wh-blog-err-text, #991b1b);
}

.wh-blog-comments__empty {
  margin: 0 0 28px;
  font: 400 15px/1.5 var(--wh-blog-font);
  color: var(--wh-blog-muted, #6b7280);
}

/* ============================================================
   PASEK PODGLADU SZKICU
   ============================================================ */
.wh-blog-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--wh-blog-star, #f59e0b);
  border-left-width: 4px;
  border-radius: var(--wh-blog-radius, 8px);
  background: var(--wh-blog-warn-bg, #fff7e6);
  color: var(--wh-color-text-primary, #1a1a1a);
  font: 400 14px/1.4 var(--wh-blog-font);
}

.wh-blog-preview-bar__icon {
  font-size: var(--wh-font-size-base, 16px);
  line-height: 1;
}

/* ============================================================
   PAGINACJA
   ============================================================ */
.wh-blog-pagination {
  border-top: 1px solid var(--wh-blog-border, #e5e7eb);
  padding-top: 32px;
  margin-top: 32px;
}

.wh-blog-pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wh-blog-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: var(--wh-blog-radius, 8px);
  background: var(--wh-color-white, #fff);
  font: 400 13px/1 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

@media (hover: hover) {
.wh-blog-pagination__link:hover {
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-primary, #0049ff);
}
}

.wh-blog-pagination__item--current .wh-blog-pagination__link {
  background: var(--wh-color-primary, #0049ff);
  border-color: var(--wh-color-primary, #0049ff);
  color: var(--wh-color-white, #fff);
  font-weight: var(--wh-font-weight-bold, 700);
}

.wh-blog-pagination__item--disabled .wh-blog-pagination__link {
  background: var(--wh-blog-bg-subtle, #f9fafb);
  color: var(--wh-blog-faint, #9ca3af);
  cursor: default;
}

/* ============================================================
   BLOKI LAYOUT MANAGERA (recent / featured / home)
   ============================================================ */
.wh-blog-block {
  margin: 48px auto;
  font-family: var(--wh-blog-font);
}

.wh-blog-block__title {
  margin: 0 0 24px;
  font: 800 28px/1.1 var(--wh-blog-font);
  letter-spacing: -0.3px;
  color: var(--wh-color-text-primary, #1a1a1a);
}

/* ============================================================
   SEKCJA "STRONA GLOWNA" — slider (Swiper)
   Biblioteka dolaczona do modulu, doladowywana leniwie przez
   wh-home-slider.js. Ponizej tylko spojnosc kolorow + fallback.
   ============================================================ */

div.swiper.wh-blog-home-swiper {
  --swiper-theme-color: var(--wh-color-primary, #0049ff);
  --swiper-navigation-size: 24px;
  position: relative;
  padding-bottom: 2.4rem;
}

.wh-blog-home-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.wh-blog-home-swiper .swiper-slide > .wh-blog-card {
  width: 100%;
}

.wh-blog-home-swiper .swiper-button-prev,
.wh-blog-home-swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wh-color-white, #fff);
  box-shadow: var(--wh-blog-shadow-pop, 0 2px 10px rgba(0, 0, 0, 0.15));
}

.wh-blog-home-swiper .swiper-button-prev::after,
.wh-blog-home-swiper .swiper-button-next::after {
  font-size: var(--wh-font-size-body, 14px);
  font-weight: var(--wh-font-weight-bold, 700);
}

.wh-blog-home-swiper .swiper-pagination {
  bottom: 0;
}

/* Fallback przed inicjalizacja Swipera */
.wh-blog-home-swiper:not(.wh-blog-home-swiper--ready) .swiper-wrapper {
  display: flex;
  gap: 18px;
  overflow: hidden;
}

.wh-blog-home-swiper:not(.wh-blog-home-swiper--ready) .swiper-slide {
  flex: 0 0 auto;
  width: clamp(240px, 30%, 360px);
}

/* Doladowywanie list: przycisk "Pokaz wiecej" / nieskonczone przewijanie */
.wh-blog-loadmore {
  display: flex;
  justify-content: center;
  margin: 8px 0 32px;
}

.wh-blog-loadmore--loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================
   BLOK "Przeczytaj na blogu" pod produktem (hook displayFooterProduct)
   ============================================================ */
.wh-blog-product-posts {
  margin: 32px 0;
  font-family: var(--wh-blog-font);
}

.wh-blog-product-posts__title {
  margin: 0 0 20px;
  font: 700 22px/1.2 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

.wh-blog-product-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wh-blog-product-posts__card {
  display: flex;
  flex-direction: column;
  background: var(--wh-color-white, #fff);
  border-radius: var(--wh-blog-radius-card, 12px);
  overflow: hidden;
  box-shadow: var(--wh-blog-shadow-card);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 0.18s,
    transform 0.18s;
}

@media (hover: hover) {
.wh-blog-product-posts__card:hover {
  box-shadow: var(--wh-blog-shadow-hover);
  transform: translateY(-2px);
}
}

.wh-blog-product-posts__media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--wh-blog-ph-from, #e8ecf0), var(--wh-blog-ph-to, #c8d4e2));
  overflow: hidden;
}

.wh-blog-product-posts__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wh-blog-product-posts__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.wh-blog-product-posts__name {
  margin: 0;
  padding: 16px;
  font: 700 16px/1.35 var(--wh-blog-font);
  color: var(--wh-color-text-primary, #1a1a1a);
}

/* ============================================================
   RESPONSYWNOSC
   ============================================================ */
@media (max-width: 1024px) {
  .wh-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wh-blog-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wh-blog-product-posts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wh-blog-post__title {
    font-size: var(--wh-font-size-h1, 38px);
  }
  /* Brak miejsca na sidebar — jedna kolumna, TOC ukryty, tresc wysrodkowana. */
  .wh-blog-post__layout--toc {
    display: block;
  }
  .wh-blog-post__aside {
    display: none;
  }
  .wh-blog-post__layout--toc .wh-blog-post__content {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .wh-blog-grid {
    grid-template-columns: 1fr;
  }
  .wh-blog-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wh-blog-product-posts__grid {
    grid-template-columns: 1fr;
  }
  .wh-blog-list__title,
  .wh-blog-hub__title {
    font-size: var(--wh-font-size-h1, 38px);
  }
  .wh-blog-post__title {
    font-size: var(--wh-font-size-h2, 32px);
  }
  .wh-blog-post__content h2 {
    font-size: var(--wh-font-size-h3, 22px);
  }
  .wh-blog-author__header {
    flex-direction: column;
    gap: 14px;
  }
  .wh-blog-comment-form__grid {
    grid-template-columns: 1fr;
  }
  .wh-blog-share {
    margin-left: 0;
    width: 100%;
  }
  .wh-blog-authorbox__inner {
    flex-direction: column;
    gap: 14px;
  }
}

/* ============================================================
   "W SKROCIE" (TL;DR) — kluczowe punkty na gorze wpisu.
   Styl: czysta karta z mocnym lewym obramowaniem w kolorze akcentu
   (obrys, nie rozmyty tint) + ciemny tekst.
   ============================================================ */
.wh-blog-tldr {
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--wh-color-white, #fff);
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-left: 4px solid var(--wh-color-primary, #0049ff);
  border-radius: var(--wh-blog-radius, 8px);
}
.wh-blog-tldr__title {
  margin: 0 0 10px;
  font: 800 13px/1 var(--wh-blog-font);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--wh-color-primary, #0049ff);
}
.wh-blog-tldr__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wh-blog-tldr__list li {
  position: relative;
  padding: 4px 0 4px 24px;
  color: var(--wh-color-text-primary, #1a1a1a);
  font-size: var(--wh-font-size-base, 16px);
  line-height: 1.5;
}
.wh-blog-tldr__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wh-color-primary, #0049ff);
}

/* ============================================================
   BLOK "ARCHIWUM" (Layout Manager) — lista miesiecy z liczba wpisow.
   ============================================================ */
.wh-blog-archive {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wh-blog-archive__item {
  border-bottom: 1px solid var(--wh-blog-border, #e5e7eb);
}
.wh-blog-archive__item:last-child {
  border-bottom: 0;
}
.wh-blog-archive__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 4px;
  text-decoration: none;
  color: var(--wh-color-text-primary, #1a1a1a);
  font-weight: var(--wh-font-weight-semibold, 600);
  transition: color 0.15s ease;
}
.wh-blog-archive__link:focus .wh-blog-archive__label {
  color: var(--wh-color-primary, #0049ff);
}
@media (hover: hover) {
.wh-blog-archive__link:hover .wh-blog-archive__label {
  color: var(--wh-color-primary, #0049ff);
}
}
.wh-blog-archive__count {
  flex: none;
  min-width: 24px;
  padding: 2px 9px;
  text-align: center;
  font-size: var(--wh-font-size-small, 12px);
  font-weight: var(--wh-font-weight-bold, 700);
  color: var(--wh-blog-muted, #6b7280);
  background: var(--wh-blog-bg-subtle, #f9fafb);
  border: 1px solid var(--wh-blog-border, #e5e7eb);
  border-radius: 999px;
}


/* ============================================================
   GALERIA (uklad 'gallery': lookbook / kampania) — 1.10.0
   Neutralny uklad modulu; motyw dopasowuje typografie i kolory.
   Kadry sa STALE (aspect-ratio), zdjecie przycina object-fit: cover.
   Zero zaokraglen i cieni — to uklad edytorski, nie karty bloga.
   ============================================================ */
/* Zmienne wspolne dla galerii, listy i kart "minimal" (motyw nadpisuje tu, nie w regulach). */
.wh-blog-gallery,
.wh-blog-list,
.wh-blog-related,
.wh-blog-card--minimal {
  --wh-g-gap: 24px;
  --wh-g-section: 96px;
  --wh-g-muted: #737373;
  --wh-g-text: var(--wh-color-text-primary, #111);
  --wh-g-eyebrow: 12px;
  --wh-g-eyebrow-ls: 2px;
}

.wh-blog-gallery {
  font-family: var(--wh-blog-font);
  color: var(--wh-g-text);
  /* Bez overflow: clip — hero i bloki full-bleed wychodza poza kontener (100vw), a klip
     na tym elemencie przycinal je do szerokosci kontenera. Nadmiar scrollbara chowa motyw. */
}

.wh-blog-gallery__eyebrow {
  margin: 0;
  font-size: var(--wh-g-eyebrow);
  line-height: 16px;
  letter-spacing: var(--wh-g-eyebrow-ls);
  text-transform: uppercase;
  color: var(--wh-g-muted);
}

/* Odnosnik "z kreska" (CTA hero, nawigacja, karta minimal) */
.wh-blog-gallery__link {
  display: inline-block;
  padding-bottom: 4px;
  font-size: var(--wh-g-eyebrow);
  line-height: 16px;
  letter-spacing: var(--wh-g-eyebrow-ls);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s;
}

.wh-blog-gallery__link:hover,
.wh-blog-gallery__link:focus-visible {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
}

/* ---- 01 Hero: pelna szerokosc ekranu (full-bleed), tekst na gradiencie ---- */
.wh-blog-gallery__hero {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: var(--wh-color-text-inverse, #fff);
}

.wh-blog-gallery__hero:not(.wh-blog-gallery__hero--image) {
  color: var(--wh-g-text);
}

.wh-blog-gallery__hero-media {
  position: relative;
  width: 100%;
  height: min(53.75vw, 860px);
  overflow: hidden;
  background: var(--wh-color-bg-subtle, #f2f2f2);
}

.wh-blog-gallery__hero-media picture,
.wh-blog-gallery__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wh-blog-gallery__hero-shade {
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.wh-blog-gallery__hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  width: min(100% - 48px, 1354px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.wh-blog-gallery__hero:not(.wh-blog-gallery__hero--image) .wh-blog-gallery__hero-text {
  position: static;
  padding: 48px 0 0;
}

.wh-blog-gallery__hero-eyebrow {
  color: inherit;
}

.wh-blog-gallery__hero-title {
  margin: 0;
  max-width: 700px;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.125;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: inherit;
}

/* ---- Powiazane produkty (galeria): slider z kafelkiem MOTYWU ----
   Kafelek = catalog/_partials/miniatures/product.tpl, wiec jego wyglad daje motyw; tu tylko
   rama: siatka 4/3/2 bez skryptu, Swiper po zamontowaniu, strzalki PO BOKACH (jak karuzele
   produktow) — poza kadrem na szerokim ekranie, przy krawedzi na weszym. Bez naglowka. */
.wh-blog-pslider {
  position: relative;
  margin-top: var(--wh-g-section);
}

.wh-blog-pslider__viewport {
  overflow: hidden;
}

.wh-blog-pslider__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wh-g-gap);
}

.wh-blog-pslider--swiper .wh-blog-pslider__track {
  display: flex;
  gap: 0;
}

.wh-blog-pslider__item {
  min-width: 0;
}

.wh-blog-pslider__item > .product-miniature,
.wh-blog-pslider__item > .js-product-miniature {
  height: 100%;
  margin: 0;
}

/* Strzalki dopiero ze sliderem (bez skryptu nie ma czym sterowac); znikaja, gdy wszystkie
   kafelki mieszcza sie w kadrze (watchOverflow -> lockClass). Polozenie jak w
   wh_productscarousel: na zewnatrz kadru, ale nigdy poza ekranem —
   (100% - 100vw) / 2 to ujemna szerokosc marginesu strony. */
.wh-blog-pslider__arrow {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wh-color-bg-light, #f7f7f7);
  color: var(--wh-g-text);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s;
}

.wh-blog-pslider--swiper .wh-blog-pslider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wh-blog-pslider__arrow svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  transition: transform 0.3s ease;
}

.wh-blog-pslider__arrow--prev {
  left: max(-72px, calc((100% - 100vw) / 2 + 16px));
}

.wh-blog-pslider__arrow--next {
  right: max(-72px, calc((100% - 100vw) / 2 + 16px));
}

.wh-blog-pslider__arrow--prev:hover svg {
  transform: translateX(-4px);
}

.wh-blog-pslider__arrow--next:hover svg {
  transform: translateX(4px);
}

.wh-blog-pslider__arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.wh-blog-pslider--swiper .wh-blog-pslider__arrow.is-locked {
  display: none;
}

@media (max-width: 1199px) {
  .wh-blog-pslider__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- 02 Intro: tytul + credits | opis ---- */
.wh-blog-gallery__intro {
  display: grid;
  grid-template-columns: minmax(0, 483px) minmax(0, 587px);
  justify-content: space-between;
  gap: 40px var(--wh-g-gap);
  padding: 122px 0 0;
}

.wh-blog-gallery__intro-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wh-blog-gallery__title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.wh-blog-gallery__credits {
  display: grid;
  gap: 10px;
  margin: 0;
}

.wh-blog-gallery__credit {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: baseline;
}

.wh-blog-gallery__credit-label {
  margin: 0;
  font-weight: 400;
  font-size: var(--wh-g-eyebrow);
  line-height: 20px;
  letter-spacing: var(--wh-g-eyebrow-ls);
  text-transform: uppercase;
  color: var(--wh-g-muted);
}

.wh-blog-gallery__credit-value {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.wh-blog-gallery__intro-desc {
  padding-top: 66px;
  font-size: 14px;
  line-height: 25px;
  text-align: justify;
}

.wh-blog-gallery__intro-desc p {
  margin: 0 0 25px;
}

.wh-blog-gallery__intro-desc p:last-child {
  margin-bottom: 0;
}

/* ---- 03–09 Bloki ---- */
.wh-blog-gallery__blocks {
  display: grid;
  gap: var(--wh-g-section);
  padding: var(--wh-g-section) 0 0;
}

/* Sekcja-blok jest elementem siatki .wh-blog-gallery__blocks: bez min-width: 0 rozciagalaby
   sie do szerokosci zawartosci (100vw kadru full-bleed na telefonie) i margines ujemny
   kadru liczylby sie od 100vw zamiast od kontenera — kadr "uciekal" w prawo o gutter. */
.wh-blog-gblock {
  min-width: 0;
}

.wh-blog-gblock__grid {
  display: grid;
  gap: var(--wh-g-gap);
  align-items: start;
}

.wh-blog-gblock__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wh-blog-gblock__grid--text {
  grid-template-columns: minmax(0, 1fr) minmax(0, 587px);
  justify-content: space-between;
  column-gap: 102px;
}

.wh-blog-gblock--right .wh-blog-gblock__grid--text .wh-blog-gfig,
.wh-blog-gblock--right .wh-blog-gblock__grid--trio > .wh-blog-gfig {
  order: 2;
}

.wh-blog-gblock__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
}

.wh-blog-gblock__title {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.wh-blog-gblock__desc {
  font-size: 14px;
  line-height: 25px;
  text-align: justify;
}

.wh-blog-gblock__grid--trio {
  grid-template-columns: minmax(0, 880fr) minmax(0, 450fr);
}

.wh-blog-gblock__stack {
  display: grid;
  gap: var(--wh-g-gap);
}

.wh-blog-gblock__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--wh-g-gap);
}

.wh-blog-gblock__row-track {
  display: contents;
}

/* Figura: kadr + podpis */
.wh-blog-gfig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.wh-blog-gfig__link {
  display: block;
  color: inherit;
}

.wh-blog-gfig__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--wh-gfig-ratio, 3 / 2);
  overflow: hidden;
  background: var(--wh-color-bg-subtle, #f2f2f2);
}

.wh-blog-gfig__media picture,
.wh-blog-gfig__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-blog-gfig__placeholder {
  position: absolute;
  inset: 0;
}

.wh-blog-gfig__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wh-blog-gfig__eyebrow {
  font-size: var(--wh-g-eyebrow);
  line-height: 16px;
  letter-spacing: var(--wh-g-eyebrow-ls);
  text-transform: uppercase;
  color: var(--wh-g-muted);
}

.wh-blog-gfig__text {
  font-size: 14px;
  line-height: 20px;
}

/* Cytat */
.wh-blog-gblock--quote {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.wh-blog-gblock__quote {
  margin: 0;
  padding: 0;
  border: 0;
}

.wh-blog-gblock__quote-text {
  margin: 0 0 24px;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.7;
  font-style: italic;
  quotes: "\201E" "\201D";
}

.wh-blog-gblock__quote-text::before {
  content: open-quote;
}

.wh-blog-gblock__quote-text::after {
  content: close-quote;
}

.wh-blog-gblock__quote-author {
  font-size: var(--wh-g-eyebrow);
  line-height: 16px;
  letter-spacing: var(--wh-g-eyebrow-ls);
  text-transform: uppercase;
  color: var(--wh-g-muted);
}

/* Film */
.wh-blog-gvideo {
  background: #000;
}

.wh-blog-gvideo__player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-blog-gvideo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s;
}

.wh-blog-gvideo__play svg {
  width: 72px;
  height: 72px;
}

.wh-blog-gvideo__play:hover {
  transform: scale(1.06);
}

.wh-blog-gvideo--playing .wh-blog-gvideo__play,
.wh-blog-gvideo--auto:not(.wh-blog-gvideo--paused) .wh-blog-gvideo__play {
  display: none;
}

.wh-blog-gvideo--auto .wh-blog-gvideo__player {
  cursor: pointer;
}

/* Tekst z edytora wewnatrz galerii — bez ograniczenia 800 px */
.wh-blog-gblock__html.wh-blog-post__content {
  max-width: 760px;
  margin: 0 auto;
  /* Zapas na tresc bez zwyklych spacji (np. same &nbsp; z edytora): lepiej zlamac w slowie
     niz wyjechac poza ekran. Normalnie nie dziala, bo spacje sa zwykle. */
  overflow-wrap: anywhere;
}

/* ---- 10 Nawigacja ---- */
.wh-blog-gallery__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wh-g-gap);
  margin-top: var(--wh-g-section);
  padding: 32px 0;
  border-top: 1px solid var(--wh-color-border-subtle, #e5e5e5);
  border-bottom: 1px solid var(--wh-color-border-subtle, #e5e5e5);
}

.wh-blog-gallery__nav .wh-blog-gallery__link {
  border-bottom: 0;
}

.wh-blog-gallery__nav-col--all {
  text-align: center;
}

.wh-blog-gallery__nav-col--next {
  text-align: right;
}

/* Etykiety nawigacji: pelna na desktopie, pierwsze slowo na telefonie. */
.wh-blog-gallery__nav-short {
  display: none;
}

@media (max-width: 767px) {
  .wh-blog-gallery__nav-full {
    display: none;
  }

  .wh-blog-gallery__nav-short {
    display: inline;
  }
}

/* Powiazane w galerii: naglowek jak tytul sekcji, siatka 3 kolumny */
.wh-blog-gallery__related {
  margin-top: 64px;
  border-top: 0;
  padding-top: 0;
}

.wh-blog-gallery__related .wh-blog-related__title {
  margin: 0 0 32px;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.wh-blog-grid--gallery {
  --wh-grid-cols: 3;
}

/* ---- Telefon ---- */
@media (max-width: 767px) {
  .wh-blog-gallery {
    --wh-g-gap: 16px;
    --wh-g-section: 64px;
  }

  .wh-blog-gallery__hero-media {
    height: min(143.6vw, 560px);
  }

  .wh-blog-pslider__arrow {
    width: 36px;
    height: 36px;
  }

  .wh-blog-pslider__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wh-blog-gallery__hero-text {
    bottom: 32px;
    width: calc(100% - 48px);
    gap: 12px;
  }

  .wh-blog-gallery__intro {
    grid-template-columns: 1fr;
    padding-top: 64px;
    gap: 16px;
  }

  /* Na telefonie kolejnosc: sezon, tytul, OPIS, credits (makieta 2289:87). Opis jest
     rodzenstwem kolumny z tytulem, wiec kolumne "rozpuszczamy" (display: contents) i
     ukladamy wszystko jako elementy jednej siatki. */
  .wh-blog-gallery__intro-main {
    display: contents;
  }

  .wh-blog-gallery__intro-desc {
    order: 3;
    padding-top: 8px;
    text-align: left;
  }

  .wh-blog-gallery__credits {
    order: 4;
    padding-top: 8px;
  }

  .wh-blog-gallery__credit {
    grid-template-columns: 110px 1fr;
  }

  /* 1 zdjecie 3:2 i film: pelna szerokosc ekranu */
  .wh-blog-gblock--image_full .wh-blog-gfig__media,
  .wh-blog-gblock--video .wh-blog-gfig__media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .wh-blog-gblock__grid--text {
    grid-template-columns: 1fr;
    column-gap: var(--wh-g-gap);
  }

  .wh-blog-gblock--right .wh-blog-gblock__grid--text .wh-blog-gfig,
  .wh-blog-gblock--right .wh-blog-gblock__grid--trio > .wh-blog-gfig {
    order: 0;
  }

  .wh-blog-gblock__text {
    padding-top: 8px;
    gap: 16px;
  }

  .wh-blog-gblock__grid--trio {
    grid-template-columns: 1fr;
  }

  .wh-blog-gblock__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Rzad zdjec = slider poziomy (Swiper inicjuje wh-gallery.js); bez JS: przewijany rzad */
  .wh-blog-gblock__row {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
  }

  .wh-blog-gblock__row-track {
    display: flex;
    gap: var(--wh-g-gap);
    padding: 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .wh-blog-gblock__row--swiper .wh-blog-gblock__row-track {
    gap: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .wh-blog-gblock__row-item {
    flex: 0 0 260px;
    width: 260px;
    scroll-snap-align: start;
  }

  .wh-blog-gallery__nav {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .wh-blog-grid--gallery {
    --wh-grid-cols: 2;
  }
}

/* ============================================================
   HUB W TRYBIE "LISTA" + KARTA "MINIMAL" — 1.10.0
   ============================================================ */
.wh-blog-list--flat .wh-blog-list__header {
  text-align: left;
  border-bottom: 0;
  padding: 48px 0 24px;
  margin-bottom: 0;
}

.wh-blog-list--flat .wh-blog-hub__subtitle {
  margin: 0;
  max-width: 587px;
}

.wh-blog-list--flat .wh-blog-filter {
  margin: 0 0 40px;
}

/* Wyrozniony (najnowszy) wpis: kafel 16:9 z tekstem na gradiencie */
.wh-blog-flat__featured {
  position: relative;
  display: block;
  margin: 0 0 40px;
  color: var(--wh-color-text-inverse, #fff);
  text-decoration: none;
}

.wh-blog-flat__featured:hover,
.wh-blog-flat__featured:focus-visible {
  color: var(--wh-color-text-inverse, #fff);
  text-decoration: none;
}

.wh-blog-flat__featured-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--wh-color-bg-subtle, #f2f2f2);
}

.wh-blog-flat__featured-media picture,
.wh-blog-flat__featured-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-blog-flat__featured-shade {
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.wh-blog-flat__featured-text {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 700px;
}

.wh-blog-flat__featured-eyebrow,
.wh-blog-flat__featured-more {
  color: inherit;
}

.wh-blog-flat__featured-title {
  font-size: clamp(26px, 3.5vw, 56px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0.2px;
}

@media (max-width: 767px) {
  .wh-blog-flat__featured-media {
    aspect-ratio: 3 / 4;
  }

  .wh-blog-flat__featured-text {
    left: 24px;
    right: 24px;
    bottom: 24px;
    gap: 10px;
  }

  .wh-blog-list--flat .wh-blog-filter__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* Karty doklejone przez "Pokaz wiecej": lagodne wejscie zamiast skoku */
.wh-blog-card--appended {
  animation: wh-blog-card-in 0.35s ease-out both;
}

@keyframes wh-blog-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wh-blog-card--appended {
    animation: none;
  }
}

/* Karta "minimal": zero ramki/cienia/zaokraglen; eyebrow, tytul, odnosnik z kreska */
.wh-blog-card--minimal {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.wh-blog-card--minimal:hover {
  box-shadow: none;
  transform: none;
}

.wh-blog-card--minimal .wh-blog-card__media,
.wh-blog-card--minimal .wh-blog-card__image {
  border-radius: 0;
}

.wh-blog-card--minimal .wh-blog-card__body {
  padding: 20px 0 0;
  gap: 8px;
}

.wh-blog-card--minimal .wh-blog-card__eyebrow {
  margin: 0;
}

.wh-blog-card--minimal .wh-blog-card__title {
  margin: 0;
  font-size: 26px;
  line-height: 34px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

.wh-blog-card--minimal .wh-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.wh-blog-card--minimal .wh-blog-card__more {
  display: inline-block;
  align-self: flex-start;
  width: auto;
  margin-top: 12px;
  padding-top: 0;
  padding-bottom: 4px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .wh-blog-card--minimal .wh-blog-card__title {
    font-size: 18px;
    line-height: 26px;
  }
}