/* =========================================================
   Blog: warstwa w stylu strony głównej v3 (lt-*).
   Pastelowy róż w hero, granat, złoto, zaokrąglone karty.
   Ładowany ostatni na blog/index.html i blog/post.html.
   ========================================================= */
:root {
  --lt-violet: #5a00ff;
  --lt-navy: #13093f;
  --lt-gold: #ffc93d;
  --lt-pink: #fbd0f1;
  --lt-hot: #e92ac7;
  --lt-lav: #e9e1ff;
  --lt-cream: #f8f6fc;
}

.blog-page { background: var(--lt-cream); }

/* ---------- Hero ---------- */
.blog-hero {
  padding: 212px 0 76px;
  background: #ff8ad6;
  background-image: none;
  color: var(--lt-navy);
}
.blog-hero::after { display: none; }
.blog-hero > .container { position: relative; z-index: 1; }
.blog-hero .section-badge { display: none; }
.blog-hero h1 { color: var(--lt-navy); }
.blog-hero h1 em { color: #fff; }
.blog-hero p { color: #2a1f52; font-size: 1.1rem; }
.blog-hero-note {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--lt-navy);
  color: #fff;
  box-shadow: none;
  font-size: 0.82rem;
}
.blog-hero-note i { color: var(--lt-gold); }

.blog-doodle {
  position: absolute;
  z-index: 0;
  fill: none;
  stroke: var(--lt-violet);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  pointer-events: none;
}
.blog-doodle--one { top: 150px; right: 6%; width: clamp(100px, 11vw, 160px); transform: rotate(8deg); }
.blog-doodle--two { bottom: 40px; right: 22%; width: clamp(80px, 8vw, 120px); transform: rotate(-10deg); stroke: var(--lt-hot); opacity: 0.8; }

/* ---------- Karty artykułów ---------- */
.blog-layout { padding-top: 56px; }
.blog-featured,
.blog-list-item {
  overflow: hidden;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 22px 44px -36px rgba(19, 9, 63, 0.55);
}
.blog-featured:hover,
.blog-list-item:hover { border-color: transparent; box-shadow: 0 30px 50px -30px rgba(19, 9, 63, 0.55); }
.blog-featured-img { margin: 10px 10px 0; border-radius: 24px; overflow: hidden; }
.blog-list-item .blog-list-img { margin: 10px 0 10px 10px; border-radius: 22px; overflow: hidden; }
.blog-featured-body h2,
.blog-list-body h3 { color: var(--lt-navy); }
.blog-list-link:hover h3 { color: var(--lt-violet); }
.blog-tag { color: var(--lt-violet); }
.read-more {
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--lt-violet);
  color: #fff;
  font-weight: 800;
}
.blog-cover-label,
.blog-featured-stamp,
.blog-image-label { border-radius: 999px; }

/* Ludzie z katalogu */
.blog-people { border-radius: 32px; background: var(--lt-navy); }
.blog-people::before { background: var(--lt-gold); }
.blog-person { border-radius: 16px; }
.blog-people--secondary { background: var(--lt-lav); }
.blog-people--secondary::before { background: var(--lt-hot); opacity: 0.18; }

/* Sidebar */
.sidebar-card {
  margin-bottom: 14px;
  padding: 22px;
  border: 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 20px 40px -36px rgba(19, 9, 63, 0.5);
}
.sidebar-card h3 { color: var(--lt-violet); }
.cta-card { background: var(--lt-gold); }
.cta-card h3 { color: var(--lt-navy); }
.cta-card p { color: rgba(19, 9, 63, 0.8); }
.sidebar-cta { border-radius: 999px; background: var(--lt-navy); color: #fff; font-weight: 800; }

/* ---------- Pojedynczy wpis ---------- */
.blog-post-full {
  border: 0;
  border-radius: 32px;
  box-shadow: 0 30px 60px -44px rgba(19, 9, 63, 0.55);
}
.blog-post-hero { margin: 10px 10px 0; border-radius: 26px; overflow: hidden; }
.blog-post-inner h1 {
  color: var(--lt-navy);
  font-family: var(--font-family);
  font-weight: 800;
  letter-spacing: -0.045em;
}
.blog-back {
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--lt-navy);
  font-weight: 700;
}
.blog-back:hover { color: var(--lt-violet); }
.blog-post-body { color: #2d2553; }
.blog-post-body a { color: var(--lt-violet); }

@media (max-width: 640px) {
  .blog-hero { padding: 156px 0 52px; }
  .blog-doodle--one { top: 112px; right: 3%; width: 74px; }
  .blog-doodle--two { display: none; }
  .blog-hero-note { border-radius: 22px; }
  .blog-featured, .blog-list-item { border-radius: 24px; }
  .blog-list-item .blog-list-img { width: auto; margin: 8px 8px 0; }
  .blog-people { border-radius: 26px; }
}