/*
 * Blog (lista /blog i artykuł /blog/<slug>) — style nowych elementów wg projektu w Paper (plik WODP, strona „Blog — propozycja”).
 * Ładowany TYLKO na stronach bloga (BaseLayout `styles`), po /css/wodp.css. Wszystkie selektory z prefiksem `blog-`;
 * obudowy reużyte z MAST/OSMO: section/container/row/col, karta realizacji (demo-card*), filtr Portfolio (filter-*),
 * przyciski nawigacji (btn-animate-chars), u-mode-dark. Wartości w rem (1rem = 16 px = wartości px z Paper przy 1440).
 * Breakpointy MAST: ≤ 991 (tablet), ≤ 767 (telefon poziomo), ≤ 479 (telefon).
 */

:root {
  --blog-blue: #1200f4;
  --blog-ink: #000;
  --blog-ink-60: #00000099;
  --blog-line: #00000033;
  --blog-pill: #efeeec;
  --blog-hover: #131313;
  --blog-ease: cubic-bezier(0.625, 0.05, 0, 1);
  /* wcięcie treści w kolumnie MAST = odstęp kart w siatce Portfolio (.filter-list__item 0.75em), żeby tekst i karty
     zaczynały się w tej samej linii (98 px przy 1440 — jak w Paper) */
  --blog-inset: 0.75rem;
  /* wysokość paska nawigacji (fixed) — sekcje pod nim zaczynają się niżej o tę wartość */
  --blog-nav: 4.8125rem;
}

/* ——— wspólne ——— */
.blog-section.section { padding-top: 0; padding-bottom: 0; }
.blog-section .col { min-width: 0; padding-left: calc(var(--_layout---grid--gap-main) / 2 + var(--blog-inset)); padding-right: calc(var(--_layout---grid--gap-main) / 2 + var(--blog-inset)); }
.blog-section p,
.blog-section h1,
.blog-section h2,
.blog-section h3 { margin: 0; }

.blog-eyebrow {
  color: var(--blog-blue);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}
.blog-display {
  font-size: clamp(2.875rem, 1.9rem + 4.1vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.blog-lead {
  color: var(--blog-ink-60);
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: 0.02rem;
}
.blog-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--blog-blue);
}
.blog-arrow { flex-shrink: 0; display: block; }
.blog-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--blog-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6rem;
  letter-spacing: 0.02rem;
  text-decoration: none;
}
.blog-link .blog-arrow { color: var(--blog-blue); transition: transform 0.4s var(--blog-ease); }
.blog-link:hover .blog-arrow { transform: translateX(0.25rem); }
.blog-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.blog-caption {
  color: var(--blog-ink-60);
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}
/* obudowa obrazu = obudowa karty realizacji (obrys 1 px, radius 8, padding 8) */
.blog-frame {
  border: 1px solid var(--blog-line);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: #fff;
}
.blog-frame__img {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #e2e1df;
  object-fit: cover;
}
.blog-avatar {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 0%;
  background-color: #e2e1df;
}
.blog-avatar--md { width: 2.5rem; height: 2.5rem; }
.blog-chip {
  display: inline-flex;
  border: 0;
  border-radius: 3rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--blog-pill);
  color: var(--blog-ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.4s var(--blog-ease), color 0.4s var(--blog-ease);
}
.blog-chip:hover { background-color: var(--blog-hover); color: var(--blog-pill); }
.blog-pill-dark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-radius: 1.5rem;
  background-color: var(--blog-ink);
  color: #fff;
  font-size: 1rem;
  line-height: 1rem;
  letter-spacing: 0.02rem;
  white-space: nowrap;
}

/* ——— karta wpisu (Paper: „Karta wpisu — komponent”) ——— */
.blog-card.demo-card {
  position: relative;
  gap: 1.25rem;
  height: 100%;
  background-color: #fff;
  transition: border-color 0.4s var(--blog-ease);
}
.blog-card__visual.demo-card__visual {
  aspect-ratio: 380 / 253;
  flex-shrink: 0;
  overflow: hidden;
}
.blog-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--blog-ease);
}
.blog-card__tag.demo-card__tags-item {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}
.blog-card__tag .demo-card__tags-item-p,
.blog-tag .demo-card__tags-item-p {
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}
.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 0.5rem 0.5rem;
}
.blog-card__text { display: flex; flex-direction: column; gap: 0.75rem; }
.blog-card__meta {
  color: var(--blog-ink-60);
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}
.blog-card__label {
  margin-right: 0.75rem;
  color: var(--blog-blue);
  font-weight: 500;
  text-transform: uppercase;
}
.blog-card__title {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0;
  text-wrap: pretty;
}
.blog-card__link { color: inherit; text-decoration: none; }
/* maks. 3 linie tytułu i 2 linie zajawki (wyróżniona: 3) — legenda arkusza karty w Paper */
.blog-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.blog-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.blog-card--featured .blog-card__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
/* cała karta klikalna: link tytułu rozciągnięty na kartę; fokus rysowany na karcie */
.blog-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 0.5rem; }
.blog-card__link:focus-visible { outline: none; }
.blog-card:has(.blog-card__link:focus-visible) { outline: 2px solid var(--blog-hover); outline-offset: 3px; }
.blog-card__excerpt {
  color: var(--blog-ink-60);
  font-size: 1rem;
  line-height: 1.6rem;
  letter-spacing: 0.02rem;
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.blog-card__author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}
.blog-card__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--blog-blue);
  transition: background-color 0.4s var(--blog-ease), color 0.4s var(--blog-ease);
}
@media (hover: hover) {
  .blog-card:hover { border-color: var(--blog-hover); }
  .blog-card:hover .blog-card__img { transform: scale(1.04); }
  .blog-card:hover .blog-card__arrow { background-color: var(--blog-blue); color: #fff; }
  .blog-card--featured:hover .blog-pill-dark { background-color: var(--blog-blue); }
}
.blog-card:has(.blog-card__link:focus-visible) .blog-card__arrow { background-color: var(--blog-blue); color: #fff; }
/* wariant bez zdjęcia: blok w kolorze marki z cytatem */
.blog-card--quote .blog-card__visual { background-color: var(--blog-blue); align-items: flex-end; justify-content: flex-start; }
.blog-card--quote .blog-card__visual { container-type: inline-size; }
.blog-card__quote {
  padding: 1.25rem;
  color: #fff;
  /* 24 px przy karcie 380 px (Paper), mniej w węższych kartach (1024, 768) */
  font-size: clamp(1.125rem, 6.3cqi, 1.5rem);
  font-weight: 500;
  line-height: 1.625rem;
  text-wrap: balance;
}
.blog-card__quote-mark { display: block; font-size: 2.5rem; line-height: 1.75rem; height: 1.25rem; }
/* wariant wyróżniony: poziomo ≥ 768 px (obraz 4:3, połowa karty), pionowo niżej */
.blog-card--featured.demo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
}
.blog-card--featured .blog-card__visual { aspect-ratio: 4 / 3; }
.blog-card--featured .blog-card__body { padding: 1rem 2rem 0.5rem 0; }
.blog-card--featured .blog-card__text { gap: 1.5rem; }
.blog-card--featured .blog-card__title { font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.01em; }
.blog-card--featured .blog-card__author { gap: 0.75rem; font-size: 1rem; line-height: 1rem; }
.blog-card--featured .blog-avatar { width: 2.5rem; height: 2.5rem; }
.blog-card--featured .blog-pill-dark { transition: background-color 0.4s var(--blog-ease); }

/* ——— lista: nagłówek ——— */
.blog-head.section { padding-top: calc(var(--blog-nav) + 9rem); padding-bottom: 6rem; }
.blog-head__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}
.blog-head__text { display: flex; flex-direction: column; gap: 2rem; max-width: 50rem; }
.blog-head__lead { flex: 0 0 23.75rem; padding-bottom: 0.25rem; }
@media screen and (max-width: 1199px) {
  .blog-head__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .blog-head__lead { flex-basis: auto; max-width: 36rem; }
}

/* ——— lista: wyróżniony ——— */
.blog-featured.section { padding-bottom: 6rem; }

/* ——— lista: filtr (pigułki = .filter-btn z Portfolio) i siatka ——— */
.blog-filter-group.filter-group { min-width: 0; min-height: 0; padding-bottom: 0; }
.blog-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 3rem;
}
.blog-filter__buttons.filter-buttons { padding: 0; }
.blog-filter__count {
  flex-shrink: 0;
  color: var(--blog-ink-60);
  font-size: 1rem;
  line-height: 1.6rem;
  letter-spacing: 0.02rem;
}
.blog-grid.filter-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.blog-grid__item.filter-list__item { width: auto; padding: 0; }
.blog-grid__item[data-blog-hidden] { display: none; }
/* wyróżniony wpis jest też w siatce — widoczny dopiero po wybraniu kategorii (public/js/blog.js) */
.blog-filter-group:not([data-blog-filtered]) .blog-grid__item[data-blog-featured-item] { display: none; }
.blog-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 0 0;
}
.blog-more[hidden] { display: none; }
.blog-list.section { padding-bottom: 10rem; }
.blog-more__btn.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  color: var(--blog-ink);
  cursor: pointer;
}
.blog-more__btn.filter-btn:hover { background-color: var(--blog-hover); color: var(--blog-pill); }
.blog-more__progress {
  color: var(--blog-ink-60);
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}

/* ——— pas CTA (czarny) ——— */
.blog-cta.section { padding-top: 9rem; padding-bottom: 0; }
.blog-cta__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  padding-bottom: 7.5rem;
  border-bottom: 1px solid #ffffff26;
}
.blog-cta__left { display: flex; flex-direction: column; gap: 2rem; max-width: 45rem; }
.blog-cta__eyebrow { color: #cccabf; }
.blog-cta__heading { color: #fff; font-size: clamp(2.72rem, 1.6rem + 4.3vw, 5rem); }
.blog-cta__right { display: flex; flex-direction: column; gap: 2rem; flex: 0 1 26.25rem; }
.blog-cta__text { color: #ffffff99; }
.blog-cta__buttons { display: flex; gap: 0.75rem; }
.blog-cta__buttons .btn-animate-chars { flex-grow: 0; height: 3rem; font-size: 1rem; }
/* eksport ukrywa .btn-animate-chars.secondary ≤ 991 px (przycisk w nagłówku) — w pasie CTA ma zostać */
.blog-cta__buttons .btn-animate-chars.secondary { display: flex; }

/* ——— artykuł: nagłówek ——— */
.blog-post-head.section { padding-top: calc(var(--blog-nav) + 7.5rem); padding-bottom: 4rem; }
.blog-post-head .col { gap: 2.5rem; }
.blog-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
}
.blog-crumbs__link { color: var(--blog-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-crumbs__sep { color: #00000066; }
.blog-crumbs__current { color: var(--blog-ink-60); }
.blog-post-head__title { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.blog-post-head__h1 { max-width: 71rem; font-size: clamp(2.25rem, 0.9rem + 4.9vw, 5rem); }
.blog-post-head__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 0.5rem;
}
.blog-post-head__lead { max-width: 44rem; }
.blog-byline { display: flex; flex-shrink: 0; align-items: center; gap: 0.75rem; }
.blog-byline__text { display: flex; flex-direction: column; gap: 0.125rem; }
.blog-byline__name { font-size: 1rem; font-weight: 500; line-height: 1.6rem; letter-spacing: 0.02rem; }
.blog-byline__meta { color: var(--blog-ink-60); font-size: 0.875rem; line-height: 1.4rem; letter-spacing: 0.02rem; }

/* ——— artykuł: zdjęcie główne ——— */
.blog-post-cover.section { padding-bottom: 6rem; }
.blog-cover { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.blog-cover .blog-frame__img { aspect-ratio: 1224 / 688; }

/* ——— artykuł: układ (kolumna pomocnicza 292 + odstęp 130 + tekst 704 przy 1440) ——— */
.blog-post-body.section { padding-bottom: 0; }
.blog-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 18.25rem) minmax(0, 44rem);
  column-gap: clamp(3rem, 9vw, 8.125rem);
  align-items: start;
}
.blog-post-side { align-self: stretch; }
.blog-post-side__sticky {
  position: sticky;
  top: calc(var(--blog-nav) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 0.375rem;
}
.blog-side__label {
  color: var(--blog-ink-60);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4rem;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}
.blog-toc--side { display: flex; flex-direction: column; gap: 1rem; }
.blog-toc__list { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.blog-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--blog-ink-60);
  font-size: 1rem;
  line-height: 1.6rem;
  letter-spacing: 0.02rem;
  text-decoration: none;
  transition: color 0.3s var(--blog-ease);
}
.blog-toc__link:hover { color: var(--blog-ink); }
.blog-toc__dot { flex-shrink: 0; width: 0.5rem; height: 0.5rem; margin-top: 0.55rem; border-radius: 50%; background-color: transparent; transition: background-color 0.3s var(--blog-ease); }
.blog-toc__link.is-active { color: var(--blog-ink); font-weight: 500; }
.blog-toc__link.is-active .blog-toc__dot { background-color: var(--blog-blue); }
.blog-toc--inline { display: none; }
.blog-share { display: flex; flex-direction: column; gap: 1rem; }
.blog-share--side { padding-top: 2rem; border-top: 1px solid var(--blog-line); }
.blog-share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.blog-share--inline { display: none; }

/* ——— artykuł: treść (Markdown + bloki MDX) ——— */
.blog-prose { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-prose > p,
.blog-prose li {
  font-size: 1.125rem;
  line-height: 1.8rem;
  letter-spacing: 0.02em;
}
.blog-prose a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-prose a:hover { color: var(--blog-blue); }
.blog-prose strong { font-weight: 500; }
.blog-prose h2 {
  margin: 0;
  padding-top: 2rem;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--blog-nav) + 2rem);
}
.blog-prose h3 {
  margin: 0;
  padding-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: 0;
  scroll-margin-top: calc(var(--blog-nav) + 2rem);
}
.blog-prose > ul,
.blog-prose > ol { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.blog-prose > ul > li { position: relative; padding-left: 1.5rem; }
.blog-prose > ul > li::before { content: ''; position: absolute; top: 0.7875rem; left: 0; width: 0.375rem; height: 0.375rem; border-radius: 50%; background-color: currentColor; }
.blog-prose > ol { counter-reset: blog-ol; }
.blog-prose > ol > li { position: relative; padding-left: 1.5rem; counter-increment: blog-ol; }
.blog-prose > ol > li::before { content: counter(blog-ol) '.'; position: absolute; left: 0; font-weight: 500; }
/* cytat wyróżniony */
.blog-quote { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1.5rem 0 1rem; text-align: left; }
.blog-quote__mark { color: var(--blog-blue); font-size: 3.5rem; font-weight: 500; line-height: 2.5rem; height: 2.5rem; }
.blog-quote__text { max-width: 37.5rem; margin: 0; padding: 0; border: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.875rem; letter-spacing: 0; }
.blog-quote__text p { margin: 0; font: inherit; }
.blog-quote__author { color: var(--blog-ink-60); font-size: 0.875rem; line-height: 1.4rem; letter-spacing: 0.02rem; }
/* obraz z podpisem */
.blog-figure { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1rem 0; }
.blog-figure .blog-frame__img { aspect-ratio: 686 / 457; }
/* ramka „W skrócie” */
.blog-callout { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border-radius: 0.5rem; background-color: var(--blog-pill); }
.blog-callout__title { color: var(--blog-blue); font-size: 0.875rem; font-weight: 500; line-height: 1.4rem; letter-spacing: 0.02rem; text-transform: uppercase; }
.blog-callout__body ul,
.blog-callout__body ol { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.blog-callout__body li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.6rem; letter-spacing: 0.02rem; }
.blog-callout__body li::before { content: ''; position: absolute; top: 0.55rem; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--blog-blue); }
.blog-callout__body p { margin: 0; font-size: 1rem; line-height: 1.6rem; letter-spacing: 0.02rem; }
/* tabela (deklaracja / dowód) */
.blog-table-wrap { padding: 0.5rem 0; }
.blog-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.6rem; letter-spacing: 0.02rem; }
.blog-table th {
  padding: 0 1.5rem 0.75rem 0;
  border-bottom: 1px solid var(--blog-ink);
  color: var(--blog-ink-60);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4rem;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}
.blog-table th:last-child { color: var(--blog-blue); padding-right: 0; }
.blog-table td { padding: 1rem 1.5rem 1rem 0; border-bottom: 1px solid var(--blog-line); vertical-align: top; }
.blog-table td:first-child { width: 15rem; color: var(--blog-ink-60); }
.blog-table td:last-child { padding-right: 0; font-weight: 500; }

/* ——— artykuł: autorka ——— */
.blog-author {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--blog-line);
}
.blog-author__photo { flex-shrink: 0; width: 7.5rem; height: 10rem; border-radius: 3.75rem; object-fit: cover; object-position: 50% 15%; background-color: #e2e1df; }
.blog-author__text { display: flex; flex: 1; flex-direction: column; gap: 0.75rem; }
.blog-author__role { color: var(--blog-blue); font-size: 0.875rem; font-weight: 500; line-height: 1.4rem; letter-spacing: 0.02rem; text-transform: uppercase; }
.blog-author__name { font-size: 1.5rem; font-weight: 500; line-height: 1.875rem; }
.blog-author__bio { color: var(--blog-ink-60); font-size: 1rem; line-height: 1.6rem; letter-spacing: 0.02rem; }
.blog-author .blog-link { align-self: flex-start; padding-top: 0.25rem; }

/* ——— artykuł: przeczytaj również ——— */
.blog-related.section { padding-top: 9rem; padding-bottom: 9rem; }
.blog-related .col { gap: 3.5rem; }
.blog-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.blog-related__all { flex-shrink: 0; padding-bottom: 0.25rem; white-space: nowrap; }
.blog-related__heading { font-size: clamp(2.72rem, 1.6rem + 4.3vw, 5rem); }
.blog-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.blog-related__all-mobile { display: none; }

/* ——— ≤ 991 px (tablet) ——— */
@media screen and (max-width: 991px) {
  .blog-head.section { padding-top: calc(var(--blog-nav) + 6rem); padding-bottom: 4rem; }
  .blog-head__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .blog-head__text { gap: 1.5rem; }
  .blog-head__lead { flex-basis: auto; max-width: 36rem; }
  .blog-featured.section { padding-bottom: 4rem; }
  .blog-card--featured.demo-card { gap: 2rem; }
  .blog-card--featured .blog-card__body { padding: 0.5rem 1rem 0.5rem 0; }
  .blog-card--featured .blog-card__title { font-size: 1.75rem; line-height: 2rem; }
  .blog-filter { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-bottom: 2rem; }
  .blog-grid.filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-list.section { padding-bottom: 7rem; }
  .blog-cta.section { padding-top: 6rem; }
  .blog-cta__inner { flex-direction: column; align-items: flex-start; gap: 2rem; padding-bottom: 5rem; }
  .blog-cta__right { flex-basis: auto; max-width: 30rem; }

  .blog-post-head.section { padding-top: calc(var(--blog-nav) + 4rem); padding-bottom: 3rem; }
  .blog-post-head__bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .blog-post-cover.section { padding-bottom: 3rem; }
  .blog-post-layout { display: block; }
  .blog-post-side { display: none; }
  .blog-post-main { max-width: 44rem; margin: 0 auto; }
  .blog-toc--inline { display: block; margin-bottom: 1.5rem; border: 1px solid var(--blog-line); border-radius: 0.5rem; }
  .blog-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
  }
  .blog-toc__summary::-webkit-details-marker { display: none; }
  .blog-toc__summary-main { display: flex; align-items: center; gap: 0.75rem; }
  .blog-toc__summary-label { font-size: 1rem; font-weight: 500; line-height: 1.6rem; letter-spacing: 0.02rem; }
  .blog-toc__count { color: var(--blog-ink-60); font-size: 0.875rem; line-height: 1.4rem; letter-spacing: 0.02rem; }
  .blog-toc__chevron { flex-shrink: 0; transition: transform 0.3s var(--blog-ease); }
  .blog-toc--inline[open] .blog-toc__chevron { transform: rotate(180deg); }
  .blog-toc--inline .blog-toc__list { padding: 0.25rem 1rem 1rem; }
  .blog-share--inline { display: flex; margin-top: 3rem; }
  .blog-author { margin-top: 2.5rem; padding-top: 2rem; }
  .blog-related.section { padding-top: 6rem; padding-bottom: 6rem; }
  .blog-related .col { gap: 2.5rem; }
  .blog-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-related__grid > :nth-child(3) { display: none; }
}

/* ——— ≤ 767 px (telefon): marginesy 16 px jak w Paper (390), jedna kolumna ——— */
@media screen and (max-width: 767px) {
  :root { --blog-inset: 0rem; --blog-nav: 5rem; }
  .blog-section .container { max-width: calc(100% - 2rem); }
  .blog-section .row { margin-left: 0; margin-right: 0; }
  .blog-section .col { padding-left: 0; padding-right: 0; }
  .blog-eyebrow { font-size: 1.125rem; line-height: 1.75rem; }
  .blog-display { line-height: 1; }
  .blog-lead { font-size: 1.125rem; line-height: 1.625rem; }

  .blog-head.section { padding-top: calc(var(--blog-nav) + 3.5rem); padding-bottom: 2.5rem; }
  .blog-head__text { gap: 1rem; }
  .blog-featured.section { padding-bottom: 3rem; }
  .blog-card--featured.demo-card { display: flex; gap: 1.25rem; }
  .blog-card--featured .blog-card__visual { aspect-ratio: 340 / 227; }
  .blog-card--featured .blog-card__body { padding: 0 0.5rem 0.5rem; }
  .blog-card--featured .blog-card__text { gap: 0.75rem; }
  .blog-card--featured .blog-card__title { font-size: 1.5rem; line-height: 1.875rem; letter-spacing: 0; }
  .blog-card--featured .blog-card__foot { flex-wrap: wrap; }
  .blog-filter { align-items: stretch; padding-bottom: 2rem; }
  /* pigułki przewijane poziomo do krawędzi ekranu */
  .blog-filter__buttons.filter-buttons {
    flex-wrap: nowrap;
    margin: 0 -1rem;
    padding: 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .blog-filter__buttons::-webkit-scrollbar { display: none; }
  .blog-filter__buttons .filter-btn { flex-shrink: 0; white-space: nowrap; }
  .blog-grid.filter-list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .blog-more { padding-top: 2.5rem; }
  .blog-list.section { padding-bottom: 5rem; }
  .blog-cta.section { padding-top: 5rem; }
  .blog-cta__inner { padding-bottom: 4rem; }
  .blog-cta__left { gap: 1rem; }
  .blog-cta__buttons { flex-wrap: wrap; }

  .blog-post-head.section { padding-top: calc(var(--blog-nav) + 2.5rem); padding-bottom: 2rem; }
  .blog-post-head .col { gap: 1.5rem; }
  .blog-post-head__title { gap: 1rem; }
  .blog-post-cover.section { padding-bottom: 2.5rem; }
  .blog-cover .blog-frame__img { aspect-ratio: 340 / 191; }
  .blog-prose { gap: 1.25rem; }
  .blog-prose > p,
  .blog-prose li { font-size: 1rem; line-height: 1.6rem; letter-spacing: 0.02rem; }
  .blog-prose > ul > li::before { top: 0.6125rem; }
  .blog-prose h2 { padding-top: 1.25rem; font-size: 1.5rem; line-height: 1.875rem; letter-spacing: 0; }
  .blog-prose h3 { padding-top: 0.25rem; font-size: 1.125rem; line-height: 1.625rem; }
  .blog-quote { padding: 1rem 0 0.5rem; }
  .blog-figure .blog-frame__img { aspect-ratio: 340 / 227; }
  .blog-callout { gap: 1rem; padding: 1.5rem 1.25rem; }
  /* tabela: wiersze jeden pod drugim, etykieta kolumny przed deklaracją */
  .blog-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .blog-table,
  .blog-table tbody,
  .blog-table tr,
  .blog-table td { display: block; width: 100%; }
  .blog-table tr { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 0; border-bottom: 1px solid var(--blog-line); }
  .blog-table td,
  .blog-table td:first-child { width: auto; padding: 0; border: 0; }
  .blog-table td:first-child { font-size: 0.875rem; line-height: 1.4rem; }
  .blog-table td:first-child::before { content: attr(data-label) ': '; }
  .blog-share--inline { margin-top: 2.5rem; }
  .blog-author { flex-direction: column; gap: 1.25rem; margin-top: 2.5rem; padding-top: 2rem; }
  .blog-author__text { gap: 0.625rem; }
  .blog-related.section { padding-top: 5rem; padding-bottom: 5rem; }
  .blog-related .col { gap: 2rem; }
  .blog-related__all { display: none; }
  .blog-related__all-mobile { display: inline-flex; margin-top: -0.5rem; }
  .blog-related__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}