/* ===================================================================
   o-projekcie.css - style uzywane wylacznie na stronie o-projekcie.html
   Wspolne style (nawigacja, przyciski, karty, typografia) w styles.css.
   =================================================================== */

.card--accent-tint {
  background: rgb(var(--accent) / .04);
  border-color: rgb(var(--accent) / .25);
}
.stat-num--lg {
  font-size: 34px;
  letter-spacing: -.03em;
  min-height: 42px;
}
.p-body--inkStrong {
  color: rgb(var(--ink) / .66);
}
.mono-note-dark-tight {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  color: rgb(var(--white) / .45);
  margin-top: 6px;
  line-height: 1.6;
}
.wr-opr-01 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(52px,7vw,84px) clamp(20px,4vw,32px) 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: clamp(32px,5vw,56px);
  align-items: end;
}
.wr-opr-02 {
  margin: 0 0 20px;
  font-size: clamp(36px,4.8vw,60px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.wr-opr-03 {
  max-width: 36em;
}
.wr-opr-04 {
  display: grid;
  gap: 12px;
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  color: rgb(var(--white) / .7);
}
.wr-opr-05 {
  margin: 0 0 12px;
}
.wr-opr-06 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap: clamp(28px,4vw,48px);
  margin-top: 36px;
}
.wr-opr-07 {
  margin: 0 0 14px;
}
.wr-opr-08 {
  margin: 0;
}
.wr-opr-09 {
  display: grid;
  gap: 12px;
  align-content: start;
}
.wr-opr-11 {
  margin: 0 0 44px;
}
.wr-opr-12 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: 18px;
}
.wr-opr-15 {
  padding: 28px;
  border: 1px dashed rgb(var(--ink) / .2);
  border-radius: 18px;
}
.wr-opr-16 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  color: rgb(var(--ink) / .4);
  margin-bottom: 14px;
}
.wr-opr-17 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -.02em;
  color: rgb(var(--ink) / .7);
}
.wr-opr-18 {
  font-size: 16px;
  line-height: 1.55;
  color: rgb(var(--ink) / .5);
}
.wr-opr-19 {
  margin: 28px 0 0;
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  line-height: 1.8;
  color: rgb(var(--ink) / .45);
  max-width: 48em;
}
/* Sekcja "Model biznesowy" (.wr-opr-biz) ma czerwone tlo (.on-accent) -
   .wr-opr-19/.wr-opr-12 sa tez uzywane w sekcji "Etap prac" wyzej, wiec
   scoped override tylko tutaj, zamiast zmieniac wspolne reguly. */
.wr-opr-biz .wr-opr-19 {
  color: rgb(var(--white) / .75);
}
/* .eyebrow-light (rozowy akcent) ma slaby kontrast na czerwonym tle
   (2.1:1 - projektowany pod ciemne .on-dark sekcje, nie pod czerwone
   .on-accent) - tu pelna biel czyta sie wyraznie lepiej. */
.wr-opr-biz .eyebrow-light {
  color: var(--color-white);
}
/* .card-title (bez wlasnego koloru) dziedziczy biale .on-accent z tej
   sekcji, mimo ze siedzi w bialych kartach B2C/B2B - bez tego byloby
   niewidoczne (bialy tekst na bialym tle). */
.wr-opr-biz .card-title {
  color: var(--color-ink);
}
.wr-opr-biz .wr-opr-12 {
  margin-top: 44px;
}
.wr-opr-21 {
  margin: 0;
  max-width: 34em;
}
.wr-opr-22 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap: 18px;
}
.wr-opr-23 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  min-height: 42px;
  color: var(--color-accent-light);
}
.wr-opr-24 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px,8vw,88px) clamp(20px,4vw,32px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.wr-opr-25 {
  margin: 0;
  max-width: 34em;
}