/* =========================================================
   BLOG – KATEGORIE (chipsy, 2 poziomy, responsywne)
   ========================================================= */
.blog-cats{
  --chip-gap:10px; --chip-r:999px; --chip-h:36px; --chip-pad-x:14px;
  --chip-shadow:0 6px 18px rgba(0,0,0,.06);
  --chip-shadow-hover:0 10px 22px rgba(0,0,0,.10);
  --ring:color-mix(in srgb, var(--primary) 20%, transparent);
  margin:0 0 22px;
}
.blog-cats__list{
  display:flex; align-items:flex-start; flex-wrap:wrap;
  gap:var(--chip-gap) var(--chip-gap);
  padding:0; margin:0; list-style:none; overflow:visible;
}

/* ===== KATEGORIA (poziom 1) ===== */
.blog-cats__item{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
}
.blog-cats__link{
  display:inline-flex; align-items:center; gap:6px;
  min-height:var(--chip-h); padding:8px var(--chip-pad-x);
  border-radius:var(--chip-r); border:1px solid var(--color-border);
  background:#fff; color:inherit; font-weight:600; text-decoration:none;
  white-space:nowrap; min-width:0; overflow-wrap:anywhere;
  box-shadow:var(--chip-shadow);
  transition:transform .12s, box-shadow .18s, border-color .18s, background-color .18s;
}
.blog-cats__link:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--primary) 35%, var(--color-border));
  box-shadow:var(--chip-shadow-hover);
}
.blog-cats__link.is-active{
  background:color-mix(in srgb, var(--primary) 26%, #fff);
  border-color:color-mix(in srgb, var(--primary) 60%, var(--color-border));
  box-shadow:0 0 0 5px var(--ring), 0 12px 28px rgba(160,209,46,.16);
  position:relative; z-index:1;
}

/* Strzałka dla elementów mających sublistę */
.blog-cats__item:has(.blog-cats__sublist) > .blog-cats__link::after{
  content:"▾"; font-size:12px; line-height:1; transform:translateY(1px); opacity:.55;
}
.blog-cats__item:hover > .blog-cats__link::after{ opacity:1 }

/* ===== PODKATEGORIE (poziom 2) ===== */
.blog-cats__sublist{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0 0 0 8px; padding:0; position:relative;
}
.blog-cats__sublist::before{
  content:""; position:absolute; left:-6px; top:10px; bottom:10px; width:1px;
  background:color-mix(in srgb, var(--primary) 35%, transparent); border-radius:2px;
}

/* Subkategoria – obsługa dwóch wariantów HTML: */
.blog-cats__sublink,
.blog-cats__sublist .blog-cats__link{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid color-mix(in srgb, var(--primary) 45%, var(--color-border));
  box-shadow:none; font-weight:600; min-height:34px; padding:7px 12px;
  border-radius:var(--chip-r); text-decoration:none; white-space:nowrap;
  transition:background .15s, box-shadow .15s, border-color .18s;
}
.blog-cats__sublink:hover,
.blog-cats__sublist .blog-cats__link:hover{
  background:color-mix(in srgb, var(--primary) 12%, #fff);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.blog-cats__sublink.is-active,
.blog-cats__sublist .blog-cats__link.is-active{
  background:color-mix(in srgb, var(--primary) 18%, #fff);
  border-color:color-mix(in srgb, var(--primary) 75%, var(--color-border));
  box-shadow:0 0 0 4px var(--ring);
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width:820px){
  .blog-cats__sublist{ flex-basis:100%; margin-left:0; }
  .blog-cats__sublist::before{ display:none; }
}
@media (max-width:420px){
  .blog-cats__list{ gap:8px 8px; }
  .blog-cats__link{ padding:7px 12px; min-height:34px; }
}

/* ===== BLOG — MASONRY (CSS columns, bez JS) ===== */
/* BLOG LISTING — masonry (CSS-only, kolumny) */
.blog-masonry{
  column-gap: 18px;
  column-fill: balance;
  /* domyślnie 1 kolumna (mobile-first) */
  column-count: 1;
}

/* nigdy nie łam karty między kolumnami */
.blog-masonry > .grid-item{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 18px;         /* pionowa przerwa między kaflami */
}

/* viewportowe progi (opcjonalne) */
@media (min-width: 700px){
  .blog-masonry{ column-count: 2; }
}
@media (min-width: 1024px){
  .blog-masonry{ column-count: 3; }
}

/* --- DOSTOSOWANIE DO LICZBY ELEMENTÓW (CSS :has) ---
   Gdy kart jest mniej niż przewidziane przez media queries,
   automatycznie redukujemy liczbę kolumn, aby nie zostawały puste. */

/* co najmniej 2 elementy → 2 kolumny (na szerokich widokach) */
@media (min-width: 1024px){
  .blog-masonry{ column-count: 1; }                   /* fallback */
  .blog-masonry:has(> :nth-child(2)){ column-count: 2; }
  .blog-masonry:has(> :nth-child(3)){ column-count: 3; }
}

/* jeśli chcesz 2 kolumny już od 700px, ale tylko gdy są ≥2 karty */
@media (min-width: 700px) and (max-width: 1023.98px){
  .blog-masonry{ column-count: 1; }
  .blog-masonry:has(> :nth-child(2)){ column-count: 2; }
}


/* Karta wpisu (Twoja klasa na elemencie-kaflu) */
.grid-item{
  background:#fff;
  border:1px solid var(--color-border,#e5e7eb);
  border-radius:16px;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
  overflow:hidden;
  display:block;
}

/* ładne łamanie w kolumnach gdyby ktoś zostawił stary layout jako fallback */
@supports (column-count:1){
  .blog-masonry{ column-gap:18px }
  .blog-masonry .post-card{ break-inside: avoid }
}

/* responsywność (opcjonalnie, jeśli chcesz ciaśniej na wąskich) */
@media (max-width: 480px){
  .blog-masonry{ grid-template-columns: 1fr }
}

/* ===== BLOG — CARD ===== */
.blog-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card__link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; height:100% }
.blog-card__media{
  position:relative; aspect-ratio: 16/9; background:#f3f4f6; overflow:hidden;
}
.blog-card__media img{
  width:100%; height:100%; object-fit:cover; transform: scale(1.01);
  transition: transform .28s ease;
}
.blog-card__body{
  display:flex; flex-direction:column; gap:8px;
  padding: 12px 14px 14px;
}
.blog-card__title{
  margin:0; font-size: clamp(17px, 1.8vw, 19px); line-height:1.2; font-weight:700;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}
.blog-card__excerpt{
  margin:0; color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}


.blog-cta{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-weight:800; padding:.45rem .7rem; border-radius:12px;
  background:#fff; color:#111; border:1px solid var(--color-border);
  transition: transform .1s ease;
}
.blog-cta::after{ content:"›"; line-height:1; transform: translateX(0); transition: transform .15s }
.blog-card:hover .blog-cta::after{ transform: translateX(2px) }

/* Hover/focus — affordance klikalności */
.blog-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.blog-card:hover .blog-card__media img{ transform: scale(1.04) }
.blog-card__link:focus-visible{
  outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent) inset;
}

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


/* =========================================
   BLOG • SINGLE POST: header, galeria, related
   ========================================= */

/* --- Header / meta --- */
.post {
  --ring: color-mix(in srgb, var(--primary) 22%, transparent);
  --chip-r: 999px;
  --muted: var(--color-muted);
}
.post-header {
  margin: 0 0 18px;
}
.post-title {
  margin: 0 0 40px;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* =========================================
   POST META — data • autor • czas czytania
   ========================================= */
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;          /* klucz: wspólna oś pionowa */
  gap:8px 16px;                /* rzędowy / kolumnowy */
  margin:8px 0 16px;
  font-size:14px;
  line-height:1.25;            /* spójny rytm */
  color:var(--color-muted,#606975);
}

/* każdy element meta = kapsuła z ikoną i tekstem */
.post-meta time,
.post-meta .meta,
.post-meta .reading-time{
  display:inline-flex;
  align-items:center;          /* centruj ikonę i tekst w pionie */
  gap:6px;
  white-space:nowrap;          /* nie łam jednego „kafelka” */
  min-height:20px;             /* stabilizuje wysokość rzędu */
}

/* ujednolicenie ikon (SVG) */
.post-meta .i{
  inline-size:16px;
  block-size:16px;
  flex:0 0 16px;               /* stała szerokość */
  display:block;               /* usuwa baseline SVG */
  opacity:.7;
}

/* separator (kropka) jako punkt, nie tekst */
.post-meta .dot{
  width:4px; height:4px;
  border-radius:999px;
  background: currentColor;
  opacity:.45;
  display:inline-block;
  /* wyrównanie do środka linii */
  transform: translateY(1px);
}

/* wzmocnienie autora */
.post-meta strong{
  color:var(--ink,#1b1f26);
  font-weight:600;
}

/* drobny balans na bardzo wąskich ekranach */
@media (max-width:480px){
  .post-meta{ gap:6px 12px }
}


/* --- chip „kategoria” (używa Twojej palety) --- */
.post-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px; border-radius: var(--chip-r);
  background:#fff; border:1px solid var(--color-border);
  font-weight:600; text-decoration:none; color:inherit;
  transition: border-color .18s, transform .1s, box-shadow .18s;
}
.post-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 45%, var(--color-border)); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* --- Hero (jeśli używasz) --- */
.post-hero {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm); margin: 8px 0 18px;
}
.post-hero img { display:block; width:100%; height:auto; object-fit:cover; }

/* --- Treść wpisu --- */
.post-content { max-width: 78ch; margin: 0 auto; }
.post-content img { border-radius: 12px; }
.post-content a { text-decoration: underline; text-underline-offset: 2px; }


/* Spis treści (TOC) – sticky na desktopie, blokowo na mobile */
/* Układ artykułu z TOC na górze (mobile-first) */
.post-layout{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "toc"
    "content";
  gap:18px;
}
.post-content{ grid-area: content; }
.toc{
  grid-area: toc;
  background: var(--color-bg);
  border:1px solid var(--color-border, #e5e7eb);
  border-radius:16px;
  padding:14px 16px;
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
}
.toc h2{ margin:0 0 8px; font-size:1rem; }

/* Desktop: TOC jako sticky aside po lewej/prawej (tu po lewej – zmień kolejność areas, jeśli chcesz po prawej) */
@media (min-width: 992px){
  .post-layout{
    grid-template-columns: minmax(240px, 300px) 1fr;
    grid-template-areas: "toc content";
    align-items:start;
  }
  .toc{
    position: sticky;
    top: 90px; /* dopasuj do wysokości sticky nagłówka */
    max-height: calc(100vh - 120px);
    overflow:auto;
  }
}
.toc h2 { margin:0 0 8px; font-size: .95rem; color: var(--color-muted); text-transform: uppercase; }
.toc a{
  display:block; padding:6px 8px; border-radius:10px; text-decoration:none; color:inherit;
}
.toc a:hover { color: var(--ink); }
.toc .toc__list { list-style: none; padding: 0; margin: 8px 0 0; }
.toc a[data-level="3"]{ padding-left:18px; opacity:.9; }
.toc a.active { background: color-mix(in srgb, var(--primary) 18%, #fff); }
.post-content :is(h2,h3) { scroll-margin-top: 90px; } /* parawan na sticky header */
.toc-anchor{
  margin-left:.4em; width:1em; height:1em; opacity:.35; display:inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.07 0l1.83-1.83a5 5 0 1 0-7.07-7.07L10 5"/><path d="M14 11a5 5 0 0 0-7.07 0L5.1 12.83a5 5 0 1 0 7.07 7.07L14 19"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="black" stroke-width="2" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.07 0l1.83-1.83a5 5 0 1 0-7.07-7.07L10 5"/><path d="M14 11a5 5 0 0 0-7.07 0L5.1 12.83a5 5 0 1 0 7.07 7.07L14 19"/></svg>') center/contain no-repeat;
  vertical-align:text-bottom;
}
.post-content :is(h2,h3){ scroll-margin-top: 90px; } /* zgrywa się z top w .toc */


/* --- Powiązane wpisy --- */
.related {
  margin: 28px 0 0;
}
.related__head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}
.related__title { margin:0; font-size: 1.2rem; }
.related-grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .related-grid { grid-template-columns: 1fr; } }

.post-card {
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--color-border);
  border-radius:16px; overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .22s, border-color .2s;
}
.post-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 22%, var(--color-border));
}
.post-card__thumb{
  aspect-ratio: 16/9; background:#f6f7f8; overflow:hidden;
}
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card__body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.post-card__title{ margin:0; font-size:1.02rem; line-height:1.25; }
.post-card__meta{ color:var(--color-muted); font-size:.9rem; }
.post-card__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; text-decoration:none;
}

/* --- Powiązane kategorie — chipsy --- */
.related-cats { margin: 22px 0 0; }
.related-cats__list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.related-cats__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; background:#fff;
  border:1px solid color-mix(in srgb, var(--primary) 45%, var(--color-border));
  font-weight:600; text-decoration:none; color:inherit;
  transition: border-color .18s, box-shadow .18s, transform .1s;
}
.related-cats__link:hover{
  border-color: color-mix(in srgb, var(--primary) 65%, var(--color-border));
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Focus ring dla dostępności */
.post a:focus-visible,
.related a:focus-visible,
.gallery-item a:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 12px;
}