/* ═══════════════════════════════════════════════════════════════════════
   LISTA BLOGA v2 (01.10.2026, Marco: „za wąsko, dodać sidebar po prawej, ładniej zaprojektować”).
   Szerokość jak nagłówek (linia logo, --fm-gutter). Pierwszy wpis na 1. stronie jako duża karta,
   siatka kart + przyklejony panel po prawej (wyszukiwarka, autor, tematy, umówienie wizyty).
   Ładowany po archive-blog.css; prefiks .bl2 i !important tam, gdzie wcześniejsze warstwy też stylują.
   ═══════════════════════════════════════════════════════════════════════ */

.bl2-head, .bl2 {
  --b2-ink: #1A1523; --b2-mut: #5A5363; --b2-line: rgba(26, 21, 35, .08);
  --b2-pink: #FDF1F8; --b2-mint: #EEF8F2; --b2-mag: #C92F93; --b2-mag-d: #A8267B; --b2-green: #267A52;
  --b2-pad: var(--fm-gutter, max(20px, calc((100vw - 1665px) / 2)));
}

/* ── Nagłówek ── */
.blog-header.bl2-head {
  text-align: left !important; padding: clamp(28px, 4vw, 56px) var(--b2-pad) clamp(24px, 3vw, 40px) !important;
  background: linear-gradient(170deg, #fff 0%, var(--b2-pink) 100%) !important; border-bottom: 1px solid var(--b2-line);
}
.bl2-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 12.5px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--b2-green); }
.bl2-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.bl2-head .bh-title { font-size: clamp(34px, 4vw, 52px) !important; line-height: 1.08 !important; letter-spacing: -.015em; margin: 0 0 12px !important; text-align: left !important; }
.bl2-head .bh-desc { margin: 0 !important; max-width: 64ch !important; font-size: clamp(16px, 1.3vw, 18px) !important; line-height: 1.65 !important; color: var(--b2-mut) !important; text-align: left !important; }

/* ── Układ: lista + panel ── */
.blog-main.bl2 {
  max-width: none !important; margin: 0 !important; background: #F7F6F9 !important;
  padding: clamp(24px, 3vw, 48px) var(--b2-pad) clamp(48px, 5vw, 88px) !important;
  display: grid; gap: clamp(28px, 3vw, 56px); align-items: start;
}
@media (min-width: 1100px) { .blog-main.bl2 { grid-template-columns: minmax(0, 1fr) 340px; } }

/* ── Karty ── */
.bl2 .b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: clamp(16px, 1.6vw, 24px) !important; }
.bl2 .bcard {
  border: 1px solid var(--b2-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: none !important;
  transition: box-shadow .25s, transform .25s !important;
}
.bl2 .bcard:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 34px rgba(26, 21, 35, .07) !important; }
.bl2 .bcard > a { color: inherit; text-decoration: none; display: flex !important; flex-direction: column; }
.bl2 .bthumb { height: auto !important; aspect-ratio: 16 / 10; background: var(--b2-pink); }
.bl2 .bcat {
  top: 12px !important; left: 12px !important; padding: 5px 10px !important; border-radius: 999px !important;
  background: rgba(255, 255, 255, .94) !important; color: var(--b2-mag-d) !important; box-shadow: none !important;
  font: 700 11px/1 var(--f-ui) !important; letter-spacing: .08em !important;
}
.bl2 .bbody { padding: 18px 20px 20px !important; gap: 0; flex: 1; }
.bl2 .bmeta { justify-content: flex-start !important; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 10px !important; font-size: 13.5px !important; color: var(--b2-mut) !important; }
.bl2 .bmeta span::before { content: '·'; margin-right: 14px; color: rgba(26, 21, 35, .3); }
.bl2 .btit {
  font-family: var(--f-ui) !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.32 !important;
  letter-spacing: -.01em; color: var(--b2-ink) !important; margin: 0 0 10px !important;
}
.bl2 .bexc {
  font-size: 15.5px !important; line-height: 1.65 !important; color: var(--b2-mut) !important; margin: 0 0 16px !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bl2 .b-more { margin-top: auto; gap: 6px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--b2-mag-d) !important; }
.bl2 .b-more i { color: inherit !important; font-size: 18px; transition: transform .2s; }
.bl2 .bcard:hover .b-more i { transform: translateX(3px); }

/* Pierwszy wpis: duża karta na całą szerokość listy */
.bl2 .bcard--featured { grid-column: 1 / -1; }
.bl2 .bcard--featured .bcat { background: var(--b2-mag) !important; color: #fff !important; }
.bl2 .bcard--featured .btit { font-family: var(--f-serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.4vw, 34px) !important; line-height: 1.15 !important; }
@media (min-width: 760px) {
  .bl2 .bcard--featured > a { display: grid !important; grid-template-columns: 1.15fr 1fr; }
  .bl2 .bcard--featured .bthumb { aspect-ratio: auto; min-height: 340px; }
  .bl2 .bcard--featured .bbody { padding: clamp(24px, 3vw, 40px) !important; justify-content: center; }
  .bl2 .bcard--featured .bexc { -webkit-line-clamp: 4; font-size: 16.5px !important; }
}

/* ── Paginacja ── */
.bl2 .pagination { justify-content: flex-start !important; }
.bl2 .page-btn { border-radius: 12px !important; }
.bl2 .page-btn.active { background: var(--b2-mag) !important; border-color: var(--b2-mag) !important; box-shadow: none !important; }
.bl2 .page-btn i { color: inherit !important; }

/* ── Panel boczny ── */
.bl2-side { display: grid; gap: 14px; font-family: var(--f-ui); }
@media (min-width: 1100px) { .bl2-side { position: sticky; top: calc(var(--nav-h, 68px) + 20px); transition: top .3s ease; } body.nav-is-hidden .bl2-side { top: 20px; } }
.bl2-search { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: #fff; border: 1px solid var(--b2-line); }
.bl2-search:focus-within { border-color: var(--b2-mag); box-shadow: 0 0 0 3px rgba(201, 47, 147, .12); }
.bl2-search i { color: var(--b2-mag-d) !important; font-size: 19px; }
.bl2-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px var(--f-ui); color: var(--b2-ink); }
.bl2-box { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--b2-line); }
.bl2-side-h { display: block; margin: 0 0 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--b2-green); }

.bl2-author { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: inherit; transition: border-color .2s; }
.bl2-author:hover { border-color: rgba(201, 47, 147, .35); }
.bl2-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--b2-pink); }
.bl2-author .bl2-side-h { margin-bottom: 6px; }
.bl2-author strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--b2-ink); }
.bl2-author-role { display: block; margin-top: 2px; font-size: 14px; color: var(--b2-mut); }
.bl2-author > i { color: var(--b2-mag-d) !important; font-size: 22px; }

.bl2-topics ul { list-style: none; margin: 0; padding: 0; }
.bl2-topics li + li { border-top: 1px solid var(--b2-line); }
.bl2-topics a { display: flex; align-items: center; gap: 12px; min-height: 50px; text-decoration: none; color: var(--b2-ink); font-size: 15.5px; font-weight: 600; }
.bl2-topics a:hover { color: var(--b2-mag-d); }
.bl2-topics a > i { margin-left: auto; color: var(--b2-mag-d) !important; font-size: 20px; transition: transform .2s; }
.bl2-topics a:hover > i { transform: translateX(3px); }
.bl2-topic-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--b2-mint); }
.bl2-topic-ico i { font-size: 19px; color: var(--b2-green) !important; }

.bl2-cta { background: var(--b2-mint); border-color: transparent; position: relative; overflow: hidden; }
.bl2-cta::after { content: ''; position: absolute; right: -50px; top: -60px; width: 150px; height: 150px; border-radius: 50%; border: 16px solid rgba(91, 185, 133, .16); border-left-color: transparent; pointer-events: none; }
.bl2-cta-h { margin: 0 0 6px; font-family: var(--f-serif); font-size: 24px; line-height: 1.15; color: var(--b2-ink); }
.bl2-cta-p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--b2-mut); }
.bl2-cta-btn, .bl2-cta-tel { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; text-decoration: none; font-size: 15.5px; font-weight: 700; }
.bl2-cta-btn { background: var(--b2-mag); color: #fff !important; box-shadow: 0 6px 16px rgba(201, 47, 147, .25); }
.bl2-cta-btn:hover { background: var(--b2-mag-d); }
.bl2-cta-tel { margin-top: 8px; background: #fff; color: var(--b2-ink) !important; font-variant-numeric: tabular-nums; }
.bl2-cta-btn i, .bl2-cta-tel i { color: inherit !important; font-size: 18px; }
.bl2-cta-tel i { color: var(--b2-green) !important; }

.bl2 a:focus-visible, .bl2-search input:focus-visible { outline: 2px solid var(--b2-mag); outline-offset: 2px; }

@media (max-width: 640px) {
  .bl2 .b-grid { grid-template-columns: 1fr !important; }
  .bl2 .btit { font-size: 18.5px !important; }
}
@media (prefers-reduced-motion: reduce) { .bl2 .bcard, .bl2 .b-more i, .bl2-topics a i { transition: none !important; } }
.bl2-topics a, .bl2-topics a:visited { color: var(--b2-ink) !important; }
.bl2-topics a:hover { color: var(--b2-mag-d) !important; }