/* ==========================================================================
   wynik.css — strona wyników wyszukiwania. Wymaga components.css
   (.section, .section__panel, .section__head, .carcard-row, .carcard).
   Mobile-first, tokeny z global.css (:root).
   ========================================================================== */

/* ---------- Nagłówek strony (ten sam wygląd co .cmp-hero) ---------- */

.srp-hero{
  background: var(--main-color);
  color: #fff;
  padding: 24px 0 26px;
}
.srp-hero__title{
  font-size: 23px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.srp-hero__lead{
  margin: 0;
  font-size: 14.5px;
  color: #cdd8e4;
  max-width: 70ch;
}
.srp-hero__lead strong{ color: #fff; }
.srp-hero__actions{ margin-top: 16px; }

@media (min-width: 900px){
  .srp-hero{ padding: 36px 0 34px; }
  .srp-hero__title{ font-size: 30px; }
  .srp-hero__lead{ font-size: 16px; }
}

/* ---------- Przyciski ---------- */

.srp-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.srp-btn svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.srp-btn:hover{ background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.srp-btn--light{
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.srp-btn--light:hover{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }

.srp-page a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Skok do segmentu (chipy w hero) ----------
   Mobile: jedna linia przewijana w poziomie; desktop: zawijanie. */

.srp-jump{ margin-top: 18px; }
.srp-jump__list{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.srp-jump__list::-webkit-scrollbar{ display: none; }
.srp-jump__list li{ flex: 0 0 auto; }
.srp-jump__link{
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  font-family: var(--font-heading);
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.srp-jump__link span{ color: #cdd8e4; font-size: 13px; }
.srp-jump__link:hover{ background: rgba(255,255,255,.14); border-color: var(--accent); }

@media (min-width: 700px){
  .srp-jump__list{ flex-wrap: wrap; overflow: visible; }
}

/* ---------- Gotowe zestawienie (p=): opis + inne kwoty ---------- */

.srp-hero__lead--intro{ color: #fff; margin-bottom: 6px; }

.srp-kwoty{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  min-width: 0;
}
.srp-kwoty__label{
  flex: 0 0 auto;
  font-size: 13px;
  color: #cdd8e4;
}
.srp-kwoty .srp-jump__list{ min-width: 0; }
.srp-jump__link.is-current{
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Segment ---------- */

/* kotwice nie chowają się pod sticky headerem (56px po przewinięciu) */
.srp-segment{ scroll-margin-top: 64px; }
.srp-segment + .srp-segment{ padding-top: 0; }

.srp-segment__sub{
  margin-left: 6px; /* .section__heading ma gap 2px między elementami flex */
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #cdd8e4;
}
.srp-segment__count{
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #cdd8e4;
  white-space: nowrap;
}

/* Trzy kolumny od 700px dziedziczone z .carcard-row; tu dokładamy 2 kolumny
   dla wąskich tabletów / telefonów w poziomie */
@media (min-width: 540px) and (max-width: 699px){
  .srp-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Karta wypełnia komórkę siatki (równe wysokości w rzędzie) */
.srp-grid > li > .carcard{ height: 100%; }

/* ---------- Brak wyników ---------- */

.srp-empty{
  text-align: center;
  padding: 36px 20px 40px;
}
.srp-empty__icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  color: var(--accent);
}
.srp-empty__title{
  font-size: 21px;
  color: var(--main-color);
  margin: 0 0 8px;
}
.srp-empty__text{
  max-width: 52ch;
  margin: 0 auto 20px;
  color: var(--ink-soft);
  font-size: 15px;
}