/* ═══════════════════════════════════════════════════════════
   Blog → ujednolicenie ze stroną główną
   blog.css to oryginał 1:1 z lifemasters.pl. Wszystkie odstępstwa
   są tutaj, ponumerowane tak samo jak na liście zmian.
   ═══════════════════════════════════════════════════════════ */

/* 1. Wspólna nawigacja ze strony głównej (68px, fixed), stary .site-header usunięty.
      Pasek z hasłami (marquee) jest tylko na stronie głównej, więc na blogu nawigacja stoi na samej górze.
      Na jasnym tle nawigacja jest pełna, bo półprzezroczysta wyglądała na szarą */
.lm-unified { padding-top: 68px; }
.lm-unified #navbar { top: 0; background: rgba(9,7,26,.97); }
.lm-unified .nav-menu { max-height: calc(100svh - 68px); }
.lm-unified [id] { scroll-margin-top: 84px; }

/* 2. Typografia: Satoshi (jak strona główna) zamiast Inter/systemowego */
.lm-unified,
.lm-unified button { font-family: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.lm-unified .article-header h1 { font-weight: 900; letter-spacing: -.045em; }
.lm-unified .article-body > h2,
.lm-unified .article-section h3,
.lm-unified .cta-card h2,
.lm-unified .app-callout h3,
.lm-unified .summary-box h3,
.lm-unified .toc-title,
.lm-unified .section-kicker { font-weight: 800; }

/* 3. Akcent z palety strony głównej: #6B3FE7 / #9B72FF (było #7040f4 / #6d3cff) */
.lm-unified .article-header h1 span,
.lm-unified .cta-card h2 span,
.lm-unified .meta-author strong,
.lm-unified .meta-icon,
.lm-unified .eyebrow,
.lm-unified .toc-title span,
.lm-unified .toc li,
.lm-unified .toc a:hover,
.lm-unified .insight strong,
.lm-unified .doc-icon,
.lm-unified .text-version-card b,
.lm-unified .chevron,
.lm-unified .all-videos,
.lm-unified .breadcrumbs a:hover { color: #6B3FE7; }
.lm-unified .section-number {
  background: linear-gradient(135deg, #6B3FE7, #9B72FF);
  box-shadow: 0 8px 25px rgba(107,63,231,.3);
}
.lm-unified .author-avatar { background: linear-gradient(135deg, #9B72FF, #4A1FB8); color: #fff; }
.lm-unified .insight { border-left-color: #6B3FE7; }
.lm-unified .eyebrow { background: rgba(107,63,231,.08); border-color: rgba(107,63,231,.22); }

/* 4. Przyciski: pigułka jak .btn-primary na stronie głównej (było: prostokąt, CAPS) */
.lm-unified .button {
  min-height: 50px;
  padding: 0 28px;
  border-radius: 50px;
  background: #6B3FE7;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.lm-unified .button:hover {
  background: #9B72FF;
  box-shadow: 0 12px 40px rgba(107,63,231,.35);
}

/* 5. CTA: webowy onboarding „Dołącz do LifeMasters” — to samo CTA co w nawigacji i na stronie głównej.
      Układ karty: tekst + telefon obok siebie, przycisk na całą szerokość pod spodem */
.lm-unified .cta-card {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas: "copy phone" "stores stores";
  column-gap: 18px;
  row-gap: 22px;
  align-items: center;
  padding: 28px 24px 24px 26px;
}
.lm-unified .cta-card .cta-copy { grid-area: copy; }
.lm-unified .cta-card .phone-wrap { grid-area: phone; }
.lm-unified .cta-card h2 { font-size: 27px; margin: 12px 0 10px; }
.lm-unified .cta-card p { margin: 0; }
.lm-unified .cta-stores { grid-area: stores; position: relative; z-index: 2; }

/* 6. Zaokrąglenia kart jak na stronie głównej (--r: 20px, mniejsze: 16px) */
.lm-unified .video-card,
.lm-unified .cta-card,
.lm-unified .app-callout { border-radius: 20px; }
.lm-unified .toc,
.lm-unified .text-version-card,
.lm-unified .summary-box,
.lm-unified .related-card { border-radius: 16px; }

/* 7. Mockupy telefonu w stylu .phone ze strony głównej (ciemna ramka) + screeny z bieżącej wersji aplikacji.
      Telefon w karcie CTA pokazuje cały ekran i mieści się w swojej kolumnie (bez przycinania) */
.lm-unified .phone-glow { width: 140px; height: 210px; }
.lm-unified .phone-frame {
  width: 108px;
  height: auto;
  border: 5px solid #1A1235;
  border-radius: 24px;
  background: #1A1235;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(26,18,53,.28), 0 0 50px rgba(107,63,231,.2);
  transform: rotate(4deg);
}
.lm-unified .phone-frame img { height: auto; border-radius: 19px; }
.lm-unified .callout-phone {
  border: 6px solid #1A1235;
  border-bottom: 0;
  background: #1A1235;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 24px 48px rgba(26,18,53,.28), 0 0 60px rgba(107,63,231,.2);
}
.lm-unified .callout-phone img { border-radius: 26px 26px 0 0; }

/* 8. Polecane wpisy są klikalnymi linkami (w oryginale <article> bez linku) */
.lm-unified a.related-card { color: inherit; text-decoration: none; }

/* 9. Mobile: szerszy margines boczny (20px zamiast 12px), czytelniejszy tekst,
      kolejność: wstęp → CTA → artykuł → polecane (w oryginale 5 polecanych filmów było przed treścią) */
@media (max-width: 940px) {
  .lm-unified .sidebar { display: contents; }
  .lm-unified .cta-card { order: 2; }
  .lm-unified .article-body { order: 3; }
  .lm-unified .related-section { order: 4; }
  .lm-unified .cta-card { grid-template-columns: minmax(0, 1fr) 150px; }
  .lm-unified .cta-card .phone-frame { width: 128px; }
}
@media (max-width: 620px) {
  .lm-unified .shell { width: min(calc(100% - 40px), var(--shell)); }
  .lm-unified .breadcrumbs { font-size: 12px; }
  .lm-unified .breadcrumbs a[aria-label] { font-size: 16px; padding: 4px 2px 4px 0; }
  .lm-unified .article-header h1 { font-size: 34px; }
  .lm-unified .lead { font-size: 15px; }
  .lm-unified .article-intro,
  .lm-unified .article-section p { font-size: 15.5px; }
  .lm-unified .insight { font-size: 14px; }
  .lm-unified .app-callout p { font-size: 14px; }
  .lm-unified .toc li { font-size: 14px; }
  .lm-unified .toc ol { gap: 9px; }
  .lm-unified .meta-item small { font-size: 10px; }
  .lm-unified .meta-item strong { font-size: 12px; }
  .lm-unified .text-version-card--below-video strong { font-size: 13px; }
  .lm-unified .text-version-card--below-video small,
  .lm-unified .text-version-card--below-video b { font-size: 12px; }
  .lm-unified .cta-card { padding: 22px 16px 18px 18px; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 14px; row-gap: 18px; }
  .lm-unified .cta-card h2 { font-size: 23px; }
  .lm-unified .cta-card p { font-size: 13px; }
  .lm-unified .phone-glow { width: 110px; height: 170px; }
  .lm-unified .phone-frame { width: 88px; border-width: 4px; border-radius: 19px; }
  .lm-unified .phone-frame img { border-radius: 15px; }
  .lm-unified .app-callout .button { min-height: 46px; padding: 0 22px; font-size: 14px; }
  .lm-unified .callout-phone { border-width: 4px; border-radius: 22px 22px 0 0; }
  .lm-unified .callout-phone img { border-radius: 18px 18px 0 0; }
  .lm-unified .related-card h3 { font-size: 13px; }
  .lm-unified .all-videos { font-size: 13px; }
}

/* ─── Polityka prywatności (/polityka-prywatnosci/) — ten sam krój co artykuł, jedna kolumna ─── */
.lm-legal .legal-page { max-width: 820px; padding-top: 28px; padding-bottom: 72px; }
.lm-legal .article-header h1 span { color: #6B3FE7; }
.lm-legal .legal h2 { margin: 36px 0 12px; font-size: 24px; line-height: 1.2; }
.lm-legal .legal h3 { margin: 22px 0 8px; font-size: 18px; }
.lm-legal .legal ul { padding-left: 20px; }
.lm-legal .legal li { margin: 6px 0; }
.lm-legal .legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; display: block; overflow-x: auto; }
.lm-legal .legal th, .lm-legal .legal td { padding: 10px 12px; border: 1px solid rgba(20,16,40,.1); text-align: left; vertical-align: top; }
.lm-legal .legal th { background: rgba(107,63,231,.06); }
.lm-legal .legal code { font-size: .9em; background: rgba(107,63,231,.08); padding: 1px 5px; border-radius: 5px; }
.lm-legal .legal a { color: #6B3FE7; text-decoration: underline; text-underline-offset: 2px; }