/* ===== Kreator stron — bloki (prefiks b- żeby nie kolidować z istniejącymi klasami stron) ===== */

.b-section { padding: 4.5rem 0; }
.b-container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }

.b-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.9rem; border-radius: var(--r-sm);
  font-weight: 700; font-size: .95rem; transition: all var(--t);
}
.b-btn--primary { background: var(--brand-primary); color: #fff; }
.b-btn--primary:hover { background: var(--brand-primary-dark); }
.b-btn--yellow { background: var(--brand-yellow); color: var(--text-main); }
.b-btn--yellow:hover { background: var(--brand-yellow-dark); }
.b-btn--red { background: var(--brand-red); color: #fff; }
.b-btn--red:hover { background: var(--brand-red-dark); }

/* Hero */
.b-hero {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  color: #fff; border-radius: var(--r-xl); padding: 4rem 3rem; margin: 2rem auto; max-width: var(--max-w);
}
.b-hero__badge {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-yellow); margin-bottom: 1.25rem;
}
.b-hero__title { font-family: var(--font-heading); font-size: 2.6rem; line-height: 1.15; margin-bottom: 1rem; }
.b-hero__sub { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 560px; margin-bottom: 1.75rem; }

/* Benefity — siatka */
.b-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.b-benefit-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem; text-align: center;
}
.b-benefit-card__icon { font-size: 2.3rem; margin-bottom: .75rem; }
.b-benefit-card__title { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; color: var(--text-main); }
.b-benefit-card__desc { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

/* Kroki */
.b-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.b-step-card {
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 2rem 1.5rem; position: relative;
}
.b-step-card__num {
  font-family: var(--font-heading); font-size: 2.2rem; color: var(--brand-primary-light);
  -webkit-text-stroke: 2px var(--brand-primary); margin-bottom: .5rem;
}
.b-step-card__icon { font-size: 2.2rem; margin-bottom: .75rem; }
.b-step-card__title { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: .5rem; color: var(--text-main); }
.b-step-card__desc { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* CTA */
.b-cta {
  text-align: center; max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem;
}
.b-cta__label {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-primary); background: var(--brand-primary-light); padding: .35rem .9rem; border-radius: var(--r-full);
  margin-bottom: 1rem;
}
.b-cta__title { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 1rem; color: var(--text-main); }

/* Statystyki */
.b-stats { display: flex; justify-content: center; gap: 3rem; max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem; flex-wrap: wrap; }
.b-stat { text-align: center; }
.b-stat__num { font-family: var(--font-heading); font-size: 2.4rem; color: var(--brand-primary); }
.b-stat__label { font-size: .85rem; color: var(--text-muted); margin-top: .25rem; }

/* Tekst */
.b-text { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem; }
.b-text__title { font-family: var(--font-heading); font-size: 1.6rem; margin-bottom: .75rem; color: var(--text-main); }
.b-text__body { font-size: 1rem; color: var(--text-muted); line-height: 1.7; }

/* Dwie kolumny: zdjęcie + tekst */
.b-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.b-two-col img { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 4/3; }
.b-two-col__title { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: .75rem; color: var(--text-main); }
.b-two-col__body { font-size: .95rem; color: var(--text-muted); line-height: 1.7; }

/* Wideo YouTube — kontener 16:9 */
.b-video { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.b-video__frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--r-lg); overflow: hidden; background: #0a0a0a;
}
.b-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-video__empty {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: rgba(255,255,255,.5); font-size: .85rem; text-align: center; padding: 1rem;
}

/* Odstępy — presety (Style Manager "Odstępy") */
.b-pad-compact { padding-top: 2rem; padding-bottom: 2rem; }
.b-pad-normal  { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.b-pad-spacious{ padding-top: 7rem; padding-bottom: 7rem; }

@media (max-width: 768px) {
  .b-benefits, .b-steps { grid-template-columns: 1fr; }
  .b-two-col { grid-template-columns: 1fr; }
  .b-hero { padding: 2.5rem 1.5rem; border-radius: var(--r-lg); }
  .b-hero__title { font-size: 1.9rem; }
}

/* Dynamiczny placeholder — sekcja Zespół (tylko strona O nas) */
.onas-trainers-placeholder {
  padding: 3rem 1.5rem; text-align: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);
  border: 2px dashed #94a3b8; border-radius: 12px; color: #475569; font-weight: 700;
}

/* Dynamiczny placeholder — sekcja Wybierz swoj program (tylko strona Home) */
.home-products-placeholder {
  padding: 3rem 1.5rem; text-align: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px);
  border: 2px dashed #94a3b8; border-radius: 12px; color: #475569; font-weight: 700;
}

/* ============================================================
   Nakładka na tło — animowany gradient (sterowany z sidebara
   „Nakładka na tło" → „Animowany gradient"). Klatki i klasa
   pomocnicza żyją TU, bo builder-blocks.css jest wczytywany i w
   canvasie kreatora, i na stronie publicznej — więc inline
   `background-image` / `animation-duration` zapisane przez
   kreator w builder_css działają w obu miejscach.
   Zastępuje docelowo makietowe .hero__gradient-bg (prokid-flow /
   prospace-flow) — patrz prokid.css / prospace.css.
   ============================================================ */
@keyframes b-overlay-flow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}
.bg-overlay--anim {
  background-size: 400% 400%;
  animation: b-overlay-flow 24s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bg-overlay--anim { animation: none; }
}