/* =====================================================================
   O nas (/o-nas/) — WP4. Nowa warstwa: site.css (komponenty jp-*) + ten arkusz.
   Klasy własne: about-*. Nie nadpisujemy jp-*; punkty łamania tylko 720/1080.
   ===================================================================== */

/* ---------- Hero: zespół w skrócie (frost, bez backdrop-filter) ---------- */
.about-glance {
  display: grid; gap: var(--jp-s-5); align-content: start;
  inline-size: min(100%, 520px); justify-self: end;
  padding: clamp(20px, 1rem + 1.4vw, 36px); border-radius: var(--jp-r-xl);
  background: var(--jp-frost); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-3);
  text-align: start;
}
.about-glance > * { margin: 0; }
.about-glance__title { font-size: var(--jp-fs-h4); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; color: var(--jp-text); }
.about-glance__people { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.about-glance__people a {
  display: flex; align-items: center; gap: var(--jp-s-3); min-block-size: 48px; padding: 4px 8px; margin-inline: -8px;
  border-radius: var(--jp-r-md); color: var(--jp-text); font-weight: 600; text-decoration: none;
  transition: background-color var(--jp-dur-1) var(--jp-ease);
}
.about-glance__people a:hover { background: var(--jp-fill); }
.about-glance__people a:active { background: var(--jp-fill-2); }
.about-glance__avatar {
  display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--jp-deep); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.about-glance__who { display: grid; min-inline-size: 0; line-height: 1.3; }
.about-glance__who b { font-weight: 600; }
.about-glance__who span { font-size: var(--jp-fs-xs); font-weight: 500; color: var(--jp-text-2); }
/* Własna siatka hero (tekst szerszy niż w jp-hero--split, żeby długie H1 w innych językach nie łamało się na 5 wierszy) */
@media (min-width: 1081px) {
  .about-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
}
@media (max-width: 1080px) {
  .about-glance { justify-self: start; inline-size: 100%; max-inline-size: 640px; margin-block-start: clamp(40px, 2rem + 3vw, 88px); }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .about-glance__people { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--jp-s-5); }
}

/* ---------- Zespół ---------- */
.about-people { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: stretch; }
@media (min-width: 1081px) { .about-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-person {
  display: flex; flex-direction: column; gap: var(--jp-s-3);
  padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--jp-r-lg);
  background: var(--jp-frost); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-2);
}
.about-person > * { margin: 0; }
.about-person:target { box-shadow: inset 0 1px 0 var(--jp-glass-edge), 0 0 0 2px rgb(27 144 146 / 40%), var(--jp-shadow-3); }
.about-person__head { display: flex; align-items: center; gap: var(--jp-s-4); }
.about-person__avatar {
  display: grid; place-items: center; flex: none; inline-size: 56px; block-size: 56px; border-radius: 50%;
  background: var(--jp-deep); color: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 4px var(--jp-aqua-100);
}
.about-person__id { display: grid; gap: 2px; min-inline-size: 0; flex: 1; }
.about-person__id > * { margin: 0; }
.about-person__name { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.about-person__role { font-size: var(--jp-fs-xs); font-weight: 500; letter-spacing: .01em; color: var(--jp-text-2); }
.about-person__in {
  display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--jp-fill); color: var(--jp-brand-text);
  transition: background-color var(--jp-dur-1) var(--jp-ease), transform 100ms var(--jp-ease);
}
.about-person__in:hover { background: var(--jp-aqua-100); }
.about-person__in:active { transform: scale(.94); }
.about-person__in svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.about-person__focus { font-size: var(--jp-fs-sm); font-weight: 600; line-height: 1.45; color: var(--jp-text); }
.about-person__bio { font-size: var(--jp-fs-sm); line-height: 1.6; color: var(--jp-text-1); }
.about-person__label { margin-block-start: var(--jp-s-2); padding-block-start: var(--jp-s-3); border-block-start: 1px solid var(--jp-hair);
  font-size: var(--jp-fs-xs); font-weight: 600; letter-spacing: .01em; color: var(--jp-text-2); }
.about-person__links { display: flex; flex-wrap: wrap; gap: 0 var(--jp-s-5); margin: auto 0 0; padding: var(--jp-s-2) 0 0; list-style: none; }
.about-person__links .jp-link-more { font-size: var(--jp-fs-sm); }

/* Doświadczenie zespołu (marki tekstem, bez obcych grafik) */
.about-refs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--jp-s-3) var(--jp-s-6);
  margin-block-start: clamp(40px, 2rem + 2vw, 64px); padding-block-start: var(--jp-s-5); border-block-start: 1px solid var(--jp-hair);
}
.about-refs__title { margin: 0; font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text-2); }
.about-refs__list { display: flex; flex-wrap: wrap; gap: var(--jp-s-2) var(--jp-s-6); margin: 0; padding: 0; list-style: none; }
.about-refs__list li { font-size: var(--jp-fs-h4); font-weight: 650; letter-spacing: -.02em; color: var(--jp-text); }

/* ---------- Jak pracujemy ---------- */
.about-steps {
  display: grid; gap: var(--jp-gap); grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.about-step {
  position: relative; display: grid; gap: var(--jp-s-2); align-content: start;
  padding-block-start: var(--jp-s-5); border-block-start: 2px solid var(--jp-line);
}
.about-step > * { margin: 0; }
.about-step:first-child { border-block-start-color: var(--jp-brand-icon); }
.about-step__num { font-size: var(--jp-fs-xs); font-weight: 600; color: var(--jp-brand-text); }
.about-step__title { font-size: var(--jp-fs-h4); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.about-step p { font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
.about-forms {
  display: grid; gap: var(--jp-s-5); margin-block-start: clamp(40px, 2rem + 2vw, 72px);
  padding: clamp(20px, 1rem + 1.4vw, 36px); border-radius: var(--jp-r-xl);
  background: var(--jp-frost); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: inset 0 1px 0 var(--jp-glass-edge), var(--jp-glass-outline), var(--jp-shadow-2);
}
.about-forms > * { margin: 0; }
.about-forms__list { display: grid; gap: var(--jp-s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.about-forms__list div { display: grid; gap: 4px; align-content: start; }
.about-forms__list dt { font-size: var(--jp-fs-sm); font-weight: 600; color: var(--jp-text); }
.about-forms__list dd { margin: 0; font-size: var(--jp-fs-sm); color: var(--jp-text-1); }
@media (max-width: 1080px) {
  .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--jp-s-6); }
  .about-forms__list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-steps { grid-template-columns: 1fr; row-gap: var(--jp-s-5); }
}

/* ---------- Historia (grafika w całości, bez dekoracji — AGENTS.md) ---------- */
.about-history {
  display: grid; gap: clamp(24px, 3vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.about-history__frame {
  overflow: clip; border-radius: var(--jp-r-lg); background: var(--jp-surface);
  box-shadow: var(--jp-glass-outline), var(--jp-shadow-3);
}
.about-history__frame img { display: block; inline-size: 100%; block-size: auto; }
.about-history__copy { display: grid; gap: var(--jp-s-4); align-content: center; }
.about-history__copy > * { margin: 0; }
.about-history__copy p { color: var(--jp-text-1); max-inline-size: 46ch; }
.about-history__copy .jp-actions { margin-block-start: var(--jp-s-2); }
.about-product { margin-block-start: clamp(40px, 2rem + 2vw, 64px); max-inline-size: 960px; }
.about-product > summary { font-size: var(--jp-fs-body); }
.about-product__grid { display: grid; gap: var(--jp-s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-product__grid > div { display: grid; gap: var(--jp-s-2); align-content: start; }
.about-product__grid > div > * { margin: 0; }
@media (max-width: 1080px) {
  .about-history { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-product__grid { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.about-cta .jp-cta__option b { font-weight: 600; }