/*
 * marcinkowalski.net — główny arkusz stylów
 * Wspólny dla polskiej i angielskiej wersji strony.
 * Motyw jasny i ciemny zgodnie z ustawieniami systemu.
 */

/* 01. Ustawienia i kolory */

:root {
    color-scheme: light dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;

    --page-width: 1080px;
    --content-width: 820px;

    --image-width-small: 360px;
    --image-width: 640px;
    --image-width-large: 820px;

    --video-width-small: 360px;
    --video-width: 640px;
    --video-width-large: 820px;

    --background: #f7f7f8;
    --surface: #ffffff;
    --text: #1e2228;
    --muted: #5d6672;
    --border: #d9dde3;
    --accent: #175cd3;
    --accent-hover: #0f47a8;
    --warning: #806800;
    --note: #35689f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #111318;
        --surface: #191d24;
        --text: #edf0f5;
        --muted: #aeb7c4;
        --border: #343b47;
        --accent: #7db1ff;
        --accent-hover: #a7caff;
        --warning: #e0b800;
        --note: #8ab4e6;
    }
}

/* 02. Podstawy i dostępność */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--background);
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    color: var(--text);
    background: var(--background);
}

a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

a:hover {
    color: var(--accent-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* 03. Układ strony i nawigacja */

.site-shell {
    width: min(100% - 32px, var(--page-width));
    margin-inline: auto;

    /* vh jest fallbackiem dla przeglądarek bez obsługi dvh. */
    min-height: 100vh;
    min-height: 100dvh;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 84px;
    border-bottom: 1px solid var(--border);
}

.site-name {
    justify-self: start;
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.main-nav {
    justify-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
}

.main-nav a {
    color: var(--muted);
    font-size: 0.96rem;
    font-weight: 600;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text);
}

.main-nav a.active {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}

.language-switch {
    justify-self: end;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 36px;
    padding: 6px 10px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(16 24 40 / 5%);
}

.language-switch.is-hidden {
    visibility: hidden;
}

.language-switch:hover,
.language-switch:focus-visible {
    color: var(--text);
    border-color: var(--accent);
}

.language-switch--en .language-switch__symbol::before {
    content: "EN";
}

.language-switch--pl .language-switch__symbol::before {
    content: "PL";
}

.language-switch[data-tooltip]::after {
    position: absolute;
    z-index: 10;
    top: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: min(220px, calc(100vw - 32px));
    overflow-wrap: anywhere;
    padding: 7px 10px;
    color: var(--surface);
    background: var(--text);
    border-radius: 6px;
    content: attr(data-tooltip);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.language-switch[data-tooltip]:hover::after,
.language-switch[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* 04. Treść, typografia, kod i tabele */

main {
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 56px 0 72px;
}

main h1,
main h2,
main h3 {
    line-height: 1.25;
    letter-spacing: -0.02em;
}

main h1 {
    margin: 0 0 2rem;
    font-size: clamp(2rem, 5vw, 3rem);
    text-wrap: pretty;
}

main h2 {
    margin: 2.75rem 0 0.8rem;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    text-wrap: balance;
}

main h3 {
    margin: 2rem 0 0.65rem;
    font-size: 1.2rem;
    text-wrap: balance;
}

.heading-anchor {
    margin-left: 0.4em;

    color: var(--muted);
    font-weight: 400;
    text-decoration: none;

    opacity: 0.3;
}

.heading-anchor:hover {
    color: var(--accent);
    text-decoration: none;
}

main p,
main li,
main blockquote {
    text-wrap: pretty;
}

main p,
main ul,
main ol,
main blockquote,
main pre,
main table {
    margin: 0 0 1rem;
}

main ul,
main ol {
    padding-left: 1.5rem;
}

main li + li {
    margin-top: 0.35rem;
}

main blockquote {
    padding-left: 1rem;
    color: var(--muted);
    border-left: 3px solid var(--border);
}

main code {
    padding: 0.1em 0.35em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92em;
}

/* Semantyczne elementy tekstu technicznego */

main kbd {
    display: inline-block;
    padding: 0.1em 0.4em;

    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;

    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

main abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

main mark {
    padding: 0 0.15em;

    color: var(--text);
    background: color-mix(in srgb, var(--warning) 20%, var(--surface));
    border-radius: 3px;
}

main samp {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92em;
}

main address {
    font-style: normal;
}

main pre {
    overflow-wrap: normal;
    overflow-x: auto;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Kod wewnątrz pre nie dziedziczy ramki i paddingu kodu inline. */
main pre code {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Kontener bloków kodu */

.code-block {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: clip;
    background: var(--surface);
}

.code-block__header {
    position: sticky;
    top: 0;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 0.25rem;

    min-height: 42px;
    padding: 0.55rem 0.8rem;

    color: var(--muted);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.code-block__language {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    font-size: 0.8rem;
    font-weight: 700;

    min-width: 0;
    margin-right: auto;
}

.code-wrap,
.code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    padding: 0;

    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 6px;

    cursor: pointer;
}

.code-wrap:hover,
.code-copy:hover {
    color: var(--text);
    background: var(--background);
}

.code-wrap__icon--on,
.code-wrap[aria-pressed="true"] .code-wrap__icon--off,
.code-copy__check,
.code-copy.is-copied .code-copy__icon {
    display: none;
}

.code-copy.is-copied .code-copy__check,
.code-wrap[aria-pressed="true"] .code-wrap__icon--on {
    display: block;
}

.code-block__content .highlight {
    margin: 0;
}

main .code-block pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Globalne zawijanie wierszy we wszystkich blokach kodu */

html.code-wrap-enabled main .code-block pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

main hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--border);
}

main table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

main th,
main td {
    padding: 0.65rem 0.8rem;
    text-align: left;
    border: 1px solid var(--border);
}

main th {
    background: var(--surface);
}


/* Przypisy i odsyłacze do źródeł */

main .footnotes {
    margin-top: 3rem;

    color: var(--muted);
    font-size: 0.9rem;
}

main .footnotes hr {
    margin: 0 0 1rem;
}

main .footnotes ol {
    margin: 0;
    padding-left: 1.5rem;
}

main .footnotes li + li {
    margin-top: 0.6rem;
}

main .footnotes li p {
    margin: 0;
}

main .footnote-ref {
    font-weight: 600;
    text-decoration: none;
}

main .footnote-backref {
    margin-left: 0.3rem;
    text-decoration: none;
}

main .footnote-ref:hover,
main .footnote-backref:hover {
    text-decoration: underline;
}

/* Zestawienia parametrów technicznych */

.tech-specs {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);

    margin: 1.5rem 0;
    overflow: hidden;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.tech-specs dt,
.tech-specs dd {
    min-width: 0;
    margin: 0;
    padding: 0.7rem 1rem;

    border-bottom: 1px solid var(--border);
}

.tech-specs dt {
    color: var(--muted);
    font-weight: 600;
}

.tech-specs dd {
    font-variant-numeric: tabular-nums;
}

/* Ostatnia para nie potrzebuje dolnego obramowania. */
.tech-specs > :nth-last-child(-n+2) {
    border-bottom: 0;
}


/* 05. Metadane strony i spis treści */

.page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;

    margin: 0.75rem 0 0;

    color: var(--muted);
    font-size: 0.92rem;
}

.page-meta .ai-badge {
    margin: 0;
}

.breadcrumbs {
    margin-bottom: 1rem;

    color: var(--muted);
    font-size: 0.9rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-inline: 0.5rem;
    color: var(--border);
}

.breadcrumbs [aria-current="page"] {
    color: var(--text);
}

.home-intro,
.section-layout,
.page-layout,
.error-page {
    max-width: var(--content-width);
}

.page-header {
    margin-bottom: 2rem;
}

.page-header > h1 {
    margin-bottom: 0;
}

.page-header,
.page-content {
    min-width: 0;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-content > :last-child {
    margin-bottom: 0;
}

.toc {
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.2rem;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.toc #TableOfContents ul {
    margin: 0;
    padding-left: 1.25rem;
}

.toc #TableOfContents ul ul {
    margin-top: 0.35rem;
}

.toc #TableOfContents li + li {
    margin-top: 0.35rem;
}

.toc #TableOfContents a {
    color: var(--text);
    text-decoration-color: var(--border);

    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

/* 06. Serie artykułów */

.article-series {
    margin-top: 3rem;
    padding: 1.5rem;

    border: 1px solid var(--border);
    border-radius: 8px;
}

.article-series h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.article-series > p {
    margin: 0 0 1rem;

    color: var(--muted);
    font-size: 0.9rem;
}

.article-series ol {
    margin: 0;
    padding-left: 1.5rem;
}

.article-series li + li {
    margin-top: 0.5rem;
}

.article-series li[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

/* Nawigacja po serii artykułów */

.article-series__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;

    margin-top: 1.5rem;
    padding-top: 1rem;

    border-top: 1px solid var(--border);
}

.article-series__next {
    grid-column: 2;
    text-align: right;
}

.article-series__nav a {
    display: block;
    min-width: 0;
}

.article-series__nav span {
    display: block;

    color: var(--muted);
    font-size: 0.85rem;
}

.article-series__nav strong {
    display: block;
    overflow-wrap: anywhere;
}

/* 07. Zdjęcia, galerie i wspólne podpisy mediów */

main .image-link {
    display: inline-block;
    width: auto;
    max-width: min(100%, var(--image-width));
    margin: 1.5rem 0;
    line-height: 0;
    vertical-align: top;
}

main .image-link img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    cursor: zoom-in;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease;
}

main .image-link:hover img,
main .image-link:focus-visible img {
    transform: scale(1.01);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

main .image-figure {
    display: block;
    width: fit-content;
    max-width: min(100%, var(--image-display-width, var(--image-width)));
    margin: 1.5rem 0;
}

main .image-figure--small {
    --image-display-width: var(--image-width-small);
}

main .image-figure--normal {
    --image-display-width: var(--image-width);
}

main .image-figure--large {
    --image-display-width: var(--image-width-large);
}

main .image-figure--left {
    margin-left: 0;
    margin-right: auto;
}

main .image-figure--center {
    margin-left: auto;
    margin-right: auto;
}

main .image-figure--right {
    margin-left: auto;
    margin-right: 0;
}

main .image-figure .image-link {
    display: block;
    max-width: 100%;
    margin: 0;
}

/* Wspólna typografia podpisów; selektory zachowują swoją specyficzność. */
main .image-figure figcaption,
main .image-gallery > .image-figure > figcaption,
.video-figure figcaption {
    color: var(--muted);
    font-size: 0.9rem;
}

main .image-figure figcaption {
    margin-top: 0.6rem;
    line-height: 1.4;
    text-align: center;
}

main .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    margin: 1.5rem 0;
}

/* Galeria przejmuje szerokość i odstępy figur oraz ich odnośników. */
main .image-gallery > .image-figure {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

main .image-gallery > .image-figure > .image-link {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}

main .image-gallery > .image-figure > .image-link > img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    object-fit: cover;
}

main .image-gallery > .image-figure > figcaption {
    margin-top: 0.5rem;
    padding-inline: 0.25rem;
    line-height: 1.4;
    text-align: center;
}

/* 08. Wideo */

.video-figure {
    width: min(100%, var(--video-display-width, var(--video-width)));
    margin: 1.5rem 0;
}

.video-figure--small {
    --video-display-width: var(--video-width-small);
}

.video-figure--normal {
    --video-display-width: var(--video-width);
}

.video-figure--large {
    --video-display-width: var(--video-width-large);
}

.video-figure--left {
    margin-left: 0;
    margin-right: auto;
}

.video-figure--center {
    margin-left: auto;
    margin-right: auto;
}

.video-figure--right {
    margin-left: auto;
    margin-right: 0;
}

.video-player {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
    border-radius: 8px;
}

.video-figure figcaption {
    margin-top: 0.5rem;
}

/* 09. Stopka */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    min-height: 86px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
}

.site-footer > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-footer p {
    margin: 0;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-nav a {
    color: inherit;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--text);
}

/* 10. Listy wpisów sekcji */

.content-section {
    margin-top: 2.5rem;
}

.content-section h2 {
    margin: 0 0 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.content-list {
    margin-top: 0;
}

.content-list li + li {
    margin-top: 0.5rem;
}

/* Podsekcje: karty nawigacyjne */

.subsection-section {
    margin-top: 2.5rem;
}

.subsection-section h2 {
    margin: 0 0 1rem;
}

.subsection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subsection-grid li + li {
    margin-top: 0;
}

.subsection-card {
    min-width: 0;
}

.subsection-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.15rem 1.25rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
}

.subsection-card a:hover,
.subsection-card a:focus-visible {
    border-color: var(--accent);
}

.subsection-card h3 {
    margin: 0 0 0.5rem;
    color: var(--accent);
    font-size: 1.15rem;
}

.subsection-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.subsection-card__arrow {
    align-self: flex-end;
    margin-top: auto;
    padding-top: 0.35rem;
    color: var(--accent);
    font-size: 1.15rem;
}

/* 11. Wyróżnione wpisy */

.featured-section {
    margin: 2.5rem 0;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
}

.featured-section h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.featured-list {
    margin: 0;
}

.featured-list li + li {
    margin-top: 0.5rem;
}

/* 12. Oznaczenia AI i podpowiedzi */

.ai-badge {
    position: relative;
    display: inline-block;

    margin: 0.25rem 0.35rem;
    padding: 0.15rem 0.45rem;

    border: 1px solid currentColor;
    border-radius: 0.3rem;

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;

    cursor: help;
    outline-offset: 2px;
}

.ai-badge--assisted {
    font-weight: 500;
    border-style: dotted;
}

.ai-badge--partial {
    border-style: dashed;
}

.ai-badge--generated {
    border-width: 2px;
    font-weight: 700;
}

/* Podpowiedź przy dolnej krawędzi: nie wychodzi poza ekran przy brzegu tekstu.
   Zmiana położenia nie wymaga modyfikowania HTML ani dodawania JavaScript. */
.ai-badge::after {
    content: attr(data-tooltip);
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 1rem;
    width: max-content;
    max-width: min(30rem, calc(100vw - 32px));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    padding: 0.55rem 0.7rem;
    color: var(--background);
    background: var(--text);
    border-radius: 0.35rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 150ms ease;
}

.ai-badge:hover::after,
.ai-badge:focus::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 13. Zwijana treść */

.spoiler {
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.spoiler summary {
    padding: 0.8rem 1rem;
    cursor: pointer;
    font-weight: 600;
}

.spoiler[open] summary {
    border-bottom: 1px solid var(--border);
}

.spoiler-content {
    padding: 1rem;
}

.spoiler-content > :first-child {
    margin-top: 0;
}

.spoiler-content > :last-child {
    margin-bottom: 0;
}

/* 14. Komunikaty */

.callout {
    display: flex;
    gap: 0.9rem;

    margin: 1.5rem 0;
    padding: 1rem 1.1rem;

    border: 1px solid var(--callout-color);
    border-radius: 0.45rem;
}

.callout__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;

    padding-top: 0.1rem;
}

.callout__icon svg {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.callout__body {
    min-width: 0;
    flex: 1;
}

.callout__title {
    margin-bottom: 0.4rem;

    font-weight: 700;
    line-height: 1.3;
}

.callout__content > :first-child {
    margin-top: 0;
}

.callout__content > :last-child {
    margin-bottom: 0;
}

.callout--warning {
    --callout-color: var(--warning);
}

.callout--note {
    --callout-color: var(--note);
}

.callout__icon,
.callout__title {
    color: var(--callout-color);
}

/* 15. Pobieranie plików */

.download-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;

    margin: 1.5rem 0;
    padding: 1rem 1.1rem;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.download-card__content {
    min-width: 0;
}

.download-card__filename {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.download-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.55rem;

    margin-top: 0.2rem;

    color: var(--muted);
    font-size: 0.88rem;
}

.download-card__meta > span + span::before {
    content: "·";
    margin-right: 0.55rem;
}

.download-card__description {
    margin: 0.65rem 0 0;
}

.download-card__checksum {
    margin-top: 0.7rem;

    color: var(--muted);
    font-size: 0.82rem;
}

.download-card__checksum span {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

main .download-card__checksum code {
    display: block;

    padding: 0;
    overflow-wrap: anywhere;

    color: var(--text);
    background: transparent;
    border: 0;

    user-select: all;
}

.download-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0.55rem 0.9rem;

    border: 1px solid currentColor;
    border-radius: 0.4rem;

    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.download-card__action:hover {
    text-decoration: underline;
}

/* 16. Karty artykułów */

.article-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 280px), 320px)
    );
    gap: 1.5rem;
    align-items: start;
}

.article-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.article-card__image-link {
    display: block;
    overflow: hidden;
}

.article-card__image-link img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-card__content {
    padding: 1rem;
}

/* Usunięcie dodatkowego marginesu przed dolnym paddingiem main. */
main > :last-child {
    margin-bottom: 0;
}

/* 17. Układ responsywny i urządzenia wskazujące */

/* Boczny, przyklejony spis treści na szerokich ekranach. */
@media (min-width: 1100px) {
    .page-layout--with-toc {
        display: grid;

        grid-template-columns:
            minmax(0, var(--content-width))
            minmax(190px, 220px);

        grid-template-areas:
            "header  toc"
            "content toc";

        gap: 0 40px;

        max-width: none;
    }

    .page-layout--with-toc .page-header {
        grid-area: header;
    }

    .page-layout--with-toc .page-content {
        grid-area: content;
    }

    .page-layout--with-toc .toc {
        grid-area: toc;

        position: sticky;
        top: 1.5rem;

        align-self: start;

        max-height: calc(100vh - 3rem);
        max-height: calc(100dvh - 3rem);

        margin: 0;
        padding-inline: 0;
    }

    .page-layout--with-toc .toc #TableOfContents {
        max-height: calc(100vh - 3rem - 2px);
        max-height: calc(100dvh - 3rem - 2px);

        margin-block: -1rem;
        border-block: 1rem solid var(--surface);

        padding-inline: 1.2rem;
        overflow-y: auto;

        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    .toc #TableOfContents a[aria-current="location"] {
        color: var(--accent);
        text-decoration-color: var(--accent);
        text-underline-offset: 0.16em;
        text-decoration-thickness: 1px;
    }
}

@media (max-width: 860px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        padding: 18px 0;
    }

    .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: stretch;
        justify-content: center;
        padding-bottom: 4px;
    }

    .main-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding-inline: 4px;
    }

    .download-card {
        grid-template-columns: 1fr;
    }

    .download-card__action {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    main .image-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    /* Na telefonie szeroka tabela przewija się we własnym obszarze. */
    main table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .site-shell {
        width: min(100% - 24px, var(--page-width));
    }

    .main-nav {
        gap: 10px 14px;
    }

    main {
        padding: 42px 0 56px;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 20px 0;
    }

    /* Parametr nad wartością na wąskich ekranach. */
    .tech-specs {
        grid-template-columns: minmax(0, 1fr);
    }

    .tech-specs dt {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .tech-specs dd {
        padding-top: 0.15rem;
    }
}

@media (max-width: 460px) {
    main .image-gallery {
        grid-template-columns: 1fr;
    }
}

@media (any-hover: hover) {
    .heading-anchor {
        opacity: 0;
    }

    main h2:hover .heading-anchor,
    main h3:hover .heading-anchor {
        opacity: 0.45;
    }

    .heading-anchor:focus-visible {
        opacity: 1;
    }
}

@media (hover: hover) {
    .toc #TableOfContents a:hover {
        color: var(--accent);
        text-decoration-color: var(--accent);
    }
}

/* 18. Preferencja ograniczenia ruchu */

@media (prefers-reduced-motion: reduce) {
    .language-switch[data-tooltip]::after,
    .ai-badge::after,
    main .image-link img {
        transition: none;
    }

    main .image-link:hover img,
    main .image-link:focus-visible img {
        transform: none;
    }
}