/* ===========================================================================
   CE-44 · Treść wpisu ze spisem treści (post body with a table of contents)
   Root:     div.ce-post-body (in .lf-wrap) – the long-form text of an
             Insights post, with its table of contents, sharing and author
   Parts:    __grid (≥ 1100 px two columns: __side on the left, __prose in
             the right half – the text column of the case story CE-34),
             __side / __side-in (sticky under the header: __toc and
             __share), __toc (details; __toc-head = summary „Spis treści”,
             __toc-list ol with a progress rail, __toc-link with __toc-no
             „01”…; .is-current + aria-current on the section being read),
             __prose (the text): __summary (the box „W skrócie”), __h2
             (with an id – the sections of the list), __h3, p, ul / ol,
             __quote (figure: quote mark, blockquote, figcaption), __figure
             (__frame with the reveal masks __mask / __mask-in and __img,
             figcaption), __table-wrap (figure with __table and figcaption),
             __foot (__share again and __author: __author-photo, __author-
             name, __author-role, __author-bio)
   Variants: none
   Mechanics: ce/CE-44-post-body.js –
             · table of contents: the current section is the last H2 whose
               top has passed 30% of the window (below the header); its link
               gets .is-current and aria-current="location" (a 4 px dot comes
               in, the text darkens, .3 s); the rail beside the list fills
               with the share of the text already read (--read, scaleY). On
               scroll, resize and load, without rAF. A click on a link marks
               it at once; the scroll itself is native (smooth, the kit's
               scroll-margin under the header).
             · ≥ 1100 px the list is always open and sticky; below that it is
               a closed disclosure above the text („Spis treści”, chevron).
             · „Kopiuj link” copies the address (the Clipboard API, a hidden
               textarea as the fallback) and says „Link skopiowany” for 2.4 s
               (role=status); LinkedIn is a plain share link (a new tab).
             site.js: the H2s rise out of their masks (data-reveal-text=
             "rise"), the box, the quote, the table and the foot rise in
             (data-appear), the labels code in. The figure uncovers as the
             CE-27 cards (data-appear on __frame gives .is-in: masks −100% /
             +100% → 0, picture 1.2 → 1, box .95 → 1, .7 s power2.out) and
             drifts with the scroll (data-parallax="drift", the script of
             CE-32). Reduced motion: nothing moves; the rail and the current
             link still follow the reading.
   Layout:   hi-fi on the kit: text clamp 17–19 px TT Hoves Pro (line 1.7,
             #1D1D1E), 1 em between paragraphs; H2 clamp 26–36 px Expanded
             Regular (line 1.2, −.03em) clamp 56–88 px above; H3 19–22 px
             Expanded Medium; lists with an en dash or a two-digit number in
             Expanded #778181; quote clamp 22–30 px Expanded Regular; table
             15 px with 1 px #E9E9E9 lines (≤ 640 px each row turns into a
             block with its labels); the box #F4F4F4. ToC 14 px Expanded
             Regular #778181, 300 px at most, sticky 40 px under the header.
   Base:     blog/co-to-jest-wordpress/#tresc · registry: ce-registry.js → CE-44
   =========================================================================== */

.ce-post-body { --prose: clamp(1.0625rem, 1.3vw, 1.1875rem); padding-top: clamp(72px, 8vw, 128px); }
/* the last section of a page (polityka-prywatnosci.html): a gap above the footer */
.ce-post-body:last-child { padding-bottom: clamp(72px, 8vw, 128px); }

.ce-post-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.ce-post-body__prose { max-width: 720px; }

@media (min-width: 1100px) {
  .ce-post-body__grid {
    grid-template-columns: minmax(0, 1fr) 49.12%;
    gap: 0;
  }
  .ce-post-body__prose { max-width: none; }
  .ce-post-body__side-in {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    max-width: 300px;
  }
}

/* ---- table of contents ------------------------------------------------------- */
.ce-post-body__toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}
.ce-post-body__toc-head::-webkit-details-marker { display: none; }
.ce-post-body__toc-head::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.2px solid var(--ui-ink);
  border-bottom: 1.2px solid var(--ui-ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease-out-quart);
}
.ce-post-body__toc[open] > .ce-post-body__toc-head::after { transform: translateY(2px) rotate(-135deg); }

@media (max-width: 1099px) {
  .ce-post-body__toc {
    max-width: 720px;
    border-block: 1px solid #e9e9e9;
  }
  .ce-post-body__toc-head { min-height: 56px; }
  .ce-post-body__toc[open] .ce-post-body__toc-list { margin-bottom: 20px; }
  .ce-post-body__side .ce-post-body__share { display: none; }
}
@media (min-width: 1100px) {
  .ce-post-body__toc-head { pointer-events: none; cursor: default; }
  .ce-post-body__toc-head::after { display: none; }
}

.ce-post-body__toc-list {
  --read: 0;
  position: relative;
  display: grid;
  gap: 2px;
  margin-top: 16px;
  padding-left: 20px;
}
.ce-post-body__toc-list::before,
.ce-post-body__toc-list::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 1px;
  background: #e1e1e1;
}
.ce-post-body__toc-list::after {
  background: var(--ui-ink);
  transform-origin: top center;
  transform: scaleY(var(--read));
}
.ce-post-body__toc-link {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 6px 0;
  font-family: var(--font-heading);
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-muted);
  text-decoration: none;
  transition: color .3s ease;
}
.ce-post-body__toc-no { font-variant-numeric: tabular-nums; color: rgba(119, 129, 129, .6); }
.ce-post-body__toc-link::before {
  content: "";
  position: absolute;
  top: calc(6px + .7em - 2px);
  left: -22px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--ui-ink);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease, transform .3s var(--ease-out-quart);
}
.ce-post-body__toc-link:hover,
.ce-post-body__toc-link.is-current { color: var(--ui-ink); }
.ce-post-body__toc-link.is-current::before { opacity: 1; transform: none; }
.ce-post-body__toc-link:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }

/* ---- share --------------------------------------------------------------------- */
.ce-post-body__side .ce-post-body__share { margin-top: 48px; }
.ce-post-body__share-label {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.ce-post-body__share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ce-post-body__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px 1px;
  border: 1px solid rgba(29, 29, 30, .12);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-ink);
  font-family: var(--font-heading);
  font-size: .875rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease;
}
.ce-post-body__share-btn:hover { border-color: rgba(29, 29, 30, .32); background: rgba(29, 29, 30, .03); }
.ce-post-body__share-btn:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
.ce-post-body__share-btn svg { flex: none; width: 14px; height: 14px; }
.ce-post-body__share-status {
  min-height: 1.4em;
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--ui-muted);
}

/* ---- prose ---------------------------------------------------------------------- */
.ce-post-body__prose {
  font-size: var(--prose);
  line-height: 1.7;
  color: var(--ui-ink);
}
.ce-post-body__prose > * + * { margin-top: 1em; }
.ce-post-body__prose p { max-width: 42em; }
.ce-post-body__prose a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29, 29, 30, .3);
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}
.ce-post-body__prose a:not([class]):hover { text-decoration-color: currentColor; }

.ce-post-body__prose > .ce-post-body__h2 {
  margin-top: clamp(56px, 5.5vw, 88px);
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 2.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ce-post-body__prose > .ce-post-body__h2 + * { margin-top: 24px; }
.ce-post-body__prose > .ce-post-body__h3 {
  margin-top: clamp(36px, 3.3vw, 48px);
  font-family: var(--font-heading);
  font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.ce-post-body__prose > .ce-post-body__h3 + * { margin-top: 12px; }

.ce-post-body__prose ul > li,
.ce-post-body__prose ol > li { position: relative; padding-left: 2.2em; }
.ce-post-body__prose ul > li + li,
.ce-post-body__prose ol > li + li { margin-top: .5em; }
.ce-post-body__prose ul > li::before {
  content: "\2013";
  position: absolute;
  left: .4em;
  color: var(--ui-muted);
}
.ce-post-body__prose ol { counter-reset: post-ol; }
.ce-post-body__prose ol > li { counter-increment: post-ol; }
.ce-post-body__prose ol > li::before {
  content: counter(post-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .2em;
  font-family: var(--font-heading);
  font-size: .8em;
  font-weight: 500;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}

/* the box „W skrócie” */
.ce-post-body__summary {
  padding: clamp(24px, 2.8vw, 40px);
  background: var(--ui-soft);
}
.ce-post-body__summary .lf-eyebrow { margin-bottom: 20px; }
.ce-post-body__summary ul > li + li { margin-top: .75em; }
.ce-post-body__summary li { font-size: .95em; line-height: 1.6; }

/* the quote */
.ce-post-body__prose > .ce-post-body__quote { margin-block: clamp(48px, 4.5vw, 72px); }
.ce-post-body__quote-mark { width: 24px; height: auto; }
.ce-post-body__quote blockquote {
  margin-top: 24px;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ce-post-body__quote figcaption {
  margin-top: 20px;
  font-size: .875rem;
  color: var(--ui-muted);
}

/* the figure */
.ce-post-body__prose > .ce-post-body__figure { margin-block: clamp(40px, 4vw, 64px); }
.ce-post-body__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--box);
}
.ce-post-body__mask,
.ce-post-body__mask-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ce-post-body__img {
  position: absolute;
  top: calc(50% - var(--par-over, 1) * 50%);
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(var(--par-over, 1) * 100%);
  object-fit: cover;
}
.ce-post-body__figure figcaption,
.ce-post-body__table-wrap figcaption {
  margin-top: 14px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ui-muted);
}

/* the table */
.ce-post-body__prose > .ce-post-body__table-wrap { margin-block: clamp(32px, 3.3vw, 48px); }
.ce-post-body__table {
  width: 100%;
  font-size: .9375rem;
  line-height: 1.45;
}
.ce-post-body__table th,
.ce-post-body__table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid #e9e9e9;
  text-align: left;
  vertical-align: top;
}
.ce-post-body__table thead th {
  padding-top: 0;
  border-bottom-color: var(--ui-ink);
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ui-muted);
}
.ce-post-body__table tbody th { font-weight: 500; }
.ce-post-body__table td:nth-child(3),
.ce-post-body__table td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ce-post-body__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ce-post-body__table,
  .ce-post-body__table tbody,
  .ce-post-body__table tr,
  .ce-post-body__table th,
  .ce-post-body__table td { display: block; }
  .ce-post-body__table tr { padding-block: 14px; border-bottom: 1px solid #e9e9e9; }
  .ce-post-body__table tr:first-child { border-top: 1px solid var(--ui-ink); }
  .ce-post-body__table th,
  .ce-post-body__table td { padding: 2px 0; border: 0; }
  .ce-post-body__table tbody th { margin-bottom: 6px; font-family: var(--font-heading); }
  .ce-post-body__table td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; white-space: normal !important; }
  .ce-post-body__table td::before {
    content: attr(data-label);
    font-family: var(--font-heading);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .015em;
    line-height: 2;
    text-transform: uppercase;
    color: var(--ui-muted);
  }
}

/* ---- foot: share and author ------------------------------------------------------ */
.ce-post-body__prose > .ce-post-body__foot {
  margin-top: clamp(64px, 6vw, 96px);
  padding-top: 32px;
  border-top: 1px solid #e9e9e9;
}
.ce-post-body__author {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.ce-post-body__author-photo {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--box);
}
.ce-post-body__author-photo img {
  position: absolute;
  top: 0;
  left: -84%;
  width: 218%;
  max-width: none;
  height: auto;
}
.ce-post-body__author-name {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.3;
}
.ce-post-body__author-role { font-size: .875rem; color: var(--ui-muted); }
.ce-post-body__author-bio { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: rgba(29, 29, 30, .75); }
@media (max-width: 640px) {
  .ce-post-body__author { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .ce-post-body__author-photo { width: 64px; height: 64px; }
}

/* ---- the figure's reveal ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .cr-js .ce-post-body__frame[data-appear] {
    background: transparent;          /* no grey frame before and during the reveal (as CE-27, 27.09) */
    opacity: 1;
    transform: scale(.95);
    transition: transform .7s var(--ease-out-power2);
  }
  .cr-js .ce-post-body__frame .ce-post-body__mask { transform: translateY(-100%); }
  .cr-js .ce-post-body__frame .ce-post-body__mask-in { transform: translateY(100%); }
  .cr-js .ce-post-body__frame .ce-post-body__img { scale: 1.2; }
  .cr-js .ce-post-body__frame :is(.ce-post-body__mask, .ce-post-body__mask-in) { transition: transform .7s var(--ease-out-power2); }
  .cr-js .ce-post-body__frame .ce-post-body__img { transition: scale .7s var(--ease-out-power2); }
  .cr-js .ce-post-body__frame.is-in,
  .cr-js .ce-post-body__frame.is-in :is(.ce-post-body__mask, .ce-post-body__mask-in) { transform: none; }
  .cr-js .ce-post-body__frame.is-in .ce-post-body__img { scale: 1; }
}