/* ==========================================================================
   Blog index + post archives (home.php / archive.php)

   The head (breadcrumb, leaf headline, lead, feature strip) comes from the eco
   long-form shell in pages/ekomaterialy.css, which loads as this file's
   dependency. The card rules below are the homepage "Z magazínu" card repeated
   1:1 — pages/home.css only loads on the front page, so the listing needs its
   own copy to keep a card identical in both places.
   ========================================================================== */

.blog-index .wrap { padding-bottom: var(--space-8); }

/* ---- Category chips ------------------------------------------------------ */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.blog-chip {
  border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius-pill);
  padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--ink-soft-2);
  transition: border-color .15s, background .15s, color .15s;
}
.blog-chip:hover { text-decoration: none; border-color: var(--teal); color: var(--teal); }
.blog-chip.active { background: var(--teal); border-color: var(--teal); color: var(--bg); }

/* ---- Grid + card --------------------------------------------------------- */
.blog-index .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.blog-index .blog-card {
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden; transition: box-shadow .15s, transform .15s;
}
.blog-index .blog-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(14,85,81,.45); }
.blog-index .bc-img { height: 172px; display: block; overflow: hidden; }
.blog-index .bc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-index .bc-img.g1 { background: linear-gradient(135deg, #cfe0a6, #9bc06a); }
.blog-index .bc-img.g2 { background: linear-gradient(135deg, #e7d6b8, #c9a86f); }
.blog-index .bc-img.g3 { background: linear-gradient(135deg, #bfe0dc, #6fb3ab); }
.blog-index .bc-img.g4 { background: linear-gradient(135deg, #d7e7c5, #a7cf8a); }
.blog-index .bc-body { padding: 16px 17px 19px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-index .bc-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--teal); background: var(--teal-50);
  border-radius: 6px; padding: 3px 8px;
}
.blog-index .bc-title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
/* Three lines max, so cards in a row stay the same height now that the teaser is
   derived from the content rather than only from a hand-written perex. */
.blog-index .bc-exc {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Date sits on the card floor whatever the excerpt length. */
.blog-index .bc-date { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 4px; }

/* ---- Empty state --------------------------------------------------------- */
.blog-empty {
  margin-top: 26px; padding: var(--space-7) var(--space-5); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--page-bg);
}
.blog-empty p { margin: 0 0 var(--space-4); color: var(--ink-soft-3); font-size: 15px; }

/* ---- Pagination ---------------------------------------------------------- */
.blog-index .pagination { margin-top: var(--space-7); }
.blog-index .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-index .page-numbers {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg); font-size: 13.5px; font-weight: 600; color: var(--ink-soft-2);
  transition: border-color .15s, background .15s, color .15s;
}
.blog-index a.page-numbers:hover { text-decoration: none; border-color: var(--teal); color: var(--teal); }
.blog-index .page-numbers.current { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.blog-index .page-numbers.dots { border-color: transparent; background: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .blog-index .blog-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .blog-index .blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-index .bc-img { height: 190px; }
  .blog-filters { gap: 6px; }
  .blog-chip { padding: 6px 12px; font-size: 12.5px; }
}