/* ==========================================================================
   Baza wiedzy — lista wpisów. Karty .post-card są też w „Innych artykułach"
   pod wpisem (blog_post ładuje ten arkusz), więc wygląd karty jest jeden.
   ========================================================================== */

/* ----------------------------------------------------------- nagłówek listy -- */
.blog-hero{padding-bottom:56px}
.blog-hero h1 span{overflow-wrap:anywhere}
.blog-tools{margin-top:36px;display:grid;gap:18px;justify-items:start}
.blog-search{position:relative;display:flex;gap:10px;width:100%;max-width:520px}
.blog-search>.icon{position:absolute;left:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:#8a96a0;pointer-events:none}
.blog-search .input{padding-left:46px;min-width:0;flex:1}
.blog-search .button{flex:none;min-height:50px}
/* Wbudowany krzyżyk pola wyszukiwania w WebKicie ma własne kolory i odstępy —
   czyszczenie i tak robi link „Wszystkie". */
.blog-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.blog-categories{max-width:100%}

/* -------------------------------------------------------- wyróżniony wpis -- */
.blog-featured-section{padding-top:64px}
.post-featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:24px;background:#fff;transition:border-color .16s}
.post-featured:hover{border-color:#c6d0d8}
.post-featured-media{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface)}
.post-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.post-featured:hover .post-featured-media img{transform:scale(1.03)}
.post-featured-body{padding:24px 32px 24px 0}
.post-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#6f7982}
.post-featured h2{margin:22px 0 18px;font-size:clamp(26px,2.6vw,36px);line-height:1.2;letter-spacing:-.04em}
.post-featured:hover h2{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:6px}
.post-featured .post-excerpt{font-size:15px;line-height:1.8}
.post-featured-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.post-author{display:flex;align-items:center;gap:12px}
.post-author strong,.post-author small{display:block}
.post-author strong{font-size:13px;font-weight:500}
.post-author small{font-size:12px;color:var(--muted)}
.post-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--yellow-soft);color:var(--gold-ink);font-size:12px;font-weight:600;flex:none}

/* ------------------------------------------------------------ karty wpisów -- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 28px}
.post-card{display:flex;flex-direction:column;color:var(--ink)}
.post-card-media{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:22px}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:12px;color:var(--muted)}
.post-category{font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:#6f7982}
.post-title{margin:12px 0 12px;font-size:20px;line-height:1.3;letter-spacing:-.03em}
.post-card:hover .post-title{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.post-excerpt{color:var(--muted);font-size:14px;line-height:1.8}
.post-card .post-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .text-link{margin-top:auto;padding-top:18px}
.post-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#a3adb5}
.post-placeholder .icon{width:40px;height:40px}
.post-card:focus-visible,.post-featured:focus-visible{outline-offset:6px;border-radius:18px}

/* ----------------------------------------------------------- stronicowanie -- */
.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:72px}
.pagination a{min-width:46px;height:46px;display:inline-grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;color:var(--navy);transition:background-color .16s,border-color .16s}
.pagination a:hover{background:var(--surface);border-color:#c6d0d8}
.pagination a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .icon{width:18px;height:18px}
.pagination-prev .icon{transform:rotate(180deg)}

/* ------------------------------------------------------------- pusta lista -- */
.blog-empty{max-width:620px;margin:auto;text-align:center;display:grid;justify-items:center}
.blog-empty h2{font-size:26px;letter-spacing:-.035em;margin-bottom:12px}
.blog-empty p{margin-bottom:24px}
.blog-empty p a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px}

@media(max-width:1150px){
  .post-featured{gap:32px}
  .post-featured-body{padding-right:16px}
}
@media(max-width:900px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-featured{grid-template-columns:1fr;gap:8px}
  .post-featured-media{aspect-ratio:16/9}
  .post-featured-body{padding:20px 16px 12px}
}
@media(max-width:640px){
  .blog-featured-section{padding-top:40px}
  .post-grid{grid-template-columns:1fr;gap:40px}
  .post-featured{padding:10px;border-radius:20px}
  .post-featured-body{padding:18px 10px 10px}
  .blog-search .button{padding:11px 14px}
  /* Segmenty z site.css rozciągają przyciski na całą szerokość; przy pięciu
     kategoriach dają wtedy wąskie, łamane słowa. Tu lepiej zawijać rzędami. */
  .blog-categories a{flex:1 1 auto}
  .pagination{margin-top:52px}
}