/* COSMONEWS - front magazynu (Homer v3 / Bootstrap 5).
   Akcent zawsze z motywu: var(--ins-primary) - kolorystyka z Customizera zmienia cały serwis.
   Neutralne kolory (papier, atrament) osobno dla jasnego i ciemnego motywu. */

html {
    --mag-paper: #ffffff;
    --mag-ink: #1c2430;
    --mag-muted: #5d6672;
    --mag-rule: #e3e6ea;
    --mag-wash: #f4f5f7;
    --mag-accent: var(--ins-primary);
    --mag-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
    --mag-sans: var(--ins-font-sans-serif, "Public Sans", system-ui, sans-serif);
    --mag-wrap: 1240px;
    --mag-gutter: clamp(16px, 4vw, 40px);
}

html[data-bs-theme="dark"] {
    --mag-paper: #15161b;
    --mag-ink: #e7eaef;
    --mag-muted: #9ba5b1;
    --mag-rule: #2a2e36;
    --mag-wash: #1c1e25;
}

body.mag {
    background: var(--mag-paper);
    color: var(--mag-ink);
    font-family: var(--mag-sans);
    font-size: 1rem;
    line-height: 1.6;
}

.mag a { color: inherit; text-decoration: none; }
.mag a:focus-visible,
.mag button:focus-visible,
.mag input:focus-visible {
    outline: 2px solid var(--mag-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.mag-wrap {
    max-width: var(--mag-wrap);
    margin-inline: auto;
    padding-inline: var(--mag-gutter);
}

/* Linie oddzielające wyrównane do krawędzi treści (bez marginesów bocznych .mag-wrap) */
.mag-latest,
.mag-section + .mag-section,
.mag-footer-bottom {
    --mag-line: var(--mag-rule);
    background-image: linear-gradient(var(--mag-line), var(--mag-line));
    background-repeat: no-repeat;
    background-position: center top;
    background-size: calc(100% - 2 * var(--mag-gutter)) 1px;
}
.mag-footer-bottom { --mag-line: var(--mag-footer-rule); }

.mag-display {
    font-family: var(--mag-display);
    font-optical-sizing: auto;
    font-weight: 500;
    color: var(--mag-ink);
    text-wrap: balance;
}

/* Tytuły: podkreślenie w kolorze akcentu przy najechaniu / fokusie */
.mag-display a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color 0.15s ease;
}
.mag-display a:hover,
.mag-display a:focus-visible { text-decoration-color: var(--mag-accent); }

.mag-skip {
    position: absolute;
    left: var(--mag-gutter);
    top: 8px;
    z-index: 1100;
    background: var(--mag-paper);
    padding: 8px 12px;
}

/* ---------- Nagłówek ---------- */
.mag-masthead {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 1030;
    background: var(--mag-paper);
    border-bottom: 1px solid var(--mag-rule);
}
.mag-masthead-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 72px;
}
.mag-logo img { display: block; height: 28px; width: auto; }
.mag-nav { gap: 28px; }
.mag-nav a {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9375rem;
    padding-block: 6px;
    border-bottom: 2px solid transparent;
}
.mag-nav a:hover { border-bottom-color: var(--mag-accent); }
.mag-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.mag-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--mag-rule);
    border-radius: 999px;
    padding: 4px 6px 4px 14px;
    background: var(--mag-paper);
}
.mag-search input {
    border: 0;
    background: transparent;
    color: var(--mag-ink);
    font-size: 0.875rem;
    width: 12rem;
    outline: none;
}
.mag-search input::placeholder { color: var(--mag-muted); }
.mag-search button,
.mag-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mag-ink);
}
.mag-icon-btn:hover,
.mag-search button:hover { background: var(--mag-wash); }
.mag-search svg, .mag-icon-btn svg { width: 18px; height: 18px; }
.mag-login {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--mag-accent) !important;
}
.mag-menu { background: var(--mag-paper); color: var(--mag-ink); }
.mag-menu-links a {
    display: block;
    font-family: var(--mag-display);
    font-size: 1.75rem;
    padding-block: 10px;
    border-bottom: 1px solid var(--mag-rule);
}
.mag-menu .mag-search input { width: 100%; }

/* Hasło serwisu (H1) obok logo */
.mag-brandmark { flex-shrink: 0; }
.mag-tagline {
    margin: 4px 0 0;
    font-family: var(--mag-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--mag-muted);
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    /* na węższych ekranach brak miejsca obok menu - hasło zostaje dla czytników ekranu i Google */
    .mag-tagline {
        position: absolute !important;
        width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* ---------- Wspólne drobne elementy ---------- */
.mag-kicker {
    display: inline-block;
    color: var(--mag-accent) !important;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 10px;
}
.mag-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
.mag-meta {
    color: var(--mag-muted);
    font-size: 0.8125rem;
    margin: 8px 0 0;
}
.mag-thumb {
    display: block;
    overflow: hidden;
    border-radius: 3px;
    background: var(--mag-wash);
}
/* Bootstrap 5 nie ma proporcji 3:2 - kadr typowy dla zdjęć prasowych */
.ratio-3x2 { --ins-aspect-ratio: 66.6667%; }

.mag-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Okładka (jedyny odważny element strony) ---------- */
.mag-cover {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(32px, 5vw, 64px);
}
.mag-cover-image {
    display: block;
    aspect-ratio: 4 / 5;
    max-height: 680px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--mag-wash);
}
.mag-cover-image img { width: 100%; height: 100%; object-fit: cover; }
.mag-cover-title {
    font-size: clamp(2.375rem, 4.6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0 0 24px;
}
.mag-cover-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--mag-muted);
    max-width: 34em;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* ---------- Najnowsze ---------- */
.mag-latest {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 64px;
}
.mag-latest-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.mag-latest-item .mag-kicker { margin-bottom: 4px; }

.mag-title-xs { font-size: 1.0625rem; line-height: 1.35; font-weight: 600; margin: 0; }
.mag-title-s  { font-size: 1.375rem; line-height: 1.2; font-weight: 600; margin: 0; }
.mag-title-m  { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; margin: 0; }

/* ---------- Najczęściej czytane ---------- */
.mag-band {
    background: var(--mag-wash);
    padding-block: clamp(40px, 6vw, 64px);
}
.mag-ranking {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px;
}
.mag-ranking li {
    display: flex;
    gap: 14px;
    align-items: baseline;
}
.mag-rank {
    font-size: 3.25rem;
    line-height: 0.9;
    color: var(--mag-accent);
    font-variant-numeric: lining-nums;
    flex-shrink: 0;
}
.mag-ranking .mag-title-xs a:hover { color: var(--mag-accent); }

/* ---------- O serwisie: pas ze zdjęciem marki ---------- */
.mag-brand {
    position: relative;
    background-size: cover;
    background-position: 0% center;  /* kobieta z prawej, tekst na różach po lewej */
    background-color: var(--mag-wash);
    color: #fff;
    isolation: isolate;
}
/* przyciemnienie od lewej - tekst czytelny na zdjęciu niezależnie od motywu */
.mag-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 75%);
}
.mag-brand-text {
    max-width: 34rem;
    padding-block: clamp(48px, 8vw, 96px);
}
.mag-brand-title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.05;
    margin: 0 0 18px;
}
.mag-brand-text p { font-size: 1.0625rem; margin: 0; color: rgba(255, 255, 255, 0.88); }
.mag-brand-points {
    list-style: none;
    padding: 0;
    margin: 20px 0 24px;
}
.mag-brand-points li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.88);
}
.mag-brand-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 1px;
    background: currentColor;
}
.mag-brand-link {
    font-weight: 600;
    color: #fff !important;
    text-decoration: underline !important;
    text-decoration-color: var(--mag-accent) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 5px;
}

/* ---------- Kategorie ---------- */
.mag-section { padding-block: clamp(48px, 6vw, 72px); }

.mag-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.mag-section-title {
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.05;
    margin: 0;
}
.mag-section-desc {
    color: var(--mag-muted);
    max-width: 46ch;
    margin: 10px 0 0;
}
.mag-more {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--mag-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
.mag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
}
.mag-card .mag-thumb { margin-bottom: 16px; }
.mag-card-lead {
    color: var(--mag-muted);
    margin: 12px 0 0;
    max-width: 38em;
}

/* Pierwsza kategoria: 1 duży tekst + 4 mniejsze */
.mag-section--lead .mag-grid {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}
.mag-section--lead .mag-card:first-child { grid-row: span 2; }

/* ---------- Komunikaty po akcji ---------- */
.mag-flash { padding-top: 16px; }

/* ---------- Lista artykułów ---------- */
.mag-listing-head { padding-block: clamp(32px, 5vw, 56px) 28px; }
.mag-listing-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.02;
    margin: 0;
}
.mag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}
.mag-filters a {
    padding: 7px 16px;
    border: 1px solid var(--mag-rule);
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.9375rem;
}
.mag-filters a:hover { border-color: var(--mag-accent); }
.mag-filters a[aria-current="page"] {
    background: var(--mag-ink);
    border-color: var(--mag-ink);
    color: var(--mag-paper);
}
.mag-listing-actions {
    display: flex;
    gap: 20px;
    margin: 18px 0 0;
}
.mag-listing-actions a,
.mag-article-owner a,
.mag-comment-login a {
    font-weight: 600;
    color: var(--mag-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
.mag-listing { padding-top: 32px; padding-bottom: clamp(48px, 6vw, 80px); }
.mag-empty { max-width: 40rem; padding-block: 24px; }
.mag-empty p { color: var(--mag-muted); margin: 8px 0 16px; }
.mag-pagination { margin-top: 48px; }
.mag-pagination .pagination { margin-bottom: 0; }

/* ---------- Artykuł ---------- */
.mag-narrow { max-width: calc(760px + 2 * var(--mag-gutter)); }
.mag-article-head { padding-block: clamp(28px, 4vw, 48px) 28px; }
.mag-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--mag-muted);
}
.mag-breadcrumb a:hover { color: var(--mag-ink); text-decoration: underline; text-underline-offset: 3px; }
.mag-breadcrumb a:last-child { color: var(--mag-accent); font-weight: 600; }
.mag-article-title {
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 14px 0 22px;
}
.mag-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--mag-muted);
    font-size: 0.9375rem;
}
.mag-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mag-byline-author { font-weight: 600; color: var(--mag-ink); }
.mag-article-hero {
    margin: 0 auto 36px;
}
.mag-article-hero img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 620px;
    margin-inline: auto;
    border-radius: 3px;
}

/* Treść artykułu: wygodna długość linii (ok. 70 znaków), większy stopień i interlinia */
.mag-prose {
    max-width: 70ch;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--mag-ink);
    overflow-wrap: break-word;
}
.mag-prose > p,
.mag-prose > ul,
.mag-prose > ol { margin: 0 0 1.25em; }
.mag-prose h2,
.mag-prose h3,
.mag-prose h4 {
    font-family: var(--mag-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--mag-ink);
    margin: 1.8em 0 0.6em;
}
.mag-prose h2 { font-size: 1.75rem; }
.mag-prose > :first-child { margin-top: 0; }
.mag-prose h3 { font-size: 1.4rem; }
.mag-prose h4 { font-size: 1.2rem; }
.mag-prose a {
    color: var(--mag-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mag-prose blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.25em;
    border-left: 3px solid var(--mag-accent);
    font-family: var(--mag-display);
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.5;
}
.mag-prose ul,
.mag-prose ol { padding-left: 1.25em; }
.mag-video { margin: 1.75em 0; border-radius: 4px; overflow: hidden; background: #000; }

.mag-infobox {
    margin: 2em 0;
    padding: 20px 24px;
    background: var(--mag-wash);
    border-left: 3px solid var(--mag-accent);
    border-radius: 0 6px 6px 0;
    font-size: 1rem;
    line-height: 1.65;
}
.mag-infobox-title {
    font-family: var(--mag-sans) !important;
    font-size: 0.9375rem !important;
    font-weight: 700;
    margin: 0 0 8px !important;
}
.mag-infobox p:last-child { margin-bottom: 0; }

.mag-gallery { margin: 2.5em 0; }
.mag-gallery h2 { margin-top: 0; }
.mag-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.mag-gallery-grid a:focus-visible { outline: 2px solid var(--mag-accent); outline-offset: 2px; }

.mag-article-owner { margin: 1.5em 0 0; font-size: 1rem; }

.mag-comments {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--mag-rule);
    font-size: 1rem;
    line-height: 1.6;
}
.mag-comments h2 { margin-top: 0; }
.mag-comment {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--mag-rule);
}
.mag-comment img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mag-comment-head { margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mag-comment-head time { color: var(--mag-muted); font-size: 0.8125rem; }
.mag-comment-body { margin: 0; }
.mag-comment-form { margin-top: 24px; }
.mag-comment-login { margin-top: 20px; }
.mag-related { border-top: 0; }

/* ---------- Strony informacyjne (O nas, Kontakt, dokumenty, błędy) ---------- */
.mag-page-lead {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--mag-muted);
    max-width: 40em;
    margin: 0;
}
.mag-category-list { list-style: none; padding-left: 0 !important; }
.mag-category-list li { margin-bottom: 0.6em; }
.mag-category-list a { font-weight: 600; }
.mag-signature { font-family: var(--mag-display); font-style: italic; font-size: 1.25rem; margin-top: 2em; }

.mag-contact {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(32px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
    align-items: start;
}
.mag-contact-form .form-label { font-weight: 600; }
.mag-contact-form .form-control { background: var(--mag-paper); }
.mag-form-note { margin: 14px 0 0; font-size: 0.875rem; color: var(--mag-muted); }
.mag-form-note a { color: var(--mag-accent); text-decoration: underline; }
.mag-contact-side {
    padding: 24px;
    background: var(--mag-wash);
    border-radius: 6px;
}
.mag-contact-side p { color: var(--mag-muted); }
.mag-press { list-style: none; padding: 0; margin: 0; }
.mag-press li { padding-block: 4px; }
.mag-press a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--mag-accent); text-underline-offset: 3px; }
/* pułapka na boty - poza ekranem, niewidoczna dla ludzi i czytników ekranu */
.mag-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.mag-error { padding-bottom: clamp(48px, 8vw, 96px); }
.mag-error-code {
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1;
    color: var(--mag-accent);
    margin: 0;
}
.mag-error-search { max-width: 28rem; margin: 28px 0 8px; }
.mag-error-search input { width: 100%; }

.mag-legal { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); }
.mag-legal .legal-doc h1 {
    font-family: var(--mag-display);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.6vw, 3.25rem);
    line-height: 1.05;
    margin: 0 0 8px;
}
.mag-legal .legal-date { color: var(--mag-muted); font-size: 0.9375rem; }
.mag-legal .table { font-size: 0.9375rem; --ins-table-bg: transparent; }
.mag-legal ol { padding-left: 1.4em; }

/* Podgląd zdjęć galerii */
.mag-lightbox .modal-content { background: #000; border: 0; border-radius: 4px; overflow: hidden; }
.mag-lightbox img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.mag-lightbox .btn-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.mag-lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px;
    color: #fff;
    font-size: 0.875rem;
}
.mag-lightbox-bar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.mag-lightbox-bar button:hover { background: rgba(255, 255, 255, 0.24); }

/* ---------- Stopka: ciemna "tylna okładka" ---------- */
/* Tło z atramentu tytułów (jasny motyw) albo o ton ciemniejsze od strony (ciemny motyw);
   tekst jasny, linki podkreślane kolorem akcentu z Customizera. */
html {
    --mag-footer-bg: #1c2430;
    --mag-footer-ink: #f3f4f6;
    --mag-footer-muted: rgba(243, 244, 246, 0.66);
    --mag-footer-rule: rgba(243, 244, 246, 0.14);
}
html[data-bs-theme="dark"] {
    --mag-footer-bg: #0e0f13;
}
.mag-footer {
    background: var(--mag-footer-bg);
    color: var(--mag-footer-muted);
    padding-top: clamp(48px, 6vw, 72px);
    font-size: 0.9375rem;
}
.mag-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
}
/* zalogowany: dodatkowa kolumna "Moje konto" */
.mag-footer-inner--account { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.mag-footer-about img { height: 26px; width: auto; margin-bottom: 18px; }
.mag-footer-about p { max-width: 42ch; margin: 0; line-height: 1.65; }
.mag-footer nav a,
.mag-footer-linkbtn {
    display: block;
    padding-block: 4px;
    color: var(--mag-footer-ink);
}
.mag-footer-linkbtn {
    border: 0;
    background: none;
    padding-inline: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mag-footer nav a:hover,
.mag-footer nav a:focus-visible,
.mag-footer-linkbtn:hover,
.mag-footer-linkbtn:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--mag-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.mag-footer-title {
    font-family: var(--mag-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mag-footer-muted);
    margin-bottom: 10px;
}
.mag-social { display: flex; gap: 8px; margin-top: 20px; }
.mag-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--mag-footer-rule);
    border-radius: 50%;
    color: var(--mag-footer-ink);
    font-size: 1.25rem;
}
.mag-social a:hover,
.mag-social a:focus-visible { border-color: var(--mag-accent); color: #fff; }
.mag-disclaimer { margin: 0 0 6px; max-width: 70ch; }
.mag-menu-account a { display: block; padding-block: 6px; font-weight: 500; }
.mag-footer-bottom {
    margin-top: clamp(40px, 5vw, 56px);
    padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px));
    font-size: 0.8125rem;
}

/* ---------- Mniejsze ekrany ---------- */
@media (max-width: 1279.98px) {
    .mag-nav { gap: 20px; }
    .mag-masthead-inner { gap: 24px; }
    .mag-search input { width: 8.5rem; }
}
@media (max-width: 991.98px) {
    .mag-ranking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mag-footer-inner,
    .mag-footer-inner--account { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mag-footer-about { grid-column: 1 / -1; }
    .mag-latest { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mag-grid,
    .mag-section--lead .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mag-section--lead .mag-card:first-child { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .mag-masthead-inner { gap: 12px; min-height: 60px; }
    .mag-logo img { height: 22px; }
    .mag-cover { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
    .mag-cover-image { aspect-ratio: 4 / 3; }
    .mag-cover-lead { -webkit-line-clamp: 3; line-clamp: 3; font-size: 1.0625rem; }
    .mag-ranking { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mag-section-head { flex-direction: column; align-items: flex-start; }
    .mag-brand { background-position: 62% center; }
    .mag-brand::before { background: rgba(0, 0, 0, 0.6); }
    .mag-grid,
    .mag-section--lead .mag-grid { grid-template-columns: minmax(0, 1fr); }
    .mag-footer-inner,
    .mag-footer-inner--account { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    .mag-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mag-contact { grid-template-columns: minmax(0, 1fr); }
    .mag-prose { font-size: 1.0625rem; }
    .mag-footer-about { grid-column: 1 / -1; }

    /* Telefon: zwarte wiersze (miniatura + tytuł) zamiast zdjęć na całą szerokość; pierwsza karta sekcji zostaje duża */
    .mag-grid { gap: 20px; }
    .mag-card:not(:first-child) {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        align-content: start;
    }
    /* miniatura po lewej przez wszystkie wiersze; kategoria, tytuł i metryczka zawsze w prawej kolumnie */
    .mag-card:not(:first-child) .mag-thumb { grid-column: 1; grid-row: 1 / span 4; margin-bottom: 0; }
    .mag-card:not(:first-child) > :not(.mag-thumb) { grid-column: 2; }
    .mag-card:not(:first-child) .mag-kicker { margin-bottom: 2px; }
    .mag-card:not(:first-child) .mag-title-s { font-size: 1.1875rem; }
    /* zajawka w wąskiej kolumnie obok miniatury byłaby bardzo wysoka - na telefonie tylko w dużej karcie */
    .mag-card:not(:first-child) .mag-card-lead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mag-display a { transition: none; }
}