/* artykuly.css - komponenty tresci artykulow.
   Wczytywany wylacznie przez strony z artykul={true} w Podstawa.astro.
   Wszystkie kolory i odstepy z tych samych zmiennych co reszta portalu,
   zeby motyw ciemny i tryb wysokiego kontrastu dzialaly bez wyjatkow.

   Reguly .art-fig-wide i .art-table sa wiernym przeniesieniem tego,
   co dotad siedzialo wpisane w pojedyncze strony. Reszta jest nowa. */

/* ---------- ILUSTRACJA ---------- */

.art-fig-wide{margin:2.5rem 0;padding:0}
.art-fig-wide img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.art-fig-wide figcaption{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-top:.75rem}
.art-fig-wide.is-portrait img{width:auto;max-width:440px;margin-left:auto;margin-right:auto;border:0;border-radius:0}

/* ---------- GALERIA ---------- */

.art-gallery{margin:2.5rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.75rem}
.art-gallery>img{flex:1 1 200px;min-width:0}
.art-gallery img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3;border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.art-gallery figcaption{flex:0 0 100%;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-top:.25rem}
.art-gallery.is-pair>img{flex-basis:280px}

/* ---------- TABELA ---------- */

.art-table-wrap{margin:1.5rem 0 2rem}
.art-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);color:var(--color-text-muted)}
.art-table caption{caption-side:top;text-align:left;font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:.6rem}
.art-table th,.art-table td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--color-border);vertical-align:top}
.art-table thead th{font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);border-bottom:2px solid var(--color-border)}
.art-table tbody tr:last-child td{border-bottom:0}
.art-table .art-td-kod{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-text);font-weight:600}
.art-table .art-td-kwota{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-text);font-weight:600;text-align:right}
.art-table .art-th-kwota{text-align:right}

@media(max-width:640px){
.art-table,.art-table tbody,.art-table tr,.art-table td{display:block;width:100%}
.art-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.art-table tr{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.75rem .9rem;margin-bottom:.75rem;background:var(--color-surface)}
.art-table td{border-bottom:0;padding:.2rem 0}
.art-table td.art-td-kwota{text-align:left}
.art-table td::before{content:attr(data-label) " ";font-size:var(--text-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);display:block;margin-bottom:.1rem}
.art-table td.art-td-kod::before{display:none}
.art-table td.art-td-kod{font-size:var(--text-xs);letter-spacing:.05em;color:var(--color-text-muted);font-weight:700}
}

/* ---------- RAMKA WYROZNIENIA ---------- */

.art-callout{margin:2rem 0;padding:1.25rem 1.5rem;background:var(--color-surface-off);border-radius:var(--radius-lg);border-left:3px solid var(--color-teal)}
.art-callout > :first-child{margin-top:0}
.art-callout > :last-child{margin-bottom:0}
.art-callout-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:400;color:var(--color-text);margin:0 0 .5rem}
.art-callout p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin:0 0 .6rem}
.art-callout.is-uwaga{border-left-color:var(--color-orange)}
.art-callout.is-uwaga .art-callout-title{color:var(--color-orange-text)}
.art-callout.is-krok{border-left-color:var(--color-primary)}

/* ---------- CYTAT ---------- */

.art-quote{margin:2.5rem 0;padding:0 0 0 1.5rem;border-left:3px solid var(--color-teal)}
.art-quote p{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;line-height:1.6;color:var(--color-text);margin:0}
.art-quote cite{display:block;font-family:var(--font-body);font-style:normal;font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.75rem}

/* ---------- WYKRES ---------- */
/* Wykresy rysujemy w SVG wpisanym w tresc, nie obrazkiem i nie biblioteka.
   Powod: SVG dziedziczy zmienne motywu, wiec dziala w trybie ciemnym
   i wysokim kontrascie, jest ostry na kazdym ekranie i da sie go opisac
   dla czytnika ekranu przez role="img" i <title>. Zadnej nowej zaleznosci. */

.art-chart{margin:2.5rem 0;padding:0}
.art-chart svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
.art-chart figcaption{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-top:.75rem}
.art-chart .os{stroke:var(--color-border);stroke-width:1}
.art-chart .siatka{stroke:var(--color-border);stroke-width:1;stroke-dasharray:2 4}
.art-chart .slupek{fill:var(--color-teal)}
.art-chart .slupek-alt{fill:var(--color-primary)}
.art-chart .linia{fill:none;stroke:var(--color-teal);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.art-chart .etykieta{fill:var(--color-text-muted);font-family:var(--font-body);font-size:11px}
.art-chart .wartosc{fill:var(--color-text);font-family:var(--font-body);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}

/* Tabela danych pod wykresem. Domyslnie ukryta wizualnie, dostepna
   dla czytnika ekranu. Rozwijana przyciskiem dla wszystkich pozostalych. */
.art-chart-dane{margin-top:1rem}
.art-chart-dane summary{font-size:var(--text-sm);color:var(--color-teal);cursor:pointer}
.art-chart-dane .art-table{margin-top:.75rem}

/* ---------- WIDEO ---------- */
/* Bez osadzania z zewnetrznej domeny przy wczytaniu strony.
   Podglad z wlasnego serwera, ramka dokladana po kliknieciu przez
   wideo-fasada.js. Chroni prywatnosc czytelnika i nie rozszerza CSP. */

.art-video{margin:2.5rem 0;padding:0}
.art-video-ramka{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-off)}
.art-video-ramka img{display:block;width:100%;height:100%;object-fit:cover}
.art-video-ramka iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:transparent;border:0;cursor:pointer;color:#fff}
.art-video-play:focus-visible{outline:3px solid var(--color-teal);outline-offset:-3px}
.art-video-play span{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--radius-full);background:rgba(0,0,0,.62);transition:var(--transition)}
.art-video-play:hover span{background:rgba(0,0,0,.8);transform:scale(1.06)}
.art-video-play svg{width:26px;height:26px;margin-left:3px}
.art-video figcaption{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;margin-top:.75rem}

@media(prefers-reduced-motion:reduce){
.art-video-play span,.art-video-play:hover span{transition:none;transform:none}
}

/* --- Typografia tresci artykulu generowanej z Markdowna ---
   Odwzorowuje wartosci uzywane dzis w atrybutach style w src/tresc/*.html.
   Zakres ograniczony do .art-tresc - kontener pojawi sie dopiero przy konwersji,
   wiec dopisanie tego bloku nie zmienia wygladu zadnej istniejacej strony. */
.art-tresc p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.8;margin-bottom:1rem}
.art-tresc a{color:var(--color-teal)}
.art-tresc h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--color-text);margin:2.5rem 0 1rem}
.art-tresc h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;color:var(--color-text);margin:2rem 0 .75rem}
.art-tresc ul,.art-tresc ol{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.9;margin-bottom:1.5rem;padding-left:1.25rem}