.mn-a:hover { background: var(--mag-w); color: var(--mag); }

/* ════════════════════════════════════════
   BLOG ARTICLE LAYOUT
════════════════════════════════════════ */
.article-header {
  background: var(--white); padding: clamp(40px, 6vw, 64px) var(--px); text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.06); position: relative;
}
.breadcrumbs {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px; color: var(--slate); margin-bottom: 24px;
}
.breadcrumbs a { transition: color var(--tf); }
.breadcrumbs a:hover { color: var(--mag); }
.breadcrumbs span { opacity: 0.6; }

.article-title {
  font-family: var(--f-serif); font-size: clamp(32px, 4vw, 48px); line-height: 1.15;
  color: var(--ink); max-width: 860px; margin: 0 auto 24px;
}

.article-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px;
  font-size: 15px; color: var(--gray);
}
.meta-item { display: flex; align-items: center; gap: 6px; }
.meta-item i { color: var(--mag); font-size: 18px; }
.meta-badge {
  background: var(--mag-w); color: var(--mag-dim); padding: 5px 13px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* IMAGE HERO (optional in article) */
/* Featured image — teraz w lewej kolumnie (.article-content), więc zajmuje pełną szerokość tej kolumny */
.article-featured-img {
  width: 100%;
  margin: 0 0 clamp(28px, 4vw, 44px);
  position: relative;
}
.article-featured-img img {
  display: block;
  width: 100%; height: auto;
  max-height: 480px; object-fit: cover;
  border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0,0,0,0.05);
}

/* MAIN CONTENT WRAPPER */
.article-container {
  max-width: var(--max-outer);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

/* CONTENT STYLING — wypełnia całą lewą kolumnę */
.article-content {
  max-width: none;
  width: 100%;
  min-width: 0; /* fixes grid overflow z dużymi obrazkami/tabelami */
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.article-content img,
.article-content video,
.article-content iframe { max-width: 100%; height: auto; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-content pre,
.article-content code { white-space: pre-wrap; word-break: break-word; }

.article-content h2 {
  font-family: var(--f-serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ink);
  margin: 56px 0 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--nav-h) + 40px);
  position: relative;
  padding-bottom: 14px;
}
.article-content h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--mag), rgba(223,59,163,.2));
  border-radius: 2px;
}
.article-content h2:first-child { margin-top: 0; }

.article-content h3 {
  font-family: var(--f-ui);
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--ink);
  margin: 36px 0 14px;
  line-height: 1.3;
  padding-left: 14px;
  border-left: 3px solid var(--mag);
  scroll-margin-top: calc(var(--nav-h) + 40px);
}

.article-content h4 {
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--mag-dim);
  margin: 28px 0 10px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-content h5,
.article-content h6 {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate);
  margin: 24px 0 10px;
  line-height: 1.4;
}

/* Pierwszy paragraf po nagłówku — żywszy lead-in dla pierwszego paragrafu artykułu */
.article-content > p:first-of-type {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
}
.article-content > p:first-of-type::first-letter {
  font-family: var(--f-serif);
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--mag);
  font-weight: 400;
}

.article-content p { margin-bottom: 22px; font-size: 17px; line-height: 1.75; color: var(--slate); }
.article-content p + h2,
.article-content ul + h2,
.article-content ol + h2 { margin-top: 64px; }
.article-content p + h3,
.article-content ul + h3,
.article-content ol + h3 { margin-top: 40px; }
.article-content a.inline-link { color: var(--mag); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: all var(--tf); }
.article-content a.inline-link:hover { text-decoration-color: var(--mag); }

.article-content strong { color: var(--ink); font-weight: 600; }
.article-content em { color: var(--mag-dim); font-style: italic; }

.article-content ul { margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px; padding-left: 0; list-style: none; }
.article-content ul li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; color: var(--slate); line-height: 1.7; }
.article-content ul li::before { content: '\f10d'; font-family: 'remixicon'; color: var(--mag); font-size: 14px; flex-shrink: 0; margin-top: 6px; }
.article-content ul ul { margin: 12px 0 0; padding-left: 8px; }
.article-content ul ul li { font-size: 16px; }
.article-content ul ul li::before { content: '\eb7b'; color: rgba(223,59,163,.5); }

.article-content ol { margin-bottom: 28px; padding-left: 0; counter-reset: ol-counter; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.article-content ol > li {
  position: relative; padding-left: 44px; counter-increment: ol-counter;
  font-size: 17px; color: var(--slate); line-height: 1.7;
}
.article-content ol > li::before {
  content: counter( ol-counter );
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mag); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 15px; font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(223,59,163,.25);
}
.article-content ol ol { margin: 12px 0 0; counter-reset: ol-counter-2; }
.article-content ol ol > li { padding-left: 36px; counter-increment: ol-counter-2; font-size: 16px; }
.article-content ol ol > li::before {
  content: counter(ol-counter-2);
  width: 26px; height: 26px;
  background: var(--mag-w); color: var(--mag);
  font-size: 13px;
  box-shadow: none;
}

.article-content mark {
  background: var(--mag-w);
  color: var(--mag-dim);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.article-content code {
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.06);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  color: var(--mag-dim);
}

.article-content blockquote {
  position: relative;
  margin: 40px 0;
  padding: 28px 32px 28px 64px;
  border-left: 4px solid var(--mag);
  background: linear-gradient(135deg, var(--mag-w) 0%, var(--bg) 100%);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-family: var(--f-serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.article-content blockquote::before {
  content: '\f10e';
  font-family: 'remixicon';
  position: absolute;
  left: 24px;
  top: 22px;
  font-size: 28px;
  color: var(--mag);
  font-style: normal;
  line-height: 1;
  opacity: .6;
}
.article-content blockquote p { margin-bottom: 12px !important; color: var(--ink) !important; font-size: inherit !important; line-height: inherit; }
.article-content blockquote p:last-child { margin-bottom: 0 !important; }
.article-content blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-family: var(--f-ui);
  font-style: normal;
  color: var(--slate);
  font-weight: 600;
}
.article-content blockquote cite::before { content: '— '; }

.article-content .table-scroll { overflow-x: auto; margin: 32px 0; -webkit-overflow-scrolling: touch; }
.article-content table {
  width: 100%; margin: 32px 0; border-collapse: separate; border-spacing: 0;
  background: var(--white); border-radius: var(--r-card);
  overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.04);
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.06);
}
.article-content .table-scroll table { margin: 0; }
.article-content table thead {
  background: linear-gradient(135deg, var(--mag-w) 0%, rgba(223,59,163,.06) 100%);
}
.article-content table th {
  text-align: left; padding: 16px 20px; font-weight: 700;
  color: var(--mag-dim); font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 2px solid rgba(223,59,163,.15);
}
.article-content table td {
  padding: 14px 20px; border-top: 1px solid rgba(0,0,0,.05);
  color: var(--gray); line-height: 1.6; vertical-align: top;
}
.article-content table tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); }
.article-content table tbody tr:hover td { background: rgba(255,236,247,.4); }
.article-content table strong { color: var(--ink); }

.article-content img {
  max-width: 100%; height: auto;
  border-radius: var(--r-card);
  margin: 32px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.article-content figure { margin: 32px 0; }
.article-content figure img { margin: 0; }
.article-content figcaption {
  font-size: 13px;
  color: var(--slate);
  text-align: center;
  margin-top: 12px;
  font-style: italic;
  padding: 0 16px;
}
.article-content .alignleft { float: left; margin: 8px 32px 16px 0; max-width: 50%; }
.article-content .alignright { float: right; margin: 8px 0 16px 32px; max-width: 50%; }
.article-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.article-content .alignwide { margin-left: -40px; margin-right: -40px; max-width: calc(100% + 80px); }
@media (max-width: 1024px) {
  .article-content .alignleft, .article-content .alignright { float: none; max-width: 100%; margin: 32px 0; }
  .article-content .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
}

.article-content hr {
  border: none;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 56px auto;
  max-width: 200px;
  position: relative;
}
.article-content hr::after {
  content: '\f10d \f10d \f10d';
  font-family: 'remixicon';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 16px;
  color: var(--mag);
  font-size: 8px;
  letter-spacing: 4px;
}

.article-content a:not(.inline-link):not(.btn-p):not(.btn-s):not(.author-link):not(.author-cta):not(.sidebar-cta-phone) {
  color: var(--mag); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(223,59,163,.25);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--tf);
}
.article-content a:not(.inline-link):not(.btn-p):not(.btn-s):not(.author-link):not(.author-cta):not(.sidebar-cta-phone):hover {
  text-decoration-color: var(--mag);
}

/* ════════════════════════════════════════
   CALLOUT BOX (info / tip / warning)
════════════════════════════════════════ */
.callout {
  background: var(--mag-w); border-left: 4px solid var(--mag);
  padding: 24px 28px; border-radius: 0 var(--r-btn) var(--r-btn) 0;
  margin: 40px 0; display: flex; gap: 18px; align-items: flex-start;
}
.callout > i { font-size: 24px; color: var(--mag); flex-shrink: 0; margin-top: 2px; line-height: 1; }
.callout-text { flex: 1; }
.callout-text p { margin-bottom: 0 !important; font-size: 16px; color: var(--ink) !important; line-height: 1.6; }
.callout-text p + p { margin-top: 12px !important; }
.callout-text strong { font-weight: 600; color: var(--mag-dim); }
.callout-text ul, .callout-text ol { margin: 12px 0 0 !important; }

/* Wariant: tip (zielony) */
.callout.tip { background: rgba(97,206,112,.10); border-left-color: #4ade80; }
.callout.tip > i { color: #16a34a; }
.callout.tip .callout-text strong { color: #15803d; }

/* Wariant: warning (żółty) */
.callout.warning { background: rgba(252,211,77,.14); border-left-color: #f59e0b; }
.callout.warning > i { color: #d97706; }
.callout.warning .callout-text strong { color: #b45309; }

/* Wariant: info (niebieski) */
.callout.info { background: rgba(96,165,250,.12); border-left-color: #3b82f6; }
.callout.info > i { color: #2563eb; }
.callout.info .callout-text strong { color: #1d4ed8; }

/* ════════════════════════════════════════
   INLINE CTA (teal default + mag wariant)
════════════════════════════════════════ */
.inline-cta {
  background: var(--teal-g); border-radius: var(--r-card); padding: 36px 32px;
  text-align: center; margin: 48px 0; border: 1px solid rgba(12,184,182,0.15);
}
.inline-cta h4 { font-family: var(--f-serif); font-size: 24px; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.inline-cta p { font-size: 15px; margin-bottom: 24px !important; color: var(--slate) !important; line-height: 1.6; }
.inline-cta .btn-p { display: inline-flex; }

/* Wariant: różowy CTA */
.inline-cta.mag { background: var(--mag-w); border-color: rgba(223,59,163,0.15); }
.inline-cta.mag h4 { color: var(--mag-dim); }

/* ════════════════════════════════════════
   STAT BLOCKS (3-up grid liczb)
════════════════════════════════════════ */
.stat-blocks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px; margin: 40px 0;
}
.stat-block {
  background: var(--white); border-radius: var(--r-card);
  padding: 28px 24px; text-align: center; border: 1px solid rgba(0,0,0,.06);
}
.stat-block .stat-num {
  font-family: var(--f-serif); font-size: clamp(32px,3vw,40px);
  color: var(--mag); line-height: 1; margin-bottom: 8px; display: block;
}
.stat-block .stat-lbl { font-size: 14.5px; color: var(--slate); line-height: 1.45; }

/* ════════════════════════════════════════
   TOC SIDEBAR (SPIS TREŚCI)
════════════════════════════════════════ */
.sidebar-wrapper { position: sticky; top: calc(var(--nav-h) + 40px); }
/* Drawer / FAB elementy — domyślnie ukryte (są aktywowane w mobile media query) */
.toc-fab,
.toc-drawer-head,
.toc-drawer-overlay { display: none; }
/* Collapsed items (po 4-tym) — domyślnie ukryte, widoczne gdy .toc-list.is-expanded */
.toc-list a.is-collapsed { display: none; }
.toc-list.is-expanded a.is-collapsed { display: flex; }

/* Toggle button — pod listą, na całą szerokość */
.toc-box { position: relative; }
.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--white);
  border: 1.5px solid rgba(223,59,163,.22);
  border-radius: 10px;
  color: var(--mag);
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .2s var(--eo), border-color .2s var(--eo),
              color .2s var(--eo), transform .2s var(--eo),
              box-shadow .25s var(--eo);
}
.toc-toggle i { font-size: 15px; line-height: 1; transition: transform .2s; }
.toc-toggle:hover {
  background: var(--mag-w, #fef4fa);
  border-color: var(--mag);
  color: var(--mag);
  box-shadow: 0 4px 14px rgba(223,59,163,.12);
}
.toc-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.toc-toggle .toc-toggle-less { display: none; }
.toc-toggle[aria-expanded="true"] .toc-toggle-more { display: none; }
.toc-toggle[aria-expanded="true"] .toc-toggle-less { display: inline-flex; align-items: center; gap: 6px; }

/* ════════════════════════════════════════
   AUTHOR BOX — horizontal layout: photo + text, CTA na dole
════════════════════════════════════════ */
.author-box {
  position: relative;
  margin-top: 56px;
  padding: 28px;
  background: linear-gradient(135deg, #fff 0%, #fdf6fb 100%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-card);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.author-box-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.author-box .author-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 2px rgba(223,59,163,.18),
    0 8px 24px rgba(223,59,163,.18),
    0 2px 6px rgba(0,0,0,.06);
  position: relative;
}
.author-box .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.author-meta { flex: 1; min-width: 0; }
.author-pill {
  display: inline-flex;
  align-items: center;
  background: var(--mag-w);
  color: var(--mag);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.author-name {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 10px;
}
.author-bio {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.65;
  margin: 0 !important;
}

.author-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.author-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--tf), color var(--tf), border-color var(--tf), transform var(--tn);
  text-decoration: none !important;
  line-height: 1;
  white-space: nowrap;
}
.author-cta:hover { text-decoration: none !important; }
.author-cta i { font-size: 16px; }
.author-cta.primary {
  background: var(--mag);
  color: var(--white);
  border-color: var(--mag);
}
.author-cta.primary:hover {
  background: var(--mag-d, #b1287f);
  border-color: var(--mag-d, #b1287f);
  color: var(--white);
  transform: translateY(-1px);
}
.author-cta.outline {
  background: transparent;
  color: var(--mag);
  border-color: rgba(223,59,163,0.35);
}
.author-cta.outline:hover {
  background: var(--mag-w);
  border-color: var(--mag);
  color: var(--mag);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .author-box { padding: 22px 20px; }
  .author-box-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .author-box .author-avatar { width: 80px; height: 80px; }
  .author-actions { gap: 8px; }
  .author-cta { padding: 11px 16px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
}

/* ════════════════════════════════════════
   SIDEBAR CTA — ciemny box pod TOC
════════════════════════════════════════ */
.sidebar-cta {
  margin-top: 24px;
  padding: 28px 24px;
  background: linear-gradient(135deg, #1a0e1f 0%, #2d1738 100%);
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
}
.sidebar-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(223,59,163,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.sidebar-cta > * { position: relative; z-index: 1; }
.sidebar-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mag);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sidebar-cta-pill i { font-size: 14px; }
.sidebar-cta-title {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 12px;
}
.sidebar-cta-text {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  margin: 0 0 20px;
}
.sidebar-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--mag);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 20px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background var(--tf), transform var(--tn);
}
.sidebar-cta-btn:hover { background: var(--mag-d, #b1287f); transform: translateY(-1px); }
.sidebar-cta-btn i { font-size: 15px; }
.sidebar-cta-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 600;
  font-size: 16px;
  transition: color var(--tf);
}
.sidebar-cta-phone:hover { color: var(--mag); }
.sidebar-cta-phone i { color: var(--mag); font-size: 17px; }

/* ════════════════════════════════════════
   RELATED POSTS
════════════════════════════════════════ */
.related-posts { background: var(--white); padding: clamp(40px, 6vw, 80px) var(--px); border-top: 1px solid rgba(0,0,0,0.06); }
.related-container { max-width: var(--max); margin: 0 auto; }
.related-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.related-head h2 { font-family: var(--f-serif); font-size: clamp(28px, 4vw, 36px); color: var(--ink); }

.blog-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.bcard { background: var(--white); border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(0,0,0,0.08); transition: box-shadow var(--tn), transform var(--tn); }
.bcard:hover { box-shadow: 0 10px 32px rgba(223,59,163,0.1); transform: translateY(-4px); }
.bthumb { height: 200px; background: var(--blush); position: relative; overflow: hidden; }
.bthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--eo); }
.bcard:hover .bthumb img { transform: scale(1.04); }
.bcat { position: absolute; top: 16px; left: 16px; background: var(--mag); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-pill); }
.bbody { padding: 24px; }
.btit { font-weight: 500; font-size: 18px; color: var(--ink); line-height: 1.35; margin-bottom: 12px; }
.bexc { font-size: 14px; color: var(--gray); line-height: 1.6; margin-bottom: 20px; }
.b-more { font-size: 13px; font-weight: 600; color: var(--mag); display: flex; align-items: center; gap: 4px; }

/* Footer / topbar / nav: globalnie z global.css — nie duplikujemy. */

@media (max-width: 1024px) {
  .article-container { grid-template-columns: 1fr; gap: 48px; }
  .sidebar-wrapper { position: static; margin-bottom: 32px; order: -1; }
  .toc-box { background: var(--bg); border: none; padding: 20px; }
}
@media (max-width: 768px) {
  .article-container { padding: clamp(20px, 4vw, 32px) var(--px); gap: 28px; }
  .article-featured-img { margin: 0 0 24px; }
  .article-featured-img img { border-radius: 12px; max-height: 280px; }
  .related-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Sidebar CTA "Potrzebujesz konsultacji?" — ukryty na mobile (jest już CTA i tel w stickym dolnym pasku) */
  .sidebar-cta { display: none !important; }
  /* Header artykułu — padding zgodny z resztą strony, breadcrumbs do lewej, wyżej */
  .article-header {
    padding: 14px var(--px) clamp(20px, 4vw, 28px);
    text-align: left;
  }
  .breadcrumbs {
    justify-content: flex-start;
    font-size: 12px;
    margin-bottom: 14px;
    gap: 5px;
    color: var(--slate);
  }
  .breadcrumbs strong {
    /* ostatni element (tytuł posta) — obciąć jeśli za długi */
    max-width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .article-title { text-align: left; font-size: clamp(24px, 6vw, 32px); }
  .article-meta {
    justify-content: flex-start;
    gap: 8px 14px;
    font-size: 13px;
  }
  .meta-item i { font-size: 15px; }
  /* Treść — bezpieczne łamanie długich słów (np. linki, "Hba1c", emails) */
  .article-content { overflow-wrap: anywhere; }
  .article-content h1, .article-content h2, .article-content h3,
  .article-content h4, .article-content h5, .article-content h6 {
    overflow-wrap: break-word;
  }
  /* Odstępy nagłówków na mobile — patrz single-blog-enhanced.css
     (@media 768px), tamten plik ładuje się później i wygrywa. */

  /* Sidebar TOC — schowane z normalnego flow, otwiera się jako drawer z lewej */
  .sidebar-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: min(86vw, 360px); height: 100vh; height: 100dvh;
    margin: 0;
    background: var(--white);
    box-shadow: 12px 0 40px rgba(0,0,0,.16);
    transform: translateX(-105%);
    transition: transform .32s var(--eo, cubic-bezier(.22,.61,.36,1));
    z-index: 9999;
    overflow-y: auto;
    padding: 16px 14px 24px;
    display: block;
    order: 0;
  }
  .sidebar-wrapper.is-open { transform: translateX(0); }
  .toc-drawer-head {
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 4px 4px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 14px;
  }
  .toc-drawer-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--f-serif); font-size: 18px; color: var(--ink);
  }
  .toc-drawer-title i { color: var(--mag); font-size: 20px; }
  .toc-drawer-close {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.05); border: 0; border-radius: 50%;
    color: var(--ink); font-size: 20px;
    cursor: pointer;
  }
  .toc-drawer-close:hover { background: rgba(0,0,0,.09); }
  .toc-box { background: transparent; border: 0; padding: 0; }
  .toc-box > .toc-title { display: none; } /* już mamy nagłówek drawera */

  /* Floating button po lewej — ta sama wysokość co bąbel czatu
     (bottom: 84px + safe-area) i kolor teal, żeby odróżnić się
     od magentowego paska CTA „Umów wizytę" na dole. */
  .toc-fab {
    position: fixed;
    left: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--teal, #0CB8B6);
    color: var(--white);
    font-size: 21px;
    box-shadow: 0 6px 18px rgba(12,184,182,.40);
    z-index: 9998;
    cursor: pointer;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .toc-fab:hover { background: #0a9c9a; }
  .toc-drawer-overlay {
    display: block !important;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s var(--tf), visibility .25s;
    z-index: 9997;
  }
  .toc-drawer-overlay.is-visible { opacity: 1; visibility: visible; }
  html.toc-drawer-lock,
  html.toc-drawer-lock body { overflow: hidden; }
}

/* (Stary blok .author-box-* usunięty — zastąpiony nowymi klasami .author-box,
    .author-avatar, .author-info, .author-actions zgodnie z designem web6.) */

/* ════════════════════════════════════════
   CONTENT COMPONENTS — TL;DR, callouts, key-points
════════════════════════════════════════ */

/* Lead paragraph (1. akapit pod H1) */
.article-content > p:first-of-type {
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 32px;
}

/* TL;DR / Key answer box — szybka odpowiedź na pytanie */
.article-content .tldr {
  background: linear-gradient(135deg, var(--mag-w) 0%, rgba(223,59,163,.04) 100%);
  border-left: 4px solid var(--mag);
  border-radius: var(--r-card);
  padding: 24px 28px;
  margin: 32px 0;
  position: relative;
}
.article-content .tldr::before {
  content: 'TL;DR';
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--mag);
  padding: 4px 10px;
  border: 1.5px solid var(--mag);
  border-radius: 999px;
  margin-bottom: 14px;
}
.article-content .tldr p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
.article-content .tldr p + p { margin-top: 12px; }
.article-content .tldr strong { color: var(--mag-dim); }

/* Info box — neutralna informacja */
.article-content .info-box {
  background: rgba(12,184,182,.06);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin: 28px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.article-content .info-box::before {
  content: '\eed1';
  font-family: 'remixicon';
  color: var(--teal);
  font-size: 24px;
  line-height: 1.2;
  flex-shrink: 0;
}
.article-content .info-box > div,
.article-content .info-box > p { margin: 0; flex: 1; }
.article-content .info-box p + p { margin-top: 10px; }

/* Warning box — ważne ostrzeżenie */
.article-content .warning-box {
  background: rgba(255,184,0,.08);
  border-left: 4px solid #f59e0b;
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin: 28px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.article-content .warning-box::before {
  content: '\ec53';
  font-family: 'remixicon';
  color: #f59e0b;
  font-size: 24px;
  line-height: 1.2;
  flex-shrink: 0;
}
.article-content .warning-box > div,
.article-content .warning-box > p { margin: 0; flex: 1; color: #78350f; }

/* Key-points list — alternatywa dla zwykłej listy z ikonami */
.article-content .key-points {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-card);
  padding: 28px 32px;
  margin: 32px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}
.article-content .key-points h3 {
  margin: 0 0 16px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.article-content .key-points h3::before {
  content: '\ee76';
  font-family: 'remixicon';
  color: var(--mag);
  font-size: 22px;
}
.article-content .key-points ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.article-content .key-points ul li {
  position: relative;
  padding: 10px 0 10px 32px !important;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.article-content .key-points ul li:last-child { border-bottom: none; }
.article-content .key-points ul li::before {
  content: '\eb7b';
  font-family: 'remixicon';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--mag);
  font-size: 18px;
}

/* Stat / liczbowe wyróżnienie */
.article-content .stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 32px 0;
}
.article-content .stat-card {
  background: linear-gradient(135deg, var(--mag-w) 0%, rgba(255,255,255,1) 100%);
  border: 1px solid rgba(223,59,163,.15);
  border-radius: var(--r-card);
  padding: 24px 20px;
  text-align: center;
}
.article-content .stat-card .stat-val {
  font-family: var(--f-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--mag);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.article-content .stat-card .stat-lbl {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.4;
}

/* H2 z numerkiem (sekcje) */
.article-content h2 {
  position: relative;
  padding-top: 8px;
  margin-top: 56px;
}
.article-content h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--mag) 0%, var(--mag-g) 100%);
  border-radius: 2px;
  margin-top: 8px;
}

/* H3 lighter */
.article-content h3 {
  font-size: 22px;
  margin-top: 32px;
  margin-bottom: 14px;
  color: var(--ink);
}

/* Lepsze marginy paragrafów */
.article-content p {
  margin-bottom: 18px;
  line-height: 1.75;
}

/* Ograniczyć nadużywany strong — używać sparingly */
.article-content strong {
  color: var(--ink);
  font-weight: 600;
}

/* Lista z lepszymi marginesami */
.article-content ul li,
.article-content ol li {
  margin-bottom: 10px;
  line-height: 1.7;
}

/* ════════════════════════════════════════
   FAQ ACCORDION
════════════════════════════════════════ */
.article-content .faq-section {
  margin: 48px 0;
}
.article-content .faq-section > h2 {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-content .faq-section > h2::before {
  content: '\efeb';
  font-family: 'remixicon';
  color: var(--mag);
  font-size: 28px;
  font-weight: 400;
}
.article-content .faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.article-content .faq-list > li {
  display: block !important;
  padding: 0 !important;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--tf), box-shadow var(--tf);
}
.article-content .faq-list > li::before { content: none !important; }
.article-content .faq-list > li:hover { border-color: rgba(223,59,163,0.25); }
.article-content .faq-list > li[open] {
  border-color: var(--mag);
  box-shadow: 0 4px 16px rgba(223,59,163,0.08);
}

.article-content .faq-q {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.4;
  list-style: none;
  margin: 0 !important;
  transition: color var(--tf);
}
.article-content .faq-q::-webkit-details-marker { display: none; }
.article-content .faq-q::marker { content: ''; }
.article-content .faq-q::before { content: none !important; }
.article-content .faq-list > li[open] .faq-q { color: var(--mag); }
.article-content .faq-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mag-w);
  color: var(--mag);
  font-size: 18px;
  transition: transform var(--tn) var(--spring), background var(--tf);
}
.article-content .faq-list > li[open] .faq-icon {
  transform: rotate(180deg);
  background: var(--mag);
  color: var(--white);
}
.article-content .faq-a {
  padding: 0 24px 24px;
  font-size: 16px;
  color: var(--gray);
  line-height: 1.7;
}
.article-content .faq-a > p:first-child { margin-top: 0; }
.article-content .faq-a > p:last-child { margin-bottom: 0 !important; }
.article-content .faq-a ul, .article-content .faq-a ol { margin-bottom: 0 !important; }

@media (max-width: 640px) {
  .article-content .faq-q { font-size: 15px; padding: 16px 18px !important; }
  .article-content .faq-a { padding: 0 18px 18px; font-size: 15px; }
}

/* ============================================================
   Blog: breadcrumbs jak na lekarzu (pełna szerokość, biały pas)
   ============================================================ */
.pr-breadcrumbs-top {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.pr-breadcrumbs-inner {
  max-width: calc(var(--max) + 2*var(--px));
  margin: 0 auto;
  padding: 10px var(--px);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slate);
  flex-wrap: wrap;
}
.pr-breadcrumbs-inner a {
  color: var(--slate);
  text-decoration: none;
  transition: color .2s;
}
.pr-breadcrumbs-inner a:hover { color: var(--mag); }
.pr-breadcrumbs-inner i { font-size: 13px; opacity: .5; }
.pr-breadcrumbs-inner strong {
  color: var(--mag);
  font-weight: 600;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   TOC — ładniejszy (subtelna ramka, większe spacing, hover lift)
   ============================================================ */
.toc-box {
  background: var(--white);
  border-radius: 14px;
  padding: 20px 18px 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mag);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-title i { color: var(--mag); font-size: 15px; }

.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--slate);
  text-decoration: none;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: all .2s;
}
.toc-list a .toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mag-w, #fef4fa);
  color: var(--mag);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  transition: all .2s;
}
.toc-list a .toc-text {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.4;
}
.toc-list a:hover {
  background: var(--mag-w, #fef4fa);
  color: var(--mag);
  border-left-color: rgba(223,59,163,0.3);
  transform: translateX(2px);
}
.toc-list a:hover .toc-num { background: var(--mag); color: var(--white); }
.toc-list a.active {
  background: var(--mag-w, #fef4fa);
  color: var(--mag);
  border-left-color: var(--mag);
  font-weight: 600;
}
.toc-list a.active .toc-num { background: var(--mag); color: var(--white); }
.toc-list a.is-sub { padding-left: 20px; font-size: 12.5px; color: var(--gray); }

/* ════════════════════════════════════════════════════════════
   Sekcja "Opinie pacjentek" — 1:1 z homepage (Trustmate widget).
   Pod sekcją "Przeczytaj również" na single blog.
═════════════════════════════════════════════════════════════ */
.sec.testi {
  background: var(--blush);
  padding: clamp(48px, 6vw, 80px) var(--px);
}
.sec.testi .sec-head {
  margin-bottom: clamp(32px, 4vw, 52px);
  max-width: var(--max);
  margin-inline: auto;
}
.sec.testi .sec-head.ctr { text-align: center; }
.sec.testi .slbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mag);
  margin-bottom: 12px;
}
.sec.testi .stitle {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.sec.testi .stitle em { font-style: italic; }
.sec.testi .stitle .hl { color: var(--mag); }
.sec.testi .sec-content {
  max-width: var(--max);
  margin: 0 auto;
}
.sec.testi .testi-trustmate {
  min-height: 240px;
  max-width: 100%;
  overflow: hidden;
}
.sec.testi .testi-trustmate > div,
.sec.testi .testi-trustmate iframe {
  max-width: 100% !important;
  width: 100% !important;
}


/* ── Medical disclaimer (YMYL/E-E-A-T) ────────────────────────── */
.medical-disclaimer {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  margin: 40px 0 32px;
  padding: 20px 22px;
  background: linear-gradient(135deg, #fff5fb 0%, #fef9fb 100%);
  border: 1px solid rgba(223, 59, 163, 0.18);
  border-left: 4px solid var(--mag, #DF3BA3);
  border-radius: 12px;
  font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
}
.medical-disclaimer .md-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mag, #DF3BA3);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.medical-disclaimer .md-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a3a44;
}
.medical-disclaimer .md-text strong {
  color: var(--mag, #DF3BA3);
  font-weight: 700;
  margin-right: 4px;
}
.medical-disclaimer .md-text a {
  color: var(--mag, #DF3BA3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.medical-disclaimer .md-text a:hover { color: #C1268A; }
.medical-disclaimer .md-updated {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #8a7682;
  font-style: italic;
}
@media (max-width: 640px) {
  .medical-disclaimer { padding: 16px; gap: 12px; grid-template-columns: 36px 1fr; }
  .medical-disclaimer .md-icon { width: 36px; height: 36px; font-size: 18px; }
}