/* ============================================
   BLOG — listing + article extras
   Reuses legal-shared.css for the article body
   (.legal-page / .legal-container / .legal-content).
   ============================================ */

/* ---- Listing header ---- */
.blog-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-700);
  max-width: 640px;
}

/* ---- Category filter bar ---- */
/* Hidden by default (see [hidden] in markup); script.js reveals it when JS runs,
   so without JS the bar stays hidden and all cards remain visible. */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
}

.blog-filter-chip {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
  background: var(--paper);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.blog-filter-chip:hover {
  border-color: var(--gray-500);
}

.blog-filter-chip.is-active {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}

/* ---- Listing: wider container for the 3-col card grid.
   Article pages keep the default 800px reading width. ---- */
.blog-listing {
  max-width: 1120px;
}

/* ---- Article cards grid ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Per-category accent — drives both the badge and the thumbnail placeholder tint.
   Hexes locked to the thumbnail artwork palette. */
.blog-card[data-category="koszty"] {
  --cat: #ffb86c;
}
.blog-card[data-category="zakupy"] {
  --cat: #93b5ff;
}
.blog-card[data-category="marnowanie"] {
  --cat: #81c796;
}
.blog-card[data-category="operacje"] {
  --cat: #7891be;
}
.blog-card[data-category="zespol"] {
  --cat: #d8b89e;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--gray-200);
  /* Category accent — thin top edge in the category color, ties the card
     to its thumbnail without adding a low-contrast pastel label. */
  border-top: 3px solid var(--cat, var(--gray-200));
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

/* Filter hides cards via the [hidden] attribute; the .blog-card display rule
   above would otherwise win over the UA [hidden] style, so restate it here. */
.blog-card[hidden] {
  display: none;
}

/* Thumbnail — 16:9. Placeholder tint (category color) shows through until the
   image loads; if thumb.png is missing, onerror removes the <img> and the tint
   stays as a colored block, so the listing never shows a broken-image icon. */
.blog-card-media {
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--cat, var(--gray-200)) 22%, #ffffff);
}

.blog-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}

.blog-card-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 8px;
}

.blog-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 8px;
  /* Clamp to keep card heights even across a row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-700);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
}

.blog-card:hover .blog-card-link {
  color: var(--navy);
}

/* ---- Article: meta under H1 ---- */
.article-meta {
  font-size: 14px;
  color: var(--gray-500);
}

.article-meta strong {
  color: var(--navy);
  font-weight: 600;
}

/* ---- Article: closing CTA box ---- */
.article-cta {
  margin-top: 56px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.article-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 10px;
}

.article-cta p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--accent);
  margin: 0 0 20px;
}

/* Light button on the navy CTA box — overrides .btn-primary (navy bg)
   and the .legal-content a link styling (accent color + underline). */
.article-cta .btn {
  display: inline-block;
  background: var(--paper);
  color: var(--navy);
  text-decoration: none;
}

.article-cta .btn:hover {
  background: var(--accent);
  color: var(--navy);
}

@media (max-width: 600px) {
  .blog-card-body {
    padding: 20px 22px 22px;
  }
  .blog-card-title {
    font-size: 19px;
  }
  .blog-filter-chip {
    font-size: 13px;
    padding: 6px 12px;
  }
  .article-cta {
    padding: 24px;
  }
}