/* 10-podstrony.css: Nagłówek podstrony (page-hero), okruszki i układ broszury (listy w tabeli).
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Układ broszury (podstrony modułów) */
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(32px,4vw,48px);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line-strong);overflow:hidden}
.head+.lists{margin-top:0}
.lists>div{--lp:clamp(20px,2.6vw,30px);padding:var(--lp)}
.lists>div+div{border-left:1px solid var(--line)}
.lists h3{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 calc(-1 * var(--lp)) 16px;padding:14px var(--lp);background:var(--pale);border-block:1px solid var(--line);font-size:var(--fs-h3);color:var(--ink)}
.lists>div>h3:first-child{margin-top:calc(-1 * var(--lp));border-top:0}
.lists h3+:is(ul,ol,p){margin-top:0}
.lists__count{flex:none;padding:3px 10px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong);font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.lists--1{grid-template-columns:minmax(0,1fr)}
/* Trzy listy obok siebie (np. Planning Bus: kierowcy, finanse, stan floty); do 900 px jedna pod drugą */
.lists--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.lists--3{grid-template-columns:minmax(0,1fr)}.lists--3>div+div{border-left:0;border-top:1px solid var(--line)}}
.dots--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.dots--2>li:last-child:nth-child(odd){grid-column:1/-1} /* nieparzysty ostatni punkt na całą szerokość */
@media (max-width:600px){.dots--2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .lists{grid-template-columns:minmax(0,1fr)}
  .lists>div+div{border-left:0;border-top:1px solid var(--line)}
}

/* Nagłówek podstrony i okruszki */
/* <section class="page-hero"><div class="container">[qs_okruszki]<h1>…</h1><p class="page-hero__lead">…</p></div></section> */
.page-hero{position:relative;padding-block:clamp(28px,4vw,48px) clamp(48px,6vw,88px);background:var(--white)}
.page-hero h1{max-width:900px;font-size:var(--fs-h1-page)}
.page-hero__lead{max-width:720px;margin-top:20px;font-size:clamp(1.05rem,1.5vw,1.18rem)}
.page-hero .btn-row{margin-top:30px}
.page-hero__shot{margin-top:clamp(36px,5vw,56px)}
/* Nagłówek z obrazem obok (np. Kontakt): <section class="page-hero page-hero--split"><div class="container">[qs_okruszki]<div>h1, lead, btn-row</div><figure class="page-hero__img"><img…></figure></div></section> */
.page-hero--split .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:12px var(--gap-lg);align-items:center}
.page-hero--split .crumbs{grid-column:1/-1}
.page-hero__img{margin:0}
.page-hero__img img{width:100%;height:auto}
@media (max-width:900px){.page-hero--split .container{grid-template-columns:minmax(0,1fr)}.page-hero__img{max-width:460px;margin-inline:auto}}
.page-hero--center{text-align:center}
.page-hero--center h1,.page-hero--center .page-hero__lead{margin-inline:auto}
.page-hero--center .btn-row{justify-content:center}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:clamp(20px,3vw,32px);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.crumbs a{display:inline-block;padding-block:4px;color:var(--muted);transition:color .2s}
.crumbs a:hover{color:var(--blue)}
.crumbs [aria-current],.crumbs .breadcrumb_last{color:var(--ink)}
/* Okruszki z Yoast (zagnieżdżone span): każdy element osobno w rzędzie jak w wersji bez Yoasta; na telefonie długi tytuł bieżącej strony skrócony wielokropkiem */
.crumbs span:not(.breadcrumb_last):not([aria-current]){display:contents}
@media (max-width:600px){.crumbs [aria-current],.crumbs .breadcrumb_last{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}