/* ===== HERO — archiwum bloga ===== */
.blog-hero {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.blog-hero__inner {
  max-width: 760px; margin: 0 auto;
  padding: var(--s-10) var(--gutter) var(--s-9);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5);
}
.blog-hero__eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}
/* Tytuł archiwum — TEKST stylowany na nagłówek; rolę H1 pełni nadtytuł
   .blog-hero__eyebrow (zasada nagłówków, patrz colors_and_type.css). */
.blog-hero .display-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-h1); line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--ink); text-wrap: balance;
}
.blog-hero .display-title em {
  font-style: italic; font-weight: 400; color: var(--accent);
}
.blog-hero__desc {
  margin: 0; max-width: 54ch;
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-body-lg); line-height: var(--lh-body);
  color: var(--ink-2);
}

/* Search */
.blog-hero__search {
  width: 100%; max-width: 520px; margin-top: var(--s-2);
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 4px 4px 4px 16px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.blog-hero__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.blog-hero__search > svg,
.blog-hero__search > i { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.blog-hero__search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 10px 0;
}
.blog-hero__search input::placeholder { color: var(--muted); }
.blog-hero__search button {
  flex-shrink: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-2);
  padding: 10px 18px; cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.blog-hero__search button:hover { background: #000; }
.blog-hero__search button:active { opacity: 0.85; }

/* Subtle CTA */
.blog-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--ink-2); cursor: pointer;
  position: relative; padding-bottom: 2px;
  transition: color var(--t-base) var(--ease);
}
.blog-hero__cta svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease); }
.blog-hero__cta::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width var(--t-base) var(--ease);
}
.blog-hero__cta:hover { color: var(--accent); }
.blog-hero__cta:hover::after { width: 100%; }
.blog-hero__cta:hover svg { transform: translateX(3px); }

@media (max-width: 600px) {
  .blog-hero__inner { padding: var(--s-9) var(--gutter) var(--s-8); }
  .blog-hero__search { flex-wrap: nowrap; }
  .blog-hero__search button { padding: 10px 14px; }
}

/* ===== ARCHIWUM — siatka kart + sidebar ===== */
.archive {
  padding-top: var(--s-9);
  padding-bottom: var(--s-11);
}
.archive__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-8);
  align-items: start;
}
/* Panel boczny znika, gdy nie ma kategorii ani wpisów do pokazania — wtedy
   lista artykułów bierze całą szerokość zamiast zostawiać pustą kolumnę 300px. */
.archive__layout:has(> :last-child:nth-child(1)) {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Cards grid 3x3 --- */
.archive__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule);
}
.archive__head h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--ink);
}
.archive__count {
  font-family: var(--font-body); font-size: 13px; color: var(--muted);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6) var(--s-5);
}
/* Karta wpisu — uniesiony panel z hairline, okładka 16/10 z nakładką
   kategorii, hover: zoom okładki + delikatne uniesienie + strzałka „Czytaj”.
   Wszystkie własności pudełka ustawione wprost, by wygrać kaskadę z main.css. */
.post-card {
  display: flex;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  overflow: hidden;
  padding-bottom: 0;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.post-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.post-card__link {
  display: flex; flex-direction: column;
  width: 100%; text-decoration: none; color: inherit;
}
.post-card__link:focus-visible { outline: none; }

/* --- Okładka + nakładka kategorii --- */
.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

/* Placeholder, gdy wpis nie ma obrazka wyróżniającego (zamiast pustej dziury) */
.post-card__ph {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
.post-card__ph::after {
  content: "\201E"; /* polski cudzysłów otwierający „ — sygnał redakcyjny */
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -42%);
  font-family: var(--font-display); font-weight: 500;
  font-size: 110px; line-height: 1;
  color: var(--brand-200);
}

.post-card__cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--font-body); font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
  padding: 5px 10px; border-radius: 999px;
  background: var(--card);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* --- Treść --- */
.post-card__body {
  display: flex; flex-direction: column; gap: 0;
  flex: 1; padding: var(--s-5);
}
.post-card__title {
  margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink); text-wrap: balance;
  transition: color var(--t-base) var(--ease);
}
.post-card:hover .post-card__title { color: var(--accent); }
.post-card__excerpt {
  margin: 0 0 var(--s-5);
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Stopka karty: data · czas czytania + strzałka --- */
.post-card__meta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted);
}
.post-card__metaleft {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; min-width: 0;
}
.post-card__date,
.post-card__rt { margin: 0; padding: 0; color: var(--muted); font-size: 12.5px; }
.post-card__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--rule-strong); flex-shrink: 0;
}
.post-card__more {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--rule); color: var(--accent);
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}
.post-card__more svg { width: 15px; height: 15px; transition: transform var(--t-base) var(--ease); }
.post-card:hover .post-card__more {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.post-card:hover .post-card__more svg { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card__media img,
  .post-card__more,
  .post-card__more svg { transition: none; }
  .post-card:hover { transform: none; }
  .post-card:hover .post-card__media img { transform: none; }
}

/* --- Sidebar --- */
.archive__sidebar {
  position: sticky; top: 140px;
  display: flex; flex-direction: column; gap: var(--s-7);
}
.side-block__label {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
/* Categories */
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; text-decoration: none;
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: color var(--t-base) var(--ease);
}
.cat-list li:last-child a { border-bottom: none; }
.cat-list a:hover { color: var(--accent); }
.cat-list .cat-count {
  font-family: var(--font-body); font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Popular list */
.pop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pop-item {
  display: flex; gap: var(--s-3); padding: var(--s-4) 0;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule);
}
.pop-item:first-child { padding-top: 0; }
.pop-item:last-child { border-bottom: none; padding-bottom: 0; }
.pop-item__num {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 22px; line-height: 1; color: var(--accent); flex-shrink: 0;
  width: 22px;
}
.pop-item__title {
  font-family: var(--font-display); font-weight: 400; font-size: 16px;
  line-height: 1.25; color: var(--ink);
  transition: color var(--t-base) var(--ease);
}
.pop-item:hover .pop-item__title { color: var(--accent); }
/* Newsletter */
.side-news {
  background: var(--accent-soft);
  border: 1px solid var(--brand-100);
  padding: var(--s-5);
}
.side-news h4 {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.2; color: var(--ink);
}
.side-news p {
  margin: 0 0 var(--s-4); font-family: var(--font-body); font-size: 13px;
  line-height: 1.5; color: var(--ink-2);
}
.side-news input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  border: 1px solid var(--rule); border-radius: var(--r-1);
  background: var(--card); padding: 10px 12px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
  transition: border-color var(--t-base) var(--ease);
}
.side-news input:focus { outline: 0; border-color: var(--accent); }
.side-news input::placeholder { color: var(--muted); }
.side-news button {
  width: 100%; font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  border-radius: var(--r-2); padding: 10px; cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
.side-news button:hover { background: #000; }

@media (max-width: 960px) {
  .archive__layout { grid-template-columns: 1fr; }
  .archive__sidebar { position: static; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* ===== Paginacja ===== */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: var(--s-8);
  padding-top: var(--s-6); border-top: 1px solid var(--rule);
}
.pagination__btn,
.pagination .page-numbers {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 12px;
  box-sizing: border-box; justify-content: center;
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  cursor: pointer; text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.pagination__btn svg { width: 15px; height: 15px; }
.pagination__btn:hover,
.pagination .page-numbers:hover { background: var(--paper-2); border-color: var(--rule-strong); }
.pagination__btn:active { opacity: 0.85; }
.pagination__btn.is-active,
.pagination .page-numbers.current {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.pagination__btn.is-active:hover,
.pagination .page-numbers.current:hover { background: #000; }
.pagination__btn[aria-disabled="true"] {
  color: var(--muted); cursor: not-allowed; opacity: 0.6;
}
.pagination__btn[aria-disabled="true"]:hover { background: var(--card); border-color: var(--rule); }
.pagination__ellipsis,
.pagination .page-numbers.dots {
  min-width: 24px; text-align: center;
  font-family: var(--font-body); font-size: 14px; color: var(--muted);
  border: none; background: none;
}
.pagination__edge-label { }
@media (max-width: 600px) {
  .pagination__edge-label { display: none; }
}

/* ============================================================
   DODATEK MOBILNY (≤600px) — telefon. Desktop nietknięty.
   ============================================================ */
@media (max-width: 600px) {
  .blog-hero__search { max-width: 100%; }
  .blog-hero__search input { font-size: 16px; }
  .archive__layout { grid-template-columns: 1fr; }
  .archive__sidebar { position: static; }
}

/* ============================================================
   DODATEK MOBILNY — POLISH (≤600). Desktop (>600) nietknięty.
   ============================================================ */
@media (max-width: 600px) {
  .archive { padding-top: var(--s-7); padding-bottom: var(--s-8); }
  .blog-hero__inner { padding-top: var(--s-7); padding-bottom: var(--s-6); }
}