/* =====================================================================
   FAZA 2 · UKŁAD — jedna oś, jeden rytm
   Ostatni arkusz w kolejce, więc ma prawo ostatniego słowa.

   Pomiar przed poprawką: lewa krawędź treści zaczynała się w pięciu
   różnych miejscach — 0, 53, 72, 99 i 209 px. Nagłówek sekcji nie stał
   w jednej linii z tekstem, który zapowiadał, a hero rozjeżdżało się
   względem statystyk. To jedna zmiana, którą widać na całej stronie.

   Miara: treść ma najwyżej 1320 px szerokości i stały margines boczny.
   Rytm: każda sekcja oddycha tą samą wartością.
   ===================================================================== */

:root{
  --c-miara:1320px;                          /* szerokość kolumny treści */
  --c-margines:clamp(1.25rem,5vw,4.5rem);    /* margines boczny */
  --c-rytm:clamp(3.25rem,6.2vw,5.75rem);     /* odstęp pionowy sekcji */
  --c-rytm-maly:clamp(2.25rem,4vw,3.5rem);
}

/* ── kontener: dokładnie ta sama krawędź w każdej sekcji ────────────── */
.c-hero__grid,.c-hero__atuty,.c-hero__ticker,
.c-stats__inner,.c-opinie__inner,.c-pomoc__grid,.c-gwar,
.c-wyroki .c-wyroki__inner,
.c-fund .c-fund__grid,
.c-dlakogo__grid,.c-wsparcie__inner,
.faq,
.blog_home .container,
section.trust:not(.c-opinie) > .trust_container,
section.trust:not(.c-opinie) > .trust__employees,
.why-us > *,
.calculator > *,
.footer-top__wrapper,.footer-bottom__wrapper,
.header__wrapper{
  width:100%!important;
  max-width:var(--c-miara)!important;
  margin-inline:auto!important;
  padding-inline:var(--c-margines)!important;
  box-sizing:border-box;
}

/* sekcje same nie odsuwają treści — robi to kontener w środku.
   .faq jest jednocześnie sekcją i kontenerem, więc zostaje z marginesem.
   Rodzic dokładał sekcjom 15 px na wąskich ekranach, przez co treść
   startowała 35 px od krawędzi zamiast 20 px jak w hero. */
.c-hero,.c-stats,.c-opinie,.c-pomoc,.c-wyroki,.c-fund,.c-dlakogo,.c-wsparcie,
.calculator,.blog_home,section.trust:not(.c-opinie),.why-us,.footer-top{
  padding-inline:0!important;
}

/* Element siatki ma domyślnie min-width:auto i nie kurczy się poniżej
   swojej treści — stąd kolumna stopki szersza od ekranu. */
.footer-top__wrapper > *,.faq > *,.c-pomoc__grid > *,.c-dlakogo__grid > *,
.c-fund__grid > *,.c-hero__grid > *,
section.trust:not(.c-opinie) .trust_container > *,
.blog_home .row > *{min-width:0}

/* Kontenery odziedziczone po rodzicu bywają kolumną flex z wyśrodkowaniem
   (.won-cases__wrapper, .our-support__text). Dzieci kurczyły się wtedy do
   szerokości własnej treści i odjeżdżały od osi o kilkaset pikseli. */
.c-wyroki .c-wyroki__inner,
.c-wsparcie .c-wsparcie__inner,
.c-stats .c-stats__inner,
.c-fund .c-fund__grid,
.c-hero .c-hero__grid{
  align-items:stretch!important;
  justify-content:flex-start!important;
}
.blog_home .container,.blog_home .row{max-width:var(--c-miara)!important}
.blog_home .row{margin-inline:0!important;padding-inline:0!important}
.blog_home [class*="col-"]{padding-inline:0!important}

/* Hero było kolumną flex z wyśrodkowaniem odziedziczonym po rodzicu,
   więc dzieci kurczyły się do szerokości treści zamiast trzymać osi. */
.c-hero{align-items:stretch!important}
.c-hero__grid{display:block!important}

/* ── rytm pionowy ───────────────────────────────────────────────────── */
.c-stats,.c-pomoc,.c-wyroki,.c-fund,.c-dlakogo,.c-wsparcie,
.faq,.calculator,.blog_home,section.trust:not(.c-opinie),.why-us{
  padding-block:var(--c-rytm)!important;
}
.c-opinie{padding-block:var(--c-rytm-maly)!important}
.footer-top{padding-block:var(--c-rytm)!important}
.c-hero{padding-block:clamp(3.5rem,6vw,5.5rem) clamp(1.5rem,3vw,2.5rem)!important}

/* włosowa linia zamiast pustego szwu między sekcjami tej samej jasności */
.c-pomoc + .c-wyroki,.c-dlakogo + .faq,.faq + .blog_home,
.blog_home + section.trust{border-top:1px solid var(--c-line-d)}
.c-wyroki + .c-fund,section.trust:not(.c-opinie) + .footer{border-top:1px solid var(--c-line)}

/* ── etykiety: odrobinę większe, żeby wersaliki dało się czytać ─────── */
:root{--t-label:.72rem}
.c-tick span,.c-ledger dt,.c-hero__znum,.c-wsp__idx,.c-gwar__idx,
.employee__spec,.c-biuro__miasto,.footer-bottom__link,.footer-bottom__paragraph{
  font-size:.72rem!important;
}

/* ── cel dotykowy min. 24 px (WCAG 2.2 · 2.5.8) ─────────────────────── */
.footer-bottom__link,.footer-bottom__paragraph,
.header__user-nav a,.header a:not(.header__logo-link):not([class*="__btn"]){
  display:inline-block;padding-block:.4rem;
}
.c-link-quiet{padding-block:.35rem}

/* ── ostatni szlif kompozycji ───────────────────────────────────────── */
/* nagłówek sekcji nie powinien być szerszy niż komfortowy wiersz */
.c-stats__title,.c-wyroki__h,.c-wsparcie__h{max-width:24ch}
.c-pomoc__h,.c-dlakogo__h{max-width:22ch}

/* w repertorium tabela i legenda dzielą tę samą siatkę co reszta */
.c-wyroki .c-wyroki__inner{position:relative;z-index:1}
.c-wyroki__list{margin-top:var(--c-rytm-maly)}

/* stopka: formularz i dane kontaktowe kończą się na tej samej linii */
.footer-top__wrapper{align-items:start}

/* ═══════════════════════════════════════════════════════════════════
   UKŁAD MOBILNY
   Siatki odziedziczone po rodzicu trzymały cztery kolumny niezależnie od
   szerokości ekranu: kafle gwarancji zwężały się do 0 px, a logotypy
   banków wychodziły 60 px poza ekran i rozjeżdżały całą stronę w poziomie.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .c-gwar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .c-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Rodzic przełącza układy dwukolumnowe na własną siatkę 12-kolumnową,
     a dzieciom nadaje `grid-column: span 12`. Ślady tej siatki rozpychały
     kolumny do 440 px na ekranie 375 px. Prościej i pewniej: zwykły blok. */
  .c-hero__grid,.c-pomoc__grid,.c-fund__grid,.c-dlakogo__grid,
  .footer-top__wrapper,
  section.trust:not(.c-opinie) .trust_container{
    display:block!important;
  }
  .c-hero__grid > *,.c-pomoc__grid > *,.c-fund__grid > *,.c-dlakogo__grid > *,
  .footer-top__wrapper > *,
  section.trust:not(.c-opinie) .trust_container > *{
    grid-column:auto!important;width:auto!important;max-width:none!important;float:none!important;
  }
  .c-pomoc__media,.c-fund__portret,.c-banki,
  .footer-top-free-analysis,
  section.trust:not(.c-opinie) .trust_container_right{
    margin-top:clamp(2rem,5vw,2.75rem)!important;
  }
  .c-fund__portret{max-width:280px!important}
  .c-banki__cell{max-width:none!important;min-width:0!important}

  /* Nagłówek „Dla naszych Klientów walczymy…" rodzic chował na wąskich
     ekranach. Sekcja liczb bez zapowiedzi traci sens, więc wraca. */
  .c-stats .c-stats__title{display:block!important;max-width:none!important}
}
@media(max-width:760px){
  :root{--c-rytm:clamp(2.75rem,9vw,3.5rem)}

  .c-gwar,.c-stats__grid,.c-wsparcie__list,
  .blog_home .row:nth-child(2){grid-template-columns:1fr!important}
  .c-ledger{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .c-banki__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .c-biura{grid-template-columns:1fr!important}
  .c-biuro--glowne{grid-column:span 1!important}
  .footer-informations__contact-info-container{grid-template-columns:1fr!important}

  /* nic nie może wystawać poza ekran — bez poziomego przewijania */
  html,body{overflow-x:hidden}
  .c-banki__cell{aspect-ratio:4/3}

  /* stałe wezwanie do działania u dołu ekranu */
  .mobilebutton_fixed{
    position:fixed!important;inset:auto 0 0 0!important;z-index:90!important;
    padding:.55rem!important;background:rgba(9,20,34,.96)!important;
    border-top:1px solid var(--c-line)!important;
    backdrop-filter:blur(8px);
  }
  body{padding-bottom:4.5rem}

  /* hero: fotografia jako tło, nie jako drugi ekran treści */
  .c-hero{min-height:0!important;padding-block:2.5rem 0!important}
  .c-hero__art{inset:0 -18% 0 auto!important;width:82%!important;height:100%!important}
  .c-hero__art img{opacity:.26!important}
  .c-hero__h1{max-width:none}
}
@media(max-width:420px){
  .c-ledger{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .c-banki__cell{aspect-ratio:3/2;padding:.7rem}
}