/* Archiwum i kategoria — nagłówek, filtry, siatka kart, paginacja.
   Źródło: mockup/blog.html. */
  /* ---------- nagłówek archiwum ---------- */
  .archive-head{padding:clamp(30px,4vw,50px) 0 clamp(26px,3.5vw,38px)}
  .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--dim);margin-bottom:18px}
  .crumbs a{color:var(--muted)}
  .crumbs span[aria-hidden]{opacity:.5}
  .archive-head h1{max-width:20ch}
  .archive-head .lede{margin-bottom:0}
  .head-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(26px,4vw,52px);align-items:start}
  @media(max-width:980px){.head-grid{grid-template-columns:minmax(0,1fr)}}
  .method{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);
          border-radius:var(--radius);padding:22px 24px}
  .method .lbl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
               color:var(--dim);margin-bottom:16px}
  .method ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
  .method li{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--muted);line-height:1.5}
  .method svg{width:18px;height:18px;stroke:var(--rose);flex:none;margin-top:2px}
  .method b{color:var(--text)}
  .method .foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.79rem;color:var(--dim)}

  /* ---------- filtry ---------- */
  .filters{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0;list-style:none}
  .filters .chip.on{background:linear-gradient(135deg,var(--rose),#d92b8a);color:#fff;border-color:transparent;
                    font-weight:700;box-shadow:0 6px 18px -8px rgba(255,61,127,.9)}
  .filters .chip .cnt{opacity:.6;font-variant-numeric:tabular-nums}

  /* ---------- karta wpisu ---------- */
  .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;padding:0;margin:0}
  @media(max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.posts{grid-template-columns:1fr}}
  .post{
    background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
    transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease
  }
  .post:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
  .post-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
  .post-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .35s ease}
  .post:hover .post-media img{transform:scale(1.04)}
  .post-media::after{content:"";position:absolute;inset:0;
    background:linear-gradient(transparent 45%,rgba(10,5,9,.72))}
  .cat{
    position:absolute;left:12px;top:12px;z-index:2;font-size:.7rem;font-weight:800;letter-spacing:.05em;
    text-transform:uppercase;padding:5px 11px;border-radius:999px;
    background:rgba(10,5,9,.78);border:1px solid var(--line-2);color:var(--rose-2);backdrop-filter:blur(6px)
  }
  .cat.test{color:var(--amber);border-color:rgba(255,181,69,.4)}
  .cat.guide{color:var(--green);border-color:rgba(61,220,151,.35)}
  .post-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
  .post-body h2,.post-body h3{font-size:1.07rem;margin:0 0 9px;line-height:1.3}
  .post-body h2 a,.post-body h3 a{color:var(--text)}
  .post-body h2 a:hover,.post-body h3 a:hover{color:var(--rose-2);text-decoration:none}
  .post-body p{color:var(--muted);font-size:.9rem;margin:0 0 16px;flex:1}
  .post-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.78rem;color:var(--dim);
             padding-top:14px;border-top:1px solid var(--line)}
  .post-meta .sep{opacity:.4}
  .post-meta svg{width:13px;height:13px;stroke:currentColor;vertical-align:-2px;margin-right:4px}

  /* ---------- „zacznij tutaj" ---------- */
  .starter{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0}
  @media(max-width:860px){.starter{grid-template-columns:1fr}}
  .starter li{
    display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:18px;transition:border-color .18s ease,transform .18s ease
  }
  .starter li:hover{border-color:var(--rose);transform:translateY(-2px)}
  .starter .num{
    flex:none;font-size:1.5rem;font-weight:800;letter-spacing:-.05em;line-height:1;
    background:linear-gradient(140deg,var(--rose),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent
  }
  .starter b{display:block;font-size:.97rem;margin-bottom:5px;line-height:1.35}
  .starter b a{color:var(--text)}
  .starter b a:hover{color:var(--rose-2);text-decoration:none}
  .starter span{font-size:.85rem;color:var(--dim)}

  /* ---------- wyróżniony wpis ---------- */
  .lead{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0;overflow:hidden;
    background:linear-gradient(150deg,var(--surface-2),var(--surface));border:1px solid rgba(255,61,127,.4);
    border-radius:var(--radius);box-shadow:var(--shadow);position:relative
  }
  .lead::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
    background:linear-gradient(90deg,var(--rose),var(--amber) 55%,transparent)}
  @media(max-width:860px){.lead{grid-template-columns:1fr}}
  .lead-media{position:relative;min-height:260px}
  .lead-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .lead-body{padding:clamp(22px,3.2vw,34px);display:flex;flex-direction:column;justify-content:center}
  .lead-body h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:12px}
  .lead-body h2 a{color:var(--text)}
  .lead-body h2 a:hover{color:var(--rose-2);text-decoration:none}
  .lead-body p{color:var(--muted);font-size:.97rem}

  /* ---------- pasek CTA w siatce ---------- */
  .grid-cta{
    grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
    background:linear-gradient(135deg,rgba(255,61,127,.15),rgba(157,92,255,.1));
    border:1px solid var(--line-2);border-radius:var(--radius);padding:24px clamp(20px,3vw,30px)
  }
  .grid-cta div{flex:1;min-width:250px}
  .grid-cta b{display:block;font-size:1.12rem;letter-spacing:-.02em;margin-bottom:5px}
  .grid-cta span{color:var(--muted);font-size:.9rem}

  /* ---------- paginacja ---------- */
  .pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:44px}
  .pager a,.pager span{
    min-width:42px;height:42px;padding:0 14px;border-radius:11px;display:inline-flex;align-items:center;
    justify-content:center;font-weight:650;font-size:.92rem;border:1px solid var(--line-2);
    background:var(--surface);color:var(--muted)
  }
  .pager a:hover{border-color:var(--rose);color:var(--text);text-decoration:none}
  .pager .now{background:linear-gradient(135deg,var(--rose),#d92b8a);color:#fff;border-color:transparent}
  .pager .dots{border:0;background:none;min-width:auto;padding:0 4px}

  /* ---------- dodatki motywu ---------- */
  /* Etykieta kategorii w karcie wyróżnionej stoi w normalnym przepływie,
     a nie absolutnie nad obrazkiem jak w kartach siatki. */
  .cat-static{position:static;align-self:flex-start;margin-bottom:14px;backdrop-filter:none}
  .post-meta-bare{border-top:0;padding-top:0}
  /* Siatka wyników wyszukiwania bywa jednoelementowa — karta nie ma się rozciągać. */
  .posts:has(> .post:only-child){grid-template-columns:repeat(3,1fr)}