/* pl-artykul.css - warstwa artykulu systemu projektowego PerfectLift: szablony zabieg, seo, miejski-ads, nowy-miejski,
   taksonomy-article i pracownik. Klasy z szablonow i z tresci w bazie (kody {summary}, {warning}, {trivia},
   {find-out-more}, akapity p.blockmarker) - wyglad wylacznie z tokenow pl-tokens.css, warianty jak pl-note z pl-ds.css.
   Ladowany po style.css i pl-ds.css (include/head.php), wiec przy rownej szczegolowosci wygrywa ze style.css. */

/* ---------- naglowek artykulu ---------- */
.heading-section h1,
.heading-section .h1 { color: var(--pl-text); font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 12px 0 8px; }
/* tytul z meta_title pod duzym tytulem (zabieg, seo) */
.heading-section .h1 + h1.h2 { color: var(--pl-text-secondary); font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1.4; margin: 0 0 8px; }
/* tytul sekcji artykulu na LP */
.heading-section .article-meta-title { color: var(--pl-text); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
@media (min-width: 992px) {
  .heading-section h1,
  .heading-section .h1 { font-size: 40px; }
  .heading-section .article-meta-title { font-size: 30px; }
}

/* ---------- tresc ---------- */
.blog-text .lead { color: var(--pl-text-secondary); font-size: 18px; font-weight: 400; line-height: 1.5; margin: 32px 0 24px; text-align: left; }
.blog-text-content > p,
.blog-text-content > ul,
.blog-text-content > ol,
.blog-text-content li,
.blog-text-content td,
.blog-text-content th { color: var(--pl-text); font-size: 16px; line-height: 1.65; }
.blog-text-content > ul,
.blog-text-content > ol { padding-left: 22px; }
.blog-text-content li + li { margin-top: 6px; }
.blog-text-content h2 { color: var(--pl-text); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 40px 0 12px; }
.blog-text-content h3 { color: var(--pl-text); font-size: 20px; font-weight: 700; line-height: 1.3; margin: 28px 0 8px; }
.blog-text-content h4,
.blog-text-content h5,
.blog-text-content h6 { color: var(--pl-text); font-size: 18px; font-weight: 700; line-height: 1.35; margin: 24px 0 8px; }
@media (min-width: 992px) {
  .blog-text .lead { font-size: 20px; }
  .blog-text-content > p,
  .blog-text-content > ul,
  .blog-text-content > ol,
  .blog-text-content li { font-size: 18px; }
  .blog-text-content h2 { font-size: 30px; }
}

/* linki w tresci: kolor linku systemu. Wczesniej var(--color-primary-dark), ktorej nie ma w style.css - linki byly czarne
   z kropkowanym podkresleniem. Przyciski i linki systemu (pl-btn, pl-link) maja wlasny wyglad. */
.blog-text-content a:not(.pl-btn):not(.pl-link):not(.pl-note__who-link),
.blog-text-toc a,
.toc-link { color: var(--pl-link); text-decoration: underline; text-decoration-color: currentColor; text-decoration-style: solid; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.blog-text-content a:not(.pl-btn):not(.pl-link):not(.pl-note__who-link):hover,
.blog-text-toc a:hover,
.toc-link:hover { color: var(--pl-link-hover); }

/* ---------- akapit wyrozniony i ramki z kodow w tresci (warianty pl-note) ---------- */
.blog-text-content .blockmarker { background: var(--pl-surface-muted); border-left: 4px solid var(--pl-brand); border-radius: 0 var(--pl-radius-md) var(--pl-radius-md) 0; padding: 16px 20px; }
.summary,
.warning,
.trivia,
.find-out-more { background: var(--pl-surface-muted); border: 0; border-left: 4px solid var(--pl-border-strong); border-radius: var(--pl-radius-md); color: var(--pl-text); font-size: 16px; line-height: 1.6; margin: 24px 0; padding: 16px 20px; position: relative; }
.summary { background: var(--pl-surface-subtle); border: 1px solid var(--pl-border); border-left: 4px solid var(--pl-brand); }
.summary::before { background: none; color: var(--pl-text-brand); content: "W skrócie"; display: block; font-weight: 700; left: auto; margin-bottom: 4px; padding: 0; position: static; top: auto; }
.warning { background: var(--pl-status-warn-bg); border-left-color: var(--pl-status-warn-accent); }
.trivia { background: var(--pl-surface-subtle); }
.find-out-more { background: var(--pl-surface); border: 1px solid var(--pl-border); border-left: 4px solid var(--pl-brand); }
.warning-title,
.trivia-title,
.find-out-more-title { align-items: center; color: var(--pl-text); display: flex; font-weight: 700; gap: 8px; margin-bottom: 4px; }
.warning-title { color: var(--pl-status-warn-text); }
.warning-title::before,
.trivia-title::before,
.find-out-more-title::before { flex: none; font-family: 'Material Symbols Outlined'; font-size: 22px; font-weight: 400; line-height: 1; }
.warning-title::before { content: "warning"; }
.trivia-title::before { color: var(--pl-text-secondary); content: "lightbulb"; }
.find-out-more-title::before { color: var(--pl-brand); content: "arrow_forward"; }
@media (min-width: 992px) {
  .summary, .warning, .trivia, .find-out-more { font-size: 18px; }
}

/* ---------- spis tresci ---------- */
.blog-text-toc { background: var(--pl-surface-subtle); border: 1px solid var(--pl-border); border-radius: var(--pl-radius-md); font-size: 16px; line-height: 1.6; margin: 24px 0; padding: 16px 20px; }
.blog-text-toc h4,
.blog-text-toc .toc-title { color: var(--pl-text); font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.blog-text-toc ul { margin: 0; padding-left: 20px; }
.blog-text-toc li + li { margin-top: 6px; }

/* ---------- zdjecie artykulu ---------- */
@media (max-width: 600px) {
  #main-photo { height: 300px; }
}

/* ---------- kafel w tresci (ramka marki: tlo malina 50, ramka malina 100, bez cienia) ---------- */
#kafel { background: var(--pl-surface-brand); border: 1px solid var(--pl-border-brand); border-radius: var(--pl-radius-md); box-shadow: none; margin: 24px 0; overflow: hidden; padding: 24px; position: relative; }
#kafel-title { color: var(--pl-text-brand); font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
#kafel-subtitle { color: var(--pl-text); font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 20px; }
.kafel-content { color: var(--pl-text); font-size: 16px; line-height: 1.6; margin-bottom: 12px; padding-left: 2rem; position: relative; width: 70%; }
.kafel-content::before { background: url("/static/favicon.png") center / contain no-repeat; content: ""; height: 1.1rem; left: 0; position: absolute; top: .3rem; width: 1.3rem; }
#kafel-gwarancja { background: var(--pl-surface); border-left: 4px solid var(--pl-brand); border-radius: 0 var(--pl-radius-sm) var(--pl-radius-sm) 0; color: var(--pl-text-brand); font-size: 16px; font-weight: 700; line-height: 1.4; margin-top: 20px; padding: 12px 16px; width: 60%; }
.kafel-image { bottom: 0; position: absolute; right: 0; width: 30%; z-index: 0; }
.kafel-button { margin-top: 16px; position: relative; z-index: 1; }
@media (max-width: 600px) {
  #kafel { padding: 20px; }
  .kafel-content,
  #kafel-gwarancja { width: auto; }
}

/* ---------- boczna kolumna: ramka z wezwaniem i Czytaj wiecej ---------- */
.blog-cta { background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-radius-md); box-shadow: var(--pl-shadow-1); padding: 20px; }
.blog-cta h4 { color: var(--pl-text); font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.blog-cta h5 { color: var(--pl-text-secondary); font-size: 16px; font-weight: 400; line-height: 1.4; margin-bottom: 16px; }
.sidebar-sticky { position: sticky; top: 480px; }
.sidebar-title { border-bottom: 2px solid var(--pl-brand); color: var(--pl-text); font-size: 18px; font-weight: 700; margin: 3vh 0 24px; padding-bottom: 8px; width: 100%; }
.article-thumbnail { aspect-ratio: 2 / 1; background-position: center; background-size: cover; border-radius: var(--pl-radius-md); max-width: 240px; width: 100%; }
.article-title-wrapper { max-width: 240px; text-align: left; }
.article-title-link { color: var(--pl-text); display: block; font-size: 16px; font-weight: 700; line-height: 1.4; margin: 12px 0 16px; text-decoration: none; }
.article-title-link:hover { color: var(--pl-link); text-decoration: underline; }

/* ---------- pasek postepu czytania (seo) ---------- */
#progress-bar-box { background: var(--pl-surface-brand); height: 4px; left: 0; position: fixed; top: 0; width: 100%; z-index: var(--pl-z-dialog); }
#progress-bar { background: var(--pl-brand); height: 100%; width: var(--scrollAmount, 0%); }

/* odstepy kolumny bocznej (ramka z wezwaniem przewija sie z trescia, Czytaj wiecej przykleja sie nizej) */
.spacer-50 { height: 50vh; }
.spacer-100 { height: 100vh; }

/* ramka Zdaniem lekarza: link do biogramu w kolorze opisu (w tresci artykulu linki maja kolor linku) */
.pl-note__who a.pl-note__who-link { color: inherit; text-decoration: none; }
.pl-note__who a.pl-note__who-link:hover { color: var(--pl-link); text-decoration: underline; }
.doctor-opinion-content { font-size: 16px; line-height: 1.6; }
@media (min-width: 992px) { .doctor-opinion-content { font-size: 18px; } }