/* OSBW — layout z podstrona_osbw (sekcja_1, sekcja_2, diagram kort.png) */

.osbw-page {
  --osbw-bg: #f5f1e9;
  --osbw-ink: #14120f;
  --osbw-ink-soft: #3a3630;
  --osbw-gold: #b8973a;
  --osbw-gold-soft: rgba(184, 151, 58, 0.55);
  --osbw-max: var(--site-content-max);
  --osbw-card-own: #9c2b2e;
  --osbw-card-share: #1e4a32;
  --osbw-card-be: #1e3d7a;
  --osbw-card-with: #5c3d28;
  background: transparent;
  color: var(--osbw-ink);
}

.osbw-m-eyebrow {
  margin: 0 0 10px;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-h5-font-size);
  font-weight: var(--type-h5-font-weight);
  line-height: var(--type-h5-line-height);
  letter-spacing: var(--type-h5-letter-spacing);
  text-transform: var(--type-h5-text-transform);
  color: var(--gold-main);
}

/* —— Sekcja 1: Participation framework (sekcja_1.png) —— */
.osbw-m1 {
  background: var(--surface-cream-f);
}

.osbw-m1__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

.osbw-m1__logo {
  margin: 0 0 6px;
  font-family: var(--type-kicker-font-family);
  font-size: var(--type-kicker-font-size);
  font-weight: var(--type-kicker-font-weight);
  line-height: var(--type-kicker-line-height);
  letter-spacing: var(--type-kicker-letter-spacing);
  text-transform: var(--type-kicker-text-transform);
  color: var(--osbw-ink);
}

.osbw-m1__brand {
  margin: 0 0 0;
  font-family: var(--hero-h1-font-family);
  font-size: var(--hero-h1-font-size);
  font-weight: var(--hero-h1-font-weight);
  line-height: var(--hero-h1-line-height);
  letter-spacing: var(--hero-h1-letter-spacing);
  color: var(--osbw-ink);
}

.osbw-m1__tag {
  margin: clamp(14px, 2vh, 20px) 0 18px;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-h5-font-size);
  font-weight: var(--type-h5-font-weight);
  line-height: var(--type-h5-line-height);
  letter-spacing: var(--type-h5-letter-spacing);
  text-transform: var(--type-h5-text-transform);
  color: var(--osbw-ink-soft);
}

.osbw-m1__title {
  margin: 0 0 0;
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  font-weight: var(--type-h2-font-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  color: var(--osbw-ink);
}

.osbw-m1__body {
  margin: 0;
  max-width: 34rem;
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-font-weight);
  color: var(--osbw-ink-soft);
}

.osbw-m1__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(22px, 3vh, 32px);
}

.osbw-m1__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  min-height: 0;
}

.osbw-m1__card {
  border-radius: clamp(14px, 2vw, 20px);
  padding: clamp(22px, 3vw, 32px) clamp(18px, 2.4vw, 26px);
  color: #faf9f6;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 14px 36px rgba(20, 14, 6, 0.12);
}

.osbw-m1__card-title {
  margin: 0 0 12px;
  font-family: var(--type-h3-font-family);
  font-size: var(--type-h3-font-size);
  font-weight: var(--type-h3-font-weight);
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
}

.osbw-m1__card-kicker {
  margin: 0 0 14px;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-h5-font-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-h5-letter-spacing);
  text-transform: var(--type-h5-text-transform);
  color: rgba(255, 255, 255, 0.82);
}

.osbw-m1__card-rule {
  display: block;
  width: 100%;
  max-width: 8rem;
  height: 1px;
  margin: 0 0 14px;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
}

.osbw-m1__card-body {
  margin: 0;
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-sm-font-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--type-body-font-weight);
  color: rgba(255, 250, 244, 0.92);
}

.osbw-m1__card--own {
  background: var(--osbw-card-own);
}

.osbw-m1__card--share {
  background: var(--osbw-card-share);
}

.osbw-m1__card--be {
  background: var(--osbw-card-be);
}

.osbw-m1__card--with {
  background: var(--osbw-card-with);
}

/* —— Sekcja 2: Court process (górna część sekcja_2.png) —— */
.osbw-m2 {
  background: var(--surface-cream-b);
  border-top: 1px solid rgba(62, 49, 23, 0.08);
}

.osbw-m2__top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.osbw-m2__title {
  margin: 0 0 0;
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  font-weight: var(--type-h2-font-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  color: var(--osbw-ink);
}

.osbw-m2__lead {
  margin: 0;
  max-width: 32rem;
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-font-weight);
  color: var(--osbw-ink-soft);
}

.osbw-m2__steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(6px, 1vw, 12px);
  padding-top: 8px;
}

.osbw-m2__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.osbw-m2__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: 36px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--osbw-gold);
  opacity: 0.85;
}

.osbw-m2__icon-ring {
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 50%;
  border: 1px solid var(--osbw-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--osbw-gold);
  flex-shrink: 0;
}

.osbw-m2__icon-ring svg {
  width: 28px;
  height: 28px;
}

.osbw-m2__step-label {
  margin: 0 0 8px;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-h5-font-weight);
  letter-spacing: var(--type-h5-letter-spacing);
  text-transform: none;
  color: var(--osbw-ink);
}

.osbw-m2__step-text {
  margin: 0;
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-sm-font-size);
  line-height: var(--type-body-sm-line-height);
  font-weight: var(--type-body-font-weight);
  color: var(--osbw-ink-soft);
  max-width: min(19rem, 100%);
}

.osbw-m2__flow {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.osbw-m2__bridge {
  margin-top: clamp(22px, 3.2vw, 40px);
  padding-top: clamp(8px, 1.2vw, 14px);
  text-align: center;
}

.osbw-m2__bridge-hair {
  width: min(200px, 46vw);
  height: var(--ui-gold-hairline-h);
  margin: 0 auto clamp(14px, 2vw, 20px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ui-gold-hairline-soft) 22%,
    var(--ui-gold-hairline-bg) 50%,
    var(--ui-gold-hairline-soft) 78%,
    transparent 100%
  );
  border-radius: 999px;
  opacity: 0.95;
}

.osbw-m2__bridge-text {
  margin: 0 auto;
  max-width: min(42rem, 100%);
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-sm-font-size);
  line-height: calc(var(--type-body-sm-line-height) * 1.08);
  font-weight: var(--type-body-font-weight);
  letter-spacing: 0.01em;
  color: var(--osbw-ink-soft);
}

.osbw-m2__bridge-term {
  font-weight: 600;
  color: var(--osbw-gold);
}

/* —— Sekcja 3: Defined space + diagram (dolna część sekcja_2.png, diagram kort.png) —— */
.osbw-m3 {
  --page-section-pad-top: var(--section-pad-y-compact);
  --page-section-pad-bottom: var(--section-pad-y-large);
  background: var(--surface-cream-a);
  border-top: 1px solid rgba(184, 151, 58, 0.22);
}

.osbw-m3__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.osbw-m3__title {
  margin: 0 0 0;
  font-family: var(--type-h2-font-family);
  font-size: var(--type-h2-font-size);
  font-weight: var(--type-h2-font-weight);
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  color: var(--osbw-ink);
}

.osbw-m3__body {
  margin: 0 0 14px;
  max-width: 34rem;
  font-family: var(--type-body-font-family);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-font-weight);
  color: var(--osbw-ink-soft);
}

.osbw-m3__body:last-of-type {
  margin-bottom: 0;
}

.osbw-m3__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(20px, 2.8vh, 28px);
}

.osbw-m3__figure {
  margin: 0;
  padding: 0;
  border-radius: clamp(4px, 0.6vw, 8px);
  overflow: hidden;
  border: 1px solid rgba(184, 151, 58, 0.45);
  box-shadow: 0 12px 40px rgba(20, 14, 6, 0.08);
  background: var(--osbw-bg);
}

.osbw-m3__figure img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

@media (max-width: 960px) {
  .osbw-m1__grid,
  .osbw-m2__top,
  .osbw-m3__grid {
    grid-template-columns: 1fr;
  }

  .osbw-m2__steps {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;
  }

  .osbw-m2__arrow {
    display: none;
  }

  .osbw-m2__step {
    flex: 1 1 calc(50% - 12px);
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .osbw-m1 {
    --page-section-pad-top: 50px;
  }
}

@media (max-width: 520px) {
  .osbw-m1__cards {
    grid-template-columns: 1fr;
  }

  .osbw-m2__step {
    flex: 1 1 100%;
    max-width: none;
  }
}