/* ---- Blog: archiwum + pojedynczy wpis ----
 *
 * Ten sam jezyk wizualny co baza wiedzy /pomoc/ (gradient magenta->fiolet,
 * poswiaty w rogach, siatka w tle, twarde cienie) - blog i poradniki to dla
 * czytelnika jedna czesc serwisu, wiec maja wygladac jak rodzenstwo.
 *
 * Zmienne lokalne --blog-*, nie --color-* z main.css: ta sekcja ma wygladac
 * tak samo niezaleznie od tego, co nadpisze zmienne globalne gdzie indziej.
 */

.blog-page,
.wpis {
  --blog-primary:   #cc00a6;
  --blog-secondary: #7338ea;
  --blog-gradient: linear-gradient(135deg, #cc00a6 0%, #a01580 35%, #7338ea 70%, #4c1d9e 100%);
  --blog-bg:      #000408;
  --blog-card-bg: rgba(255, 255, 255, .03);
  --blog-border:  rgba(255, 255, 255, .12);
  --blog-text:    #ffffff;
  --blog-muted:   #a3a3ad;
  --blog-font-head: var(--font-heading, 'Poppins', sans-serif);
  --blog-font-body: var(--font-body, 'Inter', system-ui, sans-serif);

  position: relative;
  padding: 8rem 1.25rem 6rem;
  /* clip, nie hidden.
     Jedno i drugie przycina poswiaty z ::before tak samo, ale hidden robi z
     tego elementu kontener przewijania, a to wylacza position:sticky u kazdego
     potomka. Na hubach miast (ten sam main.blog-page) przestawala sie kleic
     karuzela wideo: pin odjezdzal w gore razem ze strona, a pod nim zostawalo
     ponad 1100 px pustej, czarnej sekcji, bo jej wysokosc jest liczona wlasnie
     jako zapas na przewijanie pina. clip nie tworzy kontenera przewijania,
     wiec sticky znowu lapie sie okna przegladarki. */
  overflow: clip;
  background: var(--blog-bg);
  color: var(--blog-text);
  font-family: var(--blog-font-body);
}

/* Sekcja wideo maluje wlasne tlo i musi siegac krawedzi okna.
   Siedzi w .blog-page, ktory ma boczny padding, wiec bez tego zostaje po bokach
   pas ciemnego tla strony. Dlugo tego nie bylo widac, bo sekcja stala na stalym
   ciemnym tle - dopiero gdy zaczela rozjasniac tlo przy przewijaniu, pas wyszedl
   na wierzch jako czarny margines przy jasnej sekcji.
   Ujemny margines odwraca padding rodzica. Nie uzywam 100vw, bo ta jednostka
   liczy sie razem z paskiem przewijania i dokladalaby poziomy scroll. */
.blog-page > .video-marquee {
  margin-inline: -1.25rem;
}

@media (max-width: 900px) {
  .blog-page > .video-marquee {
    margin-inline: -1rem;
  }
}

.blog-page::before,
.wpis::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 64px 100%;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* ---- Niebo: gwiazdy i meteory ----
 *
 * Cala warstwa jest fixed - jeden ekran zamiast plotna na cala wysokosc
 * wpisu (kilkanascie tysiecy pikseli), wiec pamiec i czas rysowania nie
 * rosna razem z dlugoscia tekstu.
 */
.blog-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.blog-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* METEOR - cienka smuga zakonczona jasna glowka. Element to sam ogon
   (gradient od przezroczystego do bieli), obrocony tak, zeby glowka
   prowadzila, a ogon ciagnal sie za nia. Ten sam efekt co w stopce. */
.blog-meteor {
  position: absolute;
  width: 150px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(232, 121, 249, .18) 42%,
    rgba(255, 255, 255, .6) 82%,
    #ffffff 100%
  );
  opacity: 0;
  transform: rotate(150deg);
  transform-origin: 100% 50%;
  will-change: transform, opacity;
  animation-name: blog-meteor-lot;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

/* Glowka - jasny punkt na czele smugi. */
.blog-meteor::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .75);
}

/* Lot zajmuje tylko czesc cyklu, reszta to przerwa - inaczej niebo
   wygladaloby jak deszcz meteorow, a ma byc rzadkim zjawiskiem. */
@keyframes blog-meteor-lot {
  0%        { opacity: 0;   transform: translate3d(0, 0, 0) rotate(150deg) scaleX(.35); }
  3%        { opacity: 1;   transform: translate3d(-60px, 35px, 0) rotate(150deg) scaleX(1); }
  22%       { opacity: .85; }
  32%, 100% { opacity: 0;   transform: translate3d(-330px, 190px, 0) rotate(150deg) scaleX(.7); }
}

/* Lustrzany kierunek. Obrot o 30 stopni kieruje prawy koniec paska
   w dol-prawo, wiec jasna glowka nadal prowadzi - gradientu NIE odwracamy,
   bo wtedy kulka ladowalaby na koncu ogona zamiast na czele. */
.blog-meteor--w-prawo {
  transform: rotate(30deg);
  animation-name: blog-meteor-lot-w-prawo;
}

@keyframes blog-meteor-lot-w-prawo {
  0%        { opacity: 0;   transform: translate3d(0, 0, 0) rotate(30deg) scaleX(.35); }
  3%        { opacity: 1;   transform: translate3d(60px, 35px, 0) rotate(30deg) scaleX(1); }
  22%       { opacity: .85; }
  32%, 100% { opacity: 0;   transform: translate3d(330px, 190px, 0) rotate(30deg) scaleX(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-meteor { animation: none; opacity: 0; }
}

.blog-glow {
  position: absolute;
  top: -28%;
  left: -18%;
  width: 60vw;
  max-width: 760px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
  background: radial-gradient(circle closest-side,
    rgba(204, 0, 166, .5) 0%,
    rgba(204, 0, 166, .26) 32%,
    rgba(204, 0, 166, .1) 55%,
    transparent 75%);
  animation: blog-aura-1 22s ease-in-out infinite;
}

.blog-glow::after {
  content: '';
  position: absolute;
  top: 60vh;
  right: -30vw;
  width: 55vw;
  max-width: 700px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(115, 56, 234, .48) 0%,
    rgba(115, 56, 234, .24) 32%,
    rgba(115, 56, 234, .09) 55%,
    transparent 75%);
  animation: blog-aura-2 28s ease-in-out infinite;
}

@keyframes blog-aura-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: .6; }
  50%      { transform: translate3d(10%, 12%, 0) scale(1.12); opacity: .85; }
}

@keyframes blog-aura-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1);      opacity: .8; }
  50%      { transform: translate3d(-12%, -10%, 0) scale(1);  opacity: .55; }
}

/* Poswiaty dryfuja bez konca - przy wlaczonej redukcji ruchu stoja. */
@media (prefers-reduced-motion: reduce) {
  .blog-glow,
  .blog-glow::after { animation: none; }
}

/* ---- Naglowek archiwum ---- */

.blog-head {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.blog-head__eyebrow {
  display: inline-block;
  font-family: var(--blog-font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blog-primary);
  margin: 0 0 1rem;
  padding: .35rem .9rem;
  border: 1px solid rgba(204, 0, 166, .4);
  border-radius: 999px;
  background: rgba(204, 0, 166, .08);
}

.blog-head__title {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.blog-head__accent {
  background: var(--blog-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-head__lead {
  color: var(--blog-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 2.25rem;
}

.blog-search {
  position: relative;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}

.blog-search__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--blog-muted);
  pointer-events: none;
}

.blog-search__input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3rem;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  color: var(--blog-text);
  font-family: var(--blog-font-body);
  font-size: .9375rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.blog-search__input::placeholder { color: var(--blog-muted); }

.blog-search__input:focus {
  outline: none;
  border-color: var(--blog-primary);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 4px rgba(204, 0, 166, .18);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  justify-content: center;
}

.blog-chip {
  padding: .5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  background: rgba(255, 255, 255, .03);
  color: var(--blog-muted);
  font-family: var(--blog-font-head);
  font-weight: 600;
  font-size: .8125rem;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;
}

.blog-chip:hover { color: var(--blog-text); border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); }

.blog-chip.is-active {
  color: #fff;
  background: var(--blog-gradient);
  border-color: transparent;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(204, 0, 166, .5);
}

/* ---- Wyrozniony wpis: jedna szeroka karta nad siatka ---- */

.blog-featured {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  max-width: 78rem;
  margin: 0 auto 3.5rem;
  border-radius: 24px;
  overflow: hidden;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.blog-featured:hover {
  transform: translateY(-4px);
  border-color: rgba(204, 0, 166, .45);
  box-shadow: 0 20px 50px rgba(204, 0, 166, .16);
}

.blog-featured__media {
  position: relative;
  min-height: 20rem;
  background: linear-gradient(160deg, #0d0512 0%, #050308 100%);
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .875rem;
  padding: 2.5rem;
}

.blog-featured__flag {
  align-self: flex-start;
  font-family: var(--blog-font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--blog-gradient);
  color: #fff;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, .35);
}

.blog-featured__title {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.25;
  margin: 0;
}

.blog-featured__excerpt {
  color: var(--blog-muted);
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0;
}

/* ---- Siatka kart ---- */

.blog-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  max-width: 78rem;
  margin: 0 auto;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* ::after, nie ::before - obwodka musi malowac sie NAD miniaturka. Ten sam
   powod co w .pomoc-card: ::before laduje za dzieckami karty. */
.blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--blog-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 2;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(204, 0, 166, .18);
}

.blog-card:hover::after { opacity: 1; }

.blog-card__media {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(160deg, #0d0512 0%, #050308 100%);
  display: block;
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.blog-card:hover .blog-card__media img { transform: scale(1.04); }

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
}

.blog-card__cat {
  font-family: var(--blog-font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--blog-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-card__title {
  font-family: var(--blog-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--blog-text);
  margin: 0;
}

.blog-card__excerpt {
  font-size: .875rem;
  color: var(--blog-muted);
  line-height: 1.55;
  margin: 0;
}

.blog-card__meta,
.blog-featured__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--blog-muted);
  font-family: var(--blog-font-head);
  font-weight: 500;
}

.blog-card__meta span,
.blog-featured__meta span { white-space: nowrap; }

.blog-card__dot,
.blog-featured__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blog-muted);
  flex: 0 0 auto;
}

.blog-empty {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--blog-muted);
  margin-top: 3rem;
}

.blog-card[hidden] { display: none; }

/* ---- Paginacja ---- */

.blog-pager {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin: 3.5rem auto 0;
  font-family: var(--blog-font-head);
  font-weight: 600;
  font-size: .875rem;
}

.blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .75rem;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  color: var(--blog-muted);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.blog-pager .page-numbers:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.blog-pager .page-numbers.current {
  color: #fff;
  background: var(--blog-gradient);
  border-color: transparent;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, .35);
}

/* ---- Pojedynczy wpis ---- */

.wpis__bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--blog-gradient);
  z-index: 60;
  pointer-events: none;
}

.wpis__container {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
}

/* display:flex, nie inline-flex - inaczej kafelek kategorii pod spodem
   doklei sie do tej samej linii zamiast zaczac nowa. */
.wpis__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .4rem;
  color: var(--blog-muted);
  text-decoration: none;
  font-family: var(--blog-font-head);
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 2rem;
  transition: color .2s ease, gap .2s ease;
}

.wpis__back:hover { color: var(--blog-primary); gap: .65rem; }

.wpis__cat {
  display: inline-block;
  font-family: var(--blog-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgba(204, 0, 166, .1);
  border: 1px solid rgba(204, 0, 166, .35);
  background-image: var(--blog-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 .75rem;
  text-decoration: none;
}

.wpis__title {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.wpis__lead {
  color: var(--blog-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.wpis__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--blog-border);
  margin-bottom: 2.5rem;
  font-family: var(--blog-font-head);
  font-size: .8125rem;
  color: var(--blog-muted);
}

.wpis__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--blog-border);
}

/* Autor bez wlasnego zdjecia dostaje z Gravatara szara sylwetke. Obok daty
   wyglada to jak brakujacy obrazek, wiec w metryce jej nie pokazujemy -
   zostaje samo imie, ktore i tak niesie cala informacje. */
.wpis__meta .avatar-default,
.wpis__meta img[src*="gravatar.com/avatar/?"],
.wpis__meta img[src*="d=mm"],
.wpis__meta img[src*="d=mystery"] {
  display: none;
}

.wpis__author-name { color: #fff; font-weight: 600; }

.wpis__media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--blog-border);
  margin: 0 0 2.5rem;
  box-shadow: 0 20px 60px rgba(204, 0, 166, .12);
}

.wpis__media img { width: 100%; height: auto; display: block; }

/* ---- Spis tresci ---- */

.wpis__toc {
  margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background: #06070c;
  border: 1px solid var(--blog-border);
}

.wpis__toc-title {
  font-family: var(--blog-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blog-muted);
  margin: 0 0 .875rem;
}

.wpis__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  counter-reset: toc;
}

.wpis__toc-list a {
  display: flex;
  gap: .625rem;
  color: var(--blog-muted);
  text-decoration: none;
  font-size: .9375rem;
  line-height: 1.45;
  transition: color .2s ease;
}

.wpis__toc-list a::before {
  counter-increment: toc;
  content: counter(toc);
  flex: 0 0 auto;
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: .8125rem;
  background: var(--blog-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wpis__toc-list a:hover { color: #fff; }

/* ---- Tresc wpisu ---- */

.wpis__body {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #e6e6ec;
}

.wpis__body > * + * { margin-top: 1.25em; }

/* ---- Naglowki w tresci ----
 *
 * H2 zaczyna nowy rozdzial, wiec dostaje wyrazny oddech nad soba, cienka
 * linie przez cala szerokosc kolumny i numer rozdzialu na niej - tak jak
 * pozycje w menu pelnoekranowym. Numeracja idzie z licznika CSS, wiec nie
 * trzeba jej wpisywac w tresci i nie rozjedzie sie po edycji.
 */
.wpis__body { counter-reset: rozdzial; }

.wpis__body h2 {
  position: relative;
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.9vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  margin-top: 4.5rem;
  padding-top: 2.25rem;
  scroll-margin-top: 6rem;
}

/* Linia nad naglowkiem: mocna w kolorach marki po lewej, gasnaca w prawo. */
.wpis__body h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #cc00a6, #7338ea 32%, rgba(255, 255, 255, .08) 75%, transparent);
}

/* Numer rozdzialu siedzi NA linii, wciety z lewej, w tej samej monospacji
   co numery w menu i HUD w hero. */
.wpis__body h2::after {
  counter-increment: rozdzial;
  content: '0' counter(rozdzial);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  padding-right: .75rem;
  background: var(--blog-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--blog-primary);
}

/* Pierwszy H2 po lidzie nie potrzebuje az takiego odstepu - nad nim i tak
   jest swiezo zakonczony wstep. */
.wpis__body > h2:first-child { margin-top: 1rem; }

.wpis__body h3 {
  position: relative;
  font-family: var(--blog-font-head);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  margin-top: 2.75rem;
  padding-left: 1.125rem;
}

/* Pionowa kreska zamiast numeru - H3 to podpunkt rozdzialu, nie nowy
   rozdzial, wiec znak jest cichszy. */
.wpis__body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #cc00a6, #7338ea);
}

/* Akapit tuz po naglowku startuje blizej niego niz kolejne akapity miedzy
   soba - naglowek i jego pierwsze zdanie czyta sie jako jedna calosc. */
.wpis__body h2 + p,
.wpis__body h3 + p { margin-top: .875rem; }

/* Naglowki wjezdzaja przy przewijaniu.
 *
 * Ukrycie wlacza dopiero klasa .ma-reveal, ktora dodaje blog.js. Gdyby
 * skrypt nie wstal (blad, blokada, stary telefon), naglowki po prostu sa -
 * nigdy nie zostaje pusta strona z niewidocznym tekstem.
 */
.wpis__body.ma-reveal h2,
.wpis__body.ma-reveal h3 {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}

.wpis__body.ma-reveal h2.jest-widoczny,
.wpis__body.ma-reveal h3.jest-widoczny {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .wpis__body.ma-reveal h2,
  .wpis__body.ma-reveal h3 { opacity: 1; transform: none; transition: none; }
}

.wpis__body a {
  color: var(--blog-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wpis__body a:hover { color: #e01ac0; }

.wpis__body strong { color: #fff; }

/* Przycisk wezwania stojacy W TRESCI.
   `.wpis__body a` (0,2,0) wygrywa specyficznoscia z `.oferta-cta__btn` (0,1,0),
   wiec malowal przycisk na magente tekstem po magentowym tle - napis znikal.
   Ta regula ma te sama wage co winowajca i przywraca biel oraz brak
   podkreslenia. Dotyczy wszystkich stron lokalnych i wpisow bloga. */
.wpis__body a.oferta-cta__btn {
  color: #fff;
  text-decoration: none;
}

.wpis__body a.oferta-cta__btn:hover {
  color: #fff;
}

/* ---- Listy ----
 *
 * Motyw ma globalny reset, ktory zdejmuje znaczniki list (list-style: none),
 * wiec numery i kropki rysujemy sami przez ::before. Przy okazji wygladaja
 * tak, jak reszta strony: numer w monospacji i w kolorze marki, punktor jako
 * krotka kreska gradientu.
 */
.wpis__body ul,
.wpis__body ol {
  list-style: none;
  padding-left: 0;
}

.wpis__body li {
  position: relative;
  padding-left: 2rem;
}

.wpis__body li + li { margin-top: .875rem; }

.wpis__body ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .7em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #cc00a6, #7338ea);
}

.wpis__body ol { counter-reset: punkt; }

.wpis__body ol > li::before {
  counter-increment: punkt;
  content: counter(punkt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blog-primary);
}

.wpis__body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--blog-primary);
  background: rgba(204, 0, 166, .06);
  border-radius: 0 12px 12px 0;
  color: #fff;
  font-size: 1.0625rem;
}

.wpis__body blockquote p { margin: 0; }

.wpis__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  border: 1px solid var(--blog-border);
  border-radius: 14px;
  overflow: hidden;
}

.wpis__body th,
.wpis__body td {
  padding: .875rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--blog-border);
}

.wpis__body th {
  font-family: var(--blog-font-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(204, 0, 166, .1);
}

.wpis__body tr:last-child td { border-bottom: none; }

/* Kwota nie ma się lamac na "2000" i "zl" w osobnych liniach - kolumna
   z cena dostaje tyle miejsca, ile potrzebuje. */
.wpis__body td[data-etykieta="Cena"],
.wpis__body td[data-etykieta="Koszt roczny"] > strong,
.wpis__body th:nth-child(2) {
  white-space: nowrap;
}

/* Grafiki w tresci maja oddech i wychodza lekko poza kolumne tekstu, zeby
   przerywaly czytanie zamiast wtapiac sie w kolejny akapit. */
.wpis__body figure {
  margin: 3.25rem 0;
}

.wpis__body figure img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

@media (min-width: 1100px) {
  .wpis__body figure {
    width: calc(100% + 7rem);
    margin-left: -3.5rem;
  }
}

.wpis__body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--blog-border);
}

.wpis__body figcaption {
  margin-top: .625rem;
  font-size: .8125rem;
  color: var(--blog-muted);
  text-align: center;
}

/* Tabela cen na malym ekranie przewija sie w poziomie zamiast rozpychac
   strone. pan-y w touch-action obowiazkowo, inaczej pionowy scroll palcem
   na wysokosci tabeli przestaje dzialac. */
.wpis-scroll {
  overflow-x: auto;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

/* ---- Wyrozniony blok w tresci (klucz na wynos) ---- */

.wpis-callout {
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background: #06070c;
  border: 1px solid rgba(204, 0, 166, .35);
  box-shadow: 0 10px 30px rgba(204, 0, 166, .1);
}

.wpis-callout__label {
  font-family: var(--blog-font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--blog-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 .5rem;
}

.wpis-callout p:last-child { margin-bottom: 0; }

/* ---- Autor ---- */

.wpis__author {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 3.5rem auto 0;
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.wpis__author img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--blog-border);
}

.wpis__author-label {
  font-family: var(--blog-font-head);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blog-muted);
  margin: 0 0 .25rem;
}

.wpis__author-bio {
  color: var(--blog-muted);
  font-size: .9375rem;
  line-height: 1.6;
  margin: .375rem 0 0;
}

/* ---- CTA na koncu wpisu ---- */

.wpis__cta {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: 2.25rem;
  border-radius: 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(204, 0, 166, .18), transparent 70%),
    #06070c;
  border: 1px solid var(--blog-border);
}

.wpis__cta-title {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: 1.375rem;
  margin: 0 0 .625rem;
}

.wpis__cta-text {
  color: var(--blog-muted);
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.wpis__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  background: var(--blog-gradient);
  color: #fff;
  text-decoration: none;
  font-family: var(--blog-font-head);
  font-weight: 600;
  font-size: .9375rem;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}

.wpis__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
}

.wpis__cta-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
}

/* ---- Powiazane wpisy ---- */

.wpis__related {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 5rem auto 0;
}

.wpis__related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.75rem;
  padding: 0 1.25rem;
}

.wpis__related-title {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.wpis__related-arrows {
  display: flex;
  gap: .5rem;
}

.wpis__related-arrow {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--blog-border);
  background: rgba(255, 255, 255, .03);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}

.wpis__related-arrow svg { width: 18px; height: 18px; }

.wpis__related-arrow:hover:not(:disabled) {
  border-color: rgba(204, 0, 166, .5);
  background: rgba(204, 0, 166, .12);
}

.wpis__related-arrow:disabled {
  opacity: .3;
  cursor: default;
}

/* Strzalki tylko na szerokim ekranie. Na telefonie przesuwa sie palcem,
   a dwa przyciski zabralyby miejsce naglowkowi.
   Swiadomie bez (pointer: coarse): laptopy z ekranem dotykowym maja i palec,
   i kursor, wiec strzalki im nie przeszkadzaja, a brak strzalek na duzym
   ekranie wyglada jak brakujaca kontrolka. */
@media (max-width: 900px) {
  .wpis__related-arrows { display: none; }
}

/* Listwa kart: natywne przewijanie w poziomie z zatrzymywaniem na kartach.
 *
 * touch-action MUSI zawierac pan-y - samo pan-x zabija pionowy scroll
 * palcem na wysokosci listwy i strona na telefonie sprawia wrazenie
 * zablokowanej.
 */
.wpis__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  padding: .5rem 1.25rem 1.5rem;
  /* Bez tego pierwsza karta "przyklejalaby sie" z pominieciem paddingu i
     listwa startowalaby przesunieta o 20px, z aktywna strzalka w lewo. */
  scroll-padding-left: 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(204, 0, 166, .5) transparent;
}

.wpis__rail > .blog-card {
  scroll-snap-align: start;
}

.wpis__rail::-webkit-scrollbar { height: 6px; }

.wpis__rail::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 99px;
}

.wpis__rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #cc00a6, #7338ea);
  border-radius: 99px;
}

/* Gdy karty i tak mieszcza sie na ekranie, listwa udaje zwykly rzad:
   bez paska przewijania i bez strzalek. */
.wpis__related.bez-przewijania .wpis__related-arrows { display: none; }
.wpis__related.bez-przewijania .wpis__rail { overflow-x: visible; }

@media (max-width: 900px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media { min-height: 13rem; }
  .blog-featured__body { padding: 1.75rem; }
}

@media (max-width: 640px) {
  .blog-page, .wpis { padding: 6.5rem 1rem 4rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .wpis__author { flex-direction: column; }

  /* Tabela trzykolumnowa na telefonie rozklada sie na kafelki: kazdy wiersz
     to osobny blok, a nazwa kolumny wraca jako etykieta przy wartosci
     (data-etykieta w tresci wpisu). Poziome przewijanie wygladalo jak
     ucieta tresc - czytelnik nie domyslal sie, ze tabele mozna przesunac. */
  .wpis__body table,
  .wpis__body tbody,
  .wpis__body tr,
  .wpis__body td {
    display: block;
    width: 100%;
  }

  .wpis__body thead { display: none; }

  .wpis__body table {
    border: none;
    border-radius: 0;
  }

  .wpis__body tr {
    margin-bottom: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--blog-border);
    border-radius: 14px;
    background: #06070c;
  }

  .wpis__body tr:last-child { margin-bottom: 0; }

  .wpis__body td {
    padding: 0 0 .75rem;
    border-bottom: none;
  }

  .wpis__body tr td:last-child { padding-bottom: 0; }

  .wpis__body td[data-etykieta]::before {
    content: attr(data-etykieta);
    display: block;
    margin-bottom: .2rem;
    font-family: var(--blog-font-head);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blog-muted);
  }

  /* Rozlozona tabela nie ma juz czego przewijac w poziomie. */
  .wpis-scroll { overflow-x: visible; }
}

/* ---- Sekcja darmowego audytu wklejona z landingu ----
 *
 * lp.css jest arkuszem calej strony docelowej i przestawia globalne zmienne
 * w :root - miedzy innymi --nav-height na 0px, bo landing nie ma belki.
 * Na wpisie belka jest, wiec te wartosci wracaja tutaj. blog.css laduje sie
 * po lp.css (zaleznosc w inc/enqueue.php), wiec to ten plik ma ostatnie slowo.
 */
:root {
  --nav-height: 72px;
  --color-bg-alt: #131318;
  --color-muted: #a3a3ad;
  --font-body: 'Inter', system-ui, sans-serif;
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }
}

/* Audyt jest zbudowany na siatce landingu i ma byc pelnej szerokosci, a
   kolumna tekstu wpisu ma 44rem - stad wyjscie z kontenera. */
.blog-audyt {
  position: relative;
  z-index: 1;
  margin: 5rem calc(50% - 50vw) 0;
  width: 100vw;
}

/* Landing zaczyna audyt od gory ekranu, we wpisie siedzi on w srodku
   strony - odcinamy go linia i zdejmujemy nadmiarowy odstep od gory. */
.blog-audyt .lp-audit {
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--blog-border);
}

/* Tlo sekcji audytu jest tym samym czarnym co wpis, wiec poswiaty wpisu
   nie moga swiecic nad nim. */
.blog-audyt .lp-audit__aura { z-index: 0; }

/* Sekcja strategii stoi tuz pod audytem, wiec nie powtarza linii
   oddzielajacej ani gornego odstepu - to ma byc jeden ciag, nie dwie
   doklejone plansze. */
.blog-audyt--strategia {
  margin-top: 0;
}

.blog-audyt--strategia .lp-last {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

/* Szerokosc panelu strategii jak na landingu.
 *
 * lp.css zwieksza go do 720px regula `body.lp-body .lp-last__inner`, a blog
 * tej klasy na <body> nie ma - zostawal wiec przy bazowych 520px i formularz
 * byl wyrazniej wezszy niz ten sam formularz na /strony-www/. */
.blog-audyt--strategia .lp-last__inner {
  max-width: 720px;
}

@media (max-width: 860px) {
  .blog-audyt--strategia .lp-last__inner { max-width: none; }
}

/* ---- Oznaczenie grafik generowanych przez AI ----
 *
 * Maly, polprzezroczysty znaczek w prawym dolnym rogu obrazka. Ma byc
 * uczciwy wobec czytelnika i widoczny przy kazdym przyjrzeniu sie zdjeciu,
 * ale nie ma konkurowac z trescia - stad niska nieprzezroczystosc i brak
 * ramki.
 *
 * Znaczek wisi na opakowaniu SAMEGO obrazka (.wpis-ai), nie na calej
 * figurze - inaczej przy figurze z podpisem ladowalby na podpisie, bo
 * podpis jest czescia figury i liczy sie do jej wysokosci.
 */
.wpis-ai {
  position: relative;
  display: block;
}

.wpis-ai > img {
  display: block;
  margin: 0;
}

.wpis-ai::after {
  content: 'AI';
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .25rem .5rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .72);
  pointer-events: none;
}

/* Obrazek wyrozniajacy ma zaokraglone rogi na figurze, wiec opakowanie
   musi je powtorzyc, zeby znaczek nie wystawal poza kadr. */
.wpis__media .wpis-ai { border-radius: inherit; overflow: hidden; }

/* ---- Strona lokalizacyjna (hub miasta) ----
 *
 * Dzieli tlo, karty i typografie z blogiem - to ta sama rodzina stron,
 * wiec nie ma powodu budowac drugiego zestawu regul.
 */
.miasto__kontekst,
.miasto__dojazd,
.miasto__tresc,
.miasto__faq {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto 3.5rem;
}

.miasto__uslugi {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 0 auto 4rem;
}

.miasto__sekcja-tytul {
  font-family: var(--blog-font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  text-align: center;
  margin: 0 0 2rem;
}

/* Kafle uslug na stronie miasta sa krotsze niz karty wpisow - nie maja
   daty ani czasu czytania, wiec nie potrzebuja tej samej wysokosci. */
.miasto__uslugi .blog-card__media { aspect-ratio: 16/10; }

.miasto__faq-lista h3:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .miasto__uslugi,
  .miasto__kontekst,
  .miasto__dojazd,
  .miasto__tresc,
  .miasto__faq { margin-bottom: 2.5rem; }
}

/* Obrazek wiodacy na stronie lokalnej - wezszy niz tresc bloga, bo pod nim
   idzie od razu akapit, a nie lid. */
.miasto__media {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto 3rem;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--blog-border);
  box-shadow: 0 20px 60px rgba(204, 0, 166, .12);
}

.miasto__media img { width: 100%; height: auto; display: block; }

/* ---- Obszar dzialania: linki do stron lokalnych ---- */
.obszar {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 0 auto 3.5rem;
  padding: 0 1.25rem;
  text-align: center;
}

.obszar__tytul {
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin: 0 0 1.25rem;
  color: #fff;
}

.obszar__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.obszar__lista li::before { content: none; }

.obszar__lista a {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: #a3a3ad;
  text-decoration: none;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: .8125rem;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}

.obszar__lista a:hover {
  color: #fff;
  border-color: rgba(204, 0, 166, .5);
  background: rgba(204, 0, 166, .1);
  transform: translateY(-1px);
}

/* Wariant do stopki: ciszej i bez wlasnego marginesu na dole, bo pod nim
   idzie juz dolny pasek stopki. */
.obszar--zwarta {
  margin-bottom: 1.5rem;
}

.obszar--zwarta .obszar__tytul {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: .875rem;
}

.obszar--zwarta .obszar__lista a {
  padding: .3rem .75rem;
  font-size: .75rem;
}

/* ---- Wykres wzrostu ----
 *
 * Rysowany w HTML i CSS, nie obrazkiem. Powody: waży tyle co nic, skaluje
 * sie na kazdym ekranie i jest czytelny dla wyszukiwarek, bo liczby siedza
 * w tekscie, a nie w pikselach.
 *
 * WAZNE co do uczciwosci: to ilustracja TYPOWEGO przebiegu, opisana wprost
 * w podpisie. Nie udajemy zrzutu z panelu konkretnego klienta, bo to byloby
 * zmyslonym dowodem.
 */
.wzrost {
  margin: 2.5rem 0;
  padding: 1.75rem 1.5rem 1.25rem;
  border-radius: 18px;
  background: #06070c;
  border: 1px solid var(--blog-border, rgba(255, 255, 255, .12));
}

.wzrost__tytul {
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blog-muted, #a3a3ad);
  margin: 0 0 1.5rem;
}

.wzrost__slupki {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: .625rem;
  height: 180px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpis__body .wzrost__slupki li,
.wzrost__slupki li {
  position: relative;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 0;
  margin: 0;
}

/* Wyzsza specyficznosc niz `.wpis__body ul > li::before`, ktore rysuje
   gradientowa kreske przy punktach list - bez tego kreski wisialy nad
   slupkami wykresu jak artefakt. */
.wpis__body .wzrost__slupki li::before,
.wzrost__slupki li::before { content: none; display: none; }

.wzrost__slupek {
  display: block;
  width: 100%;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #cc00a6, #7338ea);
  /* Wysokosc z atrybutu, zeby dane siedzialy w tresci, a nie w arkuszu. */
  height: var(--h, 10%);
  box-shadow: 0 0 18px rgba(204, 0, 166, .25);
}

/* Pierwsze miesiace sa ciemniejsze - to okres pracy, w ktorym efektu
   jeszcze nie widac i strona ma to pokazywac uczciwie. */
.wzrost__slupki li:nth-child(1) .wzrost__slupek,
.wzrost__slupki li:nth-child(2) .wzrost__slupek {
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
}

.wzrost__etykieta {
  display: block;
  margin-top: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--blog-muted, #a3a3ad);
  text-align: center;
}

.wzrost__podpis {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--blog-muted, #a3a3ad);
}

@media (max-width: 640px) {
  .wzrost { padding: 1.25rem 1rem 1rem; }
  .wzrost__slupki { height: 140px; gap: .375rem; }
}

/* ---- Opinie i realizacje na stronie lokalnej ---- */
.miasto__realizacje,
.miasto__opinie {
  position: relative;
  z-index: 1;
  max-width: 78rem;
  margin: 0 auto 4rem;
  padding: 0 1.25rem;
}

.opinie-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.opinia {
  margin: 0;
  padding: 1.75rem;
  border-radius: 20px;
  background: var(--blog-card-bg, rgba(255, 255, 255, .03));
  border: 1px solid var(--blog-border, rgba(255, 255, 255, .12));
}

.opinia__gwiazdki {
  margin: 0 0 .875rem;
  font-size: .9375rem;
  letter-spacing: .12em;
  color: #ffc53d;
}

.opinia__cytat {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: #e6e6ec;
}

.opinia__autor {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
}

.opinia__kto {
  font-weight: 600;
  font-size: .875rem;
  color: #fff;
}

.opinia__firma {
  font-size: .75rem;
  color: var(--blog-muted, #a3a3ad);
}

.miasto__cta-wczesny,
.miasto__cta-strategia {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 0 1.25rem;
}

/* ---- Blok wartosci w srodku tresci ----
 *
 * Powod: darmowy audyt i generator strategii stoja na samym dole strony.
 * Czlowiek, ktory odpadnie w polowie, nigdy ich nie zobaczy, a to one sa
 * tu jedyna rzecza, ktora realnie cos mu daje przed rozmowa o pieniadzach.
 * Ten blok podaje je w miejscu, w ktorym czytelnik wlasnie zaczyna sie
 * zastanawiac, ile to kosztuje.
 */
.oferta-cta {
  margin: 2.5rem 0;
  padding: 1.75rem;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(204, 0, 166, .16), transparent 60%),
    #06070c;
  border: 1px solid rgba(204, 0, 166, .3);
}

.oferta-cta__label {
  margin: 0 0 .5rem;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--blog-gradient, linear-gradient(135deg, #cc00a6, #7338ea));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.oferta-cta__tytul {
  margin: 0 0 .5rem;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: #fff;
}

.oferta-cta p {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--blog-muted, #a3a3ad);
}

.oferta-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 999px;
  background: var(--blog-gradient, linear-gradient(135deg, #cc00a6, #7338ea));
  color: #fff;
  text-decoration: none;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: .9375rem;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}

.oferta-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
}

.oferta-cta__btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, .4), 0 0 0 1px rgba(204, 0, 166, .6);
}

/* Drobne zapewnienie pod przyciskiem - zbija obawe, ze zaraz zacznie sie
   wysylka albo telefon od handlowca. */
.oferta-cta__mikro {
  display: block;
  margin-top: .75rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45);
}

/* ---- Akordeon z pytaniami ----
 *
 * Natywny <details>, zero JavaScriptu. Dziala z klawiatury, dziala przy
 * wylaczonych skryptach, a tresc odpowiedzi jest w kodzie strony od razu,
 * wiec wyszukiwarki widza ja tak samo jak przy zwyklym akapicie.
 */
.faq-akordeon {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.faq-akordeon__pozycja {
  border-radius: 16px;
  border: 1px solid var(--blog-border, rgba(255, 255, 255, .12));
  background: #06070c;
  transition: border-color .25s ease;
}

.faq-akordeon__pozycja[open] {
  border-color: rgba(204, 0, 166, .4);
}

.faq-akordeon__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  cursor: pointer;
  list-style: none;
}

/* Trojkacik przegladarki znika - mamy wlasny znak po prawej. */
.faq-akordeon__pytanie::-webkit-details-marker { display: none; }
.faq-akordeon__pytanie::marker { content: none; }

.faq-akordeon__pytanie h3 {
  margin: 0;
  padding: 0;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #fff;
}

.faq-akordeon__pytanie h3::before { content: none; }

.faq-akordeon__pytanie:hover h3 { color: #f0c6ff; }

.faq-akordeon__znak {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--blog-primary, #cc00a6);
  transition: transform .25s ease, background .25s ease;
}

.faq-akordeon__znak svg { width: 16px; height: 16px; }

.faq-akordeon__pozycja[open] .faq-akordeon__znak {
  transform: rotate(180deg);
  background: rgba(204, 0, 166, .16);
}

.faq-akordeon__odpowiedz {
  padding: 0 1.375rem 1.25rem;
}

.faq-akordeon__odpowiedz p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: #cfcfd8;
}

@media (prefers-reduced-motion: reduce) {
  .faq-akordeon__znak { transition: none; }
}

/* ---- Kafle uslug na stronie lokalnej ----
 *
 * Bylo: gole prostokaty z sama nazwa uslugi, bo wpisy CPT nie maja miniatur.
 * Jest: ikona rysowana w kodzie, nazwa i jedno zdanie o korzysci. Zero
 * obrazkow, wiec zero dodatkowej wagi i nic do odswiezania przy zmianie
 * palety - ikony dziedzicza kolor z CSS.
 */
.uslugi-kafle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}

.usluga-kafel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(204, 0, 166, .1), transparent 62%),
    var(--blog-card-bg, rgba(255, 255, 255, .03));
  border: 1px solid var(--blog-border, rgba(255, 255, 255, .12));
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.usluga-kafel:hover {
  transform: translateY(-4px);
  border-color: rgba(204, 0, 166, .45);
  box-shadow: 0 16px 40px rgba(204, 0, 166, .16);
}

.usluga-kafel__ikona {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  color: #f0d6ff;
  background:
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) padding-box,
    linear-gradient(135deg, rgba(204, 0, 166, .9), rgba(115, 56, 234, .9)) border-box;
  border: 1px solid transparent;
  transition: transform .25s ease;
}

.usluga-kafel:hover .usluga-kafel__ikona { transform: translateY(-2px) scale(1.05); }

.usluga-kafel__ikona svg { width: 22px; height: 22px; }

.usluga-kafel__tresc {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

/* Plakietka miasta pojawia sie tylko na kaflu, ktory prowadzi do strony
   lokalnej tej uslugi - czyli tam, gdzie klikniecie da cos wiecej niz
   ogolna oferta. */
.usluga-kafel__miasto {
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--blog-gradient, linear-gradient(135deg, #cc00a6, #7338ea));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.usluga-kafel__tytul {
  margin: 0;
  font-family: var(--blog-font-head, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: #fff;
}

.usluga-kafel__opis {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--blog-muted, #a3a3ad);
}

.usluga-kafel__strzalka {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--blog-primary, #cc00a6);
  background: rgba(255, 255, 255, .05);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.usluga-kafel__strzalka svg { width: 15px; height: 15px; }

.usluga-kafel:hover .usluga-kafel__strzalka {
  opacity: 1;
  transform: translateX(0);
}

/* Na dotyku nie ma najechania, wiec strzalka ma byc widoczna od razu. */
@media (pointer: coarse) {
  .usluga-kafel__strzalka { opacity: .6; transform: none; }
}