/* ==========================================================================
   Podstrona Aktualnosci - "Skad biora sie te wpisy".

   Stoi pod szyna kanalu i tlumaczy mechanizm zamiast go udawac.
   Po lewej mieszany naglowek i dwa akapity, po prawej legenda etykiet,
   ktore widac na kartach szyny - wiersze na hairline'ach, jak spis polek.

   Zero CTA. Wezwanie na profil stoi raz, w sekcji .aktprofil nad ta - tutaj
   powtarzalo tresc, ktora czytalo sie chwile wczesniej. Fiolet zostaje wiec
   tylko w legendzie etykiet, tej samej, ktora niosa karty na polce.
   ========================================================================== */

.aktskad__in { row-gap: clamp(1.5rem, 3vw, 2rem); }

@media (min-width: 1024px) {
  /* Kreska prowadzi wzdluz calej sekcji (height:100% z .marked), a slowo ma
     stac u gory. W vertical-rl osia glowna flexa jest pion, wiec ustawiamy je
     przed obrotem na dole - rotate(180deg) wynosi je na gore. */
  .aktskad .marked > .label {
    display: flex;
    justify-content: flex-end;
  }
}

.aktskad__grid {
  display: grid;
  gap: clamp(2.75rem, 6vw, 4.5rem);
}

@media (min-width: 900px) {
  .aktskad__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* --- Kolumna z wyjasnieniem --------------------------------------------- */
.aktskad__h {
  max-width: 14ch;
  font-size: clamp(2.2rem, 1.2rem + 4.2vw, 4rem);
  line-height: 1.02;
}

.aktskad__p {
  max-width: 44ch;
  margin-top: clamp(1.35rem, 2.6vw, 1.9rem);
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.0125rem);
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.aktskad__h + .aktskad__p { margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }

/* --- Domkniecie kolumny -------------------------------------------------- */
/* Nie CTA, tylko wyjscie awaryjne dla kogos, kto woli rozmowe niz przewijanie
   wpisow. Hairline nad nim oddziela je od wyjasnienia mechanizmu. */
.aktskad__note {
  max-width: 44ch;
  margin-top: clamp(1.5rem, 3vw, 2.1rem);
  padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}
.aktskad__note a { color: var(--ink); transition: color var(--dur) var(--ease); }
.aktskad__note a:hover { color: var(--purple); }

@media (min-width: 900px) {
  /* Kolumna zasad jest wyzsza od kolumny z wyjasnieniem, wiec bez tego pod
     telefonem zostawala pusta plama na wysokosc dwoch krokow. Notka zjezdza
     na dol kolumny i staje na tej samej linii co dolny hairline listy zasad -
     obie kolumny domykaja sie razem. Auto zjada margines, wiec minimalny
     odstep nad kreska niesie od teraz padding. */
  .aktskad__say { display: flex; flex-direction: column; }
  .aktskad__note {
    margin-top: auto;
    padding-top: clamp(1.75rem, 3.4vw, 2.5rem);
  }
}

/* --- Mechanizm krok po kroku -------------------------------------------- */
.aktskad__keyh {
  display: block;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.aktskad__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--hairline);
}
.aktskad__step:last-child { border-bottom: 1px solid var(--hairline); }

@media (min-width: 560px) {
  .aktskad__step {
    grid-template-columns: minmax(3rem, 4rem) minmax(0, 1fr);
    column-gap: clamp(0.9rem, 1.8vw, 1.4rem);
  }
}

/* Numer plus kreska dobijajaca do krawedzi kolumny - ten sam gest co w krokach
   badania, zeby podstrony mowily jednym jezykiem. */
.aktskad__n {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  font: 300 1rem/1.3 var(--serif);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.aktskad__n::after {
  content: "";
  flex: 1;
  max-width: 2rem;
  height: 1px;
  background: var(--hairline);
}

@media (min-width: 560px) {
  .aktskad__n {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .aktskad__n::after { max-width: none; }
  .aktskad__t,
  .aktskad__d { grid-column: 2; }
}

.aktskad__t { letter-spacing: -0.01em; }

/* Wspolna miara kolumny. Wczesniej stalo tu 30rem, czyli wiecej niz sama
   kolumna kiedykolwiek dostaje - cap nie dzialal i o zlamaniu decydowala
   przypadkowa szerokosc okna. Efekt: krotszy opis ("Etykieta") jechal jedna
   linia jeszcze przy 1382px, kiedy sasiedzi lamali sie juz przy 1320px, wiec
   kroki nie mialy wspolnego rytmu. Miara w ch jest wezsza niz kolumna na kazdym
   desktopie, wiec wszystkie cztery opisy lamia sie w tym samym miejscu tekstu,
   niezaleznie od okna. */
.aktskad__d {
  max-width: 34ch;
  margin-top: clamp(0.4rem, 0.9vw, 0.65rem);
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Legenda etykiet ---------------------------------------------------- */
/* Zamyka sekcje jedna linia przez cala szerokosc - to jest spis mozliwych
   etykiet, nie lista wpisow, wiec nie moze wygladac jak karty ani jak filtry.
   Fiolet ten sam co na kartach polki, zeby czytalo sie jako jeden slownik. */
.aktskad__tags {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.25rem, 2.4vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 768px) {
  .aktskad__tags {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.aktskad__tagsh { display: block; }

.aktskad__taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.25rem, 3vw, 2.5rem);
}

.aktskad__tag {
  font: 500 0.6rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}