/* Archiwum bloga NETIM. Template: templates/blog.php */

.netim-blog-archive {
  --bl-navy: #050a30;
  --bl-navy-2: #081046;
  --bl-paper: #fafbff;
  --bl-soft: #f1f4fb;
  --bl-mint: #80dfa0;
  --bl-mint-deep: #3dbd6e;
  --bl-blue: #1e5e9f;
  --bl-mute: #5b6385;
  --bl-line: #d8defa;
  --bl-ease: cubic-bezier(.23, 1, .32, 1);

  margin: 0;
  background: var(--bl-soft);
  color: var(--bl-navy);
  font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.netim-blog-archive img,
.netim-blog-archive svg { display: block; max-width: 100%; }

.netim-blog .shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 32px;
}

.netim-blog .bl-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 72px;
  background:
    radial-gradient(circle at 88% 0%, rgba(38, 167, 240, .16), transparent 38%),
    var(--bl-navy);
  color: var(--bl-paper);
}

.netim-blog .bl-hero h1 {
  margin: 0;
  /* skala i krój jak .sec-h na reszcie serwisu (service.css / pozycjonowanie-v2.css) */
  font: 800 clamp(36px, 2.3vw + 1.7vh, 64px)/1.06 'Montserrat', ui-sans-serif, system-ui, sans-serif; /* skala hero jak strony uslugowe (ppc.css .hero h1) */
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--bl-paper);
}

.netim-blog .bl-hero h1 em { font-style: italic; color: var(--bl-mint); }

.netim-blog .bl-hero p {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(250, 251, 255, .82);
}

/* Eyebrow w hero kategorii (category.php) */
.netim-blog .bl-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 251, 255, .65);
}

.netim-blog .bl-eyebrow a { color: var(--bl-mint); text-decoration: none; }
.netim-blog .bl-eyebrow a:hover, .netim-blog .bl-eyebrow a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* PASEK KATEGORII (pills) - linki do realnych archiwow kategorii */
.netim-blog .bl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 36px 0 0;
}

.netim-blog .bl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  background: var(--bl-paper);
  color: var(--bl-navy);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .25s var(--bl-ease), border-color .25s var(--bl-ease), box-shadow .25s var(--bl-ease);
}

.netim-blog .bl-pill span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bl-soft);
  color: var(--bl-mute);
  font-size: 10.5px;
  font-weight: 800;
}

.netim-blog .bl-pill:hover,
.netim-blog .bl-pill:focus-visible { border-color: var(--bl-mint); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(5, 10, 48, .35); }
.netim-blog .bl-pill:focus-visible { outline: 2px solid var(--bl-mint-deep); outline-offset: 2px; }
.netim-blog .bl-pill:active { transform: translateY(0); }

.netim-blog .bl-pill.is-on { background: var(--bl-navy); border-color: var(--bl-navy); color: var(--bl-paper); }
.netim-blog .bl-pill.is-on span { background: rgba(128, 223, 160, .2); color: var(--bl-mint); }

/* WYROZNIONY WPIS - duzy kafel na pelna szerokosc nad siatka */
.netim-blog .bl-feat {
  display: block;
  /* 29.08: pelna szerokosc listingu; upscale banera 850->~950 to 12%, niezauwazalne */
  overflow: hidden;
  margin: 26px 0 0;
  border: 1px solid var(--bl-line);
  border-radius: 20px;
  background: var(--bl-paper);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 rgba(5, 10, 48, .04), 0 28px 56px -40px rgba(5, 10, 48, .35);
  transition: transform .3s var(--bl-ease), box-shadow .3s var(--bl-ease), border-color .3s var(--bl-ease);
}

@media (min-width: 880px) { .netim-blog .bl-feat-body { grid-template-columns: 1.05fr 1fr; gap: 18px 56px; } }

.netim-blog .bl-feat:hover,
.netim-blog .bl-feat:focus-visible {
  transform: translateY(-5px);
  border-color: var(--bl-mint);
  box-shadow: 0 1px 0 rgba(5, 10, 48, .04), 0 44px 80px -44px rgba(5, 10, 48, .46);
}

.netim-blog .bl-feat:focus-visible { outline: 2px solid var(--bl-mint-deep); outline-offset: 3px; }

.netim-blog .bl-feat-media {
  position: relative;
  display: block;
  overflow: hidden;
}

.netim-blog .bl-feat-syg { display: none; }

.netim-blog .bl-feat-media img {
  position: relative;
  width: 100%;
  height: auto;
  transition: transform .5s var(--bl-ease);
}

.netim-blog .bl-feat:hover .bl-feat-media img { transform: scale(1.03); }

.netim-blog .bl-feat-ph { display: grid; place-items: center; width: 100%; min-height: 150px; }
.netim-blog .bl-feat-ph svg { width: 120px; height: 100px; color: var(--bl-mint); opacity: .35; }

.netim-blog .bl-feat-body {
  display: grid;
  gap: 12px;
  align-items: start;
  padding: 20px 26px 22px;
}
.netim-blog .bl-feat-l { display: flex; flex-direction: column; gap: 14px; }
.netim-blog .bl-feat-r { display: flex; flex-direction: column; gap: 13px; }

.netim-blog .bl-feat-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.netim-blog .bl-feat-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--bl-mint);
  color: var(--bl-navy);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.netim-blog .bl-feat-flag svg { width: 12px; height: 12px; }

.netim-blog .bl-feat h2 {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--bl-navy);
}

.netim-blog .bl-feat p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--bl-mute);
}

.netim-blog .bl-feat-meta {
  font-size: 12.5px;
  font-style: italic;
  font-weight: 600;
  color: var(--bl-mute);
}

.netim-blog .bl-feat-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bl-navy);
}

.netim-blog .bl-feat-go i { font-style: normal; color: var(--bl-mint-deep); transition: transform .25s var(--bl-ease); }
.netim-blog .bl-feat:hover .bl-feat-go i { transform: translateX(4px); }

.netim-blog .bl-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  margin: 56px 0 0;
}

/* Gdy nad siatka jest pasek pills / wyrozniony wpis, siatka nie potrzebuje pelnego 56px */
.netim-blog .bl-cats ~ .bl-grid { margin-top: 30px; }
.netim-blog .bl-feat + .bl-grid { margin-top: 26px; }

@media (min-width: 620px) { .netim-blog .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .netim-blog .bl-grid { grid-template-columns: repeat(3, 1fr); } }

.netim-blog .bl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bl-line);
  border-radius: 20px;
  background: var(--bl-paper);
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--bl-ease), box-shadow .3s var(--bl-ease), border-color .3s var(--bl-ease);
}

.netim-blog .bl-card:hover {
  transform: translateY(-5px);
  border-color: var(--bl-mint);
  box-shadow: 0 30px 56px -32px rgba(5, 10, 48, .4);
}

.netim-blog .bl-thumb {
  position: relative;
  /* bannery bloga to 600x222 (~2.7:1) - kadr dopasowany, zeby twarze i podpisy nie byly ucinane po bokach */
  aspect-ratio: 600 / 222;
  overflow: hidden;
  background: linear-gradient(150deg, var(--bl-navy-2), var(--bl-navy));
}

.netim-blog .bl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform .5s var(--bl-ease);
}

.netim-blog .bl-card:hover .bl-thumb img { transform: scale(1.05); }

.netim-blog .bl-thumb-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.netim-blog .bl-thumb-ph svg { width: 96px; height: 80px; color: var(--bl-mint); opacity: .35; }

/* Plakietka kategorii: w tresci karty (nie na zdjeciu - banery maja wlasne tytuly, plakietka je zaslaniala) */
.netim-blog .bl-lab {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(128, 223, 160, .14);
  border: 1px solid rgba(61, 189, 110, .3);
  color: var(--bl-mint-deep);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.netim-blog .bl-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
  padding: 18px 20px 18px;
}
.netim-blog .bl-body .bl-meta-rich { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 'Montserrat', sans-serif; color: #7c84a5; white-space: nowrap; flex-wrap: nowrap; }
.netim-blog .bl-meta-rich i { font-style: normal; color: #c6cce4; }
.netim-blog .bl-meta-rich .bl-lab { align-self: center; }

.netim-blog .bl-body h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.012em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.netim-blog .bl-meta {
  margin-top: auto;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--bl-mute);
}

.netim-blog .bl-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 56px 0 0;
}

.netim-blog .bl-pager .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  background: var(--bl-paper);
  color: var(--bl-navy);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s var(--bl-ease), border-color .2s var(--bl-ease), color .2s var(--bl-ease);
}

.netim-blog .bl-pager .page-numbers:hover { border-color: var(--bl-mint); }
.netim-blog .bl-pager .page-numbers.current { background: var(--bl-navy); border-color: var(--bl-navy); color: var(--bl-paper); }
.netim-blog .bl-pager .page-numbers.dots { border: 0; background: none; }

.netim-blog .bl-empty { padding: 60px 0; text-align: center; color: var(--bl-mute); }

.bl-footer {
  margin-top: 80px;
  padding: 32px 0;
  background: var(--bl-navy);
  color: rgba(250, 251, 255, .7);
  font-family: 'Montserrat', sans-serif;
}

.bl-footer .shell {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
}

.bl-footer a { color: var(--bl-mint); text-decoration: none; font-weight: 700; }

@media (max-width: 600px) {
  .netim-blog .shell, .bl-footer .shell { padding: 0 20px; }
  .netim-blog .bl-hero { padding: 70px 0 56px; }
  .netim-blog .bl-grid { margin-top: 40px; }
  .netim-blog .bl-cats ~ .bl-grid { margin-top: 26px; }
  /* pills: jeden przewijany rzad zamiast wysokiego bloku zawijanych pigulek */
  .netim-blog .bl-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 28px;
    margin-right: -20px;
    padding-right: 20px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .netim-blog .bl-cats::-webkit-scrollbar { display: none; }
  .netim-blog .bl-pill { flex: none; }
  .netim-blog .bl-feat { margin-top: 22px; }
}

/* ===== filtr po autorze (druga linia pill, ?autor=) ===== */
.netim-blog .bl-authors{margin-top:2px}
.netim-blog .bl-authors-lab{font:700 11.5px/1 'Montserrat',sans-serif;color:#8b93b4;letter-spacing:.1em;text-transform:uppercase;align-self:center;margin-right:4px}
.netim-blog .bl-authors .bl-pill{font-size:12px;padding:8px 12px}

/* filtr autorow: avatary w pigulkach */
.netim-blog .bl-authors{margin-top:6px;align-items:center}
.netim-blog .bl-author{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--bl-line,#e6eaf8);border-radius:999px;padding:5px 13px 5px 5px;text-decoration:none;transition:border-color .2s,transform .18s cubic-bezier(.23,1,.32,1),box-shadow .2s}
.netim-blog .bl-author img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center top}
.netim-blog .bl-author b{font:700 12.5px/1 'Montserrat';color:#050a30}
.netim-blog .bl-author span{font:700 10.5px/1 'Montserrat';color:#8b93b4;background:#f1f4fb;border-radius:999px;padding:4px 7px}
.netim-blog .bl-author:hover{border-color:#80dfa0;transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(5,10,48,.3)}
.netim-blog .bl-author:active{transform:scale(.97)}
.netim-blog .bl-author.is-on{background:#050a30;border-color:#050a30}
.netim-blog .bl-author.is-on b{color:#fff}
.netim-blog .bl-author.is-on span{background:rgba(255,255,255,.14);color:#80dfa0}
.netim-blog .bl-author:focus-visible{outline:2px solid #80dfa0;outline-offset:2px}

/* meta karty: autor+avatar+data+czas czytania */
.netim-blog .bl-meta-rich{display:flex;align-items:center;gap:7px;font:600 11.5px/1 'Montserrat';color:#8b93b4;margin-top:10px}
.netim-blog .bl-meta-rich img{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:center top}
.netim-blog .bl-meta-rich b{font-weight:700;color:#3a4058}
.netim-blog .bl-meta-rich i{font-style:normal;opacity:.6}

/* filtry: lekka separacja bez pudelka - odstep + linia pod calym blokiem */
.netim-blog .bl-filterbar{margin:30px 0 36px;padding-bottom:24px;border-bottom:1px solid #e9edf8}
.netim-blog .bl-filterbar .bl-authors{margin-top:14px}
.netim-blog .bl-cats ~ .bl-grid{margin-top:0}

/* meta karty oddzielona linia od tytulu */
.netim-blog .bl-meta-rich{border-top:1px solid #eef1fa;padding-top:12px;margin-top:12px}

/* oddech przed footerem */
.netim-blog{padding-bottom:clamp(56px,7vw,96px)}

/* ===== F6: sidebar filtrow (kategorie + autorzy), siatka po prawej ===== */
.netim-blog .bl-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;margin-top:30px}
.netim-blog .bl-side{align-self:stretch}
.netim-blog .bl-side-in{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.netim-blog .bl-side-in::-webkit-scrollbar{display:none}
.netim-blog .bl-side-lab{display:block;font:800 10.5px/1 'Montserrat';letter-spacing:.14em;text-transform:uppercase;color:#8b93b4;margin-bottom:10px}
.netim-blog .bl-sc{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 13px/1.3 'Montserrat';color:#5b6385;padding:8px 12px;border-radius:9px;text-decoration:none;transition:background .18s,color .18s}
.netim-blog .bl-sc em{font:600 11px/1 'Montserrat';font-style:normal;color:#b3bcd8}
.netim-blog .bl-sc:hover{background:#f1f4fb;color:#050a30}
.netim-blog .bl-sc.on{background:#e9f8ef;color:#050a30;font-weight:800}
.netim-blog .bl-sc.on em{color:#0d7a44}
.netim-blog .bl-sa{display:flex;align-items:center;gap:9px;font:600 12.5px/1.3 'Montserrat';color:#5b6385;padding:7px 12px;border-radius:9px;text-decoration:none;transition:background .18s,color .18s}
.netim-blog .bl-sa img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center top;flex:none}
.netim-blog .bl-sa span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.netim-blog .bl-sa em{font:600 11px/1 'Montserrat';font-style:normal;color:#b3bcd8}
.netim-blog .bl-sa:hover{background:#f1f4fb;color:#050a30}
.netim-blog .bl-sa.on{background:#e9f8ef;color:#050a30;font-weight:800}
.netim-blog .bl-sa.on em{color:#0d7a44}
.netim-blog .bl-sc:focus-visible,.netim-blog .bl-sa:focus-visible{outline:2px solid #80dfa0;outline-offset:2px}
.netim-blog .bl-main{min-width:0}
.netim-blog .bl-main .bl-grid{grid-template-columns:repeat(3,1fr)}
/* dolna granica 620: bez niej wymuszalo 2 kolumny takze na telefonach (tytuly lamane w polowie slowa, QA 27.08) */
@media(max-width:1240px) and (min-width:620px){.netim-blog .bl-main .bl-grid{grid-template-columns:repeat(2,1fr)}}
/* telefon: jedna kolumna (bazowa regula .bl-main .bl-grid ma 3 kolumny bez media) */
@media(max-width:619px){.netim-blog .bl-main .bl-grid{grid-template-columns:1fr}}
@media(max-width:900px){
  .netim-blog .bl-layout{grid-template-columns:1fr;gap:18px}
  .netim-blog .bl-side-in{position:static;max-height:none;flex-direction:column}
  .netim-blog .bl-side-grp nav{display:flex;flex-wrap:wrap;gap:4px}
  .netim-blog .bl-sc,.netim-blog .bl-sa{background:#fff;border:1px solid #e6eaf8;border-radius:999px;padding:7px 12px}
}
/* stary filterbar nieuzywany */
.netim-blog .bl-filterbar{display:none}

/* sticky sidebar: home-v2 daje body{overflow-x:hidden} co lamie position:sticky; clip przycina bez lamania */
body.netim-blog-archive,body.category{overflow-x:clip!important}

/* pasek kontekstu aktywnego filtra autora */
.netim-blog .bl-ctx{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bl-line,#e6eaf8);border-radius:14px;padding:13px 18px;margin-bottom:20px;font:600 13.5px/1.4 'Montserrat';color:#3a4058}
.netim-blog .bl-ctx img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center top}
.netim-blog .bl-ctx b{font-weight:800;color:#050a30}
.netim-blog .bl-ctx a{margin-left:auto;font:700 12px/1 'Montserrat';color:#1e5e9f;text-decoration:none;border-bottom:1px solid #cfe0f2;padding-bottom:2px}
.netim-blog .bl-ctx a:hover{color:#050a30;border-color:#80dfa0}