/* css/blog-index-inline.css
   Style WYŁĄCZNIE dla listy wpisów blog/index.php (redesign 16.10.2026, kanwa v54,
   spec: blog-lista-redesign-spec.md). Ładowany przez $GRELL_PAGES['blog/index.php']['extra_css'].
   Wpisy (blog/*.php) dalej korzystają z blog-inline.css.
   Progi: < 640 telefon, 640-1023 tablet, >= 1024 desktop. Tokeny: var(--c-*), var(--g-*) z global-inline.css. */

/* ============================================================
   WZORCE WSPÓLNE: kopia z o-mnie-inline.css / index-inline.css (g-*), bez zmian.
   Zmieniasz wzorzec na głównej? Zaktualizuj też tutaj.
   ============================================================ */
/* Skala typografii jak na głównej i „O mnie”: ta sama rola = ten sam rozmiar (telefon / desktop >= 1024) */
#main-content {
  --fs-label: 11px;  /* etykiety wersalikami: nagłówki sekcji, data i czas czytania */
  --fs-meta: 13px;   /* metadane: autor, podpisy liczników */
  --fs-body: 15px;   /* akapity w kartach */
  --fs-h3: 20px;     /* tytuł karty wpisu */
}
@media (min-width: 1024px) {
  #main-content { --fs-label: 12px; --fs-meta: 14px; --fs-h3: 22px; }
}

.g-wrap { max-width: 1216px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
@media (min-width: 640px)  { .g-wrap { padding: 0 40px; } }
@media (min-width: 1024px) { .g-wrap { padding: 0 24px; } }

.g-sec { padding: 48px 0 56px; color: var(--c-ink); line-height: 1.65; scroll-margin-top: var(--nav-height); }
.g-sec--alt { background: var(--c-surface-alt); }
@media (min-width: 1024px) { .g-sec { padding: 88px 0 96px; } }

/* Nagłówek sekcji: linia, etykieta z kreską, licznik „0N / 04” */
.g-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; border-top: 1px solid var(--c-ink);
  font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.g-head__label { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--c-primary-a11y); font: inherit; letter-spacing: inherit; }
.g-dash { flex: none; width: 20px; height: 3px; border-radius: 2px; background: var(--g-deco); }
.g-head__count { color: var(--c-ink-muted); white-space: nowrap; }
.g-sec--alt .g-head__count { color: var(--c-ink-label); }
@media (min-width: 1024px) { .g-head { padding-top: 16px; font-size: 12px; } }

.g-h2 {
  margin: 20px 0 0; color: inherit;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em;
}
@media (min-width: 640px) { .g-h2 { font-size: 38px; } }
@media (min-width: 1024px) { .g-h2 { margin-top: 28px; font-size: 42px; line-height: 1.12; } }

/* Link „czytaj dalej / do oferty”: tekst + strzałka + podkreślenie (jak g-offer na głównej) */
.g-offer {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
  min-height: 44px; margin-top: 4px; padding: 16px 0 6px; border-bottom: 1.5px solid var(--c-primary-a11y); /* pole dotyku 44 px */
  color: var(--c-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.g-offer__dot { flex: none; display: flex; }
.g-offer__dot svg { width: 16px; height: 16px; fill: none; stroke: var(--c-primary-a11y); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
@media (hover: hover) {
  .g-offer:hover { color: var(--c-primary-a11y); }
  .g-offer:hover .g-offer__dot svg { transform: translateX(3px); }
}

.g-plus { color: var(--c-primary); }
.g-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fokus: obrys 2 px, odstęp 2 px */
#main-content a:focus-visible,
#main-content button:focus-visible {
  outline: 2px solid var(--c-primary-a11y);
  outline-offset: 2px;
}

/* Menu: bieżąca strona w kolorze ink, na desktopie kreska 2 px w gradiencie (jak na „O mnie”) */
#nav-list .nav-link[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
@media (min-width: 1024px) {
  #nav-list .nav-link[aria-current="page"] { position: relative; font-weight: 500; }
  #nav-list .nav-link[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--g-deco);
  }
}

#main-content [id] { scroll-margin-top: calc(var(--nav-height) + 16px); }


/* ============================================================
   LISTA WPISÓW: komponenty tylko tej strony (prefiks bl-)
   ============================================================ */

/* ---------- Okruszki ---------- */
.bl-crumbs { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--c-ink-muted); }
.bl-crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
.bl-crumbs a:hover { color: var(--c-primary-a11y); }
.bl-crumbs__sep { display: flex; color: var(--c-ink-muted); }
.bl-crumbs [aria-current="page"], .bl-crumbs [aria-current="page"] a { color: var(--c-ink); font-weight: 600; }
@media (min-width: 1024px) { .bl-crumbs { font-size: 13px; } .bl-crumbs a { min-height: 24px; } }

/* ---------- Hero ---------- */
.bl-hero { background: #fff; color: var(--c-ink); padding: calc(var(--nav-height) + 4px) 0 48px; }
.bl-hero__grid { display: flex; flex-direction: column; }
.bl-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary-a11y);
}
.bl-hero__h1 {
  margin: 16px 0 0; color: var(--c-ink); text-wrap: balance;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: min(36px, 9.2vw); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em;
}
.bl-hero__h1 > span { display: block; }
.bl-hero__h1 .bl-hero__accent { color: var(--c-primary); } /* tekst >= 24 px: 3,6:1 wystarcza */
.bl-hero__lead { margin: 20px 0 0; max-width: 620px; font-size: 15px; line-height: 1.6; color: var(--c-ink); }
.bl-hero__desc { margin: 12px 0 0; max-width: 620px; font-size: 15px; line-height: 1.6; color: var(--c-ink-body); }

/* Karta „wynik wyszukiwania” */
.bl-serp { position: relative; overflow: hidden; margin-top: 32px; border-radius: 18px; background: var(--c-surface-alt); padding: 18px 18px 6px; }
.bl-serp::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--g-deco); }
.bl-serp__field {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--c-line-card); background: #fff; box-shadow: 0 1px 2px rgba(11, 17, 33, .06);
}
.bl-serp__field svg { color: var(--c-primary-a11y); }
.bl-serp__q { flex: 1; font-size: 14px; color: var(--c-ink); }
.bl-serp__caret { width: 1px; height: 20px; background: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .bl-serp__caret { animation: bl-caret 1.6s steps(1) infinite; }
  @keyframes bl-caret { 50% { opacity: 0; } }
}
.bl-serp__list { margin: 10px 0 0; padding: 0 4px; }
/* wiersz: znacznik → wartość → podpis; w DOM dt przed dd, znacznik #N leży w dt (aria-hidden) */
.bl-serp__row {
  --pos: 40px; --val: 84px; --gap: 12px;
  display: grid; grid-template-columns: var(--pos) var(--val) minmax(0, 1fr); column-gap: var(--gap); align-items: center;
  padding: 14px 0;
}
.bl-serp__row + .bl-serp__row { border-top: 1px solid var(--c-line); }
.bl-serp__row dt { grid-column: 3; grid-row: 1; position: relative; margin: 0; font-size: 13px; line-height: 1.35; color: var(--c-ink-muted); }
.bl-serp__row dd {
  grid-column: 2; grid-row: 1; margin: 0; min-width: var(--val);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -0.03em;
  color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* znacznik pozycji: kreska w gradiencie + granatowy numer, wszystkie wiersze jednakowo (decyzja Przemka 16.10.2026) */
.bl-serp__pos {
  position: absolute; top: 50%; left: calc(-1 * (var(--pos) + var(--val) + 2 * var(--gap))); transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; width: var(--pos); color: var(--c-ink);
  font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.bl-serp__dash { flex: none; width: 12px; height: 3px; border-radius: 2px; background: var(--g-deco); }

@media (min-width: 640px) {
  .bl-serp { max-width: 520px; }
}
@media (min-width: 1024px) {
  .bl-hero { padding: calc(var(--nav-height) + 28px) 0 96px; }
  .bl-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; margin-top: 32px; }
  .bl-hero__text { grid-column: 1 / span 7; }
  .bl-eyebrow { margin: 0; font-size: 12px; }
  .bl-hero__h1 { margin-top: 24px; font-size: 54px; line-height: 1.06; }
  .bl-hero__lead { margin-top: 28px; font-size: 19px; }
  .bl-hero__desc { margin-top: 16px; font-size: 17px; line-height: 1.65; }
  .bl-serp { grid-column: 8 / span 5; max-width: none; margin: 0; border-radius: 20px; padding: 24px 28px 10px; }
  .bl-serp__field { height: 52px; }
  .bl-serp__q { font-size: 15px; }
  .bl-serp__list { margin-top: 14px; padding: 0 6px; }
  .bl-serp__row { --val: 112px; --gap: 16px; padding: 16px 0; }
  .bl-serp__row dt { font-size: 14px; }
  .bl-serp__row dd { font-size: 32px; }
}
@media (min-width: 1280px) { .bl-hero__h1 { font-size: 64px; } }

/* ---------- Karta wpisu (jedna anatomia; rozmiary jak g-post na głównej) ---------- */
.bl-post { display: flex; flex-direction: column; gap: 12px; color: var(--c-ink); }
.bl-post__thumb { display: block; border-radius: 12px; overflow: hidden; background: var(--c-surface-steel); }
.bl-post__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.bl-post__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.bl-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.bl-pill {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--c-line-card); background: #fff; color: var(--c-ink);
  font-size: var(--fs-label); line-height: 1; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.bl-pill--cat { border-color: var(--c-primary-soft); background: var(--c-primary-soft); color: var(--c-primary-a11y-strong); }
.bl-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-label); /* data | czas czytania: mniejsza niż etykiety sekcji (decyzja 16.10.2026) */
}
.bl-meta__sep { width: 1px; height: 12px; background: var(--c-line-strong); }
.bl-post__h3 {
  margin: 2px 0 0; font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink);
}
.bl-post__h3 a { color: inherit; text-decoration: none; transition: color .2s ease; }
.bl-post__h3 a:hover { color: var(--c-primary-a11y); }
.bl-post__excerpt { margin: 0; font-size: var(--fs-body); line-height: 1.65; color: var(--c-ink-body); }
.bl-author { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 4px; font-size: var(--fs-meta); color: var(--c-ink-label); }
.bl-author img { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; background: var(--c-surface-steel); }

/* Link „Czytaj przewodnik”: komponent g-offer (jak „Zobacz ofertę…” na głównej i „O mnie”) */
.bl-more { align-self: flex-start; margin-top: -8px; } /* wymiary g-offer bez zmian (kreska 9 px pod tekstem); -8 px = odstęp od autora jak dotąd */

/* ---------- 01 Najnowszy wpis ---------- */
.bl-feat { padding-bottom: 0; }
.bl-feat .bl-post { margin-top: 24px; }
.bl-post--feat .bl-post__thumb img { aspect-ratio: 3 / 2; }
.bl-post--feat .bl-post__h3 { font-size: 24px; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 640px) { .bl-post--feat .bl-post__h3 { font-size: 28px; } }
@media (min-width: 1024px) {
  .bl-feat { padding: 88px 0 0; }
  .bl-feat .bl-post { margin-top: 40px; }
  .bl-post--feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
  .bl-post--feat .bl-post__thumb { grid-column: 1 / span 7; }
  .bl-post--feat .bl-post__body { grid-column: 8 / span 5; gap: 14px; }
  .bl-post--feat .bl-pills { margin-top: 0; }
  .bl-post--feat .bl-post__h3 { margin-top: 0; font-size: 34px; line-height: 1.12; }
  .bl-post--feat .bl-post__excerpt { font-size: 16px; }
}

/* ---------- 02 Pozostałe wpisy ---------- */
.bl-rest { padding-top: 48px; }
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 24px; }
.bl-grid .bl-author { margin-top: auto; }

/* Karta „Nowe analizy…”: telefon/tablet i pełny rząd = wersja kompaktowa w jednym wierszu (jak g-post--soon na głównej) */
.bl-ph { display: flex; align-items: flex-start; gap: 16px; padding: 18px; box-sizing: border-box; border-radius: 12px; border: 1px dashed var(--c-on-ink-muted); }
.bl-ph__frame { flex: none; }
.bl-ph__plus { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--c-primary-soft); color: var(--c-primary-a11y); }
.bl-ph__plus svg { stroke-width: 1.75; }
.bl-ph__h3 { margin: 0; font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.bl-ph__text p { margin: 6px 0 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--c-ink-body); }
.bl-ph--extra { display: none; } /* dodatkowe puste komórki: tylko desktop */

/* wersja „komórka”: ramka 16:9 na wysokość miniatury, pod nią tytuł i tekst */
@media (min-width: 640px) and (max-width: 1023px) {
  .bl-ph--t1 { flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; border-radius: 0; }
  .bl-ph--t1 .bl-ph__frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px dashed var(--c-on-ink-muted); }
  .bl-ph--t1 .bl-ph__h3 { margin-top: 8px; font-size: var(--fs-h3); }
  .bl-ph--t1 .bl-ph__text p { margin-top: 12px; font-size: var(--fs-body); line-height: 1.65; }
  .bl-ph--t1 .bl-ph__text { text-align: center; } /* tekst na osi plusa w ramce */
  .bl-ph--t1 .bl-ph__text p { margin-left: auto; margin-right: auto; }
}
@media (min-width: 640px) {
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .bl-ph { grid-column: 1 / -1; }
  .bl-ph--t1 { grid-column: auto; }
}
@media (min-width: 1024px) {
  .bl-rest { padding: 80px 0 96px; }
  .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
  .bl-grid .bl-post__h3 { margin-top: 0; }
  .bl-ph--cell { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; border: 0; border-radius: 0; }
  .bl-ph--cell .bl-ph__frame { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px dashed var(--c-on-ink-muted); }
  .bl-ph--cell .bl-ph__h3 { margin-top: 8px; font-size: var(--fs-h3); }
  .bl-ph--cell .bl-ph__text p { margin-top: 12px; font-size: var(--fs-body); line-height: 1.65; }
  .bl-ph--cell .bl-ph__text { text-align: center; } /* tekst na osi plusa w ramce */
  .bl-ph--cell .bl-ph__text p { margin-left: auto; margin-right: auto; }
  .bl-ph--wide { grid-column: 1 / -1; }
}

/* ---------- 03 Kategorie ---------- */
.bl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bl-cats { padding: 48px 0 64px; }
.bl-cats__h2 { color: var(--c-ink); } /* rozmiar: wspólny .g-h2 */
.bl-cats__list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bl-cats__list li { display: flex; }
.bl-cat {
  flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 68px; padding: 12px 14px; box-sizing: border-box; border-radius: 12px; border: 1px solid transparent;
  background: var(--c-surface-alt); color: var(--c-ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.bl-cat__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; }
.bl-cat__ico svg { fill: none; stroke: url(#bl-grad); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bl-cat__name { font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--c-ink); }
.bl-cat__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box;
  border-radius: 999px; background: #fff; font-size: 12px; line-height: 1; font-weight: 600; color: var(--c-ink-label); font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .bl-cat:hover { background: #e9edf3; } }

@media (min-width: 640px) {
  .bl-cats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
  .bl-cat {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; row-gap: 28px;
    padding: 22px; border-radius: 16px;
  }
  .bl-cat__ico { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
  .bl-cat__count { grid-column: 3; grid-row: 1; }
  .bl-cat__name { grid-column: 1 / -1; grid-row: 2; align-self: end; font-size: 19px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  /* nieparzysta liczba kafli: ostatni na całą szerokość, bez pustej komórki */
  .bl-cats__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bl-cats { padding: 88px 0 104px; }
  .bl-cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
  /* H2 nad siatką: ostatni kafel wypełnia resztę rzędu, bez pustych komórek */
  .bl-cats__grid:not(.bl-cats__grid--inline) .bl-cats__list li:last-child:nth-child(4n+1) { grid-column: span 4; }
  .bl-cats__grid:not(.bl-cats__grid--inline) .bl-cats__list li:last-child:nth-child(4n+2) { grid-column: span 3; }
  /* H2 w pierwszej komórce siatki (tylko gdy wypełnia lukę, np. 7 kafli) */
  .bl-cats__grid--inline { display: grid; margin-top: 40px; }
  .bl-cats__grid--inline > * { grid-area: 1 / 1; }
  .bl-cats__grid--inline .bl-cats__h2 { position: relative; z-index: 1; align-self: start; width: calc((100% - 48px) / 4); margin: 0; padding: 4px 12px 0 0; box-sizing: border-box; font-size: 38px; }
  .bl-cats__grid--inline .bl-cats__list { margin: 0; }
  .bl-cats__grid--inline .bl-cats__list li:first-child { grid-column-start: 2; }
}

/* ---------- 04 CTA „Masz pytania?” (kopia zakończenia z „O mnie”, om-cta*: karta nachodzi na stopkę,
   po prawej portret w pierścieniach i pod nim przycisk) ----------
   Granat = kolor tła stopki (.site-footer, #0b1120), żeby nie było szczeliny. */
.bl-cta-sec {
  padding: 48px 0 0; scroll-margin-top: var(--nav-height);
  background: linear-gradient(180deg, var(--c-surface-steel) 0, var(--c-surface-steel) calc(100% - 84px), #0b1120 calc(100% - 84px));
}
.site-footer { border-top-color: #0b1120; } /* bez jaśniejszej linii między granatem sekcji a stopką (tylko ta strona) */
.bl-cta { position: relative; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(11, 17, 33, .18); padding: 30px 22px 26px; color: var(--c-ink); }
.bl-cta::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; right: 0; height: 4px; background: var(--g-deco); }
.bl-cta__h2 { margin: 18px 0 0; font-family: 'Outfit', 'Inter', system-ui, sans-serif; font-size: 28px; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; color: var(--c-ink); }
.bl-cta__text { margin: 12px 0 0; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--c-ink-body); }
.bl-cta__side { margin-top: 24px; display: flex; flex-direction: column; }
.bl-cta__art { display: none; }

/* Przycisk jak na „O mnie”: tekst do lewej, kółko ze strzałką po prawej (klasa cta-button zostaje dla GTM) */
.bl-cta-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box;
  height: 52px; padding: 0 6px 0 26px; border-radius: 999px; background: var(--g-btn);
  color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none;
  box-shadow: none; transition: filter .2s ease, box-shadow .2s ease;
}
.bl-cta-btn__dot { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.bl-cta-btn__dot svg { width: 16px; height: 16px; stroke: #fff; transition: transform .2s ease; }
@media (hover: hover) {
  .bl-cta-btn:hover { filter: brightness(1.08); box-shadow: 0 8px 16px rgba(11, 17, 33, .12); }
  .bl-cta-btn:hover .bl-cta-btn__dot svg { transform: translateX(2px); }
}
#main-content .bl-cta-btn:focus-visible { outline: 2px solid var(--c-primary-a11y); outline-offset: 3px; }

@media (min-width: 1024px) {
  .bl-cta-sec { padding-top: 88px; background: linear-gradient(180deg, var(--c-surface-steel) 0, var(--c-surface-steel) calc(100% - 112px), #0b1120 calc(100% - 112px)); }
  .bl-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; border-radius: 28px; padding: 44px 48px; box-shadow: 0 24px 60px rgba(11, 17, 33, .20); }
  .bl-cta__body { grid-column: 1 / span 7; align-self: start; padding-top: 20px; } /* tekst od góry karty: linia 64 px pod krawędzią */
  .bl-cta__h2 { margin-top: 22px; font-size: 38px; line-height: 1.1; }
  .bl-cta__text { margin-top: 14px; font-size: 17px; }
  .bl-cta__side { grid-column: 9 / span 4; margin: 0; align-items: center; gap: 20px; }
  .bl-cta__side .bl-cta-btn { align-self: stretch; font-size: 16px; }
}
/* Portret w pierścieniach 140 / 160 / 216 px jak na „O mnie”: tylko szerszy desktop, gdzie prawa kolumna go mieści */
@media (min-width: 1100px) {
  .bl-cta__art { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 216px; height: 216px; }
  .bl-cta__ring, .bl-cta__dot { position: absolute; box-sizing: border-box; border-radius: 999px; }
  .bl-cta__ring--outer { inset: 0; border: 1px solid #eef0f4; }
  .bl-cta__ring--inner { left: 28px; top: 28px; width: 160px; height: 160px; border: 1px solid var(--c-line-card); }
  .bl-cta__ring--arc { left: 28px; top: 28px; width: 160px; height: 160px; border: 2px solid transparent; border-top-color: var(--c-primary); border-right-color: var(--c-accent); transform: rotate(8deg); }
  .bl-cta__dot { left: 45px; top: 45px; width: 12px; height: 12px; background: var(--g-deco); box-shadow: 0 0 0 4px #fff; }
  .bl-cta__art img { position: relative; display: block; width: 140px; height: 140px; border-radius: 999px; object-fit: cover; background: #e9ecef; }
}