/* ============================================================
   ARTYKUŁ — styl podstron edukacyjnych (Aktualności/Wiedza).
   Wąska kolumna tekstu dla czytelności, nagłówki i wyliczenia
   spójne z resztą serwisu. Bez formularzy. Ładowany razem z
   global.css (szkielet strony).
   ============================================================ */

/* Nagłówek artykułu: mniejszy niż domyślny u-display na innych podstronach. */
.page--artykul .u-display{
  font-size:clamp(1.9rem,4.2vw,3.3rem);
  line-height:1.1;
  letter-spacing:-.02em;
}

.artykul{
  max-width:70ch;
  display:grid;
  gap:1.4rem;
}

/* Metryczka nad tekstem: data, czas czytania, kategoria. */
.artykul__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  align-items:baseline;
  padding-bottom:1.4rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);
}
.artykul__meta b{color:var(--ink);font-weight:700}

.artykul__lead{
  font-size:clamp(1.1rem,1.5vw,1.35rem);
  line-height:1.55;font-weight:500;color:var(--ink);
  margin-bottom:.4rem;
}

.artykul h2{
  font-size:var(--fs-h2);
  font-weight:600;letter-spacing:-.02em;line-height:1.12;
  margin-top:clamp(1.6rem,3.4vw,2.8rem);
}
.artykul h3{
  font-size:var(--fs-h3);
  font-weight:600;letter-spacing:-.01em;line-height:1.25;
  margin-top:1.1rem;
}

.artykul p{
  font-size:1.02rem;line-height:1.7;color:var(--ink);
}
.artykul p + p{margin-top:-.2rem}

.artykul a:not(.pill){
  color:var(--ink);
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--line);
  transition:text-decoration-color .25s var(--ease);
}
.artykul a:not(.pill):hover{text-decoration-color:currentColor}

.artykul strong{font-weight:600}

/* Zdjęcie w artykule — na całą szerokość kolumny tekstu. */
.artykul__figura{margin:.6rem 0;display:block}
.artykul__figura img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:58% 30%;background:var(--bone)}
.artykul__figura figcaption{
  margin-top:.7rem;
  font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
}

/* Ramka „W skrócie" — beżowa, zbiera najważniejsze punkty. */
.artykul__box{
  background:var(--bone);
  padding:clamp(1.5rem,3vw,2.2rem);
  display:grid;gap:1rem;
  margin:.6rem 0;
}
.artykul__box-tytul{
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);
}

/* Wyliczenie z ptaszkiem — jak na landingach. */
.artykul-lista{display:grid;gap:0;list-style:none;margin:0;padding:0}
.artykul-lista li{
  position:relative;
  padding:.9rem 0 .9rem 2rem;
  border-top:1px solid var(--line);
  font-size:1rem;line-height:1.55;color:var(--ink);
}
.artykul-lista li:first-child{border-top:0}
.artykul-lista li::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:.85rem;height:.5rem;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg);
}
.artykul__box .artykul-lista li{border-top-color:rgba(0,0,0,.12)}

/* Zwykłe wyliczenie w treści (myślniki). */
.artykul-punkty{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.7rem}
.artykul-punkty li{
  position:relative;padding-left:1.4rem;
  font-size:1.02rem;line-height:1.65;color:var(--ink);
}
.artykul-punkty li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.7rem;height:1.5px;background:var(--ink);
}
.artykul-punkty b{font-weight:600}

/* Zamknięcie: odesłanie do podstrony/kontaktu, bez formularza. */
.artykul__zamkniecie{
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--line);
  display:grid;gap:1.1rem;max-width:64ch;
}
.artykul__zamkniecie h2{margin-top:0}
.artykul__zamkniecie .u-lede{max-width:60ch}
.artykul__links{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

.artykul__disclaimer{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-size:.82rem;line-height:1.55;color:var(--ink-soft);max-width:82ch;
}

@media (max-width:560px){
  .artykul p,.artykul-punkty li{font-size:1rem}
}


/* ============================================================
   Wariant „Aktualności" — pomarańczowy akcent spójny z sekcją #aktualnosci.
   Hero na pełnym pomarańczu (biały tekst); treść zostaje na papierze dla
   czytelności, a kartę „W skrócie" utrzymujemy w tym samym pomarańczu.
   Klasy: `page--aktualnosci` na nagłówku + `artykul--aktualnosci` na treści.
   ============================================================ */
.page--aktualnosci{background:var(--orange)}
/* Pomarańczowy pas na CAŁĄ SZEROKOŚĆ; tylko TEKST hero wpuszczony w marginesy —
   blok 1120px wyśrodkowany, ten sam co treść → tytuł równy z tekstem pod spodem. */
.page--aktualnosci .page__head{max-width:1120px;margin-inline:auto}
.page--aktualnosci .page__head .u-lede{max-width:58ch}
.page--aktualnosci .u-meta{color:var(--paper);opacity:.82}
.page--aktualnosci .u-display{color:var(--paper)}
.page--aktualnosci .u-lede{color:var(--paper);opacity:.92}

.artykul--aktualnosci .artykul__box{background:var(--orange);color:var(--paper)}
.artykul--aktualnosci .artykul__box .artykul__box-tytul{color:var(--paper);opacity:.85}
.artykul--aktualnosci .artykul__box .artykul-lista li{border-top-color:rgba(255,255,255,.3);color:var(--paper)}
.artykul--aktualnosci .artykul__box .artykul-lista li::before{border-color:var(--paper)}

/* Drobny pomarańczowy akcent w treści: znaczniki list i podkreślenia linków. */
.artykul--aktualnosci .artykul-punkty li::before{background:var(--orange)}
.artykul--aktualnosci .artykul-lista:not(.artykul__box .artykul-lista) li::before{border-color:var(--orange)}
.artykul--aktualnosci .artykul a:not(.pill){text-decoration-color:var(--orange)}
.artykul--aktualnosci .pill--solid{background:var(--orange);border-color:var(--orange);color:var(--paper)}
.artykul--aktualnosci .pill--solid:hover{background:transparent;color:var(--orange);border-color:var(--orange)}

/* ============================================================
   Wariant „Wiedza" — ciemny akcent spójny z sekcją #wiedza (band--night).
   Hero na grafitowej czerni (biały tekst); treść zostaje na papierze,
   karty „W skrócie"/checklista utrzymane w tej samej czerni.
   Klasy: `page--wiedza` na nagłówku + `artykul--wiedza` na treści.
   ============================================================ */
.page--wiedza{background:var(--night)}
/* Ciemny pas na CAŁĄ SZEROKOŚĆ; tylko TEKST hero wpuszczony w marginesy — blok
   1120px wyśrodkowany, ten sam co treść → tytuł równy z tekstem pod spodem. */
.page--wiedza .page__head{max-width:1120px;margin-inline:auto}
.page--wiedza .page__head .u-lede{max-width:58ch}
.page--wiedza .u-meta{color:var(--paper);opacity:.72}
.page--wiedza .u-display{color:var(--paper)}
.page--wiedza .u-lede{color:var(--paper);opacity:.86}

.artykul--wiedza .artykul__box{background:var(--night);color:var(--paper)}
.artykul--wiedza .artykul__box .artykul__box-tytul{color:var(--paper);opacity:.7}
.artykul--wiedza .artykul__box .artykul-lista li{border-top-color:rgba(255,255,255,.22);color:var(--paper)}
.artykul--wiedza .artykul__box .artykul-lista li::before{border-color:var(--paper)}
.artykul--wiedza .artykul__figura figcaption{color:var(--ink-soft)}

/* ============================================================
   Artykuły Wiedzy: układ dwukolumnowy — treść po lewej, karta „W skrócie"
   po prawej. Karta oddzielona od hero, wyśrodkowana w prawej kolumnie,
   czarne tło + biały tekst jak w hero. Bez sticky.
   ============================================================ */
.artykul--wiedza,
.artykul--aktualnosci{
  max-width:1120px;
  margin-inline:auto;
  grid-template-columns:minmax(0,1fr) 380px;
  column-gap:clamp(2rem, 4vw, 3.5rem);
  row-gap:0;
  align-items:start;
}
.artykul--wiedza > .artykul__col,
.artykul--aktualnosci > .artykul__col{display:grid;gap:1.4rem;min-width:0}
.artykul--wiedza > .artykul__side,
.artykul--aktualnosci > .artykul__side{
  grid-column:2;grid-row:1;
  margin-top:clamp(2.2rem, 4.5vw, 3.6rem);
}

/* Wspólny kształt karty „W skrócie" w prawej kolumnie (owalne rogi, wyśrodkowana). */
.artykul--wiedza .artykul__box--aside,
.artykul--aktualnosci .artykul__box--aside{
  width:min(100%, 340px);
  margin-inline:auto;
  border-radius:clamp(1.6rem, 2.4vw, 2.2rem);
}
/* Wiedza: karta czarna. */
.artykul--wiedza .artykul__box--aside{
  background:var(--night);
  color:var(--paper);
  border:1px solid rgba(255,255,255,.18);
}
.artykul--wiedza .artykul__box--aside .artykul__box-tytul{color:var(--paper);opacity:.72}
.artykul--wiedza .artykul__box--aside .artykul-lista li{border-top-color:rgba(255,255,255,.22);color:var(--paper)}
.artykul--wiedza .artykul__box--aside .artykul-lista li::before{border-color:var(--paper)}
/* Aktualności: karta pomarańczowa (kolor/tekst/ptaszki dziedziczy z reguł .artykul--aktualnosci .artykul__box). */
.artykul--aktualnosci .artykul__box--aside{border:1px solid rgba(255,255,255,.28)}

@media (max-width:860px){
  .artykul--wiedza,
  .artykul--aktualnosci{grid-template-columns:1fr;max-width:70ch;row-gap:1.4rem}
  .artykul--wiedza > .artykul__side,
  .artykul--aktualnosci > .artykul__side{grid-column:1;grid-row:auto;order:-1;margin-top:0}
  .artykul--wiedza .artykul__box--aside,
  .artykul--aktualnosci .artykul__box--aside{width:auto;margin-inline:0}
}