/* ============================================================
   PEWNA POLISA UK — blog.css
   Style bloga. Ładowane PO style.css, więc dziedziczy zmienne
   (--navy, --gold, --font-display itd.), reset, .container, .btn.
   Nie zmieniaj kolorów tutaj — korzystaj ze zmiennych z :root.
   ============================================================ */

/* ---------- LISTA WPISÓW (/blog/) ---------- */
.blog-hero {
  background: var(--navy-deep);
  color: var(--white);
  padding: 64px 0 48px;
}
.blog-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 .5rem; }
.blog-hero p { max-width: 60ch; opacity: .9; margin: 0; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  padding: 48px 0 24px;
}
.post-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(8,28,51,.16); }
.post-card a.post-card-link { text-decoration: none; color: inherit; padding: 24px; display: flex; flex-direction: column; height: 100%; }
.post-card .post-cat { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .5rem; }
.post-card h2 { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; color: var(--navy); }
.post-card .post-excerpt { color: var(--ink); font-size: .96rem; margin: 0 0 1rem; flex: 1; }
.post-card .post-meta { font-size: .82rem; color: #5c6b7a; margin-top: auto; }

/* ---------- POJEDYNCZY WPIS ---------- */
.post-head { padding: 56px 0 8px; }
.post-breadcrumb { font-size: .85rem; color: #5c6b7a; margin-bottom: 1rem; }
.post-breadcrumb a { color: var(--gold-text); text-decoration: none; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-cat-tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .6rem; }
.post-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4.5vw, 2.7rem); line-height: 1.15; color: var(--navy); margin: 0 0 1rem; }

/* Byline z autorem + recenzentem FCA = sygnał E-E-A-T */
.post-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
  font-size: .9rem; color: #4a5764;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; margin: 1.2rem 0 0;
}
.post-byline strong { color: var(--navy); }
.post-byline .reviewed { display: inline-flex; align-items: center; gap: .4rem; }
.post-byline .reviewed::before { content: "✓"; color: var(--whatsapp); font-weight: 800; }

/* Ramka „W skrócie" — pierwsze, co widzi czytelnik I model AI */
.key-takeaway {
  background: var(--ice);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 28px 0;
}
.key-takeaway h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gold-text); margin: 0 0 .6rem; }
.key-takeaway p, .key-takeaway ul { margin: 0; }
.key-takeaway li { margin: .25rem 0; }

/* Treść artykułu — czytelna typografia */
.post-content { font-size: 1.06rem; line-height: 1.72; color: var(--ink); }
.post-content > h2 { font-family: var(--font-display); font-size: 1.55rem; color: var(--navy); margin: 2.2rem 0 .8rem; line-height: 1.25; }
.post-content > h3 { font-size: 1.2rem; color: var(--navy); margin: 1.6rem 0 .6rem; }
.post-content p { margin: 0 0 1.1rem; }
.post-content ul, .post-content ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.post-content li { margin: .35rem 0; }
.post-content a { color: var(--gold-text); }
.post-content strong { color: var(--navy); }
.post-content blockquote {
  border-left: 3px solid var(--gold-soft); background: #fbf8f0;
  margin: 1.4rem 0; padding: .8rem 1.2rem; border-radius: 6px; font-style: italic;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .96rem; }
.post-content th, .post-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-content th { background: var(--ice); color: var(--navy); }

/* Blok CTA wewnątrz / na końcu wpisu — linkuje do formularza na stronie głównej */
.post-cta {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  margin: 40px 0;
  text-align: center;
}
.post-cta h2 { font-family: var(--font-display); color: var(--white); margin: 0 0 .6rem; }
.post-cta p { opacity: .92; margin: 0 0 1.2rem; }

/* Sekcja FAQ wpisu — reużywa .faq-item ze style.css */
.post-faq { margin: 40px 0; }
.post-faq h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); margin: 0 0 1rem; }

/* Disclaimer pod wpisem (YMYL) */
.post-disclaimer { font-size: .85rem; color: #5c6b7a; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 2.5rem; }

@media (max-width: 640px) {
  .post-head { padding: 36px 0 8px; }
  .post-content { font-size: 1.02rem; }
}