/* Strona artykułu — task01.22 (styl per strona/komponent — docs/podejscie-css.md).
   Wg FeuerDS „Strona artykułu" 5111:5172: desktop 5353:6107, mobile 5353:7097 (ramki
   „Artykuł z różnymi elementami", stan 2026-09-13; wcześniejsze 5124:5210 / 5124:5891 tam,
   gdzie nowe nie mają elementu — sekcja otwierająca mobile, zdjęcie z podpisem mobile).
   Typografia treści: .tresc (A40, typografia.css). Wizual sekcji otwierającej zależy
   od sekcji serwisu, w której jest artykuł — w makiecie zaślepka (scena z task01.10).
   Tablet (640–1023): układ desktopowy (decyzja 2026-09-13); rama strony bez zmian. */

.artykul {
  max-width: 90rem;                 /* stop skali z task01.06 — jak sekcje otwierające */
  margin-inline: auto;
  padding-bottom: var(--odstep-5);  /* 40 do stopki */
}

/* ---- Sekcja otwierająca (K27) ----
   Zdjęcie 617 pod headerem; na nim okruszki (tekst 16 pod headerem), etykieta kategorii
   (tekst 70 pod headerem), H1 64/64 Bold biały (175 pod headerem, szer. 1057).
   Karta treści nachodzi 212 na zdjęcie; tytuł dłuższy niż dwa wiersze wydłuża zdjęcie. */
.artykul-top {
  position: relative;
  box-sizing: border-box;
  min-height: 38.5625rem;           /* 617 */
  padding-bottom: 19.625rem;        /* 314 = 102 pod tytułem + 212 pod kartą */
}

.artykul-top .kontener { position: relative; }

/* okruszki / link wstecz → etykieta: wspólna reguła w rama.css */

.artykul-tytul {
  max-width: 66.0625rem;            /* 1057 */
  margin: 4.6875rem 0 0;            /* 75: etykieta (tekst 70, wys. 30) → tytuł 175 pod headerem */
}

/* Typografia H1 — także pole tytułu w edytorze wpisu (kolor bez zmian: w edytorze bez zdjęcia pod tytułem) */
.artykul-tytul,
.editor-styles-wrapper.post-type-post .editor-post-title {
  font-size: var(--tekst-64);
  line-height: 4rem;                /* 64/64 */
  font-weight: var(--waga-gruba);
}

/* ---- Karta treści ---- padding 80/72, bloki co 80 */
.artykul-karta {
  position: relative;
  margin-top: -13.25rem;            /* 212 na zdjęciu */
  padding: var(--odstep-10) 4.5rem;
  background: var(--kolor-tla);
}

/* ---- Pasek meta (K28) ----
   Ikona 20 #6a7a8c + tekst 16/22.4; separator 1 px w kolorze marki, 24 z obu stron. */
.artykul-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--odstep-3);
  row-gap: var(--odstep-1);
  margin: 0 0 var(--odstep-3);      /* 24 do leadu i spisu treści */
  padding: 0;
  list-style: none;
}

.artykul-meta li {
  display: flex;
  align-items: center;
  gap: var(--odstep-1);
}

.artykul-meta li + li {
  padding-left: var(--odstep-3);
  border-left: 1px solid var(--kolor-marki);
}

.artykul-meta img { width: 1.25rem; height: 1.25rem; }

/* ---- Lead + spis treści ----
   Kolumny 608 i 372 z odstępem 80; lead 24 niżej niż boks; 80 do pierwszego bloku. */
.artykul-wstep {
  display: grid;
  grid-template-columns: 38rem 23.25rem;
  align-items: start;
  gap: var(--odstep-10);
  margin-bottom: var(--odstep-10);
}

.artykul-wstep .tresc .is-style-wstep { padding-top: var(--odstep-3); }

/* ---- Spis treści (K29) ----
   Boks #f5f7fb, padding 24, tytuł 20/28 ExtraBold, 16 do listy; pozycje co 12:
   caret w prawo 24 (czerwony) + link 16/22.4 podkreślony. Pozycje z H2 treści (js/spis-tresci.js).
   Hover: tekst w kolorze marki (bez projektu — decyzja 2026-09-13: z palety linków atomów). */
.spis-tresci {
  padding: var(--odstep-3);
  background: var(--kolor-tla-wyroznionego);
}

.spis-tresci-tytul {
  margin: 0 0 var(--odstep-2);
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-najgrubsza);
}

.spis-tresci ol {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spis-tresci a {
  display: flex;
  align-items: flex-start;
  gap: var(--odstep-1);
  color: var(--kolor-tekstu);
  text-decoration: none;
}

.spis-tresci a img { flex: none; width: 1.5rem; height: 1.5rem; }

.spis-tresci-tekst {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.spis-tresci a:hover { color: var(--kolor-marki); }

/* ---- „Sprawdź także" (5353:6214) ----
   24 pod akapitem; „Sprawdź także:" Bold, link w kolorze tekstu podkreślony (hover jak spis treści). */
.tresc .sprawdz-takze { margin-top: var(--odstep-3); }
.tresc .sprawdz-takze a { color: var(--kolor-tekstu); }
.tresc .sprawdz-takze a:hover { color: var(--kolor-marki); }

/* ---- Pas z tekstem i zdjęciem (K32, 5353:6289 / mobile 5353:7621) ----
   Pełna szerokość, tło #f5f7fb, tuż pod kartą; padding 80/194; tekst 20/28 Bold i zdjęcie
   494×308 w kolumnach z odstępem 64. Mobile: padding 40/16, tekst nad zdjęciem 361×361, odstęp 64. */
.artykul-pas {
  padding: var(--odstep-10) 12.125rem;
  background: var(--kolor-tla-wyroznionego);
}

.artykul-pas-uklad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--odstep-8);
  max-width: 65.75rem;              /* 1052 */
  margin-inline: auto;
}

.artykul-pas p {
  margin: 0;
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-gruba);
}

.artykul-pas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 494 / 308;
  object-fit: cover;
}

/* ---- Wizytówka autora (K30, 5353:6305 / mobile 5353:7325) ----
   Boks #f5f7fb 1060 (w linii łamu karty), padding 24, 40 pod pasem; odstęp 40 (mobile 24);
   zdjęcie 94×94 na czerwonym kwadracie 94×94 przesuniętym o 10 w lewo i w górę;
   imię 16 Bold, opis 16/22.4 (szer. 659), odstęp 8. Mobile: bez tła, padding 24/0, 24 pod pasem. */
.artykul-autor {
  display: flex;
  align-items: flex-start;
  gap: var(--odstep-5);
  margin: var(--odstep-5) 4.5rem 0;
  padding: var(--odstep-3);
  background: var(--kolor-tla-wyroznionego);
}

.artykul-autor-zdjecie {
  position: relative;
  flex: none;
  width: 6.5rem;                    /* 104 */
  height: 6.5rem;
}

.artykul-autor-zdjecie::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5.875rem;                  /* 94 */
  height: 5.875rem;
  background: var(--kolor-marki);
}

.artykul-autor-zdjecie > * {
  position: absolute;
  top: 0.625rem;                    /* 10 */
  left: 0.625rem;
  width: 5.875rem;
  height: 5.875rem;
  object-fit: cover;
  background: var(--kolor-zdjecia-brak);
}

.artykul-autor-imie {
  margin: 0 0 var(--odstep-1);
  font-weight: var(--waga-gruba);
}

.artykul-autor-opis {
  max-width: 41.1875rem;            /* 659 */
  margin: 0;
}

/* ---- Mobile (5353:7097; sekcja otwierająca wg 5124:5891) ----
   Zdjęcie 260 bez karty: pod nim (32) pasek meta, spis treści pełnej szerokości (24),
   lead (40), bloki co 48; 40 do pasa; wizytówka 24 pod pasem i 24 do stopki.
   Mobile w DS ma przy tytule strzałkę z etykietą — tu link wstecz i etykieta
   (decyzja projektantki 2026-09-12, K9). */
@media (max-width: 639px) {
  .artykul { padding-bottom: var(--odstep-3); }

  .artykul-top {
    min-height: 16.25rem;           /* 260 */
    padding-bottom: var(--odstep-3);
  }

  .artykul-tytul { margin-top: var(--odstep-3); }

  .artykul-tytul,
  .editor-styles-wrapper.post-type-post .editor-post-title {
    font-size: var(--tekst-32);
    line-height: 2.5rem;            /* 32/40 */
    font-weight: var(--waga-najgrubsza);
  }

  .artykul-karta {
    margin-top: var(--odstep-4);
    padding: 0 0 var(--odstep-5);
    background: none;
  }

  .artykul-meta li:nth-child(3) {   /* autor w drugim wierszu, bez separatora */
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .artykul-wstep {
    display: flex;
    flex-direction: column-reverse; /* spis treści nad leadem */
    align-items: stretch;           /* spis pełnej szerokości także przy krótkich pozycjach */
    gap: var(--odstep-5);
    margin-bottom: var(--odstep-6);
  }

  .artykul-wstep .tresc .is-style-wstep { padding-top: 0; }

  .spis-tresci { margin-inline: calc(-1 * var(--odstep-2)); }

  .artykul-pas { padding: var(--odstep-5) var(--odstep-2); }

  .artykul-pas-uklad {
    grid-template-columns: none;
    gap: var(--odstep-8);
  }

  .artykul-pas img { aspect-ratio: 1; }

  .artykul-autor {
    gap: var(--odstep-3);
    margin: 0;
    padding: var(--odstep-3) 0;
    background: none;
  }
}