/* Wpis bloga: układ, spis treści i bloki (lead, treść full screen, tabela / wykres). */

/* --page-w = szerokość strony bez paska przewijania (ustawiana w article-toc.js) */
:root { --page-w: calc(100vw - var(--scrollbar-w, 0px)); }
.single-post main { overflow-x: clip; }
.single-post .page-title-lead:empty { display: none; }

/* Układ: spis treści w lewej kolumnie, treść w prawej; tła sekcji mogą wyjść na całą szerokość */
.article-layout { padding-top: var(--space-48); }
.article-body > p:empty { display: none; }
.article-body h2[id] { scroll-margin-top: 120px; }
@media (min-width: 992px) {
  .article-toc { grid-row: 1; grid-column: 1; z-index: 3; }
  .article-body { grid-row: 1; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 0; align-content: start; }
  .article-body > * { grid-column: 2; min-width: 0; }
  .article-body > .article-fullscreen,
  .article-body > .article-data.is-wide { grid-column: 1 / -1; }
}

/* Spis treści */
.article-toc {
  align-self: start;
  max-height: calc(100svh - 150px);
  overflow-y: auto;
  padding: var(--space-24);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-md);
}
.article-toc-title { display: flex; align-items: center; justify-content: space-between; margin: 0; list-style: none; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.article-toc-title::-webkit-details-marker { display: none; }
.article-toc details[open] .article-toc-title { margin-bottom: var(--space-12); }
@media (min-width: 992px) {
  .article-toc-title { cursor: default; }
}
@media (max-width: 991px) {
  .article-toc-title { cursor: pointer; min-height: 24px; }
  .article-toc-title::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s; }
  .article-toc details[open] .article-toc-title::after { transform: translateY(2px) rotate(-135deg); }
}
.article-toc nav { display: flex; flex-direction: column; }
.article-toc a {
  padding: var(--space-8) 0 var(--space-8) var(--space-16);
  border-bottom: 0;
  border-left: 2px solid var(--gray-line);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--gray);
  transition: color 0.25s, border-color 0.25s;
}
.article-toc a:hover { color: var(--dark); }
.article-toc a.is-active { color: var(--dark); border-left-color: var(--red); }

/* Lead */
.article-lead { margin-bottom: var(--space-48); }
.article-lead-text p { margin: 0 0 var(--space-20); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--dark); }
.article-lead-text p:last-child { margin-bottom: 0; }
.article-lead-text strong { font-weight: inherit; color: var(--emphasis-color); }
.article-lead-summary { margin-top: var(--space-32); padding: var(--space-32); background: var(--paper); border-left: 3px solid var(--red); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-lead-summary:first-child { margin-top: 0; }
.article-lead-summary-title { margin: 0 0 var(--space-12) !important; font-weight: 600; color: var(--dark) !important; }
.article-lead-summary ul { margin: 0; }
.article-lead-summary li:last-child { margin-bottom: 0; }

/* Treść full screen: tło na całą szerokość, tekst w kolumnie wpisu */
section.article-fullscreen {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: clip;
  margin-block: var(--space-48);
  margin-inline: calc(50% - var(--page-w) / 2);
  padding-block: var(--section-y-compact);
  background: var(--paper);
  color: var(--dark);
}
section.article-fullscreen:has(+ .article-fullscreen) { margin-bottom: 0; }
section.article-fullscreen + .article-fullscreen { margin-top: 0; }
.article-fullscreen.is-paper + .article-fullscreen.is-paper { box-shadow: inset 0 1px 0 var(--gray-line); }
.article-fullscreen.is-dark,
.article-fullscreen.has-image { background: var(--list-panel-background); color: var(--paper); }
.article-fullscreen.is-red { background: var(--red); color: var(--dark); }
.article-fullscreen.is-height-screen { min-height: 100svh; }
.article-fullscreen-media { position: absolute; inset: 0; z-index: -1; }
.article-fullscreen-media:empty { display: none; }
.article-fullscreen-media img { width: 100%; height: 100%; object-fit: cover; }
.article-fullscreen-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--dark) 72%, transparent); }
.article-fullscreen-inner { width: 100%; }
@media (min-width: 992px) {
  .article-fullscreen-inner { display: grid; grid-template-columns: 0.7fr 1.5fr; column-gap: var(--layout-gap); }
  .article-fullscreen-content { grid-column: 2; }
}
.article-fullscreen.is-align-center .article-fullscreen-content { text-align: center; }
.article-fullscreen.is-align-center :is(ul, ol) { text-align: left; }
.article-fullscreen-content > :first-child { margin-top: 0; }
.article-fullscreen-content > :last-child { margin-bottom: 0; }
.article-fullscreen h2 { margin: 0 0 var(--space-24); font-size: var(--fs-h3); line-height: var(--lh-heading); color: inherit; }
.article-fullscreen h3 { margin: var(--space-32) 0 var(--space-16); font-size: var(--fs-h4); line-height: var(--lh-heading); color: inherit; }
.article-fullscreen :is(ul, ol) { margin-bottom: var(--space-20); }
.article-fullscreen.is-dark :is(p, li),
.article-fullscreen.has-image :is(p, li) { color: color-mix(in srgb, var(--paper) 74%, transparent); }
.article-fullscreen.is-dark :is(h2, h3) strong,
.article-fullscreen.has-image :is(h2, h3) strong { color: var(--gray-light); }
.article-fullscreen.is-red :is(p, li) { color: var(--dark); }
.article-fullscreen.is-red :is(h2, h3) strong { color: var(--paper); }
.article-fullscreen.is-red li::marker { color: var(--dark); }
.article-fullscreen a:not(.button) { color: inherit; }
.article-fullscreen .button { margin-top: var(--space-16); }
.article-fullscreen.is-red .button { --btn-bg: var(--dark); --btn-fg: var(--red); --btn-wipe: var(--white); --btn-fg-hover: var(--dark); --btn-icon-hover: var(--red); }

/* Tabela / wykres */
.article-data { margin: var(--space-48) 0; --plot-h: clamp(220px, 26vw, 320px); }
.article-data.is-wide {
  margin-inline: calc(50% - var(--page-w) / 2);
  padding: var(--section-y-compact) max(var(--gutter), calc((var(--page-w) - var(--container)) / 2 + var(--gutter)));
  background: var(--paper);
}
@media (min-width: 992px) {
  .article-data.is-wide { display: grid; grid-template-columns: 0.7fr 1.5fr; column-gap: var(--layout-gap); }
  .article-data.is-wide > * { grid-column: 2; }
}
.article-fullscreen + .article-data.is-wide { margin-top: 0; }
.article-data-title { margin: 0 0 var(--space-32); font-size: var(--fs-h4); line-height: var(--lh-heading); }
.article-data-source { margin-top: var(--space-16); font-size: var(--fs-caption); color: var(--gray); }
.article-block-empty { padding: var(--space-24); border: 1px dashed var(--gray-light); border-radius: var(--radius-md); color: var(--gray); }

.data-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.data-table-wrap:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.data-table th,
.data-table td { padding: var(--space-12) var(--space-16); text-align: left; border-bottom: 1px solid var(--gray-line); vertical-align: top; }
.data-table th:first-child,
.data-table td:first-child { padding-left: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }
.data-table thead th { font-weight: 500; color: var(--gray); border-bottom-color: var(--dark); white-space: nowrap; }
.data-table tbody th { font-weight: 500; color: var(--dark); }
.data-table td { color: var(--dark); }
.data-table .is-num,
.data-table thead th:not(:first-child) { text-align: right; }
.data-table tr.is-highlight > * { background: var(--red-tint); font-weight: 600; }
.data-table tr.is-highlight > :first-child { padding-left: var(--space-12); }
.data-table tr.is-highlight > :last-child { padding-right: var(--space-12); }

.is-s1 { --series-color: var(--red); }
.is-s2 { --series-color: var(--dark); }
.is-s3 { --series-color: var(--gray-warm); }
.is-s4 { --series-color: var(--gray-light); }

.data-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-16); }
.data-axis { position: relative; width: calc(var(--axis-ch, 3) * 0.62em + 2px); height: var(--plot-h); margin-top: var(--space-24); font-size: var(--fs-caption); color: var(--gray); font-variant-numeric: tabular-nums; }
.data-axis span { position: absolute; right: 0; bottom: var(--p); transform: translateY(50%); line-height: 1; white-space: nowrap; }
.data-area { overflow-x: auto; overscroll-behavior-x: contain; padding-top: var(--space-24); }
.data-scroll { min-width: calc(var(--groups) * (var(--series) * 8px + 6px)); }
.data-canvas { position: relative; height: var(--plot-h); background-image: linear-gradient(var(--gray-line) 1px, transparent 1px); background-size: 100% 25%; border-bottom: 1px solid var(--dark); }
.data-columns { display: flex; align-items: flex-end; height: 100%; }
.data-group { flex: 1 1 0; display: flex; justify-content: center; align-items: flex-end; gap: 3px; height: 100%; padding-inline: clamp(3px, 0.6vw, 12px); }
.data-group .data-bar { position: relative; flex: 0 1 44px; height: var(--v, 0%); border-radius: 4px 4px 0 0; background: var(--series-color); transform-origin: bottom; }
.data-group .data-bar.is-empty { background: none; }
.data-group .data-value { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); font-size: var(--fs-caption); line-height: 1; color: var(--dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-xlabels { display: flex; }
.data-xlabels span { flex: 1 1 0; min-width: 0; padding: var(--space-12) 2px 0; text-align: center; font-size: var(--fs-caption); line-height: 1.3; color: var(--gray); font-variant-numeric: tabular-nums; }
.data-xlabels.is-dense span { display: flex; justify-content: center; white-space: nowrap; }
.data-xlabels.is-dense span:first-child { justify-content: flex-start; }
.data-xlabels.is-dense span:last-child { justify-content: flex-end; }
.data-xlabels.is-dense span:nth-child(even) { visibility: hidden; }
.data-xlabels .is-highlight,
.data-group.is-highlight .data-value { color: var(--dark); font-weight: 600; }
.data-group:hover .data-bar { filter: brightness(0.92); }

/* Wykres liniowy */
.is-line .data-scroll { padding-inline: var(--space-8); }
.data-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.data-line { stroke: var(--series-color); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.data-dot { position: absolute; width: 10px; height: 10px; border: 2px solid var(--white); border-radius: 50%; background: var(--series-color); transform: translate(-50%, 50%); }
.data-xlabels.is-points { position: relative; height: 2.6em; }
.data-xlabels.is-points span { position: absolute; padding-inline: 0; transform: translateX(-50%); white-space: nowrap; }
.data-xlabels.is-points span:first-child:not(:only-child) { transform: none; }
.data-xlabels.is-points span:last-child:not(:only-child) { transform: translateX(-100%); }

/* Wykres słupkowy poziomy */
.data-hbars { display: grid; gap: var(--space-16); }
.data-hrow { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.data-hrow .data-label { font-size: var(--fs-small); line-height: 1.3; color: var(--dark); }
.data-hrow.is-highlight .data-label,
.data-hrow.is-highlight .data-value { font-weight: 600; }
.data-hrow-bars { display: grid; gap: 4px; }
.data-hbar { display: flex; align-items: center; gap: var(--space-8); }
.data-hbar .data-bar { width: calc(var(--v, 0%) * 0.85); min-width: 2px; height: 18px; border-radius: 0 4px 4px 0; background: var(--series-color); transform-origin: left; }
.data-hbar .data-value { font-size: var(--fs-small); color: var(--dark); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Legenda i rozwijana tabela pod wykresem */
.data-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-24); margin-top: var(--space-24); }
.data-legend { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: 0 !important; padding: 0 !important; list-style: none; }
.data-legend li { display: flex; align-items: center; gap: var(--space-8); margin: 0 !important; font-size: var(--fs-small); color: var(--dark); }
.data-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--series-color); }
.data-details { margin-left: auto; }
.data-details[open] { flex-basis: 100%; margin-left: 0; }
.data-details summary { display: inline-flex; align-items: center; gap: var(--space-8); cursor: pointer; list-style: none; font-size: var(--fs-small); color: var(--gray); transition: color 0.25s; }
.data-details summary::-webkit-details-marker { display: none; }
.data-details summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s; }
.data-details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.data-details summary:hover { color: var(--red); }
.data-details[open] summary { margin-bottom: var(--space-16); }

/* Słupki rosną, gdy wykres wchodzi w widok (klasa is-animated z entrances.js) */
.data-bar { transition: transform 0.9s var(--ease-out), filter 0.25s; }
.js .article-data.fade-up:not(.is-animated) .data-group .data-bar { transform: scaleY(0); }
.js .article-data.fade-up:not(.is-animated) .data-hbar .data-bar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .data-bar { transition: none; }
}

@media (max-width: 991px) {
  .article-layout { gap: var(--space-32); }
  .article-toc { max-height: none; }
}
@media (max-width: 575px) {
  .article-toc { padding: var(--space-16) var(--space-20); }
  .article-lead-summary { padding: var(--space-24); }
  .data-hrow { grid-template-columns: 1fr; gap: var(--space-8); }
  .data-plot { column-gap: var(--space-8); }
  .data-xlabels.is-dense span:nth-child(even) { visibility: visible; }
  .data-xlabels.is-dense span:not(:nth-child(4n+1)) { visibility: hidden; }
  .data-table th,
  .data-table td { padding: var(--space-8) var(--space-12); }
}

/* Podgląd w edytorze: bez wychodzenia poza kanwę i bez animacji */
[data-theme-block-preview].article-fullscreen,
[data-theme-block-preview].article-data.is-wide { display: block; margin-inline: 0; padding-inline: 24px; }
[data-theme-block-preview] .article-fullscreen-inner { display: block; padding-inline: 0; }
[data-theme-block-preview].article-fullscreen.is-height-screen { min-height: 560px; }
[data-theme-block-preview] .data-bar { transform: none !important; }