/* =====================================================================
   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: linear-gradient(150deg, #13454A, var(--jp-deep) 70%); 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); }
}

/* ---------- Obszary: osoby pracujące w obszarze ---------- */
.about-area__team { display: flex; align-items: center; margin-block-start: var(--jp-s-2); }
.about-area__avatars { display: flex; }
.about-area__avatar {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%;
  background: linear-gradient(150deg, var(--jp-deep), #13454A); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--jp-surface);
}
.about-area__avatar + .about-area__avatar { margin-inline-start: -4px; }

/* ---------- Zespół ----------
   Karta: nagłówek, biogram, kompetencje i powiązane usługi. Bez grup z nagłówkami (decyzja Sary 2.10.2026).
   Bez kwadratów z inicjałami (2.11.2026: wyglądały szablonowo). Gdy będą zdjęcia, wstawić na początku karty
   <span class="about-person__portrait"><img …></span>: układ z portretem po lewej włącza się sam (:has). */
.about-people { display: grid; gap: var(--jp-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.about-person {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head" "body"; column-gap: clamp(20px, 1rem + 1vw, 32px); row-gap: var(--jp-s-4);
  padding: clamp(20px, 1rem + 1.2vw, 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);
  scroll-margin-block-start: calc(var(--jp-nav-total) + 24px);
}
.about-person:has(> .about-person__portrait) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "portrait head" "portrait body"; }
.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__portrait {
  grid-area: portrait; position: relative; overflow: clip; display: grid; place-items: center; align-self: start;
  inline-size: clamp(96px, 5rem + 2.4vw, 128px); aspect-ratio: 4 / 5; border-radius: var(--jp-r-lg);
  background: radial-gradient(120% 90% at 85% 100%, rgb(111 212 207 / 34%), transparent 60%), linear-gradient(160deg, #13454A, var(--jp-deep) 70%);
  color: #fff; font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: 650; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), var(--jp-shadow-1);
}
.about-person__portrait img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.about-person__head { grid-area: head; display: flex; align-items: flex-start; gap: var(--jp-s-4); }
.about-person__id { display: grid; gap: 4px; min-inline-size: 0; flex: 1; position: relative; padding-inline-start: 16px; }
/* Turkusowy pasek przy imieniu i roli: bez zdjęć odróżnia osoby przy przewijaniu (2.11.2026). */
.about-person__id::before { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--jp-brand-icon); }
@media (forced-colors: active) { .about-person__id::before { background: CanvasText; } }
.about-person__id > * { margin: 0; }
.about-person__name { font-size: var(--jp-fs-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.about-person__role { font-size: var(--jp-fs-sm); font-weight: 500; 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__body { grid-area: body; display: flex; flex-direction: column; gap: var(--jp-s-3); min-inline-size: 0; }
.about-person__body > * { margin: 0; }
.about-person__focus { font-size: var(--jp-fs-body); 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); }
/* Kompetencje zwykłym tekstem, bez pigułek (2.11.2026: wyglądały szablonowo); dwie kolumny jak spokojna lista. */
.about-person__skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--jp-s-4); margin: 0; padding: 0; list-style: none;
  font-size: var(--jp-fs-sm); line-height: 1.45; color: var(--jp-text-1); }
.about-person__body .about-person__skills + .about-person__label { margin-block-start: auto; }
@media (max-width: 720px) { .about-person__skills { grid-template-columns: 1fr; } }
.about-person__links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.about-person__links .jp-link-more { display: inline-flex; align-items: center; min-block-size: 32px; font-size: var(--jp-fs-sm); }
@media (max-width: 1080px) {
  .about-people { grid-template-columns: 1fr; max-inline-size: 760px; }
}
@media (max-width: 720px) {
  .about-person:has(> .about-person__portrait) { grid-template-areas: "portrait head" "body body"; align-items: center; }
  .about-person__portrait { inline-size: 72px; aspect-ratio: 1; border-radius: var(--jp-r-md); font-size: 1.25rem; }
  .about-person__name { font-size: var(--jp-fs-h4); }
}

/* Doświadczenie zespołu w agro (marki tekstem, bez obcych grafik; brief s. 4 pkt 7) */
.about-refs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jp-s-4) var(--jp-s-7);
  margin-block-start: clamp(32px, 1.5rem + 2vw, 56px); padding: clamp(20px, 1rem + 1vw, 32px) clamp(20px, 1rem + 1.4vw, 40px);
  border-radius: var(--jp-r-xl); background: rgb(255 255 255 / 55%); border: 1px solid rgb(255 255 255 / 80%);
  box-shadow: var(--jp-glass-outline);
}
.about-refs__title { margin: 0; max-inline-size: 26ch; font-size: var(--jp-fs-body); font-weight: 600; line-height: 1.4; color: var(--jp-text); }
.about-refs__list { display: flex; flex-wrap: wrap; gap: var(--jp-s-3) 0; margin: 0; padding: 0; list-style: none; }
.about-refs__list li { padding-inline: clamp(16px, 1rem + 1vw, 36px); font-size: var(--jp-fs-h3); font-weight: 650; letter-spacing: -.02em; color: var(--jp-text); }
.about-refs__list li + li { border-inline-start: 1px solid var(--jp-line); }
@media (max-width: 720px) {
  .about-refs__list li:first-child { padding-inline-start: 0; }
}

/* ---------- 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; }