/* Widok artykułu — układ dwukolumnowy, BLUF, spis treści, trzy formaty CTA.
   Źródło: mockup/artykul.html. */
  /* ---------- układ artykułu ---------- */
  /* bez align-items:start — aside musi rozciągnąć się na całą wysokość,
     inaczej position:sticky w .toc nie ma się czego trzymać po przewinięciu */
  .art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:clamp(28px,4vw,56px)}
  /* `1fr` nie schodzi poniżej min-content swojej zawartości, więc szeroka tabela
     (min-width:560px) rozpychała kolumnę do 562px przy oknie 375px i dawała poziomy
     scroll całej strony. `minmax(0,1fr)` pozwala kolumnie się skurczyć, a tabela
     przewija się wtedy we własnej ramce, tak jak było zamierzone. */
  @media(max-width:1000px){.art-wrap{grid-template-columns:minmax(0,1fr)}
  .art-wrap>article{min-width:0}}
  .art-head{padding:clamp(26px,3.5vw,42px) 0 0}
  .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.83rem;color:var(--dim);margin-bottom:18px}
  .crumbs a{color:var(--muted)}
  .crumbs span[aria-hidden]{opacity:.5}
  .art-head h1{font-size:clamp(1.85rem,4.2vw,2.85rem);max-width:22ch;margin-bottom:20px}

  .byline{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:.86rem;color:var(--dim);
          padding-bottom:24px;border-bottom:1px solid var(--line)}
  .byline .who{display:flex;align-items:center;gap:10px}
  .byline .who img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center 25%;border:1px solid var(--line-2)}
  .byline .who b{color:var(--text);display:block;font-size:.88rem;line-height:1.3}
  .byline .who span{font-size:.78rem}
  .byline .meta-item svg{width:14px;height:14px;stroke:currentColor;vertical-align:-2px;margin-right:5px}
  .verified{color:var(--green);font-weight:650}

  /* ---------- obraz wyróżniający ---------- */
  .featured{margin:28px 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);
            box-shadow:var(--shadow);position:relative;aspect-ratio:16/9;background:var(--surface-3)}
  .featured img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
  figure.featured-fig{margin:0}
  figure.featured-fig figcaption{font-size:.79rem;color:var(--dim);margin-top:10px;text-align:center}

  /* ---------- CTA 1: wąski pasek pod obrazkiem ---------- */
  .cta-inline{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:18px 0 0;
    background:linear-gradient(120deg,rgba(255,61,127,.13),rgba(157,92,255,.07) 70%);
    border:1px solid var(--line-2);border-left:3px solid var(--rose);
    border-radius:var(--radius-sm);padding:14px 18px
  }
  .cta-inline .ci-ico{
    flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:linear-gradient(140deg,var(--rose),#d92b8a);box-shadow:0 6px 16px -8px rgba(255,61,127,.9)
  }
  .cta-inline .ci-ico svg{width:19px;height:19px;stroke:#fff}
  .cta-inline .ci-txt{flex:1;min-width:190px;font-size:.9rem;color:var(--muted);line-height:1.45}
  .cta-inline .ci-txt b{color:var(--text);display:block;font-size:.96rem}

  /* ---------- BLUF ---------- */
  .bluf-box{
    background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);
    border-radius:var(--radius-sm);padding:20px 22px;margin:30px 0
  }
  .bluf-box .lbl{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
                 color:var(--amber);margin-bottom:9px}
  .bluf-box p{margin:0;font-size:1.02rem;color:var(--text);line-height:1.6}
  .bluf-box b{color:#fff}

  /* ---------- treść ---------- */
  .art-body{font-size:1.04rem;line-height:1.72}
  .art-body h2{margin:44px 0 16px;font-size:clamp(1.35rem,2.8vw,1.75rem);scroll-margin-top:84px}
  .art-body h3{margin:32px 0 12px;scroll-margin-top:84px}
  .art-body p{color:var(--muted)}
  .art-body strong,.art-body b{color:var(--text)}
  .art-body>ul,.art-body>ol{color:var(--muted);padding-left:22px;margin:0 0 1.1em}
  .art-body li{margin-bottom:9px}
  .art-body li::marker{color:var(--rose)}
  .art-body a{border-bottom:1px solid rgba(255,122,168,.35)}
  .art-body a:hover{border-bottom-color:var(--rose-2);text-decoration:none}

  .note{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--violet);
        border-radius:var(--radius-sm);padding:16px 20px;margin:26px 0;font-size:.94rem;color:var(--muted)}
  .note b{color:var(--text)}

  /* ---------- CTA 2: karta w środku artykułu ---------- */
  .cta-mid{
    margin:40px 0;border:1px solid rgba(255,61,127,.42);border-radius:var(--radius);overflow:hidden;
    background:linear-gradient(160deg,var(--surface-2),var(--surface) 60%);
    box-shadow:0 0 0 1px rgba(255,61,127,.1),var(--shadow);position:relative
  }
  .cta-mid::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--rose),var(--amber) 55%,transparent)}
  .cta-mid .inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 30px;align-items:center;
                  padding:clamp(22px,3vw,30px)}
  @media(max-width:720px){.cta-mid .inner{grid-template-columns:1fr}}
  .cta-mid h3{margin:0 0 10px;font-size:1.22rem}
  .cta-mid p{margin:0 0 16px;color:var(--muted);font-size:.94rem}
  .cta-mid ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;font-size:.91rem}
  .cta-mid li{display:flex;gap:11px;align-items:flex-start;color:var(--muted)}
  .cta-mid li svg{width:17px;height:17px;stroke:var(--green);flex:none;margin-top:3px}
  .cta-mid .aside{text-align:center;min-width:190px}
  .cta-mid .aside .big{font-size:2.4rem;font-weight:800;letter-spacing:-.05em;line-height:1;
    background:linear-gradient(140deg,var(--rose-2),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
  .cta-mid .aside .cap{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin:6px 0 16px}
  .cta-mid .aside .note-sm{font-size:.76rem;color:var(--dim);margin-top:10px}

  /* ---------- spis treści ---------- */
  .toc{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);
       border-radius:var(--radius);padding:20px 22px}
  @media(max-width:1000px){.toc{position:static;margin-bottom:30px}}
  .toc .lbl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
            margin-bottom:14px}
  .toc ol{list-style:none;counter-reset:t;padding:0;margin:0;font-size:.89rem}
  .toc li{counter-increment:t;margin-bottom:11px;padding-left:26px;position:relative;line-height:1.45}
  .toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:0;
                  font-size:.75rem;font-weight:800;color:var(--dim);font-variant-numeric:tabular-nums}
  .toc a{color:var(--muted)}
  .toc a:hover{color:var(--rose-2);text-decoration:none}
  .toc .share{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim)}

  /* ---------- tagi ---------- */
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 0;padding:0;list-style:none}
  .tags a{font-size:.82rem;padding:6px 13px;border-radius:999px;background:var(--surface-2);
          border:1px solid var(--line-2);color:var(--muted)}
  .tags a:hover{border-color:var(--rose);color:var(--text);text-decoration:none}

  /* ---------- powiązane ---------- */
  .related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0}
  @media(max-width:860px){.related{grid-template-columns:1fr}}
  .related li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
              overflow:hidden;transition:border-color .18s ease,transform .18s ease}
  .related li:hover{border-color:var(--rose);transform:translateY(-2px)}
  .related img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 22%}
  .related .rb{padding:14px 16px 16px}
  .related b{display:block;font-size:.95rem;line-height:1.35;margin-bottom:6px}
  .related b a{color:var(--text)}
  .related b a:hover{color:var(--rose-2);text-decoration:none}
  .related span{font-size:.8rem;color:var(--dim)}

  /* ---------- nawigacja wpisów ---------- */
  .postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
  @media(max-width:720px){.postnav{grid-template-columns:1fr}}
  .postnav a{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
             padding:16px 18px;color:var(--text);font-weight:650;font-size:.94rem;transition:border-color .18s ease}
  .postnav a:hover{border-color:var(--rose);text-decoration:none}
  .postnav span{display:block;font-size:.75rem;color:var(--dim);font-weight:400;margin-bottom:5px;
                text-transform:uppercase;letter-spacing:.09em}
  .postnav .next{text-align:right}

  /* ---------- dodatki motywu ---------- */
  .final-article{margin-top:44px}
  /* Strona statyczna (Kontakt, Polityka prywatności) korzysta z typografii artykułu. */
  .page-body{padding:clamp(26px,3.5vw,42px) 0 clamp(40px,6vw,70px)}
  .page-body h1{margin-bottom:28px}
  /* Byline bez awatara — nie mamy zdjęć autorów w bibliotece mediów. */
  .byline .who span b{color:var(--text)}

  /* ---------- mobile: pierwszeństwo ma treść ---------- */
  @media(max-width:700px){
    /* Ostatni okruszek to tytuł artykułu, a ten sam tytuł stoi w H1 dwie linijki niżej.
       Na wąskim ekranie zajmował trzy wiersze, nie wnosząc niczego. Schemat
       BreadcrumbList generuje Yoast z danych, nie z tych znaczników — ukrycie
       wizualne go nie dotyka. */
    .crumbs > span[aria-current]{display:none}
    .crumbs > span[aria-hidden]:nth-last-of-type(2){display:none}
    .crumbs{font-size:.78rem;margin-bottom:12px;gap:6px}

    /* Autor, data publikacji i data weryfikacji schodzą do boksu autora na końcu
       artykułu. Przed przeczytaniem tekstu użyteczna jest tylko jedna z tych liczb:
       ile to zajmie. Reszta to sygnały E-E-A-T, które działają tak samo na dole. */
    .byline .who,
    .byline .meta-item:not(.meta-read){display:none}
    .byline{padding-bottom:14px;gap:8px 14px;font-size:.82rem}

    .art-head{padding-top:18px}
    .art-wrap{gap:0}

    /* Siatka artykułu zwija się na wąskim ekranie do jednej kolumny, przez co spis
       treści lądował DOPIERO POD całym tekstem (ok. 7500 px w dół) — czyli tam, gdzie
       jest już bezużyteczny. Przeniesienie go nad treść zepchnęłoby artykuł w dół,
       więc na mobile po prostu go nie pokazujemy. Nagłówki nadal mają id,
       więc linki z kotwicą działają. */
    .toc{display:none}
  }

  /* Daty w boksie autora — na desktopie powtórzenie byline'u, na mobile jedyne miejsce,
     w którym czytelnik je znajdzie. */
  .author-dates{display:block;margin-top:10px;font-size:.8rem;color:var(--dim)}